@aexol/spectral 0.7.0 → 0.7.1

package/dist/designer/data/systems/elevenlabs/DESIGN.md

@@ -0,0 +1,268 @@
+# Design System Inspired by ElevenLabs
+
+> Category: AI & LLM
+> AI voice platform. Dark cinematic UI, audio-waveform aesthetics.
+
+## 1. Visual Theme & Atmosphere
+
+ElevenLabs' website is a study in restrained elegance — a near-white canvas (`#ffffff`, `#f5f5f5`) where typography and subtle shadows do all the heavy lifting. The design feels like a premium audio product brochure: clean, spacious, and confident enough to let the content speak (literally, given ElevenLabs makes voice AI). There's an almost Apple-like quality to the whitespace strategy, but warmer — the occasional warm stone tint (`#f5f2ef`, `#777169`) prevents the purity from feeling clinical.
+
+The typography system is built on a fascinating duality: Waldenburg at weight 300 (light) for display headings creates ethereal, whisper-thin titles that feel like sound waves rendered in type — delicate, precise, and surprisingly impactful at large sizes. This light-weight display approach is the design's signature — where most sites use bold headings to grab attention, ElevenLabs uses lightness to create intrigue. Inter handles all body and UI text with workmanlike reliability, using slight positive letter-spacing (0.14px–0.18px) that gives body text an airy, well-spaced quality. WaldenburgFH appears as a bold uppercase variant for specific button labels.
+
+What makes ElevenLabs distinctive is its multi-layered shadow system. Rather than simple box-shadows, elements use complex stacks: inset border-shadows (`rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset`), outline shadows (`rgba(0,0,0,0.06) 0px 0px 0px 1px`), and soft elevation shadows (`rgba(0,0,0,0.04) 0px 4px 4px`) — all at remarkably low opacities. The result is a design where surfaces seem to barely exist, floating just above the page with the lightest possible touch. Pill-shaped buttons (9999px) with warm-tinted backgrounds (`rgba(245,242,239,0.8)`) and warm shadows (`rgba(78,50,23,0.04)`) add a tactile, physical quality.
+
+**Key Characteristics:**
+- Near-white canvas with warm undertones (`#f5f5f5`, `#f5f2ef`)
+- Waldenburg weight 300 (light) for display — ethereal, whisper-thin headings
+- Inter with positive letter-spacing (0.14–0.18px) for body — airy readability
+- Multi-layered shadow stacks at sub-0.1 opacity — surfaces barely exist
+- Pill buttons (9999px) with warm stone-tinted backgrounds
+- WaldenburgFH bold uppercase for specific CTA labels
+- Warm shadow tints: `rgba(78, 50, 23, 0.04)` — shadows have color, not just darkness
+- Geist Mono / ui-monospace for code snippets
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Pure White** (`#ffffff`): Primary background, card surfaces, button backgrounds
+- **Light Gray** (`#f5f5f5`): Secondary surface, subtle section differentiation
+- **Warm Stone** (`#f5f2ef`): Button background (at 80% opacity) — the warm signature
+- **Black** (`#000000`): Primary text, headings, dark buttons
+
+### Neutral Scale
+- **Dark Gray** (`#4e4e4e`): Secondary text, descriptions
+- **Warm Gray** (`#777169`): Tertiary text, muted links, decorative underlines
+- **Near White** (`#f6f6f6`): Alternate light surface
+
+### Interactive
+- **Grid Cyan** (`#7fffff`): `--grid-column-bg`, at 25% opacity — decorative grid overlay
+- **Ring Blue** (`rgb(147 197 253 / 0.5)`): `--tw-ring-color`, focus ring
+- **Border Light** (`#e5e5e5`): Explicit borders
+- **Border Subtle** (`rgba(0, 0, 0, 0.05)`): Ultra-subtle bottom borders
+
+### Shadows
+- **Inset Border** (`rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset`): Internal edge definition
+- **Inset Dark** (`rgba(0,0,0,0.1) 0px 0px 0px 0.5px inset`): Stronger inset variant
+- **Outline Ring** (`rgba(0,0,0,0.06) 0px 0px 0px 1px`): Shadow-as-border
+- **Soft Elevation** (`rgba(0,0,0,0.04) 0px 4px 4px`): Gentle lift
+- **Card Shadow** (`rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px`): Button/card elevation
+- **Warm Shadow** (`rgba(78,50,23,0.04) 0px 6px 16px`): Warm-tinted button shadow
+- **Edge Shadow** (`rgba(0,0,0,0.08) 0px 0px 0px 0.5px`): Subtle edge definition
+- **Inset Ring** (`rgba(0,0,0,0.1) 0px 0px 0px 1px inset`): Strong inset border
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: `Waldenburg`, fallback: `Waldenburg Fallback`
+- **Display Bold**: `WaldenburgFH`, fallback: `WaldenburgFH Fallback`
+- **Body / UI**: `Inter`, fallback: `Inter Fallback`
+- **Monospace**: `Geist Mono` or `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Waldenburg | 48px (3.00rem) | 300 | 1.08 (tight) | -0.96px | Whisper-thin, ethereal |
+| Section Heading | Waldenburg | 36px (2.25rem) | 300 | 1.17 (tight) | normal | Light display |
+| Card Heading | Waldenburg | 32px (2.00rem) | 300 | 1.13 (tight) | normal | Light card titles |
+| Body Large | Inter | 20px (1.25rem) | 400 | 1.35 | normal | Introductions |
+| Body | Inter | 18px (1.13rem) | 400 | 1.44–1.60 | 0.18px | Standard reading text |
+| Body Standard | Inter | 16px (1.00rem) | 400 | 1.50 | 0.16px | UI text |
+| Body Medium | Inter | 16px (1.00rem) | 500 | 1.50 | 0.16px | Emphasized body |
+| Nav / UI | Inter | 15px (0.94rem) | 500 | 1.33–1.47 | 0.15px | Navigation links |
+| Button | Inter | 15px (0.94rem) | 500 | 1.47 | normal | Button labels |
+| Button Uppercase | WaldenburgFH | 14px (0.88rem) | 700 | 1.10 (tight) | 0.7px | `text-transform: uppercase` |
+| Caption | Inter | 14px (0.88rem) | 400–500 | 1.43–1.50 | 0.14px | Metadata |
+| Small | Inter | 13px (0.81rem) | 500 | 1.38 | normal | Tags, badges |
+| Code | Geist Mono | 13px (0.81rem) | 400 | 1.85 (relaxed) | normal | Code blocks |
+| Micro | Inter | 12px (0.75rem) | 500 | 1.33 | normal | Tiny labels |
+| Tiny | Inter | 10px (0.63rem) | 400 | 1.60 (relaxed) | normal | Fine print |
+
+### Principles
+- **Light as the hero weight**: Waldenburg at 300 is the defining typographic choice. Where other design systems use bold for impact, ElevenLabs uses lightness — thin strokes that feel like audio waveforms, creating intrigue through restraint.
+- **Positive letter-spacing on body**: Inter uses +0.14px to +0.18px tracking across body text, creating an airy, well-spaced reading rhythm that contrasts with the tight display tracking (-0.96px).
+- **WaldenburgFH for emphasis**: A bold (700) uppercase variant of Waldenburg appears only in specific CTA button labels with 0.7px letter-spacing — the one place where the type system gets loud.
+- **Monospace as ambient**: Geist Mono at relaxed line-height (1.85) for code blocks feels unhurried and readable.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Black Pill**
+- Background: `#000000`
+- Text: `#ffffff`
+- Padding: 0px 14px
+- Radius: 9999px (full pill)
+- Use: Primary CTA
+
+**White Pill (Shadow-bordered)**
+- Background: `#ffffff`
+- Text: `#000000`
+- Radius: 9999px
+- Shadow: `rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px`
+- Use: Secondary CTA on white
+
+**Warm Stone Pill**
+- Background: `rgba(245, 242, 239, 0.8)` (warm translucent)
+- Text: `#000000`
+- Padding: 12px 20px 12px 14px (asymmetric)
+- Radius: 30px
+- Shadow: `rgba(78, 50, 23, 0.04) 0px 6px 16px` (warm-tinted)
+- Use: Featured CTA, hero action — the signature warm button
+
+**Uppercase Waldenburg Button**
+- Font: WaldenburgFH 14px weight 700
+- Text-transform: uppercase
+- Letter-spacing: 0.7px
+- Use: Specific bold CTA labels
+
+### Cards & Containers
+- Background: `#ffffff`
+- Border: `1px solid #e5e5e5` or shadow-as-border
+- Radius: 16px–24px
+- Shadow: multi-layer stack (inset + outline + elevation)
+- Content: product screenshots, code examples, audio waveform previews
+
+### Inputs & Forms
+- Textarea: padding 12px 20px, transparent text at default
+- Select: white background, standard styling
+- Radio: standard with tw-ring focus
+- Focus: `var(--tw-ring-offset-shadow)` ring system
+
+### Navigation
+- Clean white sticky header
+- Inter 15px weight 500 for nav links
+- Pill CTAs right-aligned (black primary, white secondary)
+- Mobile: hamburger collapse at 1024px
+
+### Image Treatment
+- Product screenshots and audio waveform visualizations
+- Warm gradient backgrounds in feature sections
+- 20px–24px radius on image containers
+- Full-width sections alternating white and light gray
+
+### Distinctive Components
+
+**Audio Waveform Sections**
+- Colorful gradient backgrounds showcasing voice AI capabilities
+- Warm amber, blue, and green gradients behind product demos
+- Screenshots of the ElevenLabs product interface
+
+**Warm Stone CTA Block**
+- `rgba(245,242,239,0.8)` background with warm shadow
+- Asymmetric padding (more right padding)
+- Creates a physical, tactile quality unique to ElevenLabs
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 3px, 4px, 8px, 9px, 10px, 11px, 12px, 16px, 18px, 20px, 24px, 28px, 32px, 40px
+
+### Grid & Container
+- Centered content with generous max-width
+- Single-column hero, expanding to feature grids
+- Full-width gradient sections for product showcases
+- White card grids on light gray backgrounds
+
+### Whitespace Philosophy
+- **Apple-like generosity**: Massive vertical spacing between sections creates a premium, unhurried pace. Each section is an exhibit.
+- **Warm emptiness**: The whitespace isn't cold — the warm stone undertones and warm shadows give empty space a tactile, physical quality.
+- **Typography-led rhythm**: The light-weight Waldenburg headings create visual "whispers" that draw the eye through vast white space.
+
+### Border Radius Scale
+- Minimal (2px): Small links, inline elements
+- Subtle (4px): Nav items, tab panels, tags
+- Standard (8px): Small containers
+- Comfortable (10px–12px): Medium cards, dropdowns
+- Card (16px): Standard cards, articles
+- Large (18px–20px): Featured cards, code panels
+- Section (24px): Large panels, section containers
+- Warm Button (30px): Warm stone CTA
+- Pill (9999px): Primary buttons, navigation pills
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Page background, text blocks |
+| Inset Edge (Level 0.5) | `rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset, #fff 0px 0px 0px 0px inset` | Internal border definition |
+| Outline Ring (Level 1) | `rgba(0,0,0,0.06) 0px 0px 0px 1px` + `rgba(0,0,0,0.04) 0px 1px 2px` + `rgba(0,0,0,0.04) 0px 2px 4px` | Shadow-as-border for cards |
+| Card (Level 2) | `rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px` | Button elevation, prominent cards |
+| Warm Lift (Level 3) | `rgba(78,50,23,0.04) 0px 6px 16px` | Featured CTAs — warm-tinted |
+| Focus (Accessibility) | `var(--tw-ring-offset-shadow)` blue ring | Keyboard focus |
+
+**Shadow Philosophy**: ElevenLabs uses the most refined shadow system of any design system analyzed. Every shadow is at sub-0.1 opacity, many include both outward cast AND inward inset components, and the warm CTA shadows use an actual warm color (`rgba(78,50,23,...)`) rather than neutral black. The inset half-pixel borders (`0px 0px 0px 0.5px inset`) create edges so subtle they're felt rather than seen — surfaces define themselves through the lightest possible touch.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Waldenburg weight 300 for all display headings — the lightness IS the brand
+- Apply multi-layer shadows (inset + outline + elevation) at sub-0.1 opacity
+- Use warm stone tints (`#f5f2ef`, `rgba(245,242,239,0.8)`) for featured elements
+- Apply positive letter-spacing (+0.14px to +0.18px) on Inter body text
+- Use 9999px radius for primary buttons — pill shape is standard
+- Use warm-tinted shadows (`rgba(78,50,23,0.04)`) on featured CTAs
+- Keep the page predominantly white with subtle gray section differentiation
+- Use WaldenburgFH bold uppercase ONLY for specific CTA button labels
+
+### Don't
+- Don't use bold (700) Waldenburg for headings — weight 300 is non-negotiable
+- Don't use heavy shadows (>0.1 opacity) — the ethereal quality requires whisper-level depth
+- Don't use cool gray borders — the system is warm-tinted throughout
+- Don't skip the inset shadow component — half-pixel inset borders define edges
+- Don't apply negative letter-spacing to body text — Inter uses positive tracking
+- Don't use sharp corners (<8px) on cards — the generous radius is structural
+- Don't introduce brand colors — the palette is intentionally achromatic with warm undertones
+- Don't make buttons opaque and heavy — the warm translucent stone treatment is the signature
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <1024px | Single column, hamburger nav, stacked sections |
+| Desktop | >1024px | Full layout, horizontal nav, multi-column grids |
+
+### Touch Targets
+- Pill buttons with generous padding (12px–20px)
+- Navigation links at 15px with adequate spacing
+- Select dropdowns maintain comfortable sizing
+
+### Collapsing Strategy
+- Navigation: horizontal → hamburger at 1024px
+- Feature grids: multi-column → stacked
+- Hero: maintains centered layout, font scales proportionally
+- Gradient sections: full-width maintained, content stacks
+- Spacing compresses proportionally
+
+### Image Behavior
+- Product screenshots scale responsively
+- Gradient backgrounds simplify on mobile
+- Audio waveform previews maintain aspect ratio
+- Rounded corners maintained across breakpoints
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Background: Pure White (`#ffffff`) or Light Gray (`#f5f5f5`)
+- Text: Black (`#000000`)
+- Secondary text: Dark Gray (`#4e4e4e`)
+- Muted text: Warm Gray (`#777169`)
+- Warm surface: Warm Stone (`rgba(245, 242, 239, 0.8)`)
+- Border: `#e5e5e5` or `rgba(0,0,0,0.05)`
+
+### Example Component Prompts
+- "Create a hero on white background. Headline at 48px Waldenburg weight 300, line-height 1.08, letter-spacing -0.96px, black text. Subtitle at 18px Inter weight 400, line-height 1.60, letter-spacing 0.18px, #4e4e4e text. Two pill buttons: black (9999px, 0px 14px padding) and warm stone (rgba(245,242,239,0.8), 30px radius, 12px 20px padding, warm shadow rgba(78,50,23,0.04) 0px 6px 16px)."
+- "Design a card: white background, 20px radius. Shadow: rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.04) 0px 2px 4px. Title at 32px Waldenburg weight 300, body at 16px Inter weight 400 letter-spacing 0.16px, #4e4e4e."
+- "Build a white pill button: white bg, 9999px radius. Shadow: rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px. Text at 15px Inter weight 500."
+- "Create an uppercase CTA label: 14px WaldenburgFH weight 700, text-transform uppercase, letter-spacing 0.7px."
+- "Design navigation: white sticky header. Inter 15px weight 500. Black pill CTA right-aligned. Border-bottom: rgba(0,0,0,0.05)."
+
+### Iteration Guide
+1. Start with white — the warm undertone comes from shadows and stone surfaces, not backgrounds
+2. Waldenburg 300 for headings — never bold, the lightness is the identity
+3. Multi-layer shadows: always include inset + outline + elevation at sub-0.1 opacity
+4. Positive letter-spacing on Inter body (+0.14px to +0.18px) — the airy reading quality
+5. Warm stone CTA is the signature — `rgba(245,242,239,0.8)` with `rgba(78,50,23,0.04)` shadow
+6. Pill (9999px) for buttons, generous radius (16px–24px) for cards

