ElevenLabs Design System

---

version: alpha

name: ElevenLabs-design-analysis

description: A voice-AI brand whose marketing surfaces read like a quietly editorial print magazine. The base canvas is off-white (`#f5f5f5`) holding warm near-black ink (`#292524`); the brand voltage is photographic, not chromatic — soft pastel atmospheric gradient orbs (mint → peach → lavender → sky) drift through the page as the only "color" moments. Display runs Waldenburg Light at weight 300 — the editorial signature. Inter carries body, navigation, captions. CTAs are subtle: a near-black ink pill is the primary, a transparent outline is the secondary. The brand trusts atmospheric photography and modest type weights to do all of the brand work; there is no neon accent, no saturated CTA color, no developer-tools dark canvas.

colors:

primary: "#292524"

primary-active: "#0c0a09"

ink: "#0c0a09"

body: "#4e4e4e"

body-strong: "#292524"

muted: "#777169"

muted-soft: "#a8a29e"

hairline: "#e7e5e4"

hairline-soft: "#f0efed"

hairline-strong: "#d6d3d1"

canvas: "#f5f5f5"

canvas-soft: "#fafafa"

canvas-deep: "#0c0a09"

surface-card: "#ffffff"

surface-strong: "#f0efed"

surface-dark: "#0c0a09"

surface-dark-elevated: "#1c1917"

on-primary: "#ffffff"

on-dark: "#ffffff"

on-dark-soft: "#a8a29e"

gradient-mint: "#a7e5d3"

gradient-peach: "#f4c5a8"

gradient-lavender: "#c8b8e0"

gradient-sky: "#a8c8e8"

gradient-rose: "#e8b8c4"

semantic-error: "#dc2626"

semantic-success: "#16a34a"

typography:

display-mega:

fontFamily: "'Waldenburg', 'Times New Roman', serif"

fontSize: 64px

fontWeight: 300

lineHeight: 1.05

letterSpacing: -1.92px

display-xl:

fontFamily: "'Waldenburg', serif"

fontSize: 48px

fontWeight: 300

lineHeight: 1.08

letterSpacing: -0.96px

display-lg:

fontFamily: "'Waldenburg', serif"

fontSize: 36px

fontWeight: 300

lineHeight: 1.17

letterSpacing: -0.36px

display-md:

fontFamily: "'Waldenburg', serif"

fontSize: 32px

fontWeight: 300

lineHeight: 1.13

letterSpacing: -0.32px

display-sm:

fontFamily: "'Waldenburg', serif"

fontSize: 24px

fontWeight: 300

lineHeight: 1.2

letterSpacing: 0

title-md:

fontFamily: "'Inter', sans-serif"

fontSize: 20px

fontWeight: 500

lineHeight: 1.35

letterSpacing: 0

title-sm:

fontFamily: "'Inter', sans-serif"

fontSize: 18px

fontWeight: 500

lineHeight: 1.44

letterSpacing: 0.18px

body-md:

fontFamily: "'Inter', sans-serif"

fontSize: 16px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0.16px

body-strong:

fontFamily: "'Inter', sans-serif"

fontSize: 16px

fontWeight: 500

lineHeight: 1.5

letterSpacing: 0.16px

body-sm:

fontFamily: "'Inter', sans-serif"

fontSize: 15px

fontWeight: 400

lineHeight: 1.47

letterSpacing: 0.15px

caption:

fontFamily: "'Inter', sans-serif"

fontSize: 14px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0

caption-uppercase:

fontFamily: "'Inter', sans-serif"

fontSize: 12px

fontWeight: 600

lineHeight: 1.4

letterSpacing: 0.96px

textTransform: uppercase

button:

fontFamily: "'Inter', sans-serif"

fontSize: 15px

fontWeight: 500

lineHeight: 1.0

letterSpacing: 0

nav-link:

fontFamily: "'Inter', sans-serif"

fontSize: 15px

fontWeight: 500

lineHeight: 1.4

letterSpacing: 0

rounded:

none: 0px

xs: 4px

sm: 6px

md: 8px

lg: 12px

xl: 16px

xxl: 24px

pill: 9999px

full: 9999px

spacing:

xxs: 4px

xs: 8px

sm: 12px

base: 16px

md: 20px

lg: 24px

xl: 32px

xxl: 48px

section: 96px

components:

top-nav:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.nav-link}"

height: 64px

button-primary:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button}"

rounded: "{rounded.pill}"

padding: 10px 20px

height: 40px

button-primary-active:

backgroundColor: "{colors.primary-active}"

textColor: "{colors.on-primary}"

rounded: "{rounded.pill}"

button-outline:

backgroundColor: transparent

textColor: "{colors.ink}"

typography: "{typography.button}"

rounded: "{rounded.pill}"

padding: 9px 19px

height: 40px

button-tertiary-text:

backgroundColor: transparent

textColor: "{colors.ink}"

typography: "{typography.button}"

hero-band:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.display-mega}"

padding: 96px

gradient-orb-card:

backgroundColor: "{colors.canvas-soft}"

