Zen Settings

# Zen Settings Page

Create a serene, minimalist settings page inspired by Japanese design principles with generous whitespace, muted colors, and calming interactions.

## Design Specifications

**Style**: Japanese Minimalism / Zen UI
**Typography**: Light weight, lowercase preference
**Layout**: Single column, generous spacing
**Colors**: Warm off-whites, stone grays, subtle earth tones

## Prompt for AI Code Generation

```
Build a zen settings page with these characteristics:

LAYOUT:
- Single column, narrow max-width (480-560px)
- Generous vertical spacing between groups (32-48px)
- Ample padding within elements (16-24px)
- Settings grouped by category

TYPOGRAPHY:
- Headers: 14px, lowercase, stone-400 color
- Labels: 14-16px, regular weight
- Values: 14px, muted color
- No bold text - everything is light/regular

COLORS:
- Background: #faf9f7 (warm off-white)
- Surface: transparent or very subtle
- Text: stone-700 for primary, stone-400 for secondary
- Borders: stone-200 (very subtle)
- Accent: stone-600 (for toggles, focus states)

ZEN ELEMENTS:
- Thin hairline borders (1px)
- Rounded toggles with soft transitions
- Input fields with only bottom border
- Minimal visual noise

INTERACTIONS:
- Slow, smooth transitions (300ms)
- Subtle focus rings
- Toggles with gentle sliding animation
- Hover states barely perceptible

SECTIONS TO INCLUDE:
1. Page header with title and subtitle
2. Profile settings (name, email)
3. Notification preferences (toggles)
4. Appearance settings (theme toggle)
5. Data preferences (toggles)
6. Save button (minimal styling)
7. Calm footer message

TECHNICAL:
- Custom toggle component with CSS
- Minimal form styling
- Focus-visible for accessibility
- No shadows or heavy effects
```

## Example React Component Structure

```tsx
function Toggle({ checked, onChange }) {
  return (
    <button
      onClick={() => onChange(!checked)}
      className={`relative h-6 w-12 rounded-full transition-colors duration-300 ${
        checked ? 'bg-stone-600' : 'bg-stone-200'
      }`}
    >
      <span
        className={`absolute top-1 h-4 w-4 rounded-full bg-white transition-all duration-300 ${
          checked ? 'left-7' : 'left-1'
        }`}
      />
    </button>
  );
}

export default function ZenSettings() {
  return (
    <div className="min-h-screen w-full bg-[#faf9f7]">
      <div className="mx-auto max-w-xl px-6 py-16">
        {/* Header */}
        <div className="mb-16">
          <h1 className="mb-2 text-2xl font-light text-stone-700">settings</h1>
          <p className="text-stone-400">configure your experience</p>
        </div>

        {/* Profile */}
        <section className="mb-12">
          <h2 className="mb-6 text-xs tracking-widest text-stone-400 uppercase">profile</h2>
          <div className="space-y-6">
            <div>
              <label className="mb-2 block text-sm text-stone-500">display name</label>
              <input
                className="w-full border-b border-stone-200 bg-transparent py-2 text-stone-700 transition-colors focus:border-stone-400 focus:outline-none"
                defaultValue="nameless wanderer"
              />
            </div>
          </div>
        </section>

        {/* Notifications */}
        <section className="mb-12">
          <h2 className="mb-6 text-xs tracking-widest text-stone-400 uppercase">notifications</h2>
          <div className="space-y-4">
            <div className="flex items-center justify-between border-b border-stone-100 py-3">
              <span className="text-stone-600">email notifications</span>
              <Toggle checked={true} onChange={() => {}} />
            </div>
          </div>
        </section>

        {/* Save */}
        <button className="w-full border border-stone-200 py-3 text-stone-600 transition-colors duration-300 hover:border-stone-400">
          save changes
        </button>

        <p className="mt-16 text-center text-sm text-stone-400">
          may your settings bring you peace
        </p>
      </div>
    </div>
  );
}
```

## CSS Variables

```css
:root {
  --color-bg: #faf9f7;
  --color-text: #57534e;
  --color-text-muted: #a8a29e;
  --color-border: #e7e5e4;
  --color-accent: #57534e;
  --transition: 300ms ease;
  --border-radius: 9999px;
}

input:focus {
  outline: none;
  border-color: var(--color-text);
}

button {
  transition: all var(--transition);
}
```

## Key Principles

1. **Ma (negative space)**: Embrace emptiness between elements
2. **Wabi-sabi**: Imperfect, understated beauty
3. **Restraint**: Remove everything non-essential
4. **Calm transitions**: Slow, purposeful animations
5. **Lowercase preference**: Softer visual rhythm