Zen Settings

Japanese minimalism settings page with serene aesthetic and generous breathing room

Profile

• Display Name: how others see you
• Email Address: for notifications

Notifications

• Push Notifications: receive alerts on your device
• Email Digest: weekly summary of activity
• Sound Effects: audio feedback

Appearance

• Dark Mode: reduce brightness in low light
• Reduced Motion: minimize animations

Data

• Auto-save: automatically save changes
• Save Changes: save changes

Gallery

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

Example React Component Structure

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

: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