Themes

Themes let you customize the look and feel of your site with a single attribute. Choose from color themes that change the palette, or personality themes that transform the entire design.

Using Themes

Apply a theme by adding the data-theme attribute to the <html> element.

Theme Categories

Vanilla Breeze includes three types of themes:

Color Accents

Change the color palette via ThemeManager.setAccent(). Shape, shadows, and typography remain default.

Ocean
Forest
Sunset

Personality Themes

Transform colors, shape, shadows, typography, and motion for distinct design feels.

Modern
Minimal
Classic

Extreme Themes

Dramatic visual transformations for creative projects and artistic expression.

Brutalist, Swiss, Cyber, Organic
Editorial, Terminal, Kawaii, 8-bit
NES, Win9x

Color Accents

Color accents override hue values to change the brand palette. They preserve the default shape, shadows, and typography. Unlike personality themes which use data-theme, accents are applied programmatically via ThemeManager.setAccent().

<h3 id="ocean">Ocean</h3>
  <p>A calm, professional teal-blue palette.</p>

<div class="example" style="--hue-primary: 200; --hue-secondary: 180; --hue-accent: 45; --lightness-primary: 50%; --chroma-primary: 0.15; --lightness-secondary: 45%; --chroma-secondary: 0.10; --lightness-accent: 70%; --chroma-accent: 0.15; padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <layout-cluster data-layout-gap="m">
        <span style="display: inline-block; padding: var(--size-s) var(--size-m); background: var(--color-primary); color: white; border-radius: var(--radius-m);">Primary (Hue 200)</span>
        <span style="display: inline-block; padding: var(--size-s) var(--size-m); background: var(--color-secondary); color: white; border-radius: var(--radius-m);">Secondary (Hue 180)</span>
        <span style="display: inline-block; padding: var(--size-s) var(--size-m); background: var(--color-accent); border-radius: var(--radius-m);">Accent (Hue 45)</span>
      </layout-cluster>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary Button</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<table class="props-table">
    <thead>
      <tr>
        <th>Property</th>
        <th>Value</th>
        <th>Color</th>
      </tr>
    </thead>
    <tbody>
      <tr><td><code>--hue-primary</code></td><td>200</td><td>Teal-blue</td></tr>
      <tr><td><code>--hue-secondary</code></td><td>180</td><td>Cyan</td></tr>
      <tr><td><code>--hue-accent</code></td><td>45</td><td>Gold</td></tr>
    </tbody>
  </table>

<h3 id="forest">Forest</h3>
  <p>Natural, earthy green palette.</p>

<div class="example" data-theme="forest" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <layout-cluster data-layout-gap="m">
        <span style="display: inline-block; padding: var(--size-s) var(--size-m); background: var(--color-primary); color: white; border-radius: var(--radius-m);">Primary (Hue 145)</span>
        <span style="display: inline-block; padding: var(--size-s) var(--size-m); background: var(--color-secondary); color: white; border-radius: var(--radius-m);">Secondary (Hue 120)</span>
        <span style="display: inline-block; padding: var(--size-s) var(--size-m); background: var(--color-accent); border-radius: var(--radius-m);">Accent (Hue 30)</span>
      </layout-cluster>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary Button</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<table class="props-table">
    <thead>
      <tr>
        <th>Property</th>
        <th>Value</th>
        <th>Color</th>
      </tr>
    </thead>
    <tbody>
      <tr><td><code>--hue-primary</code></td><td>145</td><td>Green</td></tr>
      <tr><td><code>--hue-secondary</code></td><td>120</td><td>Forest green</td></tr>
      <tr><td><code>--hue-accent</code></td><td>30</td><td>Orange/amber</td></tr>
    </tbody>
  </table>

<h3 id="sunset">Sunset</h3>
  <p>Warm, vibrant orange-red palette.</p>

