Studio
Studio
The ElevenLabs design system uses a light-themed visual language. The primary brand color is Signal Blue (#0447ff); text is Obsidian (#000000) on a Eggshell (#fdfcfc) background. Typography is set in Waldenburg, WaldenburgFH and Inter. This DESIGN.md contains 10 color tokens and a 8-step type scale; give it to AI tools like Claude, Cursor or v0 to generate consistent interfaces in the style of ElevenLabs.
Independent Style Review
Architect's blueprint on warm vellum — Waldenburg weight-300 headlines at 48px with -0.02em tracking anchored against an eggshell ground, pure black pill buttons as the only punctuation.
ElevenLabs feels like a museum label next to a working instrument — type-first, almost severe, yet alive with subtle warmth in the off-white surfaces. The page background #fdfcfc (named 'Eggshell' in the CSS tokens) is barely-not-white, giving the layout a slight papery warmth that black text lands on with extraordinary weight. Headlines use Waldenburg at weight 300 with -0.02em tracking, a custom serif that whispers where competitors shout — the counter-intuitive choice of a light-weight, slightly classical typeface for an AI voice platform creates authority through restraint. The entire chromatic palette is suppressed to near-zero saturation: #e5e5e5 borders, #777169 secondary text (a warm stone gray), and #fdfcfc surfaces — the only true color breaks come from pill-shaped black CTA buttons and the small colored avatar dots on voice profiles. The product UI card floats on a hairline shadow (0px 0px 1px rgba(0,0,0,0.4)) rather than elevation depth, keeping everything in the same visual plane.
| Color | HEX | CSS token | Usage |
|---|---|---|---|
| Eggshell | #fdfcfc | --color-eggshell | Page background and primary surface — the near-white warmth distinguishes this from pure #ffffff, landing type with extra weight |
| Powder | #f5f3f1 | --color-powder | Secondary surface, hover states, subtle section backgrounds |
| Chalk | #e5e5e5 | --color-chalk | All borders, dividers, card outlines, button outlines — the single border color used universally |
| Fog | #b1b0b0 | --color-fog | Disabled states, placeholder elements, logo grid grayscale treatment |
| Gravel | #777169 | --color-gravel | Secondary body text, nav items, subheadings, captions — warm stone undertone separates it from a cold gray |
| Slate | #a59f97 | --color-slate | Tertiary text, icon strokes, deemphasized labels |
| Cinder | #57534 | --color-cinder | Mid-tone text, secondary headings on light surfaces |
| Obsidian | #000000 | --color-obsidian | Primary text, filled CTA buttons (background), logo mark — the absolute black against eggshell creates 20.5:1 contrast |
| Signal Blue | #0447ff | --color-signal-blue | ElevenAgents product dot / brand avatar accent — appears only in small circular UI elements, not in text or buttons |
| Ember | #ff4704 | --color-ember | ElevenCreative product dot / brand avatar accent — small circular UI indicator only |
| Font | Weights | Fallback |
|---|---|---|
| Waldenburg | 300 | Cormorant Garamond 300, or Libre Baskerville 300 |
| WaldenburgFH | 700 | Inter 700 with letter-spacing 0.7px |
| Inter | 400, 500 | Inter (Google Fonts) |
| Geist Mono | 400 | JetBrains Mono 400, or IBM Plex Mono 400 |
| Role | Size | Line height | Token |
|---|---|---|---|
| caption | 10px | 1.2 | --text-caption |
| body | 14px | 1.43 | --text-body |
| body-lg | 16px | 1.5 | --text-body-lg |
| subheading | 18px | 1.44 | --text-subheading |
| heading-sm | 20px | 1.4 | --text-heading-sm |
| heading | 32px | 1.17 | --text-heading |
| heading-lg | 36px | 1.13 | --text-heading-lg |
| display | 48px | 1.08 | --text-display |
