What is ElevenLabs' primary brand color?

ElevenLabs has no saturated brand color. The primary action is a warm near-black ink pill at #292524 (press state #0c0a09), used scarcely — most pages are off-white #f5f5f5 with warm near-black ink. The brand voltage comes from pastel atmospheric gradient orbs (mint #a7e5d3, peach #f4c5a8, lavender #c8b8e0, sky #a8c8e8, rose #e8b8c4), but these only appear as soft radial blooms behind hero copy. They are never used as button fills, text colors, or component backgrounds.

Does ElevenLabs' design system have a dark mode?

Not in the conventional sense. The default canvas is off-white #f5f5f5 and that carries 95% of marketing surfaces. There is a single dark-mode hero on the Agents page that uses #0c0a09 (canvas-deep) with white text and a #1c1917 elevated card surface — a deliberate exception rather than a paired dark mode. The system documents both light and dark surface tokens (surface-dark, surface-dark-elevated, on-dark, on-dark-soft) so dark sections compose cleanly when they do appear, including the featured pricing tier that inverts to dark.

What typography does ElevenLabs use, and what should I substitute?

Display runs Waldenburg Light, a licensed serif held at weight 300 across all five display sizes (24px → 64px). Body, navigation, captions, and buttons all run Inter at weight 400 or 500. Waldenburg is licensed, so open-source substitutes are EB Garamond at weight 300 (slightly more humanist) or GT Sectra (closer to Waldenburg's modernity). Inter is the same family ElevenLabs uses, so the body scale transfers exactly with subtle +0.15–0.18px letter-spacing.

How are the gradient orbs used in the system?

The five gradient stops (mint, peach, lavender, sky, rose) are pure atmospheric decoration. They appear as soft radial-gradient orbs inside gradient-orb-card components (background #fafafa, 24px radius, 32px padding) and as background blooms behind hero copy. They are never used as button fills, text colors, or component backgrounds. The brand trusts atmospheric photography and modest type weights to do the work rather than extracting an accent color from an orb.

What is ElevenLabs' shape language?

Pill plus soft rectangles. Every CTA and badge uses the 9999px pill radius. Form inputs use 8px (rounded-md), compact cards use 12px (rounded-lg), feature and pricing cards use 16px (rounded-xl), and the gradient-orb cards use a softer 24px (rounded-xxl). Voice icon circles and avatars run at full 9999px. There is essentially no sharp corner anywhere except internal table cells — the brand reads as soft and editorial rather than technical.

How do I use this DESIGN.md in my own React project?

Feed the file to Claude, Cursor, or any AI tool that reads structured design tokens — the agent will reproduce ElevenLabs' restraint (ink-pill CTAs, weight-300 display, atmospheric orbs) rather than a generic AI-product theme. You can also reference the tokens directly: every color, type style, radius, and spacing value is a quoted value you can paste into Tailwind config, CSS variables, or your component library. The component block maps each surface (button-primary, hero-band, gradient-orb-card, pricing-tier-card, etc.) to its token references, so reconstructing a section is a token lookup rather than a guess.

What's missing from this DESIGN.md spec?

A handful of items, documented in the Known Gaps section: Waldenburg is a licensed typeface (EB Garamond and GT Sectra are listed as substitutes), animation timings for orb drift / waveform pulse / hero entrance are out of scope, in-product surfaces like the voice library editor and agent playground are only partially captured via marketing mockups, and form validation states beyond focus are not visible on the captured surfaces. The spec covers roughly 90% of the public marketing experience.

ElevenLabs Design System

ElevenLabs' design system as a DESIGN.md file.

About ElevenLabs DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source elevenlabs.io

AI & LLM Platforms
Music, Video & Streaming

ElevenLabs reads like a quietly editorial print magazine that happens to be a voice-AI product. The base canvas is off-white #f5f5f5 carrying warm near-black ink #0c0a09. There is no neon accent, no saturated CTA color, and no developer-tools dark atmosphere — even the dark hero on the Agents page is a deliberate exception rather than the default. The brand voltage is photographic rather than chromatic: pastel atmospheric gradient orbs in mint, peach, lavender, sky, and rose drift through hero bands as pure decoration. Display runs Waldenburg Light at weight 300, paired with Inter at 400 for body. The 300-weight display is the editorial signature — bolding it would shift the voice from magazine to consumer-marketing, which the system never does.

This DESIGN.md packages the public marketing surfaces into a single machine-readable file. Inside: 24 color tokens (split across ink, surface, hairline, text, and five atmospheric gradient stops), 15 type styles spanning display-mega at 64px / 300 down to a 12px uppercase caption, 9 corner-radius tokens including a 24px extra-soft for gradient-orb cards, 9 spacing values with a 96px section step, and 22 components from the ink pill primary to the dark-inverted featured pricing tier. The format is the Google Labs DESIGN.md spec — every value is a quoted token reference rather than an inline hex.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces ElevenLabs' restraint — modest weights, pill CTAs, atmospheric orbs — rather than a generic AI-product theme. Reference the tokens directly to seed a Tailwind config or CSS variable layer; use the component spec as a design audit on existing surfaces. The system is worth studying because it refuses the defaults of its category: no saturated voltage, no dark canvas, no bold display. Editorial pacing carries the brand instead.

What makes it distinct

No saturated brand colorthe only voltage is a warm near-black ink pill (#292524) for every primary CTA
Display sits at weight 300Waldenburg Light is the editorial signature, never bolded across 5 display sizes
Five pastel gradient orbs (mint, peach, lavender, sky, rose) carry brand atmospherenever used as fills or text
Pill geometry for every CTA9999px radius CTAs, 16px feature cards, 24px gradient-orb cards
96px section rhythmprint-magazine pacing over typical SaaS density

Live at elevenlabs.io

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

elevenlabs.io

Explore ElevenLabs

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

ElevenLabs design system FAQ

Common questions about ElevenLabs's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

ElevenLabs

The voice-AI product whose marketing surfaces this spec captures.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use ElevenLabs in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→