<div class="example" data-theme="sunset" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <layout-cluster data-layout-gap="m">
        <span style="display: inline-block; padding: var(--size-s) var(--size-m); background: var(--color-primary); color: white; border-radius: var(--radius-m);">Primary (Hue 25)</span>
        <span style="display: inline-block; padding: var(--size-s) var(--size-m); background: var(--color-secondary); color: white; border-radius: var(--radius-m);">Secondary (Hue 350)</span>
        <span style="display: inline-block; padding: var(--size-s) var(--size-m); background: var(--color-accent); border-radius: var(--radius-m);">Accent (Hue 50)</span>
      </layout-cluster>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary Button</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<table class="props-table">
    <thead>
      <tr>
        <th>Property</th>
        <th>Value</th>
        <th>Color</th>
      </tr>
    </thead>
    <tbody>
      <tr><td><code>--hue-primary</code></td><td>25</td><td>Orange-red</td></tr>
      <tr><td><code>--hue-secondary</code></td><td>350</td><td>Pink-red</td></tr>
      <tr><td><code>--hue-accent</code></td><td>50</td><td>Yellow</td></tr>
    </tbody>
  </table>
</section>

<section id="personality-themes">
  <h2>Personality Themes</h2>
  <p>Personality themes transform the entire design system, overriding colors, border radius, shadows, typography, and motion.</p>

<h3 id="modern">Modern</h3>
  <p>Clean, sharp aesthetic with subtle shadows and fast animations.</p>

<div class="example" data-theme="modern" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <layout-card>
        <layout-stack data-layout-gap="s">
          <h4 style="margin: 0;">Modern Card</h4>
          <p style="margin: 0; color: var(--color-text-muted);">Sharp corners, subtle shadows, fast transitions.</p>
          <layout-cluster data-layout-gap="s">
            <button type="button">Action</button>
            <button type="button" class="secondary">Cancel</button>
          </layout-cluster>
        </layout-stack>
      </layout-card>
    </layout-stack>
  </div>

<p><strong>Characteristics:</strong></p>
  <ul>
    <li>Smaller border radius for sharp, clean edges</li>
    <li>Subtle, diffuse shadows</li>
    <li>Fast transitions (150ms)</li>
    <li>Modern system fonts</li>
  </ul>

<h3 id="minimal">Minimal</h3>
  <p>Stripped-down aesthetic focusing on content and whitespace.</p>

<div class="example" data-theme="minimal" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <layout-card>
        <layout-stack data-layout-gap="s">
          <h4 style="margin: 0;">Minimal Card</h4>
          <p style="margin: 0; color: var(--color-text-muted);">No shadows, subtle borders, generous spacing.</p>
          <layout-cluster data-layout-gap="s">
            <button type="button">Action</button>
            <button type="button" class="secondary">Cancel</button>
          </layout-cluster>
        </layout-stack>
      </layout-card>
    </layout-stack>
  </div>

<p><strong>Characteristics:</strong></p>
  <ul>
    <li>No shadows (replaced with subtle borders)</li>
    <li>Very small border radius</li>
    <li>Muted color palette</li>
    <li>Focus on typography and whitespace</li>
  </ul>

<h3 id="classic">Classic</h3>
  <p>Traditional, refined aesthetic with generous curves and deeper shadows.</p>

<div class="example" data-theme="classic" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <layout-card>
        <layout-stack data-layout-gap="s">
          <h4 style="margin: 0;">Classic Card</h4>
          <p style="margin: 0; color: var(--color-text-muted);">Rounded corners, pronounced shadows, elegant feel.</p>
          <layout-cluster data-layout-gap="s">
            <button type="button">Action</button>
            <button type="button" class="secondary">Cancel</button>
          </layout-cluster>
        </layout-stack>
      </layout-card>
    </layout-stack>
  </div>

<p><strong>Characteristics:</strong></p>
  <ul>
    <li>Larger border radius for softer edges</li>
    <li>Deeper, more pronounced shadows</li>
    <li>Slower, more deliberate transitions</li>
    <li>Serif font option for headings</li>
  </ul>
</section>

<section id="extreme-themes">
  <h2>Extreme Themes</h2>
  <p>Extreme themes dramatically transform the entire look and feel. Use these for creative projects, branding, or artistic expression.</p>

<h3 id="brutalist">Brutalist</h3>
  <p>Raw, bold, honest design with harsh shadows and monospace typography.</p>

<div class="example" data-theme="brutalist" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: 0;">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; background: oklch(0% 0 0); color: oklch(100% 0 0); padding: 0.5rem 1rem; display: inline-block;">BRUTALIST</h4>
      <p style="margin: 0; font-family: monospace;">Raw, exposed structure. No decoration.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="swiss">Swiss</h3>
  <p>Clean, precise, grid-based design inspired by Swiss typography.</p>

