# ElevenLabs Design System

> A severe, editorial monochrome foundation that relies on weight-300 serif typography and pure black pill buttons to establish authority.

**Source:** https://elevenlabs.io | **Captured:** 2026-05-28 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** ElevenCreative, ElevenAgents, ElevenAPI

## TL;DR
ElevenLabs operates on a strict monochrome palette anchored by `#000000` and `#ffffff`. The visual hierarchy is driven almost entirely by typography, specifically the use of Waldenburg at weight 300 for display and Inter for body copy. Components favor extreme border radii (`9999px` for buttons and badges) or soft structural radii (`20px` for cards). Depth is achieved through subtle inset hairlines and minimal drop shadows rather than heavy elevation.

## Signature DNA
1. **Editorial Display Typography** (Waldenburg at weight 300 with negative tracking like `-0.96px` at 48px creates a print-like, classical authority. Found on homepage and pricing).
2. **Monochrome Foundation** (The complete absence of saturated primary colors in the parent brand forces reliance on `#000000` for all primary actions. Found across all pages).
3. **Pill Geometry for Actions** (`9999px` border radius is applied universally to buttons, badges, and interactive toggles. Found across all pages).

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| ElevenCreative | Not captured in source | Not captured in source | Foundation, Typography, Components | Accent colors |
| ElevenAgents | Not captured in source | Not captured in source | Foundation, Typography, Components | Accent colors |
| ElevenAPI | Not captured in source | Not captured in source | Foundation, Typography, Components | Accent colors |

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-foundation-black` | `#000000` | surface_bg, text, button_text, button_bg, border | 1627 | 1.0 | computed_style, css_variable:--black |
| `--color-foundation-white` | `#ffffff` | text, surface_bg, button_text, button_bg, border | 222 | 1.0 | computed_style, css_variable:--page-background-color |
| `--color-foundation-neutral-50` | `#f5f3f1` | surface_bg, button_bg | 58 | 1.0 | computed_style, css_variable:--neutral-50 |
| `--color-foundation-stone-500` | `#777169` | text | 104 | 0.8 | computed_style |
| `--color-foundation-stone-600` | `#57534e` | text, button_text | 34 | 0.8 | computed_style |
| `--color-foundation-stone-400` | `#a59f97` | text | 10 | 0.6 | computed_style |
| `--color-foundation-stone-200` | `#ebe8e4` | border, surface_bg | 5 | 0.6 | computed_style |
| `--color-foundation-stone-700` | `#44403b` | text | 4 | 0.6 | computed_style |
| `--color-foundation-neutral-500` | `#767676` | button_text | 3 | 1.0 | computed_style, css_variable:--neutral-500 |
| `--color-foundation-neutral-600` | `#6e6e6e` | text | 2 | 1.0 | computed_style, css_variable:--neutral-600 |
| `--color-foundation-neutral-100` | `#e5e5e5` | border | 1 | 1.0 | computed_style, css_variable:--neutral-100 |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-accent-red` | `#f41a2f` | text | 9 | 0.6 | computed_style |
| `--color-accent-blue-light` | `#0a59d2` | text | 9 | 0.6 | computed_style |
| `--color-accent-blue-dark` | `#052f70` | text | 8 | 0.6 | computed_style |

### Semantic
Not captured in source

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Waldenburg | 300, 400 | display, heading | Cormorant Garamond | Proprietary |
| WaldenburgFH | 700 | heading | Inter | Proprietary |
| Inter | 400, 500, 700 | heading, body, subheading | Inter | OFL |
| Geist Mono | 400 | mono | JetBrains Mono | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `--text-display` | 48px | 52px | -0.96px | 300 (Waldenburg) | display | `h1.tw-block.tw-text-black` |
| `--text-heading-lg` | 36px | 42px | normal | 300 (Waldenburg) | heading | `h2.tw-block.tw-text-black` |
| `--text-heading-md` | 32px | 36px | normal | 300 (Waldenburg) | heading | `p.tw-my-auto.tw-flex-auto` |
| `--text-heading-sm` | 24px | 32px | -0.24px | 400 (Inter) | heading-sm | `h3.tw-mb-3.tw-transition-colors` |
| `--text-subheading` | 18px | 26px | 0.18px | 400 (Inter) | subheading | `h3.tw-type-xl.tw-text-black` |
| `--text-body-lg` | 18px | 28.8px | normal | 400 (Inter) | body | `nav` |
| `--text-body` | 16px | 24px | 0.16px | 400 (Inter) | subheading | `h2.tw-block.tw-type-base` |
| `--text-body-sm` | 14px | 21px | 0.14px | 500 (Inter) | body-sm | `p.tw-type-xs.tw-text-black` |
| `--text-mono` | 13px | 22px | normal | 400 (Geist Mono) | body-sm | `code` |
| `--text-caption` | 12px | 12px | normal | 400 (Inter) | caption | `div.tw-absolute.tw-left-0` |

