Design System: ElevenLabs

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.14px0.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.140.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