<div class="example" data-theme="swiss" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; text-transform: uppercase; letter-spacing: 0.05em;">SWISS STYLE</h4>
      <p style="margin: 0;">Precision. Grid. Typography.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="cyber">Cyber</h3>
  <p>Dark, neon cyberpunk aesthetic with glowing effects.</p>

<div class="example" data-theme="cyber" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-m);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.1em;"// CYBER/h4>
      <p style="margin: 0; color: var(--color-text);">Neon lights in the digital night.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="organic">Organic</h3>
  <p>Warm, flowing design with earthy colors and organic shapes.</p>

<div class="example" data-theme="organic" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; font-family: Georgia, serif;">Organic Nature</h4>
      <p style="margin: 0; color: var(--color-text);">Warm, flowing, handcrafted feel.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="editorial">Editorial</h3>
  <p>Elegant magazine aesthetic with refined typography.</p>

<div class="example" data-theme="editorial" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; font-family: Georgia, serif; font-style: italic; border-bottom: 2px solid currentColor; padding-bottom: 0.5rem;">Editorial</h4>
      <p style="margin: 0; font-family: Georgia, serif;">Classic magazine typography.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="terminal">Terminal</h3>
  <p>Green-on-black CRT terminal aesthetic.</p>

<div class="example" data-theme="terminal" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">root@system:~# TERMINAL</h4>
      <p style="margin: 0; color: var(--color-text);">> Retro computing aesthetics.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">[ Execute ]</button>
        <button type="button" class="secondary">[ Cancel ]</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="kawaii">Kawaii</h3>
  <p>Japanese cute aesthetic with pastels and playful animations.</p>

<div class="example" data-theme="kawaii" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-xl);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-primary);">Kawaii</h4>
      <p style="margin: 0; color: var(--color-text);">Playful, cute, colorful design.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="8bit">8-bit</h3>
  <p>Retro pixel art gaming aesthetic.</p>

<div class="example" data-theme="8bit" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text); text-transform: uppercase;">8-BIT</h4>
      <p style="margin: 0; color: var(--color-text);">> PRESS START TO CONTINUE</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="nes">NES</h3>
  <p>Console-inspired pixel borders with authentic NES.css aesthetic.</p>

<div class="example" data-theme="nes" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text); text-transform: uppercase;">NES</h4>
      <p style="margin: 0; color: var(--color-text);">Pixel-perfect retro gaming interface.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="win9x">Win9x</h3>
  <p>Classic Windows 95/98 desktop aesthetic with beveled 3D borders.</p>

<div class="example" data-theme="win9x" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Win9x</h4>
      <p style="margin: 0; color: var(--color-text);">Classic desktop computing interface.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="gruvbox">Gruvbox</h3>
  <p>Earthy retro warmth with warm grays and red/green/yellow/aqua accents.</p>

<div class="example" data-theme="gruvbox" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Gruvbox</h4>
      <p style="margin: 0; color: var(--color-text);">Retro groove with earthy warmth.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="tokyo-night">Tokyo Night</h3>
  <p>Deep indigo night-owl aesthetic with muted blue-purple and selective bright accents.</p>

<div class="example" data-theme="tokyo-night" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Tokyo Night</h4>
      <p style="margin: 0; color: var(--color-text);">Night-owl vibes, deep indigo surfaces.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="rose-pine">Rosé Pine</h3>
  <p>Muted rose, pine, and gold on restrained surfaces. Elegant and expensive-feeling.</p>

<div class="example" data-theme="rose-pine" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Rosé Pine</h4>
      <p style="margin: 0; color: var(--color-text);">Muted elegance, restrained palette.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="vaporwave">Vaporwave</h3>
  <p>Hot pink and cyan on deep purple with neon glow shadows. Retro-dreamy synthwave.</p>

<div class="example" data-theme="vaporwave" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Vaporwave</h4>
      <p style="margin: 0; color: var(--color-text);">Neon dreamy, retro-futurism.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="neumorphism">Neumorphism</h3>
  <p>Soft embossed surfaces with double shadows. Monochromatic, tactile UI.</p>

