ElevenLabs design system

What font does ElevenLabs use?

ElevenLabs’s website uses Waldenburg for headings and Inter for body text. Waldenburg is not on Google Fonts; the closest free match is Figtree; Inter is free on Google Fonts.

ElevenLabs colour palette

ElevenLabs’s home page is light (#F5F3F1 background, #000000 text) and uses #000000 for its main actions. Its palette: #FDFCFC, #F5F3F1, #FFFFFF, #000000, #777169, #A59F97.

• #FDFCFC
  78.3% · backgrounds
• #F5F3F1
  13.6% · backgrounds
• #FFFFFF
  4.4% · backgrounds
• #000000
  2.4% · text
• #777169
  0.7% · text
• #A59F97
  0.1% · text
• #052F70
  0.1% · text
• #44403B
  0.1% · text
• #FF4704
  0.1% · drawings
• #0447FF
  0.1% · drawings

Type scale

Each size the page sets text in, with its weight and line height. ElevenLabs’s largest type is 48px at weight 300.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px, 44px, 48px.

Corner radii: 2px, 4px, 8px, 10px, 11.5px, 12px, 14px, pill. 13 shadow levels measured.

What makes ElevenLabs look like ElevenLabs

Almost entirely neutral: 99% of the page is painted in #FDFCFC and #F5F3F1.

#052F70 is an accent: 0.1% of the page, used for text only. Don't fill large areas with it.

#FF4704 is an accent: 0.1% of the page, used for drawings and small fills such as buttons. Don't fill large areas with it.

The largest type (48px Waldenburg) is light, not bold (300), tracked to -0.02em.

ElevenLabs DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things ElevenLabs’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not ElevenLabs’s product, so use your own name, words and images.

Download ElevenLabs DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; ElevenLabs’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@300&display=swap");

:root {
  --color-background: #F5F3F1; /* Background */
  --color-surface: #EBE8E4; /* Surface */
  --color-text: #000000; /* Text */
  --color-text-muted: #777169; /* Text muted */
  --color-border: #EBE8E4; /* Border */
  --color-action: #000000; /* Action */
  --color-on-action: #FFFFFF; /* On action */
  --color-negative: #F41A2F; /* Negative */
  --color-warning: #FF4704; /* Warning */
  --color-fdfcfc: #FDFCFC; /* 78.3% of the page, as fills */
  --font-body: "Inter", sans-serif; /* Inter */
  --font-code: "Geist Mono", "Geist Mono", monospace; /* Geist Mono */
  --font-display: "Waldenburg", "Figtree", sans-serif; /* Waldenburg on the site; Figtree renders */
  --type-display-large: 48px; /* Display Large, weight 300 */
  --type-display-large-leading: 52px;
  --type-display-large-tracking: -0.02em;
  --type-display-small: 36px; /* Display Small, weight 300 */
  --type-display-small-leading: 42px;
  --type-headline: 32px; /* Headline, weight 300 */
  --type-headline-leading: 36px;
  --type-title-large: 20px; /* Title Large, weight 400 */
  --type-title-large-leading: 27px;
  --type-title-small: 18px; /* Title Small, weight 400 */
  --type-title-small-leading: 28.8px;
  --type-body-large: 16px; /* Body Large, weight 400 */
  --type-body-large-leading: 24px;
  --type-body-large-tracking: 0.01em;
  --type-body-medium: 15px; /* Body Medium, weight 400 */
  --type-body-medium-leading: 22px;
  --type-body-medium-tracking: 0.01em;
  --type-body-small: 14px; /* Body Small, weight 500 */
  --type-body-small-leading: 21px;
  --type-body-small-tracking: 0.01em;
  --type-label-large: 13px; /* Label Large, weight 400 */
  --type-label-large-leading: 18px;
  --type-label-small: 12px; /* Label Small, weight 500 */
  --type-label-small-leading: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-13: 52px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-24: 96px;
  --space-30: 120px;
  --space-33: 132px;
  --space-40: 160px;
  --space-42: 168px;
  --radius-xs: 2px;

How this was measured

PikSpec’s scanner read the elevenlabs.io home page in Chrome at 1440px wide on 15 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

ElevenLabs is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by ElevenLabs.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.