package/dist/designer/data/systems/elevenlabs/components.html

@@ -0,0 +1,342 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>ElevenLabs — reference components</title>
+    <meta
+      name="description"
+      content="Reference fixture for design-systems/elevenlabs. Achromatic premium:
+        Waldenburg weight 300 headings, warm stone surfaces, multi-layer whisper shadows."
+    />
+
+    <style>
+      :root {
+        --bg: #ffffff;
+        --surface: #f5f5f5;
+        --surface-warm: #f5f2ef;
+
+        --fg: #000000;
+        --fg-2: #4e4e4e;
+        --muted: #777169;
+        --meta: var(--muted);
+
+        --border: #e5e5e5;
+        --border-soft: rgba(0, 0, 0, 0.05);
+
+        --accent: #000000;
+        --accent-on: #ffffff;
+        --accent-hover: #1a1a1a;
+        --accent-active: #333333;
+
+        --success: #16a34a;
+        --warn: #eab308;
+        --danger: #dc2626;
+
+        --font-display: "Waldenburg", "Waldenburg Fallback", system-ui, sans-serif;
+        --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif;
+        --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+        --text-xs: 12px;
+        --text-sm: 13px;
+        --text-base: 16px;
+        --text-lg: 20px;
+        --text-xl: 24px;
+        --text-2xl: 32px;
+        --text-3xl: 36px;
+        --text-4xl: 48px;
+
+        --leading-body: 1.5;
+        --leading-tight: 1.08;
+        --tracking-display: -0.02em;
+
+        --space-1: 4px;
+        --space-2: 8px;
+        --space-3: 12px;
+        --space-4: 16px;
+        --space-5: 20px;
+        --space-6: 24px;
+        --space-8: 32px;
+        --space-12: 48px;
+
+        --section-y-desktop: 96px;
+        --section-y-tablet: 64px;
+        --section-y-phone: 48px;
+
+        --radius-sm: 8px;
+        --radius-md: 16px;
+        --radius-lg: 24px;
+        --radius-pill: 9999px;
+
+        --elev-flat: none;
+        --elev-ring: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 2px, rgba(0, 0, 0, 0.04) 0px 2px 4px;
+        --elev-raised: rgba(0, 0, 0, 0.4) 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 4px 4px;
+
+        --focus-ring: 0 0 0 3px rgba(147, 197, 253, 0.5);
+
+        --motion-fast: 150ms;
+        --motion-base: 200ms;
+        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+        --container-max: 1200px;
+        --container-gutter-desktop: 24px;
+        --container-gutter-tablet: 16px;
+        --container-gutter-phone: 12px;
+      }
+
+      /* ─── Reset ─────────────────────────────────────────────── */
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; }
+      body {
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+        font-size: var(--text-base);
+        line-height: var(--leading-body);
+        letter-spacing: 0.16px; /* Inter positive tracking — airy reading */
+        -webkit-font-smoothing: antialiased;
+      }
+
+      /* ─── Layout ─────────────────────────────────────────────── */
+      .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
+      section { padding-block: var(--section-y-desktop); }
+      section + section { border-top: 1px solid var(--border); }
+      @media (max-width: 1023px) {
+        .container { padding-inline: var(--container-gutter-tablet); }
+        section { padding-block: var(--section-y-tablet); }
+      }
+      @media (max-width: 639px) {
+        .container { padding-inline: var(--container-gutter-phone); }
+        section { padding-block: var(--section-y-phone); }
+      }
+
+      /* ─── Typography — Waldenburg weight 300 — the brand ────── */
+      h1, h2, h3 {
+        font-family: var(--font-display);
+        font-weight: 300;                 /* Light IS the brand — never bold */
+        line-height: var(--leading-tight);
+        margin: 0;
+        letter-spacing: var(--tracking-display);
+      }
+      h1 { font-size: var(--text-4xl); }
+      h2 { font-size: var(--text-2xl); }
+      h3 { font-size: var(--text-xl); }
+      p { margin: 0; }
+      .lead { font-size: var(--text-lg); color: var(--fg-2); line-height: var(--leading-body); letter-spacing: 0.18px; }
+      .body-muted { color: var(--fg-2); }
+      .body-sm { font-size: var(--text-sm); letter-spacing: 0.14px; }
+      .eyebrow {
+        font-family: var(--font-body);
+        font-size: var(--text-xs);
+        color: var(--muted);
+        letter-spacing: 0.08em;
+        font-weight: 500;
+      }
+      .stack-3 > * + * { margin-block-start: var(--space-3); }
+      .stack-4 > * + * { margin-block-start: var(--space-4); }
+      .stack-6 > * + * { margin-block-start: var(--space-6); }
+
+      /* ─── Buttons — pill primary, warm stone CTA ────────────── */
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        font-family: var(--font-body);
+        font-size: 15px;
+        font-weight: 500;
+        line-height: 1.47;
+        cursor: pointer;
+        border: none;
+        transition:
+          background-color var(--motion-fast) var(--ease-standard),
+          box-shadow var(--motion-fast) var(--ease-standard);
+        text-decoration: none;
+      }
+      .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+      /* Primary black pill */
+      .btn-primary {
+        background: var(--accent);
+        color: var(--accent-on);
+        padding: 0 14px;
+        height: 36px;
+        border-radius: var(--radius-pill);
+      }
+      .btn-primary:hover { background: var(--accent-hover); }
+      /* Secondary: white pill with shadow-as-border */
+      .btn-secondary {
+        background: var(--bg);
+        color: var(--fg);
+        padding: 0 14px;
+        height: 36px;
+        border-radius: var(--radius-pill);
+        box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 4px 4px;
+      }
+      .btn-secondary:hover {
+        box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 1px, rgba(0, 0, 0, 0.06) 0px 4px 6px;
+      }
+
+      /* ─── Inputs ────────────────────────────────────────────── */
+      .field { display: flex; flex-direction: column; gap: var(--space-2); }
+      .field label { font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.14px; }
+      .field input {
+        padding: 12px 16px;
+        border-radius: var(--radius-md);
+        border: 1px solid var(--border);
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        letter-spacing: 0.14px;
+        outline: none;
+        transition: border-color var(--motion-fast) var(--ease-standard),
+                    box-shadow var(--motion-fast) var(--ease-standard);
+      }
+      .field input:focus-visible {
+        border-color: var(--accent);
+        box-shadow: var(--focus-ring);
+      }
+      .field input::placeholder { color: var(--muted); }
+      .field-help { font-size: var(--text-xs); color: var(--muted); }
+
+      /* ─── Cards — multi-layer whisper shadow ────────────────── */
+      .card {
+        background: var(--bg);
+        border-radius: var(--radius-md);
+        padding: var(--space-6);
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-3);
+        box-shadow: var(--elev-ring);
+      }
+
+      /* ─── Badges ────────────────────────────────────────────── */
+      .badge {
+        display: inline-flex; align-items: center; gap: var(--space-2);
+        padding: 3px var(--space-2); border-radius: var(--radius-pill);
+        font-size: var(--text-xs); font-weight: 500; line-height: 1.6;
+      }
+      .badge-success { color: var(--success); background: color-mix(in oklab, var(--success), transparent 90%); }
+      .badge-muted { color: var(--muted); background: color-mix(in oklab, var(--muted), transparent 88%); }
+      .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+
+      /* ─── Links, Kbd ────────────────────────────────────────── */
+      a { color: var(--fg); text-decoration: none; }
+      a:hover { color: var(--muted); }
+      kbd {
+        font-family: var(--font-mono); font-size: var(--text-xs);
+        padding: 2px 6px; border-radius: var(--radius-sm);
+        box-shadow: rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset;
+        background: var(--surface); color: var(--muted);
+      }
+
+      /* ─── Layout helpers ────────────────────────────────────── */
+      .hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: end; }
+      @media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); } }
+      .hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; align-items: center; }
+      .hero-meta {
+        display: flex; flex-direction: column; gap: var(--space-3);
+        padding: var(--space-4); border-radius: var(--radius-lg);
+        box-shadow: var(--elev-ring); background: var(--bg);
+      }
+      .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
+      @media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
+      @media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
+      .form-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: start; }
+      @media (max-width: 1023px) { .form-row { grid-template-columns: 1fr; } }
+      .form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 420px; }
+      .form-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-2); align-items: center; }
+      .icon { width: 16px; height: 16px; flex-shrink: 0; }
+      .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
+    </style>
+  </head>
+  <body>
+    <main class="container">
+      <section data-od-id="hero">
+        <div class="hero-grid">
+          <div class="stack-4">
+            <p class="eyebrow">Reference fixture · elevenlabs</p>
+            <h1>Give every voice a presence.</h1>
+            <p class="lead" style="max-width: 52ch">
+              A premium audio product brochure in pixel form. Whisper-thin
+              headings, warm stone surfaces, achromatic warmth.
+            </p>
+            <div class="hero-actions">
+              <a href="./tokens.css" class="btn btn-primary">
+                View tokens
+              </a>
+              <a href="./DESIGN.md" class="btn btn-secondary">Read the spec</a>
+            </div>
+          </div>
+          <aside class="hero-meta" aria-label="System status">
+            <div class="row-between">
+              <span class="body-sm" style="color: var(--muted)">Service status</span>
+              <span class="badge badge-success">
+                <span class="badge-dot" aria-hidden="true"></span>
+                Live
+              </span>
+            </div>
+            <p class="body-sm" style="color: var(--muted)">Last reviewed <time datetime="2026-05-15">2026-05-15</time> · v1.0</p>
+            <p class="body-sm" style="color: var(--muted)">Press <kbd>⌘</kbd> <kbd>K</kbd> to search.</p>
+          </aside>
+        </div>
+      </section>
+
+      <section data-od-id="features">
+        <div class="stack-3">
+          <p class="eyebrow">What this fixture exercises</p>
+          <h2 style="max-width: 28ch">Lightness as the defining typographic statement.</h2>
+        </div>
+        <div class="features-grid" style="margin-block-start: var(--space-8)">
+          <article class="card">
+            <h3>Waldenburg weight 300</h3>
+            <p class="body-muted body-sm" style="letter-spacing: 0.16px">
+              All h1/h2/h3 use Waldenburg at font-weight 300. The whisper-thin
+              strokes feel like audio waveforms. Never bold — lightness IS the brand.
+            </p>
+            <a href="./tokens.css" class="body-sm">Inspect →</a>
+          </article>
+          <article class="card">
+            <h3>Multi-layer shadows</h3>
+            <p class="body-muted body-sm" style="letter-spacing: 0.16px">
+              --elev-ring: three layers at sub-0.04 opacity each. Surfaces barely
+              exist — defined by the lightest possible touch.
+            </p>
+            <a href="./DESIGN.md" class="body-sm">Read the rule →</a>
+          </article>
+          <article class="card">
+            <h3>Warm stone surfaces</h3>
+            <p class="body-muted body-sm" style="letter-spacing: 0.16px">
+              --surface-warm: #f5f2ef. The achromatic system gets warmth through
+              stone-tinted backgrounds and rgba(78,50,23,...) warm shadows.
+            </p>
+            <a href="./tokens.css" class="body-sm">Inspect surfaces →</a>
+          </article>
+        </div>
+      </section>
+
+      <section data-od-id="form">
+        <div class="form-row">
+          <div class="stack-4">
+            <p class="eyebrow">Form components</p>
+            <h2>Inputs with the same whisper-level depth.</h2>
+            <p class="body-muted" style="max-width: 48ch; letter-spacing: 0.16px">
+              Form inputs use 16px radius matching the card tier. Focus ring uses
+              Ring Blue (rgba(147,197,253,0.5)) — the only cool tone in the system.
+            </p>
+          </div>
+          <form class="form" onsubmit="event.preventDefault();">
+            <div class="field">
+              <label for="email">Work email</label>
+              <input id="email" type="email" placeholder="you@studio.ai" autocomplete="email" required />
+              <p class="field-help">Start generating voice in minutes.</p>
+            </div>
+            <div class="form-actions">
+              <button type="submit" class="btn btn-primary">Get started</button>
+              <button type="button" class="btn btn-secondary">Learn more</button>
+            </div>
+          </form>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>