<div class="example" data-theme="neumorphism" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Neumorphism</h4>
      <p style="margin: 0; color: var(--color-text);">Soft, embossed, squishy surfaces.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="catppuccin-latte">Catppuccin Latte</h3>
  <p>Warm pastels on light cream. The daytime Catppuccin flavor.</p>
  <div class="example" data-theme="catppuccin-latte" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Catppuccin Latte</h4>
      <p style="margin: 0; color: var(--color-text);">Cozy pastels in the morning light.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="catppuccin-frappe">Catppuccin Frappé</h3>
  <p>Muted pastels on cool mid-dark blue. The twilight Catppuccin flavor.</p>
  <div class="example" data-theme="catppuccin-frappe" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Catppuccin Frappé</h4>
      <p style="margin: 0; color: var(--color-text);">Cool twilight pastels, mid-dark surfaces.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="catppuccin-macchiato">Catppuccin Macchiato</h3>
  <p>Rich pastels on deep blue. The darkest Catppuccin flavor.</p>
  <div class="example" data-theme="catppuccin-macchiato" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Catppuccin Macchiato</h4>
      <p style="margin: 0; color: var(--color-text);">Deep blue Catppuccin, rich pastel accents.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="bauhaus">Bauhaus</h3>
  <p>Geometric precision with primary Bauhaus triad. Zero shadows, binary radius, functional beauty.</p>
  <div class="example" data-theme="bauhaus" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Bauhaus</h4>
      <p style="margin: 0; color: var(--color-text);">Form follows function. Red, blue, yellow.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="memphis">Memphis</h3>
  <p>1980s Memphis Design — bold offset shadows, confetti headings, intentionally chaotic.</p>
  <div class="example" data-theme="memphis" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Memphis</h4>
      <p style="margin: 0; color: var(--color-text);">Bold, playful, intentionally chaotic.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="cottagecore">Cottagecore</h3>
  <p>Pastoral warmth with sage green, dusty rose, and botanical dividers.</p>
  <div class="example" data-theme="cottagecore" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Cottagecore</h4>
      <p style="margin: 0; color: var(--color-text);">Warm cream, sage green, dusty rose.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="claymorphism">Claymorphism</h3>
  <p>3D clay surfaces with inner highlights, dual shadows, and squish interactions.</p>
  <div class="example" data-theme="claymorphism" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Claymorphism</h4>
      <p style="margin: 0; color: var(--color-text);">Puffy, tactile, soft 3D clay surfaces.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="clinical">Clinical</h3>
  <p>Sterile medical precision with cool blue, maximum clarity, minimal decoration.</p>
  <div class="example" data-theme="clinical" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Clinical</h4>
      <p style="margin: 0; color: var(--color-text);">Clean, precise, zero-distraction UI.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="financial">Financial</h3>
  <p>Traditional finance authority with navy and gold. Serif headings for gravitas.</p>
  <div class="example" data-theme="financial" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Financial</h4>
      <p style="margin: 0; color: var(--color-text);">Navy authority, gold accents, serif headings.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="government">Government</h3>
  <p>Official USWDS-inspired with navy and red. Maximum legibility, generous sizing.</p>
  <div class="example" data-theme="government" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Government</h4>
      <p style="margin: 0; color: var(--color-text);">Official, authoritative, maximum legibility.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="startup">Startup</h3>
  <p>Modern SaaS energy with electric indigo and gradient CTAs. Bouncy, elevated.</p>
  <div class="example" data-theme="startup" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Startup</h4>
      <p style="margin: 0; color: var(--color-text);">Electric purple, gradient CTAs, ship fast.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="dawn">Dawn</h3>
  <p>Golden morning light with warm peach, gold, and cream. Soft serif headings.</p>
  <div class="example" data-theme="dawn" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Dawn</h4>
      <p style="margin: 0; color: var(--color-text);">Warm golden morning, soft and inviting.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="dusk">Dusk</h3>
  <p>Twilight purple-blue with warm amber accents. Elongated shadows, contemplative spacing.</p>
  <div class="example" data-theme="dusk" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Dusk</h4>
      <p style="margin: 0; color: var(--color-text);">Twilight contemplation, warm amber glow.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="midnight">Midnight</h3>
  <p>Deep night minimalism. Near-black, muted blue, desaturated. The simplest theme.</p>
  <div class="example" data-theme="midnight" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Midnight</h4>
      <p style="margin: 0; color: var(--color-text);">Zero texture, minimal borders, deep night.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3 id="high-noon">High Noon</h3>
  <p>Maximum brightness with pure white, vivid saturated colors, and strong shadows.</p>
  <div class="example" data-theme="high-noon" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">High Noon</h4>
      <p style="margin: 0; color: var(--color-text);">Vivid, bold, maximum brightness.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<h3>Theme Tools</h3>
  <p>Want to create your own theme? Use the <a href="/docs/tools/theme-composer/">Theme Composer</a> to build a complete theme from scratch or start from any of the 43 built-in themes. The Composer connects to the <a href="/docs/tools/color-schemer/">Color Schemer</a>, <a href="/docs/tools/type-explorer/">Type Explorer</a>, and <a href="/docs/tools/fluid-layout/">Fluid Sizing</a> tools for deeper exploration of each dimension.</p>