textColor: "{colors.ink}"

rounded: "{rounded.xxl}"

padding: 32px

feature-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.title-md}"

rounded: "{rounded.xl}"

padding: 24px

product-card-stack:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.xl}"

padding: 0

voice-row:

backgroundColor: transparent

textColor: "{colors.ink}"

typography: "{typography.body-md}"

padding: 12px 0

voice-icon-circular:

backgroundColor: "{colors.surface-strong}"

rounded: "{rounded.full}"

size: 32px

pricing-tier-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.xl}"

padding: 32px

pricing-tier-featured:

backgroundColor: "{colors.surface-dark}"

textColor: "{colors.on-dark}"

typography: "{typography.body-md}"

rounded: "{rounded.xl}"

padding: 32px

text-input:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: 12px 16px

height: 44px

badge-pill:

backgroundColor: "{colors.surface-strong}"

textColor: "{colors.ink}"

typography: "{typography.caption-uppercase}"

rounded: "{rounded.pill}"

padding: 4px 10px

cta-band:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.display-lg}"

padding: 96px

testimonial-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.body}"

typography: "{typography.body-md}"

rounded: "{rounded.xl}"

padding: 32px

audio-waveform-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

rounded: "{rounded.xl}"

padding: 24px

footer:

backgroundColor: "{colors.canvas}"

textColor: "{colors.body}"

typography: "{typography.body-sm}"

padding: 64px 48px

footer-link:

backgroundColor: transparent

textColor: "{colors.body}"

typography: "{typography.body-sm}"

---

ElevenLabs reads like a quietly editorial print magazine that happens to be a voice-AI product. The base canvas is off-white `{colors.canvas}` (#f5f5f5) holding warm near-black ink `{colors.ink}` (#0c0a09). The brand voltage is **photographic, not chromatic**: soft pastel atmospheric gradient orbs (mint, peach, lavender, sky, rose) drift through the page as the only "color" moments. There is no neon accent, no saturated CTA color, no dark-canvas dev-tools atmosphere.

Type pairs **Waldenburg Light** (custom serif at weight 300) for display with **Inter** for body, navigation, captions. The display weight at 300 is the editorial signature — never bold, never heavy.

CTAs are subtle: a near-black ink pill (`{component.button-primary}`) is the primary, a transparent outline (`{component.button-outline}`) is the secondary. The brand trusts atmospheric photography and modest type weights to carry brand work.

**Key Characteristics:**

These appear ONLY as soft radial-gradient atmospheric orbs inside `{component.gradient-orb-card}` and as background atmospheric blooms behind hero copy. Never as button fills, never as text colors.

**Waldenburg Light** is the licensed display serif at weight 300. **Inter** carries body, navigation, captions, and buttons. Fallback: `'Times New Roman', serif` for Waldenburg, `sans-serif` for Inter.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-mega}` | 64px | 300 | 1.05 | -1.92px | Homepage hero h1 |

| `{typography.display-xl}` | 48px | 300 | 1.08 | -0.96px | Subsidiary heroes |

| `{typography.display-lg}` | 36px | 300 | 1.17 | -0.36px | Section heads |

| `{typography.display-md}` | 32px | 300 | 1.13 | -0.32px | Sub-section heads |

| `{typography.display-sm}` | 24px | 300 | 1.2 | 0 | Card group titles |

| `{typography.title-md}` | 20px | 500 | 1.35 | 0 | Component titles — Inter |

| `{typography.title-sm}` | 18px | 500 | 1.44 | 0.18px | List labels |

| `{typography.body-md}` | 16px | 400 | 1.5 | 0.16px | Default body — Inter |

| `{typography.body-strong}` | 16px | 500 | 1.5 | 0.16px | Emphasized body |

| `{typography.body-sm}` | 15px | 400 | 1.47 | 0.15px | Footer body |

| `{typography.caption}` | 14px | 400 | 1.5 | 0 | Photo captions |

| `{typography.caption-uppercase}` | 12px | 600 | 1.4 | 0.96px | Section labels, badges |

| `{typography.button}` | 15px | 500 | 1.0 | 0 | CTA pill |

| `{typography.nav-link}` | 15px | 500 | 1.4 | 0 | Top-nav menu |

Waldenburg is licensed. Open-source substitute: **EB Garamond** at weight 300 (slightly more humanist) or **GT Sectra** (closer to Waldenburg's modernity). Use Inter directly for body — it's the same family ElevenLabs uses.

Generous editorial pacing — print-magazine feel. 96px between bands; cards inside bands sit close (16-24px gap). The atmospheric gradient orbs occupy generous breathing space without competing with copy.

The system uses **hairline + soft drop**. Cards float above the off-white canvas via 1px hairlines and a single subtle shadow tier. Atmospheric depth comes from gradient orbs.

| Level | Treatment | Use |

|---|---|---|

| Flat (canvas) | `{colors.canvas}` (#f5f5f5) | Body bands, footer |

| Card | `{colors.surface-card}` (#ffffff) | Content cards |

| Hairline border | 1px `{colors.hairline}` | Card outlines |

| Soft drop | `0 4px 16px rgba(0, 0, 0, 0.04)` | Hovered cards (single shadow tier) |

| Gradient orb | Radial gradient with one of `{colors.gradient-*}` | Atmospheric depth — never a card surface |

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Reserved |

| `{rounded.xs}` | 4px | Inline tags |

| `{rounded.sm}` | 6px | Compact rows |

| `{rounded.md}` | 8px | Form inputs |

| `{rounded.lg}` | 12px | Compact cards |

| `{rounded.xl}` | 16px | Feature cards, pricing tiers |

| `{rounded.xxl}` | 24px | Gradient orb cards (extra-soft) |

| `{rounded.pill}` | 9999px | All CTA buttons, badges |

| `{rounded.full}` | 9999px | Voice icon circles, avatars |

**`top-nav`** — Background `{colors.canvas}`, text `{colors.ink}`, height 64px. Layout: ElevenLabs wordmark left, primary horizontal menu (Creative / Agents / Video / Pricing / Enterprise / Docs), Sign In + "Try free" primary CTA right.

**`button-primary`** — Near-black ink pill. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}` (15px / 500), padding 10px × 20px, height 40px, rounded `{rounded.pill}`.