### Principles
1. **Display weight stays at 300.** Waldenburg at 300 is the editorial signature.
2. **Negative letter-spacing on display.** Waldenburg pulls `-0.96px` tighter on 48px display sizes.
3. **Monospace for technical content.** Geist Mono at 13px signals machine-generated or technical annotations.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `--spacing-1` | 4px | 30 |
| `--spacing-2` | 8px | 42 |
| `--spacing-3` | 12px | 49 |
| `--spacing-4` | 16px | 52 |
| `--spacing-5` | 20px | 40 |
| `--spacing-6` | 24px | 34 |
| `--spacing-8` | 32px | 7 |
| `--spacing-10` | 40px | 8 |
| `--spacing-16` | 64px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `--radius-none` | 0px | sharp | 876 occurrences |
| `--radius-xs` | 4px | input | 256 occurrences |
| `--radius-sm` | 8px | control | 8 occurrences |
| `--radius-md` | 12px | control | 6 occurrences |
| `--radius-lg` | 16px | card | 11 occurrences |
| `--radius-xl` | 20px | card | 116 occurrences |
| `--radius-2xl` | 24px | panel | 8 occurrences |
| `--radius-pill` | 9999px | pill | 364 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `--shadow-inset-subtle` | `rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px` | Card borders | 45 occurrences |
| `--shadow-drop-sm` | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px` | Interactive elements | 27 occurrences |
| `--shadow-drop-md` | `rgba(0, 0, 0, 0) 0px 0px 1px 0px, rgba(0, 0, 0, 0) 0px 4px 4px 0px` | Elevated cards | 20 occurrences |

## Components

### Tier 1: Foundational

#### Primary Pill Button
**Role:** Primary CTA
**Pages observed:** https://elevenlabs.io, https://elevenlabs.io/pricing, https://elevenlabs.io/about
**Spec:** Background `#000000` / Text `#ffffff` / Border `0px` / Radius `9999px` / Padding `0px 20px` / Typography `16px` / Shadow `none`
**States observed:** Default | Hover | Focus | Active | Disabled: not captured

#### Secondary Pill Button
**Role:** Secondary CTA
**Pages observed:** https://elevenlabs.io, https://elevenlabs.io/pricing, https://elevenlabs.io/about
**Spec:** Background `#ffffff` / Text `#000000` / Border `0px` / Radius `9999px` / Padding `0px 20px` / Typography `16px` / Shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px`
**States observed:** Default | Hover | Focus | Active | Disabled: not captured

### Tier 2: Patterns

#### Pill Badge
**Role:** Inline status or category label
**Pages observed:** https://elevenlabs.io, https://elevenlabs.io/pricing
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `#000000` / Border `0px` / Radius `9999px` / Padding `0px 17px` / Typography `18px` / Shadow `none`
**States observed:** Default | Hover | Focus | Active | Disabled: not captured

#### Surface Tag
**Role:** Small metadata label
**Pages observed:** https://elevenlabs.io, https://elevenlabs.io/pricing, https://elevenlabs.io/about
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `#777169` / Border `0px` / Radius `4px` / Padding `9px 6px` / Typography `13px` / Shadow `none`
**States observed:** Default | Hover | Focus | Active | Disabled: not captured

### Tier 3: Surface-specific

#### Feature Card (Solid)
**Role:** Standard content container
**Pages observed:** https://elevenlabs.io, https://elevenlabs.io/about
**Spec:** Background `#f5f3f1` / Text `#000000` / Border `0px` / Radius `20px` / Padding `0px` / Typography `18px` / Shadow `none`
**States observed:** Default | Hover | Focus | Active | Disabled: not captured

#### Feature Card (Outlined)
**Role:** Secondary content container
**Pages observed:** https://elevenlabs.io, https://elevenlabs.io/pricing, https://elevenlabs.io/about
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `#000000` / Border `0px` / Radius `20px` / Padding `0px` / Typography `18px` / Shadow `rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
**States observed:** Default | Hover | Focus | Active | Disabled: not captured

## Layout
Not captured in source

## Responsive
Not captured in source

## Imagery & decoration
Not captured in source

## Do's
* Use `#000000` for primary actions to maintain the monochrome authority.
* Apply `9999px` border radius to all interactive buttons and badges.
* Use Waldenburg at weight `300` for all display headlines.
* Apply negative letter-spacing (`-0.96px`) to large display typography.
* Use inset shadows (`rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset`) for card borders instead of solid strokes.

## Don'ts
* **Wrong:** Using a saturated color like `#0a59d2` for a primary button on the parent site.
  **Right:** Using `#000000` for the primary button.
  **Reason:** The parent brand is strictly monochrome; saturated colors belong to sub-brands.
* **Wrong:** Setting display headlines in Inter 700.
  **Right:** Setting display headlines in Waldenburg 300.
  **Reason:** The editorial, lightweight serif is the core typographic signature of the brand.
* **Wrong:** Using a `4px` border radius for a primary CTA.
  **Right:** Using `9999px` for the primary CTA.
  **Reason:** All primary actions use extreme pill geometry.

## Similar brands
* Vercel
* Linear
* Stripe

## Quick start

```css
:root {
  --color-foundation-black: #000000;
  --color-foundation-white: #ffffff;
  --color-foundation-neutral-50: #f5f3f1;
  --color-foundation-stone-500: #777169;
  
  --text-display-size: 48px;
  --text-display-weight: 300;
  --text-display-tracking: -0.96px;
  
  --radius-pill: 9999px;
  --radius-card: 20px;
  
  --shadow-inset-subtle: rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}
```

## Agent prompt examples
1. "Create a hero section using Waldenburg at weight 300 for the headline. The primary CTA should be a pill button with a black background and white text."
2. "Build a feature grid with 3 cards. The cards should have a background of `#f5f3f1`, a border radius of `20px`, and no drop shadow."
3. "Design a secondary button using a white background, black text, a `9999px` border radius, and the subtle drop shadow token."

## Known gaps
Layout grids, responsive breakpoints, and semantic color usage (success/error states) were not captured in the source evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://elevenlabs.io | Desktop | 2026-05-28T20:45:38.923Z |
| Pricing | https://elevenlabs.io/pricing | Desktop | 2026-05-28T20:45:38.923Z |
| About | https://elevenlabs.io/about | Desktop | 2026-05-28T20:45:38.923Z |