</section>

<section id="accessibility-themes">
  <h2>Accessibility Themes</h2>
  <p>Accessibility themes are functional themes that improve usability for users with specific needs. Unlike other themes, these are <strong>composable</strong>: you can combine them with any decorative theme.</p>

<layout-card>
    <layout-stack data-layout-gap="s">
      <h4 style="margin: 0;">Composable Design</h4>
      <p style="margin: 0;">Apply multiple themes together: <code>data-theme="classic a11y-high-contrast a11y-large-text"</code></p>
    </layout-stack>
  </layout-card>

<h3 id="high-contrast">High Contrast</h3>
  <p>WCAG AAA compliant contrast (7:1+) for users who need maximum readability. Removes decorative shadows and simplifies visual elements.</p>

<div class="example" data-theme="a11y-high-contrast" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">High Contrast Theme</h4>
      <p style="margin: 0; color: var(--color-text-muted);">19:1 contrast ratio for body text, 7:1 for muted text.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary Button</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
      <p style="margin: 0;"><a href="#">Links are clearly visible</a> with enhanced underlines.</p>
    </layout-stack>
  </div>

<p><strong>Features:</strong></p>
  <ul>
    <li>Text contrast: 19:1 (body), 7:1+ (muted)</li>
    <li>Enhanced 3px focus rings</li>
    <li>Shadows disabled for clearer boundaries</li>
    <li>Visible borders on all elements</li>
    <li>Works in light and dark modes</li>
  </ul>

<h3 id="large-text">Large Text</h3>
  <p>25% larger fonts and 44px minimum touch targets for users with low vision or motor impairments.</p>

<div class="example" data-theme="a11y-large-text" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Large Text Theme</h4>
      <p style="margin: 0; color: var(--color-text-muted);">Base font size is 20px instead of 16px.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Larger Touch Target</button>
        <button type="button" class="secondary">44px Minimum</button>
      </layout-cluster>
    </layout-stack>
  </div>

<p><strong>Features:</strong></p>
  <ul>
    <li>Base font: 20px (25% larger)</li>
    <li>Touch targets: 44px minimum (WCAG 2.5.8)</li>
    <li>Increased spacing throughout</li>
    <li>Generous line height (1.7)</li>
    <li>Adjusted content widths for comfortable reading</li>
  </ul>

<h3 id="dyslexia">Dyslexia-Friendly</h3>
  <p>Typography optimized for readers with dyslexia, using the Atkinson Hyperlegible font and increased spacing.</p>

<div class="example" data-theme="a11y-dyslexia" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <layout-stack data-layout-gap="m">
      <h4 style="margin: 0; color: var(--color-text);">Dyslexia-Friendly Theme</h4>
      <p style="margin: 0; color: var(--color-text-muted);">Atkinson Hyperlegible font with extra letter and word spacing for easier reading.</p>
      <p style="margin: 0; color: var(--color-text);">Similar letters like <strong>b d p q</strong> and <strong>I l 1</strong> are more distinguishable.</p>
      <layout-cluster data-layout-gap="s">
        <button type="button">Primary Button</button>
        <button type="button" class="secondary">Secondary</button>
      </layout-cluster>
    </layout-stack>
  </div>

