---
title: "ElevenLabs design system"
variant: extended
source: https://elevenlabs.io/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/elevenlabs-io)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# ElevenLabs · Design System

> Quiet editorial design, vivid AI-made worlds

**Theme:** light · **Industry:** ai · **Source:** https://elevenlabs.io/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

ElevenLabs presents its voice, creative, and agent products through a restrained, white-led interface with black typography and soft neutral panels. Oversized editorial headings, pill-shaped controls, and colorful media previews make an extensive platform feel approachable without compromising technical credibility.

## North star

Keep the interface quiet and neutral, and let clear editorial typography and vivid product media provide the contrast.

## Overview

The page is anchored by a near-white canvas (#fdfcfc), with warm, pale-gray panels (#f5f3f1) grouping product previews, feature cards, and research content. Black (#000000) carries headlines, navigation, and primary actions; muted gray-brown (#777169) softens supporting copy. The measured blue accents are sparse and should remain secondary, rather than recoloring the image-led product experience. Waldenburg’s light display headings give the hero and section introductions a distinctive editorial tone, while Inter handles navigation, body copy, and controls with clear, compact legibility. A wide, centered content area alternates two-column text introductions with broad product demonstrations, card grids, customer marks, and media galleries. Generous whitespace separates dense sections. Rounded panels, circular media, and fully pill-shaped buttons contrast with the restrained palette. Colorful spheres, screenshots, and story thumbnails belong to product imagery, not the core interface palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#fdfcfc` | `--color-gallery-white` | brand | Primary page canvas and dominant light ground behind the navigation and all major sections. |
| Warm Porcelain | `#f5f3f1` | `--color-warm-porcelain` | surface | Warm pale panels for product cards, interface demonstrations, and soft section surfaces. |
| Pure Ink | `#000000` | `--color-pure-ink` | neutral | Main heading, navigation, body text, and high-contrast black primary sign-up buttons. |
| Quiet Taupe | `#777169` | `--color-quiet-taupe` | neutral | Muted supporting copy, secondary labels, and subdued links. |
| Soft Greige | `#a59f97` | `--color-soft-greige` | neutral | Minor muted text and gradient-related visual traces; not a primary interface color. |
| Mist Gray | `#eae9e9` | `--color-mist-gray` | surface | Subtle card and media boundary tone, useful for quiet separation. |
| Charcoal Brown | `#44403b` | `--color-charcoal-brown` | neutral | Small amount of secondary text, darker than muted labels but softer than black. |
| Deep Signal Blue | `#052f70` | `--color-deep-signal-blue` | accent | Sparse accent text; retain as a restrained highlight rather than a large surface. |
| Stone Haze | `#cfcdcb` | `--color-stone-haze` | neutral | Low-emphasis gradient and decorative traces, not a defining brand surface. |
| Silver Dust | `#aeadab` | `--color-silver-dust` | neutral | Minor decorative gradient tone; avoid using as a dominant text or background color. |
| Pewter Gray | `#a8a7a5` | `--color-pewter-gray` | neutral | Subtle gradient-related neutral, chiefly a measured visual trace. |
| Cloud Gray | `#b6b4b3` | `--color-cloud-gray` | neutral | Low-contrast decorative gradient tone rather than a key interface color. |
| Pale Pewter | `#c6c4c3` | `--color-pale-pewter` | neutral | Light decorative neutral found among gradient-related visual traces. |
| Frosted Stone | `#d7d5d4` | `--color-frosted-stone` | neutral | Subtle gradient or decorative tone; use only for understated detail. |
| Warm Ash | `#bdbcba` | `--color-warm-ash` | neutral | Minor soft-gray trace associated with gradients and supporting visual detail. |
| Quiet Graphite | `#7e7d7d` | `--color-quiet-graphite` | neutral | Low-frequency gray detail; not a defining text or surface color. |
| Bright Signal Blue | `#0a59d2` | `--color-bright-signal-blue` | accent | Sparse blue accent text; keep occasional and subordinate to black-and-white styling. |

### Semantic aliases

`--color-canvas` → `#fdfcfc` (Gallery White) · `--color-surface` → `#f5f3f1` (Warm Porcelain) · `--color-text` → `#000000` (Pure Ink) · `--color-text-muted` → `#777169` (Quiet Taupe) · `--color-text-subtle` → `#fdfcfc` (Gallery White) · `--color-border` → `#f5f3f1` (Warm Porcelain) · `--color-accent` → `#052f70` (Deep Signal Blue) · `--color-accent-2` → `#0a59d2` (Bright Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fdfcfc` | 20.51:1 | AAA |
| `#000000` | `#f5f3f1` | 18.97:1 | AAA |
| `#777169` | `#fdfcfc` | 4.71:1 | AA |
| `#777169` | `#f5f3f1` | 4.36:1 | AA-large |
| `#fdfcfc` | `#f5f3f1` | 1.08:1 | fail |
| `#052f70` | `#fdfcfc` | 12.45:1 | AAA |
| `#052f70` | `#f5f3f1` | 11.52:1 | AAA |

### Gradients

- `linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.345) 8.07%, rgba(0, 0, 0, 0.333) 15.54%, rgba(0, 0, 0, 0.314) 22.5%, rgba(0, 0, 0, 0.29) 29.04%, rgba(0, 0, 0, 0.26) 35.26%, rgba(0, 0, 0, 0.227) 41.25%, rg`
- `linear-gradient(to top, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.494) 54.03%, rgba(0, 0, 0, 0.475) 57.77%, rgba(0, 0, 0, 0.447) 61.25%, rgba(0, 0, 0, 0.41) 64.52%, rgba(0, 0, 0, 0.37) 67.63%, rgba(0, 0, 0, 0.325) 70.62%, `
- `linear-gradient(to right, rgb(245, 243, 241), rgba(0, 0, 0, 0))`
- `linear-gradient(to left, rgb(245, 243, 241), rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500 | Navigation, body copy, labels, buttons, links, and most interface text. | Inter |
| Geist Mono | `--font-mono` | webfont | 400 | Code samples in API sections and technical examples. | IBM Plex Mono |
| Waldenburg | `--font-display` | webfont | 300 | Light editorial display headings, including the hero and major section introductions. | Manrope |

- **Inter:** Use measured regular and medium weights; keep labels and body copy readable, mostly sentence case.
- **Geist Mono:** Use a compact monospaced treatment for code, with syntax color kept within the sample.
- **Waldenburg:** Measured headings are light, with the hero tightly tracked; avoid heavy, shouty display styling.

### Type scale — Perfect Fifth (ratio ≈ 1.474, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 300 | 1.08 | -0.02em | — | Waldenburg | Hero headline, set in light editorial display type. |
| h2 | 36px | 300 | 1.17 | 0 | — | Waldenburg | Major product, research, and section headings. |
| h3 | 20px | 400 | 1.35 | 0 | — | Inter | Product-card and feature titles. |
| body | 15px | 400 | 1.47 | 0.01em | — | Inter | Descriptions, explanatory copy, and supporting paragraphs. |
| caption | 14px | 500 | 1.5 | 0.01em | — | Inter | Small metadata, category labels, and card details. |
| button | 16px | 400 | 1.5 | 0 | — | Inter | Primary and secondary pill action labels. |
| nav | 14px | 400 | 1.43 | 0 | — | Inter | Header navigation and compact menu labels. |
| link | 16px | 400 | 1.5 | 0.01em | — | Inter | Inline actions and supporting navigation links. |
| code | 13px | 400 | 1.69 | 0 | — | Geist Mono | Technical API examples and code snippets. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 9, 10, 12, 14, 16, 18, 20, 24, 28, 32, 40, 48, 64 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width 1174px.

Use a centered content frame capped at the measured 1174px, with comfortable density and broad whitespace around section content. The hero pairs a large left-aligned display heading and actions with explanatory copy in a second column, then gives the product preview a wide, prominent position. Continue with logo strips, alternating two-column feature introductions, and broad card or media grids. Sections share a consistent canvas and are divided primarily by spacing and pale panels rather than strong color bands. Keep card grids orderly and text aligned to the left; reserve centered alignment for selected research or showcase headings.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `50%` · nav `9999px` · link `4px` · xs `2px` · sm `4px` · md `8px` · lg `10px` · xl `12px` · 2xl `14px` · pill `9999px`
- Shadow `sm` (button, other, card): `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.125) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.04) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px`
- Shadow `inset` (other): `rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `inset-2` (other, card): `rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `sm-2` (other, text): `rgba(0, 0, 0, 0.125) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.04) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px`
- Shadow `inset-3` (text): `rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(255, 255, 255, 0.6) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `inset-4` (other): `rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat: pale surfaces, fine light boundaries, and generous separation do more work than shadows. Use the measured soft shadow sparingly on white floating controls and selected cards, not across every panel. Rounded cards sit directly on the near-white canvas; pill actions may gain subtle depth, while product imagery supplies its own visual layering.

## Imagery

Use product UI screenshots, voice and agent interface previews, customer logos, editorial story thumbnails, and abstract media artwork. The hero’s colorful, soft-edged spheres are vivid within a pale panel; treat them as product imagery, not as global brand colors. Crop demonstrations into calm, rounded cards, while keeping screenshots legible and minimally embellished. Safety cards use thin, monochrome line illustrations. Avoid adding unrelated stock photography or decorative gradients to ordinary interface areas.

## Components

### Header and announcement

A narrow centered announcement sits above a clean navigation row; compact text links lead into a black pill sign-up action.

### Hero actions

Large light-weight headline and concise supporting text sit side by side, followed by black Sign up and white Contact sales pill buttons.

### Creative voice showcase

A wide warm-neutral panel holds rounded category tabs, colorful circular voice previews, playback affordances, and a compact product category rail.

### Customer logo strip

A low-emphasis customer proof area presents brand marks in a spacious grid with a restrained stories link.

### Feature cards

Warm-gray cards with large rounded corners combine product UI, short descriptions, and compact feature groupings.

### API code panel

Technical sections pair explanatory copy with a white, subtly elevated code card using a monospaced typeface.

### Safety cards

Three pale cards pair minimal monochrome line art with short titles and concise explanatory copy.

### Measured component styles

- **Primary button** (“Sign up”): background #000000 · text #ffffff · radius 9999px · padding 0px 20px · 400 16px Inter
- **Secondary button** (“Contact sales”): background #ffffff · text #000000 · radius 9999px · padding 0px 20px · 400 16px Inter · shadow rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.125) 0px 0px 0px 0.5px, rgba
- **Link** (“Twilio”): transparent background · text #000000 · radius 4px · padding 0px · 400 18px Inter
- **Input** (“English Afrikaans Arabic Armenian Assame”): background #efefef · text #000000 · radius 0px · padding 0px · 400 18px Inter
- **Card** (“All-in-one AI editor Create podcasts, au”): background #f5f3f1 · text #000000 · radius 24px · padding 0px · 400 18px Inter
- **Navigation item** (“Products Solutions Customers Resources E”): transparent background · text #000000 · radius 0px · padding 0px · 400 18px Inter

## Do

- Use Gallery White (#fdfcfc) as the dominant canvas.
- Group demonstrations and feature cards on Warm Porcelain (#f5f3f1).
- Use black for primary text and the primary sign-up action.
- Use Waldenburg-style light headings for major editorial statements.
- Let product previews supply color and visual variety.
- Keep blue accents sparse and subordinate.
- Separate sections with whitespace and soft surfaces.

## Don't

- Do not turn the page into a dark interface.
- Do not use vivid blue as a large background or CTA color.
- Do not apply colorful gradients across every section.
- Do not make every card heavily shadowed or outlined.
- Do not crowd the hero with excessive supporting elements.
- Do not mistake colors inside product imagery for interface palette.
- Do not use heavy, all-caps display typography.

## Agent prompt

Build a new ElevenLabs-style page with a quiet, spacious product-led feel. Use Gallery White (#fdfcfc) as the main canvas, Warm Porcelain (#f5f3f1) for grouped demonstrations and feature cards, Pure Ink (#000000) for headings and primary actions, and Quiet Taupe (#777169) for secondary copy. Use light editorial display headings inspired by Waldenburg, with Inter for navigation, body, and controls. Structure the page inside a centered wide content frame; alternate clear two-column introductions with broad rounded product showcases and compact feature grids. Keep controls pill-shaped and shadows very subtle. Treat colorful artwork and screenshots as contained product media, not as global backgrounds. Preserve generous whitespace, clean alignment, and legible technical examples in a monospaced face.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column headline and description above a wide product preview. | sign-up action, sales contact action | light display heading, pill buttons, media showcase |
| 2 | category-nav | Multi-column media-led panel with category controls and product links. | select product category, play voice sample | rounded tabs, circular media, compact links |
| 3 | logo-cloud | Single-row section with customer marks arranged in a multi-column grid. | view customer stories | logo grid, quiet text link |
| 4 | other | Single-column introductory heading with ample surrounding whitespace. | introduce platform scope | editorial heading |
| 5 | product-showcase | Two platform descriptions above a broad multi-column product interface preview. | compare platform roles | product screenshots, paired descriptions |
| 6 | feature-split | Two-column section with product label, heading, copy, and a learn-more action. | learn more | split text layout, editorial heading |
| 7 | feature-grid | Large showcase cards above a row of smaller feature cards. | explore tools, try editor | warm-gray cards, embedded UI, feature grid |
| 8 | testimonials | Compact horizontal customer proof row beneath product cards. | view customer proof, get started | customer logo, short case-study copy |
| 9 | feature-split | Two-column introduction with heading and description above product cards. | learn more | split text layout, pill action |
| 10 | feature-grid | Wide interface demonstrations followed by a row of supporting capability cards. | inspect analytics, review workflows | product UI cards, warm-gray surfaces |
| 11 | testimonials | Short customer proof row following the agent feature showcase. | get started | logo marks, single-line customer outcomes |
| 12 | feature-split | Two-column API introduction with documentation link. | explore documentation | editorial heading, text-and-link split |
| 13 | integrations | Two-column model detail and code-example composition. | compare models, explore API | model list, code panel |
| 14 | product-detail | Two-column API detail with model information and supporting preview. | review accuracy details | product heading, technical media |
| 15 | integrations | Two-column product explanation and code example. | explore music API | API copy, code panel |
| 16 | other | Centered heading in a single-column section. | introduce research stories | centered editorial heading |
| 17 | gallery | Multi-column media gallery with varied card prominence. | browse stories | editorial image cards, overlaid captions |
| 18 | feature-split | Two-column section with heading on the left and research statement on the right. | introduce model research | split editorial layout |
| 19 | timeline | Centered timeline content in a broad panel, followed by model cards. | browse model history, open model details | timeline panel, date-led cards |
| 20 | content-feed | Two-column editorial introduction and dated article cards. | read updates, learn more | content cards, date labels |
| 21 | other | Single-column section introduction with a learn-more link. | learn about safety | editorial heading, text link |
| 22 | feature-grid | Three-column grid of illustrated feature cards. | understand safeguards | line illustrations, pale rounded cards |
| 23 | content-feed | Single-column heading row with an all-posts link. | browse all posts | section title, quiet text link |
| 24 | content-feed | Three-column grid of image-led update cards. | open product news | rounded image thumbnails, card metadata |
| 25 | footer | Call-to-action band above a broad multi-column footer navigation. | talk to sales, create an agent | CTA links, grouped footer links |

## Source CSS custom properties (selected)

```css
--grid-column-bg: rgba(127,255,255,0.25);
---shadcn-background: 0 0% 100%;
--shadcn-foreground: 0 0% 3.9%;
--shadcn-card-foreground: 0 0% 3.9%;
--shadcn-popover-foreground: 0 0% 3.9%;
--shadcn-primary: 0 0% 9%;
--shadcn-primary-foreground: 0 0% 98%;
--shadcn-secondary: 0 0% 96.1%;
--shadcn-secondary-foreground: 0 0% 9%;
--shadcn-muted-foreground: 0 0% 45.1%;
--shadcn-accent: 0 0% 96.1%;
--shadcn-accent-foreground: 0 0% 9%;
--shadcn-destructive-foreground: 0 0% 98%;
--shadcn-border: 0 0% 89.8%;
--shadcn-radius: 0.5rem;
--spacing-outer-gutter: 4rem;
--spacing-inner-gutter: 1.25rem;
--spacing-container-gutter: 0.625rem;
--spacing-outer-content: 6.25rem;
--spacing-content-wide: 10rem;
--spacing-content-xwide: 12.5rem;
--f-display-01-font-family: "WaldenburgFH","WaldenburgFH Fallback";
--f-display-01-font-weight: 700;
--f-display-01-font-size: 6.25rem;
--f-display-02-font-family: "WaldenburgFH","WaldenburgFH Fallback";
--f-display-02-font-weight: 700;
--f-display-02-font-size: 4rem;
--f-heading-01-font-family: "Waldenburg","Waldenburg Fallback";
--f-heading-01-font-weight: 300;
--f-heading-01-font-size: 3.75rem;
--f-heading-01-letter-spacing: -0.03em;
--f-heading-02-font-family: "Waldenburg","Waldenburg Fallback";
--f-heading-02-font-weight: 300;
--f-heading-02-font-size: 3rem;
--f-heading-02-letter-spacing: -0.03em;
--f-heading-03-font-family: "Waldenburg","Waldenburg Fallback";
--f-heading-03-font-weight: 300;
--f-heading-03-font-size: 2.25rem;
--f-heading-03-letter-spacing: -0.02em;
--f-heading-04-font-family: "Waldenburg","Waldenburg Fallback";
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/elevenlabs-io