**`button-primary-active`** — Press state. Background `{colors.primary-active}`.

**`button-outline`** — Transparent pill with 1px ink border. Background transparent, text `{colors.ink}`, 1px `{colors.hairline-strong}` border.

**`button-tertiary-text`** — Inline ink text link.

**`hero-band`** — Background `{colors.canvas}`, full-width display headline in `{typography.display-mega}` (64px / 300 / -1.92px), subhead in `{typography.body-md}`, two CTAs, and an atmospheric gradient orb behind the centered headline.

**`gradient-orb-card`** — A large card with a soft radial-gradient orb behind centered display copy. Background `{colors.canvas-soft}`, rounded `{rounded.xxl}` (24px), padding 32px. Each variant uses one of the five gradient tokens (`gradient-mint`, `gradient-peach`, `gradient-lavender`, `gradient-sky`, `gradient-rose`).

**`audio-waveform-card`** — A waveform visualization card. Background `{colors.surface-card}`, rounded `{rounded.xl}`, padding 24px. Holds a play button + waveform glyph + voice metadata.

**`feature-card`** — 2-up or 3-up grids. Background `{colors.surface-card}`, text `{colors.ink}`, rounded `{rounded.xl}`, padding 24px, 1px hairline border.

**`product-card-stack`** — Stacked product preview cards. Background `{colors.surface-card}`, rounded `{rounded.xl}`, no padding (children fill the card edge-to-edge).

**`testimonial-card`** — Quote card. Background `{colors.surface-card}`, text `{colors.body}`, rounded `{rounded.xl}`, padding 32px.

**`voice-row`** — Horizontal row in voice list. Background transparent, 1px hairline divider. Layout: 32px circular voice icon (`{component.voice-icon-circular}`) left, voice name + accent stack, optional preview button right.

**`voice-icon-circular`** — Background `{colors.surface-strong}`, rounded `{rounded.full}`, 32px diameter. Holds initials or voice glyph.

**`pricing-tier-card`** — Background `{colors.surface-card}`, rounded `{rounded.xl}`, padding 32px, 1px hairline border.

**`pricing-tier-featured`** — Featured tier inverts. Background `{colors.surface-dark}`, text `{colors.on-dark}`. Same shape, dark inversion.

**`text-input`** — Background `{colors.surface-card}`, text `{colors.ink}`, rounded `{rounded.md}` (8px), padding 12px × 16px, height 44px, 1px `{colors.hairline-strong}` border. On focus, border thickens to 2px ink.

**`badge-pill`** — Background `{colors.surface-strong}`, text `{colors.ink}`, type `{typography.caption-uppercase}`, rounded `{rounded.pill}`, padding 4px × 10px.

**`cta-band`** — Pre-footer. Background `{colors.canvas}`, centered display headline in `{typography.display-lg}`, single ink pill CTA. 96px padding.

**`footer`** — Closing footer. Background `{colors.canvas}`, text `{colors.body}`. 5-column link list. 64×48px padding.

**`footer-link`** — Background transparent, text `{colors.body}`, type `{typography.body-sm}`.

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 640px | Hero h1 64→32px; feature cards 1-up; nav hamburger; gradient orbs shrink. |

| Tablet | 640–1024px | Hero h1 48px; feature cards 2-up. |

| Desktop | 1024–1280px | Full hero h1 64px; feature cards 3-up. |

| Wide | > 1280px | Content caps at 1200px. |

1. Focus on a single component at a time.

2. CTAs default to `{rounded.pill}`. Cards use `{rounded.xl}` (16px).

3. Variants live as separate entries.

4. Use `{token.refs}` everywhere — never inline hex.

5. Hover state never documented.

6. Waldenburg 300 for display, Inter 400/500 for body.

7. Gradient orbs scoped to atmospheric decoration.