<p><strong>Features:</strong></p>
  <ul>
    <li>Atkinson Hyperlegible font (free from Braille Institute)</li>
    <li>Extra letter spacing (0.05em)</li>
    <li>Extra word spacing (0.16em)</li>
    <li>Generous line height (1.8)</li>
    <li>Shorter line lengths (55ch max)</li>
    <li>No italics for emphasis (uses bold instead)</li>
  </ul>

<h3>Combining Themes</h3>
  <p>Accessibility themes work alongside decorative themes using space-separated values:</p>

<div class="example" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--size-m);">
    <div data-theme="classic a11y-high-contrast" style="padding: var(--size-m); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-m); border: 1px solid var(--color-border);">
      <layout-stack data-layout-gap="s">
        <p style="margin: 0; font-weight: 600; color: var(--color-text);">Classic + High Contrast</p>
        <p style="margin: 0; color: var(--color-text-muted);">Refined design with AAA contrast.</p>
        <button type="button">Button</button>
      </layout-stack>
    </div>
    <div data-theme="minimal a11y-large-text" style="padding: var(--size-m); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-m); border: 1px solid var(--color-border);">
      <layout-stack data-layout-gap="s">
        <p style="margin: 0; font-weight: 600; color: var(--color-text);">Minimal + Large Text</p>
        <p style="margin: 0; color: var(--color-text-muted);">Clean design with larger fonts.</p>
        <button type="button">Button</button>
      </layout-stack>
    </div>
    <div data-theme="modern a11y-dyslexia" style="padding: var(--size-m); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-m); border: 1px solid var(--color-border);">
      <layout-stack data-layout-gap="s">
        <p style="margin: 0; font-weight: 600; color: var(--color-text);">Modern + Dyslexia</p>
        <p style="margin: 0; color: var(--color-text-muted);">Clean design with readable typography.</p>
        <button type="button">Button</button>
      </layout-stack>
    </div>
  </div>

<h3>Automatic Activation</h3>
  <p>Vanilla Breeze also responds to user system preferences automatically via CSS media queries:</p>

<table class="props-table">
    <thead>
      <tr>
        <th>Media Query</th>
        <th>Automatic Enhancement</th>
      </tr>
    </thead>
    <tbody>
      <tr><td><code>prefers-contrast: more</code></td><td>Increased text and border contrast</td></tr>
      <tr><td><code>prefers-reduced-transparency</code></td><td>Removes blur/transparency effects</td></tr>
      <tr><td><code>forced-colors: active</code></td><td>Full Windows High Contrast Mode support</td></tr>
    </tbody>
  </table>

<p>These enhancements apply automatically when users enable accessibility settings in their operating system, without requiring any theme attribute.</p>
</section>

<section id="dark-mode">
  <h2>Dark Mode</h2>
  <p>Vanilla Breeze automatically adapts to the user's system preference via <code>color-scheme: light dark</code> and the <code>light-dark()</code> CSS function.</p>

<h3>Override Mode</h3>
  <p>Force a specific mode with the <code>data-mode</code> attribute:</p>

<table class="props-table">
    <thead>
      <tr>
        <th>Attribute</th>
        <th>Effect</th>
      </tr>
    </thead>
    <tbody>
      <tr><td><code>data-mode="light"</code></td><td>Force light mode</td></tr>
      <tr><td><code>data-mode="dark"</code></td><td>Force dark mode</td></tr>
      <tr><td>(no attribute)</td><td>Follow system preference</td></tr>
    </tbody>
  </table>

<h3>Theme + Mode Combinations</h3>
  <p>Themes can be combined with mode overrides:</p>

<div class="example" style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-m);">
    <div data-theme="modern" data-mode="light" style="padding: var(--size-m); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-m);">
      <layout-stack data-layout-gap="s">
        <p style="margin: 0; font-weight: 600;">Modern + Light</p>
        <button type="button">Button</button>
      </layout-stack>
    </div>
    <div data-theme="modern" data-mode="dark" style="padding: var(--size-m); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-m);">
      <layout-stack data-layout-gap="s">
        <p style="margin: 0; font-weight: 600; color: var(--color-text);">Modern + Dark</p>
        <button type="button">Button</button>
      </layout-stack>
    </div>
  </div>

<h3>Dark Mode Adjustments</h3>
  <p>In dark mode, Vanilla Breeze automatically:</p>
  <ul>
    <li>Brightens primary colors for better contrast</li>
    <li>Uses deeper shadows with higher opacity</li>
    <li>Adjusts surface colors for proper hierarchy</li>
  </ul>
