git:20260403.74adb86 to git:20260404.d16117d

- ## 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