ElevenLabs

source

---
name: ElevenLabs
description:
  Whisper-thin Waldenburg-substitute light display on near-white canvas with
  warm stone pill CTAs and multi-layered sub-0.1 opacity shadows.
originalFonts:
  primary: "Waldenburg"
  mono: "Geist Mono"
  fallbacks:
    - "Waldenburg Fallback"
colors:
  background: "#ffffff"
  surface: "#f5f5f5"
  surface-raised: "#f5f2ef"
  ink: "#000000"
  ink-muted: "#4e4e4e"
  accent: "#000000"
  accent-alt: "#777169"
  border: "#e5e5e5"
  link: "#000000"
  focus: "#93c5fd"
  pure-white: "#ffffff"
  light-gray: "#f5f5f5"
  warm-stone: "#f5f2ef"
  black: "#000000"
  dark-gray: "#4e4e4e"
  warm-gray: "#777169"
  near-white: "#f6f6f6"
  grid-cyan: "#7fffff"
  ring-blue: "rgba(147,197,253,0.5)"
  border-light: "#e5e5e5"
  border-subtle: "rgba(0,0,0,0.05)"
typography:
  h1:
    family: "Archivo"
    size: "3rem"
    weight: 300
    lineHeight: 1.08
  h2:
    family: "Archivo"
    size: "2.25rem"
    weight: 300
    lineHeight: 1.17
  h3:
    family: "Archivo"
    size: "2rem"
    weight: 300
    lineHeight: 1.13
  body:
    family: "Inter"
    size: "1.125rem"
    weight: 400
    lineHeight: 1.5
  button:
    family: "Inter"
    size: "0.94rem"
    weight: 500
    lineHeight: 1.47
  caption:
    family: "Inter"
    size: "0.88rem"
    weight: 400
    lineHeight: 1.43
  code:
    family: "JetBrains Mono"
    size: "0.81rem"
    weight: 400
    lineHeight: 1.85
spacing:
  xs: "0.25rem"
  sm: "0.5rem"
  md: "1rem"
  lg: "1.5rem"
  xl: "2.5rem"
rounded:
  sm: "2px"
  md: "8px"
  lg: "16px"
  xl: "9999px"
shadows:
  sm: "rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset"
  md:
    "rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px,
    rgba(0,0,0,0.04) 0px 2px 4px"
  lg: "rgba(78,50,23,0.04) 0px 6px 16px"
components:
  button-primary:
    background: "{colors.ink}"
    color: "#ffffff"
    border: "1px solid {colors.ink}"
    radius: "9999px"
    padding: "0 14px"
  button-secondary:
    background: "rgba(245,242,239,0.8)"
    color: "{colors.ink}"
    border: "none"
    radius: "30px"
    padding: "12px 20px 12px 14px"
  card:
    background: "#ffffff"
    border: "1px solid {colors.border}"
    radius: "{rounded.lg}"
    padding: "1.5rem"
  input:
    background: "#ffffff"
    color: "{colors.ink}"
    border: "1px solid {colors.border}"
    radius: "{rounded.md}"
    padding: "0.75rem 1.25rem"
---

<!-- source: VoltAgent/awesome-design-md @ 80bbbc2 (MIT) — see ATTRIBUTION.md -->

# Design System Inspiration of 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.14px–0.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.14–0.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

## 2. Color Palette & Roles

### Primary

- **Pure White** (`#ffffff`): Primary background, card surfaces, button
  backgrounds
- **Light Gray** (`#f5f5f5`): Secondary surface, subtle section differentiation
- **Warm Stone** (`#f5f2ef`): Button background (at 80% opacity) — the warm
  signature
- **Black** (`#000000`): Primary text, headings, dark buttons

### Neutral Scale

- **Dark Gray** (`#4e4e4e`): Secondary text, descriptions
- **Warm Gray** (`#777169`): Tertiary text, muted links, decorative underlines
- **Near White** (`#f6f6f6`): Alternate light surface

### Interactive

- **Grid Cyan** (`#7fffff`): `--grid-column-bg`, at 25% opacity — decorative
  grid overlay
- **Ring Blue** (`rgb(147 197 253 / 0.5)`): `--tw-ring-color`, focus ring
- **Border Light** (`#e5e5e5`): Explicit borders
- **Border Subtle** (`rgba(0, 0, 0, 0.05)`): Ultra-subtle bottom borders

### Shadows

- **Inset Border** (`rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset`): Internal edge
  definition
- **Inset Dark** (`rgba(0,0,0,0.1) 0px 0px 0px 0.5px inset`): Stronger inset
  variant