</section>

<section id="custom-themes">
  <h2>Creating Custom Themes</h2>
  <p>Create your own brand theme by overriding hue values and optionally recalculating colors.</p>

<h3>Basic Color Theme</h3>
  <p>The simplest approach: override the three hue variables.</p>

<code-block language="css" label="Custom brand theme" data-escape>/* Custom brand theme */
:root[data-theme="my-brand"],
[data-theme="my-brand"] {
  --hue-primary: 210;   /* Blue */
  --hue-secondary: 280; /* Purple */
  --hue-accent: 45;     /* Gold */

/* Recalculate brand colors with new hues */
  --color-primary: oklch(50% 0.2 var(--hue-primary));
  --color-primary-hover: oklch(from var(--color-primary) calc(l - 0.08) calc(c + 0.02) h);
  --color-primary-subtle: oklch(from var(--color-primary) 0.95 0.03 h);

--color-secondary: oklch(50% 0.08 var(--hue-secondary));
  --color-accent: oklch(65% 0.18 var(--hue-accent));

--color-interactive: var(--color-primary);
  --color-interactive-hover: var(--color-primary-hover);
}

Dark Mode Support

Add dark mode adjustments for your custom theme:

Personality Theme

For a complete transformation, override shape, shadows, typography, and motion:

Token Reference

Tokens commonly overridden in themes:

Category	Tokens
Color Hues	`--hue-primary`, `--hue-secondary`, `--hue-accent`
Brand Colors	`--color-primary`, `--color-secondary`, `--color-accent`
Surfaces	`--color-background`, `--color-surface`, `--color-surface-raised`
Border Radius	`--radius-s`, `--radius-m`, `--radius-l`
Shadows	`--shadow-sm`, `--shadow-md`, `--shadow-lg`
Typography	`--font-sans`, `--font-serif`
Motion	`--duration-normal`, `--ease-default`

Fluid Scaling

Add data-fluid to the <html> element to make type sizes and spacing scale continuously across viewports. Instead of breakpoint jumps, values interpolate smoothly from 320px to 1440px using clamp().

Presets

Preset	Type Ratio	Space Swing	Character
`compact`	1.067 → 1.2	±11%	Tight, uniform hierarchy
`default`	1.125 → 1.25	±10%	Balanced, general-purpose
`spacious`	1.2 → 1.333	±11%	Generous, dramatic headings

Fluid scaling composes with all themes. The a11y-large-text accessibility theme includes its own fluid compound rules so the larger base sizes also scale fluidly.

For custom fluid parameters, see the Fluid Sizing tool and Theme Composer.

Extensions

Theme extensions are opt-in enhancements that add specialized capabilities beyond the core design tokens. They're included in Vanilla Breeze core but default to minimal/disabled values for progressive adoption.

Available Extensions

Motion Effects

Hover transforms, named easing presets, staggered animations, and enter/exit keyframe animations.

Surfaces

Texture overlays, glassmorphism effects, and gradient presets for backgrounds and cards.

Custom Fonts

Font slots for display, heading, body, and code typography with external font support.

Rough Borders

SVG filter displacement and border-image patterns for sketchy, hand-drawn effects.

Sound Effects

Web Audio API patterns for UI feedback sounds with accessibility controls.

Extension Tokens Reference

All extension tokens can be overridden in custom themes. See src/tokens/themes/_theme-template.css for the full list with documentation.

Extension	Key Tokens	Default
Motion Effects	`--motion-hover-lift`, `--motion-bounce`, `--motion-stagger-delay`	Active
Surfaces	`--glass-blur`, `--surface-texture-opacity`, `--gradient-subtle`	Minimal (blur: 0)
Custom Fonts	`--font-display`, `--font-heading`, `--font-body`, `--font-code`	System fonts
Rough Borders	`--border-roughness`, `--filter-rough`, `--shadow-sketch`	Disabled (0)

Theme Picker Integration

The Theme Builder includes an Extensions panel where you can toggle and customize extension features. Changes are applied in real-time and can be exported as CSS.

Using Extensions in Custom Themes

Override extension tokens in your theme to enable or customize features:

Wireframe Mode

