ElevenLabs Design System
Light · Generated 15/04/2026 · 50 colors · 41 type tokens · 56 spacing steps · 2 breakpoints · 7 motion tokens
v1.0.0
Color Palette
Background Colors
Black
#000000
Black 2
#0C0A09
White 3 (base)
#FDFCFC
White 4
#FAF8F8
White 2
#F5F3F1
White
#FFFFFF
Light Gray 2
#EBE8E4
Orange
#FF4704
Blue 3
#0447FF
Text Colors
Dark Gray
#3D3D3D
Dark Gray 2
#57534E
Dark Gray 3
#44403B
Mid Gray
#777169
Mid Gray 2
#A59F97
Red
#F41A2F
Blue
#0A59D2
Dark Blue
#052F70
Border Colors
Light Gray (border)
#E5E5E5
Light Gray 3
#E0DFDD
Dark Orange (shadow)
rgba(78,50,23,.04)
Gradient & Fill Colors
Blue 2
#635BFF
Green
#76B900
Cyan
#00CCBC
Cyan 7
#16E1FF
Dark Blue 2
#1C366A
Cyan 2
#52D0E9
Light Cyan
#ADE8F3
Light Cyan 2
#D8F1F5
Typography
Base Font · Inter (UI body copy)
Inter Light
Generate any voice, clone your own, and build AI voice agents that talk.
Light · 300 Regular · 400 Medium · 500 Bold · 700
Display Font · Waldenburg / WaldenburgHF
Waldenburg
The world's most realistic AI voice platform — built for creators, developers, and enterprises.
Light · 300 Regular · 400 Bold · 700
Display Hero
font-size-6xl · 48px · Light · letter-spacing: −0.96px · line-height: 52px
The Voice AI Platform.
font-size-5xl · 36px · Light · letter-spacing: −0.96px · line-height: 42px
Generate Any Voice
font-size-4xl · 32px · Light · letter-spacing: −0.96px · line-height: 36px
Heading — voice agents and text-to-speech
font-size-3xl · 20px · Regular · line-height: 27px
Build production-ready voice experiences in minutes with our state-of-the-art speech synthesis.
font-size-xl · 16px · Regular · line-height: 24px
Default body copy — the foundational text size used throughout the application interface.
font-size-base · 14px · Regular · line-height: 21px
LABEL · CAPTION · UI ELEMENT
font-size-xs · 12px · Bold · letter-spacing: 0.32px · line-height: 16px
Line Heights
tight
12px
snug
15px
normal
16px
relaxed
18px
loose
19.6px
lh-6
21px
lh-7
22px
lh-8
24px
lh-9
26px
lh-10
27px
lh-12
36px
lh-14
52px
Letter Spacing
Tight Display
letter-spacing-tight
−0.96px · large headings, display
Body Normal
letter-spacing-normal
0.14px · body text, default
LABEL TEXT
letter-spacing-ls-6
0.28px · labels, captions
UI UPPERCASE
letter-spacing-ls-7
0.32px · uppercase UI labels
Spacing
Spacing Scale
56 tokens — 0.5px → 468px
0.5
1
1.5
2
3
3.5
4
6
8
14
16
17
18
19
20
22
24
27
28
32
35
36
40
44
48
56
64
66
72
73
96
120
128
141.5
160
Borders
Border Radii
LG
2px
XL
4px
2XL
7px
R9
8px
R10
10px
R12
12px
R13
16px
R15
20px
R16
24px
R17
30px
R19
50px
R21 / Pill
9999px
Border Widths
Hairline
1px · most common
Thin
2px · emphasis
Base
4px · focus rings, accent bars
The hairline at 1px is used for almost all borders across the system. The base at 4px is reserved for focus indicators and accent decorations.
Shadows / Elevation
Shadow Tokens
6 levels
shadow-sm
Cards, containers
rgba(0,0,0,.06) ring + rgba(0,0,0,.04) 1px/2px lift — the most common elevation
shadow-md
Inputs, buttons
White fill + rgba(0,0,0,.075) 0.5px inset ring — inner shadow for interactive elements
shadow-lg
Dropdowns, popovers
White fill + rgba(0,0,0,.1) 0.5px inset ring — stronger inner definition
shadow-6
Modals, dialogs
Identical to shadow-sm but used independently — ring + light vertical lift
shadow-xl
Tooltips, floats
rgba(0,0,0,.4) 1px outline + rgba(0,0,0,.04) 4px drop — strong border presence
Z-Index
LayerValueUsage
z-1 · Background-10Background decorations, canvas layers behind content
z-2 · Base1Base content layer, default document flow
z-3 · Raised2Slightly elevated UI elements
z-4 · Stack3Stacked interactive elements
z-5 · Navigation10Sticky headers, persistent navigation
z-6 · Dropdown20Dropdowns, context menus, popovers
z-7 · Overlay30Sidebars, drawers, sheet overlays
z-8 · Modal50Modals, dialogs, command palette
z-9 · Toast9998Toast notifications, alerts above all content
z-10 · Top99999Critical system overlays, onboarding
z-11 · Max2147483645Maximum browser z-index — absolute top layer
Breakpoints
📱
breakpoint-xs
480px
Mobile · Small phones and below
🖥️
breakpoint-sm
1024px
Desktop · Primary layout threshold — navigation, content columns
Opacity
Opacity Tokens
5 tokens — 0.1 → 0.8
opacity-10
10%
opacity-40
40%
opacity-50
50%
opacity-60
60%
opacity-80
80%
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-dark-gray--color-black1.93:1Fail
--color-dark-gray--color-white10.86:1AAA
--color-dark-gray--color-white-29.81:1AAA
--color-dark-gray--color-white-310.61:1AAA
--color-dark-gray--color-light-gray-28.89:1AAA
--color-mid-gray--color-black4.35:1AA Large
--color-mid-gray--color-white4.83:1AA
--color-mid-gray--color-white-24.36:1AA Large
--color-mid-gray--color-white-34.71:1AA
--color-mid-gray--color-light-gray-23.95:1AA Large
--color-dark-gray-2--color-black2.75:1Fail
--color-dark-gray-2--color-white7.63:1AAA
--color-dark-gray-2--color-white-26.89:1AA
--color-dark-gray-2--color-white-37.45:1AAA
--color-mid-gray-2--color-black8.01:1AAA
--color-mid-gray-2--color-white2.62:1Fail
--color-mid-gray-2--color-white-32.56:1Fail
--color-red--color-black5.04:1AA
--color-red--color-white4.17:1AA Large
--color-red--color-white-34.07:1AA Large
--color-red--color-light-gray-23.41:1AA Large
CSS Variables Reference
Background Colors
Black--color-black#000000
Black 2--color-black-2#0C0A09
White 3 (eggshell)--color-white-3#FDFCFC
White 4--color-white-4#FAF8F8
White 2--color-white-2#F5F3F1
White--color-white#FFFFFF
Light Gray 2--color-light-gray-2#EBE8E4
White 5 (warm tint)--color-white-5#FFF9F5
White 6 (cool tint)--color-white-6#F5F8FF
Orange--color-orange#FF4704
Blue 3--color-blue-3#0447FF
Text & Border Colors
Dark Gray (primary text)--color-dark-gray#3D3D3D
Dark Gray 2--color-dark-gray-2#57534E
Dark Gray 3--color-dark-gray-3#44403B
Mid Gray--color-mid-gray#777169
Mid Gray 2--color-mid-gray-2#A59F97
Mid Gray 3--color-mid-gray-3#949494
Red (error)--color-red#F41A2F
Blue (link)--color-blue#0A59D2
Dark Blue--color-dark-blue#052F70
Light Gray (border)--color-light-gray#E5E5E5
Light Gray 3--color-light-gray-3#E0DFDD
Typography
Base (Inter)--font-family-baseInter
Display (Waldenburg)--font-family-2Waldenburg
Display HF--font-family-3WaldenburgHF
Mono (Geist Mono)--font-family-5Geist Mono
Light--font-weight-light300
Regular--font-weight-regular400
Medium--font-weight-medium500
Bold--font-weight-bold700
2xs (10px)--font-size-2xs10px
xs (12px)--font-size-xs12px
base (14px)--font-size-base14px
xl (16px)--font-size-xl16px
3xl (20px)--font-size-3xl20px
4xl (32px)--font-size-4xl32px
5xl (36px)--font-size-5xl36px
6xl (48px)--font-size-6xl48px
Tight (−0.96px)--letter-spacing-tight−0.96px
Normal (0.14px)--letter-spacing-normal0.14px
Label (0.32px)--letter-spacing-ls-70.32px
Spacing (selected)
1 (0.5px)--space-10.5px
2 (1px)--space-21px
4 (2px)--space-42px
8 (4px)--space-84px
12 (6px)--space-126px
16 (8px)--space-168px
24 (24px)--space-2424px
27 (28px)--space-2728px
28 (32px)--space-2832px
32 (40px)--space-3240px
34 (48px)--space-3448px
35 (56px)--space-3556px
36 (64px)--space-3664px
43 (96px)--space-4396px
44 (120px)--space-44120px
50 (160px)--space-50160px
Borders & Radius
Hairline--border-width-hairline1px
Thin--border-width-thin2px
Base--border-width-base4px
LG--radius-lg2px
XL--radius-xl4px
2XL--radius-2xl7px
R9--radius-r98px
R12--radius-r1212px
R13--radius-r1316px
R15--radius-r1520px
R16--radius-r1624px
R17--radius-r1730px
R19--radius-r1950px
R21 / Pill--radius-r219999px
Motion, Opacity, Layers & Breakpoints
Instant--duration-instant100ms
Fast--duration-fast150ms
Normal--duration-normal200ms
Slow--duration-slow300ms
Slower--duration-slower360ms
Duration 6--duration-6500ms
Easing--easing-linearlinear
Ghost--opacity-1010%
Dim--opacity-4040%
Half--opacity-5050%
Muted--opacity-6060%
Strong--opacity-8080%
Background--z-1-10
Base--z-21
Navigation--z-510
Dropdown--z-620
Modal--z-850
Toast--z-99998
Max layer--z-112147483645
Mobile--breakpoint-xs480px
Desktop--breakpoint-sm1024px
Design System Preview · ElevenLabs · Generated 15/04/2026 · 50 color tokens · 11 font-size · 5 font-family · 4 font-weight · 14 line-height · 7 letter-spacing · 56 spacing · 21 radius · 3 border-width · 6 shadow · 6 duration · 1 easing · 11 z-index · 2 breakpoints · 5 opacity