- **Outline Ring** (`rgba(0,0,0,0.06) 0px 0px 0px 1px`): Shadow-as-border
- **Soft Elevation** (`rgba(0,0,0,0.04) 0px 4px 4px`): Gentle lift
- **Card Shadow** (`rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px`):
  Button/card elevation
- **Warm Shadow** (`rgba(78,50,23,0.04) 0px 6px 16px`): Warm-tinted button
  shadow
- **Edge Shadow** (`rgba(0,0,0,0.08) 0px 0px 0px 0.5px`): Subtle edge definition
- **Inset Ring** (`rgba(0,0,0,0.1) 0px 0px 0px 1px inset`): Strong inset border

## 3. Typography Rules

### Font Families

- **Display**: `Waldenburg`, fallback: `Waldenburg Fallback`
- **Display Bold**: `WaldenburgFH`, fallback: `WaldenburgFH Fallback`
- **Body / UI**: `Inter`, fallback: `Inter Fallback`
- **Monospace**: `Geist Mono` or
  `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas`

### Hierarchy

| Role             | Font         | Size           | Weight  | Line Height    | Letter Spacing | Notes                       |
| ---------------- | ------------ | -------------- | ------- | -------------- | -------------- | --------------------------- |
| Display Hero     | Waldenburg   | 48px (3.00rem) | 300     | 1.08 (tight)   | -0.96px        | Whisper-thin, ethereal      |
| Section Heading  | Waldenburg   | 36px (2.25rem) | 300     | 1.17 (tight)   | normal         | Light display               |
| Card Heading     | Waldenburg   | 32px (2.00rem) | 300     | 1.13 (tight)   | normal         | Light card titles           |
| Body Large       | Inter        | 20px (1.25rem) | 400     | 1.35           | normal         | Introductions               |
| Body             | Inter        | 18px (1.13rem) | 400     | 1.44–1.60      | 0.18px         | Standard reading text       |
| Body Standard    | Inter        | 16px (1.00rem) | 400     | 1.50           | 0.16px         | UI text                     |
| Body Medium      | Inter        | 16px (1.00rem) | 500     | 1.50           | 0.16px         | Emphasized body             |
| Nav / UI         | Inter        | 15px (0.94rem) | 500     | 1.33–1.47      | 0.15px         | Navigation links            |
| Button           | Inter        | 15px (0.94rem) | 500     | 1.47           | normal         | Button labels               |
| Button Uppercase | WaldenburgFH | 14px (0.88rem) | 700     | 1.10 (tight)   | 0.7px          | `text-transform: uppercase` |
| Caption          | Inter        | 14px (0.88rem) | 400–500 | 1.43–1.50      | 0.14px         | Metadata                    |
| Small            | Inter        | 13px (0.81rem) | 500     | 1.38           | normal         | Tags, badges                |
| Code             | Geist Mono   | 13px (0.81rem) | 400     | 1.85 (relaxed) | normal         | Code blocks                 |
| Micro            | Inter        | 12px (0.75rem) | 500     | 1.33           | normal         | Tiny labels                 |
| Tiny             | Inter        | 10px (0.63rem) | 400     | 1.60 (relaxed) | normal         | Fine print                  |

### Principles

- **Light as the hero weight**: Waldenburg at 300 is the defining typographic
  choice. Where other design systems use bold for impact, ElevenLabs uses
  lightness — thin strokes that feel like audio waveforms, creating intrigue
  through restraint.
- **Positive letter-spacing on body**: Inter uses +0.14px to +0.18px tracking
  across body text, creating an airy, well-spaced reading rhythm that contrasts
  with the tight display tracking (-0.96px).
- **WaldenburgFH for emphasis**: A bold (700) uppercase variant of Waldenburg
  appears only in specific CTA button labels with 0.7px letter-spacing — the one
  place where the type system gets loud.
- **Monospace as ambient**: Geist Mono at relaxed line-height (1.85) for code
  blocks feels unhurried and readable.

## 4. Component Stylings

### Buttons

**Primary Black Pill**

- Background: `#000000`
- Text: `#ffffff`
- Padding: 0px 14px
- Radius: 9999px (full pill)
- Use: Primary CTA

**White Pill (Shadow-bordered)**

- Background: `#ffffff`
- Text: `#000000`
- Radius: 9999px
- Shadow: `rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px`
- Use: Secondary CTA on white

**Warm Stone Pill**

