Elevenlabs Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

24tokens

11type steps

7radius steps

4pxspacing base

Elevenlabs, in one page

ElevenLabs reads like a quietly editorial print magazine that happens to be a voice-AI product. The base canvas is off-white {colors.canvas} (#f5f5f5) holding warm near-black ink {colors.ink} (#0c0a09). The brand voltage is photographic, not chromatic: soft pastel atmospheric gradient orbs (mint, peach, lavender, sky, rose) drift through the page as the only "color" moments. There is no neon accent, no saturated CTA color, no dark-canvas dev-tools atmosphere.

Type pairs Waldenburg Light (custom serif at weight 300) for display with Inter for body, navigation, captions. The display weight at 300 is the editorial signature — never bold, never heavy.

CTAs are subtle: a near-black ink pill ({component.button-primary}) is the primary, a transparent outline ({component.button-outline}) is the secondary. The brand trusts atmospheric photography and modest type weights to carry brand work.

Key Characteristics:

Off-white canvas, warm near-black ink. No saturated CTA color.
Single primary action: ink pill at {rounded.pill}. Atmospheric gradients carry visual brand voltage.
Display runs Waldenburg Light at weight 300 — editorial magazine voice.
Body runs Inter at 400 with subtle letter-spacing (+0.15-0.18px).
Pastel gradient orbs (5 tokens: mint, peach, lavender, sky, rose) used as atmospheric brand decoration only.
Soft pill geometry ({rounded.pill} for CTAs, {rounded.xl} for cards).
96px section rhythm.

Do's and don'ts

Do

Reserve {colors.primary} (ink pill) for primary CTAs.
Use Waldenburg Light at weight 300 for every display headline. Never bold.
Use Inter at +0.15-0.18px tracking for body — the editorial dialect.
Use atmospheric gradient orbs (mint/peach/lavender/sky/rose) as decoration only.
Use the pill shape for every CTA and badge.

Don't

Don't introduce a saturated brand action color. Ink pill is the only CTA color.
Don't bold display copy. Display sits at weight 300 — bolding shifts the brand voice from editorial to consumer-marketing.
Don't use gradient orbs as button fills, text colors, or component backgrounds. They are pure atmosphere.
Don't use sharp {rounded.none} (0px) on CTAs. Pill geometry is the brand button.
Don't drop body Inter to weight 300 to match Waldenburg — body stays at 400/500 for legibility.
Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA color is what appears on actual product CTAs.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Elevenlabs design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #292524
- primary-active: #0c0a09
- ink: #0c0a09
- body: #4e4e4e
- body-strong: #292524
- muted: #777169
- muted-soft: #a8a29e
- hairline: #e7e5e4
- hairline-soft: #f0efed
- hairline-strong: #d6d3d1

Type:
- families: Waldenburg, Times New Roman, Inter, Waldenburg Light
- scale: 12, 14, 15, 16, 18, 20, 24, 32, 36
- weights: 300, 400, 500, 600

Shape:
- radius: 0, 4, 6, 8, 12, 16, 24

Spacing: 4, 8, 10, 12, 16, 20, 24, 32, 48, 96

Rules:
- Reserve `{colors.primary}` (ink pill) for primary CTAs.
- Use Waldenburg Light at weight 300 for every display headline. Never bold.
- Use Inter at +0.15-0.18px tracking for body — the editorial dialect.
- Use atmospheric gradient orbs (mint/peach/lavender/sky/rose) as decoration only.
- Use the pill shape for every CTA and badge.

Avoid:
- Don't introduce a saturated brand action color. Ink pill is the only CTA color.
- Don't bold display copy. Display sits at weight 300 — bolding shifts the brand voice from editorial to consumer-marketing.
- Don't use gradient orbs as button fills, text colors, or component backgrounds. They are pure atmosphere.
- Don't use sharp `{rounded.none}` (0px) on CTAs. Pill geometry is the brand button.
- Don't drop body Inter to weight 300 to match Waldenburg — body stays at 400/500 for legibility.
- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA color is what appears on actual product CTAs.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Brand & Accent

Ink Primary ({colors.primary} — #292524): The primary action color — warm near-black pill. Used scarcely.
Ink Primary Active ({colors.primary-active} — #0c0a09): Press state.

Surface

Canvas ({colors.canvas} — #f5f5f5): Off-white page floor.
Canvas Soft ({colors.canvas-soft} — #fafafa): Lighter band for subtle alternating sections.
Canvas Deep ({colors.canvas-deep} — #0c0a09): Same as ink — used for the rare dark-mode hero (Agents page).
Surface Card ({colors.surface-card} — #ffffff): Pure white card.
Surface Strong ({colors.surface-strong} — #f0efed): Badges, voice-icon plates.
Surface Dark ({colors.surface-dark} — #0c0a09): Dark hero/CTA band canvas.
Surface Dark Elevated ({colors.surface-dark-elevated} — #1c1917): Cards on dark canvas.

Hairlines

Hairline ({colors.hairline} — #e7e5e4): Default 1px divider.
Hairline Soft ({colors.hairline-soft} — #f0efed): Lighter divider.
Hairline Strong ({colors.hairline-strong} — #d6d3d1): Stronger panel outline.

Text

Ink ({colors.ink} — #0c0a09): Display, primary text.
Body ({colors.body} — #4e4e4e): Default running-text.
Body Strong ({colors.body-strong} — #292524): Same as primary — emphasis.
Muted ({colors.muted} — #777169): Sub-titles.
Muted Soft ({colors.muted-soft} — #a8a29e): Disabled text.
On Primary ({colors.on-primary} — #ffffff): White text on ink pill.
On Dark ({colors.on-dark} — #ffffff): White text on dark hero.
On Dark Soft ({colors.on-dark-soft} — #a8a29e): Muted off-white on dark.

Atmospheric Gradient Stops (signature)

Gradient Mint ({colors.gradient-mint} — #a7e5d3): Mint green orb.
Gradient Peach ({colors.gradient-peach} — #f4c5a8): Peach orb.
Gradient Lavender ({colors.gradient-lavender} — #c8b8e0): Lavender orb.
Gradient Sky ({colors.gradient-sky} — #a8c8e8): Sky-blue orb.
Gradient Rose ({colors.gradient-rose} — #e8b8c4): Rose orb.

These appear ONLY as soft radial-gradient atmospheric orbs inside {component.gradient-orb-card} and as background atmospheric blooms behind hero copy. Never as button fills, never as text colors.

Semantic

Success ({colors.semantic-success} — #16a34a): Confirmation.
Error ({colors.semantic-error} — #dc2626): Validation errors.

Type scaleRead the full spec

Font Family

Waldenburg Light is the licensed display serif at weight 300. Inter carries body, navigation, captions, and buttons. Fallback: 'Times New Roman', serif for Waldenburg, sans-serif for Inter.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-mega}`	64px	300	1.05	-1.92px	Homepage hero h1
`{typography.display-xl}`	48px	300	1.08	-0.96px	Subsidiary heroes
`{typography.display-lg}`	36px	300	1.17	-0.36px	Section heads
`{typography.display-md}`	32px	300	1.13	-0.32px	Sub-section heads
`{typography.display-sm}`	24px	300	1.2	0	Card group titles
`{typography.title-md}`	20px	500	1.35	0	Component titles — Inter
`{typography.title-sm}`	18px	500	1.44	0.18px	List labels
`{typography.body-md}`	16px	400	1.5	0.16px	Default body — Inter
`{typography.body-strong}`	16px	500	1.5	0.16px	Emphasized body
`{typography.body-sm}`	15px	400	1.47	0.15px	Footer body
`{typography.caption}`	14px	400	1.5	0	Photo captions
`{typography.caption-uppercase}`	12px	600	1.4	0.96px	Section labels, badges
`{typography.button}`	15px	500	1.0	0	CTA pill
`{typography.nav-link}`	15px	500	1.4	0	Top-nav menu

Principles

Display weight stays at 300. Waldenburg Light is the editorial signature. Never bold display copy.
Subtle letter-spacing on body. Inter at +0.15-0.18px tracking — slightly looser than default Inter for a more editorial feel.
Negative letter-spacing on display. Waldenburg pulls -0.32px to -1.92px tighter on display sizes.

Note on Font Substitutes

Waldenburg is licensed. Open-source substitute: EB Garamond at weight 300 (slightly more humanist) or GT Sectra (closer to Waldenburg's modernity). Use Inter directly for body — it's the same family ElevenLabs uses.

Components and layoutRead the full spec

Top Navigation

top-nav — Background {colors.canvas}, text {colors.ink}, height 64px. Layout: ElevenLabs wordmark left, primary horizontal menu (Creative / Agents / Video / Pricing / Enterprise / Docs), Sign In + "Try free" primary CTA right.

Buttons

button-primary — Near-black ink pill. Background {colors.primary}, text {colors.on-primary}, type {typography.button} (15px / 500), padding 10px × 20px, height 40px, rounded {rounded.pill}.

button-primary-active — Press state. Background {colors.primary-active}.

button-outline — Transparent pill with 1px ink border. Background transparent, text {colors.ink}, 1px {colors.hairline-strong} border.

button-tertiary-text — Inline ink text link.

Hero & Atmospheric

hero-band — Background {colors.canvas}, full-width display headline in {typography.display-mega} (64px / 300 / -1.92px), subhead in {typography.body-md}, two CTAs, and an atmospheric gradient orb behind the centered headline.

gradient-orb-card — A large card with a soft radial-gradient orb behind centered display copy. Background {colors.canvas-soft}, rounded {rounded.xxl} (24px), padding 32px. Each variant uses one of the five gradient tokens (gradient-mint, gradient-peach, gradient-lavender, gradient-sky, gradient-rose).

audio-waveform-card — A waveform visualization card. Background {colors.surface-card}, rounded {rounded.xl}, padding 24px. Holds a play button + waveform glyph + voice metadata.

Cards

feature-card — 2-up or 3-up grids. Background {colors.surface-card}, text {colors.ink}, rounded {rounded.xl}, padding 24px, 1px hairline border.

product-card-stack — Stacked product preview cards. Background {colors.surface-card}, rounded {rounded.xl}, no padding (children fill the card edge-to-edge).

testimonial-card — Quote card. Background {colors.surface-card}, text {colors.body}, rounded {rounded.xl}, padding 32px.

Voice Library

voice-row — Horizontal row in voice list. Background transparent, 1px hairline divider. Layout: 32px circular voice icon ({component.voice-icon-circular}) left, voice name + accent stack, optional preview button right.

voice-icon-circular — Background {colors.surface-strong}, rounded {rounded.full}, 32px diameter. Holds initials or voice glyph.

Pricing

pricing-tier-card — Background {colors.surface-card}, rounded {rounded.xl}, padding 32px, 1px hairline border.

pricing-tier-featured — Featured tier inverts. Background {colors.surface-dark}, text {colors.on-dark}. Same shape, dark inversion.

Forms & Tags

text-input — Background {colors.surface-card}, text {colors.ink}, rounded {rounded.md} (8px), padding 12px × 16px, height 44px, 1px {colors.hairline-strong} border. On focus, border thickens to 2px ink.

badge-pill — Background {colors.surface-strong}, text {colors.ink}, type {typography.caption-uppercase}, rounded {rounded.pill}, padding 4px × 10px.

Responsive behaviourRead the full spec

Breakpoints

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.

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.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-elevenlabs {--page-bg: #f5f5f5;
  --page-bg-gradient: none;
  --text-color: #0c0a09;
  --heading-color: #0c0a09;
  --link-color: #292524;
  --link-hover-color: #0e0c0c;
  --border-color: #cbcbcb;
  --card-bg: #f5f5f5;
  --card-shadow: 0 1px 2px rgba(12,10,9,0.06);
  --card-hover-shadow: 0 6px 18px rgba(12,10,9,0.12);
  --header-bg: #0c0a09;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #f5f5f5;
  --footer-text-color: #5e5c5c;
  --button-bg: #292524;
  --button-text-color: #ffffff;
  --button-hover-bg: #0e0c0c;
  --button-border: none;
  --button-border-radius: 8px;
  --button-secondary-bg: #e7e7e7;
  --button-secondary-text-color: #0c0a09;
  --button-secondary-hover-bg: #d9d9d9;
  --button-secondary-border: 1px solid #cbcbcb;
  --prompt-bg: #e9e9e9;
  --prompt-text-color: #0c0a09;
  --base-font: var(--font-serif);
  --heading-font: var(--font-inter);
  --card-border-radius: 8px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

cursor 85.7%
cal 82.7%
intercom 80.6%
expo 79.0%
vercel 78.1%

Where this came from

Source document: volt/design-md/elevenlabs/DESIGN.md · 20.3 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.