# Design Reference - ElevenLabs
> 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.

## Source
- Original site: https://elevenlabs.io
- Captured: 2026-04-11T22:12:51.895Z

## Tags
- achromatic
- type-first
- custom-serif
- pill-buttons
- warm-white
- editorial
- restrained-color
- voice-ai
- product-ui
- high-contrast

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Eggshell | `#fdfcfc` | neutral | Page background and primary surface — the near-white warmth distinguishes this from pure #ffffff, landing type with extra weight |
| Powder | `#f5f3f1` | neutral | Secondary surface, hover states, subtle section backgrounds |
| Chalk | `#e5e5e5` | neutral | All borders, dividers, card outlines, button outlines — the single border color used universally |
| Fog | `#b1b0b0` | neutral | Disabled states, placeholder elements, logo grid grayscale treatment |
| Gravel | `#777169` | neutral | Secondary body text, nav items, subheadings, captions — warm stone undertone separates it from a cold gray |
| Slate | `#a59f97` | neutral | Tertiary text, icon strokes, deemphasized labels |
| Cinder | `#57534` | neutral | Mid-tone text, secondary headings on light surfaces |
| Obsidian | `#000000` | neutral | Primary text, filled CTA buttons (background), logo mark — the absolute black against eggshell creates 20.5:1 contrast |
| Signal Blue | `#0447ff` | accent | ElevenAgents product dot / brand avatar accent — appears only in small circular UI elements, not in text or buttons |
| Ember | `#ff4704` | accent | ElevenCreative product dot / brand avatar accent — small circular UI indicator only |
| Voice Spectrum | `#3d75d8` | brand | Logo mark conic gradient — the spinning blue-cyan wheel that is the ElevenLabs logomark |

## Typography
- role: All display and section headlines. Weight 300 is the signature move — a light-weight custom serif for an AI platform inverts every SaaS convention of bold grotesque headlines. At 48px with -0.02em tracking the letters breathe and lean slightly classical. No substitute fully captures it.; sizes: 32px, 36px, 48px; family: Waldenburg; weight: 300; lineHeight: 1.08–1.17; substitute: Cormorant Garamond 300, or Libre Baskerville 300; letterSpacing: -0.64px at 32px, -0.72px at 36px, -0.96px at 48px
- role: Navigation product labels (ElevenCreative, ElevenAgents, ElevenAPI) and icon badges. The 0.05em wide tracking at weight 700 creates a compressed, stamp-like label style — tight caps energy in a small footprint.; sizes: 14px; family: WaldenburgFH; weight: 700; lineHeight: 1.10; substitute: Inter 700 with letter-spacing 0.7px; letterSpacing: 0.7px at 14px
- role: All body copy, UI labels, navigation, buttons, captions, footer. Weight 400 for body and descriptive text; weight 500 for interactive labels and emphasis. The 0.01em letter-spacing is a subtle open tracking that keeps small sizes legible on eggshell.; sizes: 10px, 12px, 13px, 14px, 15px, 16px, 18px, 20px; family: Inter; weight: 400, 500; lineHeight: 1.0–2.06; substitute: Inter (Google Fonts); letterSpacing: 0.1px–0.2px across all sizes; fontFeatureSettings: "kern" 1
- role: Code snippets, technical annotations, voice-text preview inline markers like [sarcastic] and [whispers]. Monospace signals machine-generated or technical content within prose.; sizes: 13px; family: Geist Mono; weight: 400; lineHeight: 1.69; substitute: JetBrains Mono 400, or IBM Plex Mono 400

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "tags": "9999px",
      "cards": "16px",
      "badges": "12px",
      "inputs": "4px",
      "modals": "24px",
      "panels": "20px",
      "buttons": "9999px"
    },
    "elementGap": "8-12px",
    "sectionGap": "80-120px",
    "cardPadding": "16-24px",
    "pageMaxWidth": "1200px"
  },
  "radius": {
    "tags": "9999px",
    "cards": "16px",
    "badges": "12px",
    "inputs": "4px",
    "modals": "24px",
    "panels": "20px",
    "buttons": "9999px"
  }
}
```

## Component Patterns
- name: CTA Button Group
- name: Product Demo Card — Voice List
- name: Social Proof Logo Grid
- name: Primary Pill Button (Filled); role: Primary CTA — Sign up, Play, Submit
- name: Ghost Pill Button (Outline); role: Secondary actions — Contact sales, Log in, Read all stories
- name: Rounded Outline Button (Tab/Toggle); role: Segmented control tabs — ElevenCreative, ElevenAgents, ElevenAPI selector
- name: Compact Action Button; role: Inline UI actions — pagination arrows, expand/collapse controls
- name: Product Demo Card; role: Interactive voice-player UI card embedded in hero section
- name: Voice List Item; role: Individual voice selection row inside demo card
- name: Navigation Bar; role: Top global navigation
- name: Section Divider Label; role: Eyebrow text above section headings
- name: Text Input (Transparent); role: Inline text editors and search fields
- name: Text Input (Contained); role: Form inputs with white background
- name: Feature Platform Card (Ghost); role: Two-column product description cards — ElevenCreative / ElevenAgents

## Do
- Use Waldenburg 300 with -0.02em letter-spacing for all headings at 32px and above — never substitute a heavier weight.
- Apply 9999px border-radius to every button and pill tag; use 16-20px for cards and panels; use 0px for bare input fields.
- Keep the entire color palette at near-zero saturation: #000000 text, #fdfcfc background, #e5e5e5 borders, #777169 secondary text. Reserve #ff4704 and #0447ff for product avatar dots only.
- Use the inset shadow rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset on white UI surfaces that sit on eggshell — it replaces border outlines on cards without adding visual weight.
- Use Geist Mono 400 13px only for machine-generated or technical inline annotations (e.g. [whispers], [sarcastic]) and code snippets.
- Render all third-party logos in the social proof grid at #b1b0b0 (Fog) with no hover color change — chromatic logos break the achromatic discipline.
- Size section gaps at 80-120px vertical spacing between major content blocks; use 8-12px for element-level gaps within components.

## Don't
- Never use a weight above 300 for Waldenburg display headlines — weight 700 belongs only to WaldenburgFH product-label contexts at 14px.
- Never introduce saturated color for text, background fills, or buttons — the Signal Blue #0447ff and Ember #ff4704 are reserved exclusively for 8-16px avatar/dot indicators.
- Never apply box-shadow elevation larger than rgba(0,0,0,0.4) 0px 0px 1.143px — ElevenLabs cards float by 1px shadow, not by depth layering.
- Never use a pure white #ffffff background for page surfaces — use #fdfcfc (Eggshell) for all base surfaces to preserve the warm papery ground.
- Never place Inter body text below 13px in product UI contexts or below 14px in marketing prose — the 0.01em tracking needs minimum size to work.
- Never use more than two button variants in the same visual cluster — one filled black pill (primary) + one white ghost pill (secondary) is the maximum combination.
- Never apply border-radius to input fields — inputs use 0px radius, creating an editorial underline-or-box distinction from the rounded interactive elements.