A design iteration overlay that transforms your production markup into wireframe views at multiple fidelity levels. Toggle it on during design review, then turn it off — your HTML stays unchanged.

Fidelity Levels

Level	Description	Font
`lo`	Sketch aesthetic — rough, hand-drawn feel	Redacted Script
`mid`	Clean blocks — readable structure	Flow Block
`hi`	Near-production — mostly normal with muted chrome	System font
`annotate`	Full design with visible labels on every labeled element	System font

HTML Activation

Labeling Elements

Add contextual labels to any element with data-wf-label. Images auto-use their alt text.

JavaScript API

import { wireframe } from '/src/lib/wireframe.js';

wireframe.toggle('mid');          // Toggle wireframe mode
wireframe.setFidelity('lo');      // Set specific fidelity
wireframe.label('.hero', 'Hero'); // Label elements programmatically
wireframe.isActive();             // Check state/code-block

<h3>Interactive Demo</h3>
  <fieldset class="fidelity-switcher" style="display: flex; gap: var(--size-m); flex-wrap: wrap; margin-block-end: var(--size-m);">
    <legend>Fidelity Level</legend>
    <label><input type="radio" name="wf-fidelity" value="" checked> Off</label>
    <label><input type="radio" name="wf-fidelity" value="lo"> Lo-fi</label>
    <label><input type="radio" name="wf-fidelity" value="mid"> Mid-fi</label>
    <label><input type="radio" name="wf-fidelity" value="hi"> Hi-fi</label>
    <label><input type="radio" name="wf-fidelity" value="annotate"> Annotate</label>
  </fieldset>

<div class="example" id="wireframe-demo" style="padding: var(--size-l); background: var(--color-background); color: var(--color-text); border-radius: var(--radius-l);">
    <header data-wf-label="Site Header" style="padding: var(--size-m); border: 1px solid var(--color-border); border-radius: var(--radius-m); margin-block-end: var(--size-m);">
      <nav data-wf-label="Primary Nav">
        <layout-cluster data-layout-gap="m">
          <a href="#">Home</a>
          <a href="#">Products</a>
          <a href="#">About</a>
          <a href="#">Contact</a>
        </layout-cluster>
      </nav>
    </header>
    <article data-wf-label="Main Content" style="padding: var(--size-m); border: 1px solid var(--color-border); border-radius: var(--radius-m); margin-block-end: var(--size-m);">
      <h4 style="margin: 0 0 var(--size-s);">Article Title</h4>
      <p style="margin: 0 0 var(--size-s);">Sample content demonstrating how wireframe mode abstracts text while preserving layout structure.</p>
      <img src="https://picsum.photos/400/200" alt="Hero Image" data-wf-label="Hero Banner" style="max-inline-size: 100%; border-radius: var(--radius-m);">
    </article>
    <form data-wf-label="Contact Form" onsubmit="return false;" style="padding: var(--size-m); border: 1px solid var(--color-border); border-radius: var(--radius-m);">
      <layout-stack data-layout-gap="s">
        <label>Name <input type="text" placeholder="Your name"></label>
        <label>Email <input type="email" placeholder="your@email.com"></label>
        <button type="submit">Send Message</button>
      </layout-stack>
    </form>
  </div>

Rough Borders

Hand-drawn, sketchy border effects using SVG filters and border-image patterns. Great for wireframe themes, organic aesthetics, or playful designs.

Roughness Levels

Three SVG displacement filters provide increasing levels of roughness:

Light

Subtle wobble (scale: 2)

Medium

Sketchy feel (scale: 4)

Heavy

Torn paper effect (scale: 8)

Usage

See the full Rough Borders extension demo for all six techniques including mask edges, gradient borders, and pseudo-element decorations.

Themes

Using Themes

Theme Categories

Color Accents

Personality Themes

Extreme Themes

Color Accents

Dark Mode Support

Personality Theme

Token Reference

Fluid Scaling

Presets

Extensions

Available Extensions

Motion Effects

Surfaces

Custom Fonts

Rough Borders

Sound Effects

Extension Tokens Reference

Theme Picker Integration

Using Extensions in Custom Themes

Wireframe Mode

Fidelity Levels

HTML Activation

Labeling Elements

JavaScript API

Rough Borders

Roughness Levels

Light

Medium

Heavy

Usage

Next Steps

Tokens

Attributes

Elements