- Background: `rgba(245, 242, 239, 0.8)` (warm translucent)
- Text: `#000000`
- Padding: 12px 20px 12px 14px (asymmetric)
- Radius: 30px
- Shadow: `rgba(78, 50, 23, 0.04) 0px 6px 16px` (warm-tinted)
- Use: Featured CTA, hero action — the signature warm button

**Uppercase Waldenburg Button**

- Font: WaldenburgFH 14px weight 700
- Text-transform: uppercase
- Letter-spacing: 0.7px
- Use: Specific bold CTA labels

### Cards & Containers

- Background: `#ffffff`
- Border: `1px solid #e5e5e5` or shadow-as-border
- Radius: 16px–24px
- Shadow: multi-layer stack (inset + outline + elevation)
- Content: product screenshots, code examples, audio waveform previews

### Inputs & Forms

- Textarea: padding 12px 20px, transparent text at default
- Select: white background, standard styling
- Radio: standard with tw-ring focus
- Focus: `var(--tw-ring-offset-shadow)` ring system

### Navigation

- Clean white sticky header
- Inter 15px weight 500 for nav links
- Pill CTAs right-aligned (black primary, white secondary)
- Mobile: hamburger collapse at 1024px

### Image Treatment

- Product screenshots and audio waveform visualizations
- Warm gradient backgrounds in feature sections
- 20px–24px radius on image containers
- Full-width sections alternating white and light gray

### Distinctive Components

**Audio Waveform Sections**

- Colorful gradient backgrounds showcasing voice AI capabilities
- Warm amber, blue, and green gradients behind product demos
- Screenshots of the ElevenLabs product interface

**Warm Stone CTA Block**

- `rgba(245,242,239,0.8)` background with warm shadow
- Asymmetric padding (more right padding)
- Creates a physical, tactile quality unique to ElevenLabs

## 5. Layout Principles

### Spacing System

- Base unit: 8px
- Scale: 1px, 3px, 4px, 8px, 9px, 10px, 11px, 12px, 16px, 18px, 20px, 24px,
  28px, 32px, 40px

### Grid & Container

- Centered content with generous max-width
- Single-column hero, expanding to feature grids
- Full-width gradient sections for product showcases
- White card grids on light gray backgrounds

### Whitespace Philosophy

- **Apple-like generosity**: Massive vertical spacing between sections creates a
  premium, unhurried pace. Each section is an exhibit.
- **Warm emptiness**: The whitespace isn't cold — the warm stone undertones and
  warm shadows give empty space a tactile, physical quality.
- **Typography-led rhythm**: The light-weight Waldenburg headings create visual
  "whispers" that draw the eye through vast white space.

### Border Radius Scale

- Minimal (2px): Small links, inline elements
- Subtle (4px): Nav items, tab panels, tags
- Standard (8px): Small containers
- Comfortable (10px–12px): Medium cards, dropdowns
- Card (16px): Standard cards, articles
- Large (18px–20px): Featured cards, code panels
- Section (24px): Large panels, section containers
- Warm Button (30px): Warm stone CTA
- Pill (9999px): Primary buttons, navigation pills

## 6. Depth & Elevation

| Level                  | Treatment                                                                                            | Use                               |
| ---------------------- | ---------------------------------------------------------------------------------------------------- | --------------------------------- |
| Flat (Level 0)         | No shadow                                                                                            | Page background, text blocks      |
| Inset Edge (Level 0.5) | `rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset, #fff 0px 0px 0px 0px inset`                              | Internal border definition        |
| Outline Ring (Level 1) | `rgba(0,0,0,0.06) 0px 0px 0px 1px` + `rgba(0,0,0,0.04) 0px 1px 2px` + `rgba(0,0,0,0.04) 0px 2px 4px` | Shadow-as-border for cards        |
| Card (Level 2)         | `rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px`                                          | Button elevation, prominent cards |
| Warm Lift (Level 3)    | `rgba(78,50,23,0.04) 0px 6px 16px`                                                                   | Featured CTAs — warm-tinted       |
| Focus (Accessibility)  | `var(--tw-ring-offset-shadow)` blue ring                                                             | Keyboard focus                    |

**Shadow Philosophy**: ElevenLabs uses the most refined shadow system of any
design system analyzed. Every shadow is at sub-0.1 opacity, many include both
outward cast AND inward inset components, and the warm CTA shadows use an actual
warm color (`rgba(78,50,23,...)`) rather than neutral black. The inset
half-pixel borders (`0px 0px 0px 0.5px inset`) create edges so subtle they're
felt rather than seen — surfaces define themselves through the lightest possible
touch.

## 7. Do's and Don'ts

