# Design System Inspiration of ElevenLabs

Voice-AI brand reading like an editorial magazine. Off-white canvas, Waldenburg Light at weight 300, pastel gradient orbs as the only color moments.

01 — Color Palette

## Off-white canvas, ink primary, atmospheric pastels

No saturated brand action color. Single ink-pill primary; five pastel gradient orbs as decorative atmosphere only.

### Brand

primary (Ink)
#292524
Ink pill — primary CTA.
primary-active
#0c0a09
Press state.

### Surface

canvas
#f5f5f5
Off-white page floor.
canvas-soft
#fafafa
Subtle alternating band.
surface-card
#ffffff
Pure white card.
surface-strong
#f0efed
Badges, voice icon plates.
surface-dark
#0c0a09
Dark CTA bands, featured pricing.

### Text & Hairlines

ink
#0c0a09
Display, primary text.
body
#4e4e4e
Default running-text.
muted
#777169
Sub-titles, captions.
muted-soft
#a8a29e
Disabled text.
hairline
#e7e5e4
1px divider.
hairline-strong
#d6d3d1
Stronger panel outline.

### Atmospheric Gradient Stops (signature)

gradient-mint
#a7e5d3
Mint orb. Atmosphere only.
gradient-peach
#f4c5a8
Peach orb.
gradient-lavender
#c8b8e0
Lavender orb.
gradient-sky
#a8c8e8
Sky-blue orb.
gradient-rose
#e8b8c4
Rose orb.

### Semantic

success
#16a34a
Confirmation.
error
#dc2626
Validation errors.
02 — Typography

## Waldenburg Light 300 + Inter

Display weight stays at 300. Body Inter at +0.15-0.18px tracking — slightly looser than default for an editorial dialect.

display-mega64px / 300 / 1.05 / -1.92px (Waldenburg)
Bringing technology to life
display-xl48px / 300 / 1.08 / -0.96px
Two patterns, built to the same research foundation
display-lg36px / 300 / 1.17 / -0.36px
Section heading
display-md32px / 300 / 1.13 / -0.32px
Sub-section heading
title-md20px / 500 / 1.35 (Inter)
Component title
body-md16px / 400 / 1.5 / 0.16px
Default body Inter at +0.16px tracking — slightly looser than default.
body-sm15px / 400 / 1.47 / 0.15px
Footer body.
caption-uppercase12px / 600 / 1.4 / 0.96px
Section label
button15px / 500 / 1.0
Try free
nav-link15px / 500 / 1.4
Creative · Agents · Video · Pricing
03 — Buttons

## Subtle pill geometry

Ink pill primary, transparent outline secondary. No saturated CTA color.

button-primary
Ink pill / 9999px / 40px
button-primary-active
Pure black press state.
button-outline
Transparent + 1px hairline border.
button-tertiary-text
Inline ink text.
04 — Atmospheric Gradient Orbs (signature)

## Pastel orbs as decoration only

Five gradient stops drift through the page as soft radial blooms. Never used as button fills, text colors, or component backgrounds — pure atmosphere.

Mint orb
Peach orb
Lavender orb
Sky orb
Rose orb
05 — Audio Waveform Card

## Voice preview component

A horizontal card with circular play button, ink-tinted waveform glyph, and voice metadata.

Rachel — calm narrator
English (American) · Adult · Studio
06 — Voice List

## Voice library rows

Hairline-divided rows with circular voice icon, name + accent, and preview button.

RA
Rachel
English (American) · Adult
DA
Daniel
English (British) · Adult
SO
Sofia
Spanish · Young Adult
YU
Yuki
Japanese · Adult
07 — Feature Cards

## 3-up benefit grid

#### Studio quality

Generate broadcast-grade voice from a few seconds of reference audio.

#### 30+ languages

One model, every language. Native fluency without retraining.

#### Real-time API

Stream voice with sub-300ms latency for live applications.

08 — Pricing Tiers

## Featured tier inverts to dark

Visual inversion signals "highlighted choice" without colored ribbons.

#### Starter

$5/mo

- 30,000 characters
- 10 voices
- Commercial license

#### Creator

$22/mo

- 100,000 characters
- 30 voices
- Voice cloning
- Commercial license

#### Pro

$99

- 500,000 characters
- Unlimited voices
- Pro voice cloning
- 96kHz studio quality

09 — Forms

## Inputs

Email
Workspace
API key
10 — Badges

Small uppercase pills.

NewBetaProEnterprise
11 — Spacing Scale

4px base, 96px section rhythm.

xxs · 4
xs · 8
sm · 12
base · 16
md · 20
lg · 24
xl · 32
xxl · 48
section · 96
12 — Border Radius

Pill for CTAs and badges, 16-24px for cards, 9999px for voice icons.

0 · none
4 · xs
6 · sm
8 · md
12 · lg
16 · xl
24 · xxl
pill
13 — Elevation & Depth

Hairline + soft drop. Atmospheric depth comes from gradient orbs.

##### Flat / Canvas

Body bands, footer.

##### Card

White card with 1px hairline border.

##### Soft drop

0 4px 16px rgba(0,0,0,0.04). Single shadow tier.

##### Gradient orb

Atmospheric depth — never a card surface.

14 — Responsive Behavior

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.

375
mobile
640
small
768
tablet
1024
laptop
1280
desktop

#### Touch Targets

- Primary pill at 40px height — at WCAG AA, padded for AAA.
- Voice icon circles 32px — padded row creates effective 48px tap zone.

#### Collapsing Strategy

- Top nav switches to hamburger below 768px.
- Feature grid: 3-up → 2-up → 1-up.
- Gradient orbs reduce diameter at every breakpoint but never disappear.