### Do

- Use Waldenburg weight 300 for all display headings — the lightness IS the
  brand
- Apply multi-layer shadows (inset + outline + elevation) at sub-0.1 opacity
- Use warm stone tints (`#f5f2ef`, `rgba(245,242,239,0.8)`) for featured
  elements
- Apply positive letter-spacing (+0.14px to +0.18px) on Inter body text
- Use 9999px radius for primary buttons — pill shape is standard
- Use warm-tinted shadows (`rgba(78,50,23,0.04)`) on featured CTAs
- Keep the page predominantly white with subtle gray section differentiation
- Use WaldenburgFH bold uppercase ONLY for specific CTA button labels

### Don't

- Don't use bold (700) Waldenburg for headings — weight 300 is non-negotiable
- Don't use heavy shadows (>0.1 opacity) — the ethereal quality requires
  whisper-level depth
- Don't use cool gray borders — the system is warm-tinted throughout
- Don't skip the inset shadow component — half-pixel inset borders define edges
- Don't apply negative letter-spacing to body text — Inter uses positive
  tracking
- Don't use sharp corners (<8px) on cards — the generous radius is structural
- Don't introduce brand colors — the palette is intentionally achromatic with
  warm undertones
- Don't make buttons opaque and heavy — the warm translucent stone treatment is
  the signature

## 8. Responsive Behavior

### Breakpoints

| Name    | Width   | Key Changes                                     |
| ------- | ------- | ----------------------------------------------- |
| Mobile  | <1024px | Single column, hamburger nav, stacked sections  |
| Desktop | >1024px | Full layout, horizontal nav, multi-column grids |

### Touch Targets

- Pill buttons with generous padding (12px–20px)
- Navigation links at 15px with adequate spacing
- Select dropdowns maintain comfortable sizing

### Collapsing Strategy

- Navigation: horizontal → hamburger at 1024px
- Feature grids: multi-column → stacked
- Hero: maintains centered layout, font scales proportionally
- Gradient sections: full-width maintained, content stacks
- Spacing compresses proportionally

### Image Behavior

- Product screenshots scale responsively
- Gradient backgrounds simplify on mobile
- Audio waveform previews maintain aspect ratio
- Rounded corners maintained across breakpoints

## 9. Agent Prompt Guide

### Quick Color Reference

- Background: Pure White (`#ffffff`) or Light Gray (`#f5f5f5`)
- Text: Black (`#000000`)
- Secondary text: Dark Gray (`#4e4e4e`)
- Muted text: Warm Gray (`#777169`)
- Warm surface: Warm Stone (`rgba(245, 242, 239, 0.8)`)
- Border: `#e5e5e5` or `rgba(0,0,0,0.05)`

### Example Component Prompts

- "Create a hero on white background. Headline at 48px Waldenburg weight 300,
  line-height 1.08, letter-spacing -0.96px, black text. Subtitle at 18px Inter
  weight 400, line-height 1.60, letter-spacing 0.18px, #4e4e4e text. Two pill
  buttons: black (9999px, 0px 14px padding) and warm stone
  (rgba(245,242,239,0.8), 30px radius, 12px 20px padding, warm shadow
  rgba(78,50,23,0.04) 0px 6px 16px)."
- "Design a card: white background, 20px radius. Shadow: rgba(0,0,0,0.06) 0px
  0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.04) 0px 2px 4px. Title
  at 32px Waldenburg weight 300, body at 16px Inter weight 400 letter-spacing
  0.16px, #4e4e4e."
- "Build a white pill button: white bg, 9999px radius. Shadow: rgba(0,0,0,0.4)
  0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px. Text at 15px Inter weight 500."
- "Create an uppercase CTA label: 14px WaldenburgFH weight 700, text-transform
  uppercase, letter-spacing 0.7px."
- "Design navigation: white sticky header. Inter 15px weight 500. Black pill CTA
  right-aligned. Border-bottom: rgba(0,0,0,0.05)."

### Iteration Guide

1. Start with white — the warm undertone comes from shadows and stone surfaces,
   not backgrounds
2. Waldenburg 300 for headings — never bold, the lightness is the identity
3. Multi-layer shadows: always include inset + outline + elevation at sub-0.1
   opacity
4. Positive letter-spacing on Inter body (+0.14px to +0.18px) — the airy reading
   quality
5. Warm stone CTA is the signature — `rgba(245,242,239,0.8)` with
   `rgba(78,50,23,0.04)` shadow
6. Pill (9999px) for buttons, generous radius (16px–24px) for cards