ElevenLabs

version: alpha name: ElevenLabs-design-analysis description: A voice-AI brand whose marketing surfaces read like a quietly editorial print magazine. The base canvas is off-white (#f5f5f5) holding warm near-black ink (#292524); the brand voltage is photographic, not chromatic — soft pastel atmospheric gradient orbs (mint → peach → lavender → sky) drift through the page as the only "color" moments. Display runs Waldenburg Light at weight 300 — the editorial signature. Inter carries body, navigation, captions. CTAs are subtle: a near-black ink pill is the primary, a transparent outline is the secondary. The brand trusts atmospheric photography and modest type weights to do all of the brand work; there is no neon accent, no saturated CTA color, no developer-tools dark canvas.

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" canvas: "#f5f5f5" canvas-soft: "#fafafa" canvas-deep: "#0c0a09" surface-card: "#ffffff" surface-strong: "#f0efed" surface-dark: "#0c0a09" surface-dark-elevated: "#1c1917" on-primary: "#ffffff" on-dark: "#ffffff" on-dark-soft: "#a8a29e" gradient-mint: "#a7e5d3" gradient-peach: "#f4c5a8" gradient-lavender: "#c8b8e0" gradient-sky: "#a8c8e8" gradient-rose: "#e8b8c4" semantic-error: "#dc2626" semantic-success: "#16a34a"

typography: display-mega: fontFamily: "'Waldenburg', 'Times New Roman', serif" fontSize: 64px fontWeight: 300 lineHeight: 1.05 letterSpacing: -1.92px display-xl: fontFamily: "'Waldenburg', serif" fontSize: 48px fontWeight: 300 lineHeight: 1.08 letterSpacing: -0.96px display-lg: fontFamily: "'Waldenburg', serif" fontSize: 36px fontWeight: 300 lineHeight: 1.17 letterSpacing: -0.36px display-md: fontFamily: "'Waldenburg', serif" fontSize: 32px fontWeight: 300 lineHeight: 1.13 letterSpacing: -0.32px display-sm: fontFamily: "'Waldenburg', serif" fontSize: 24px fontWeight: 300 lineHeight: 1.2 letterSpacing: 0 title-md: fontFamily: "'Inter', sans-serif" fontSize: 20px fontWeight: 500 lineHeight: 1.35 letterSpacing: 0 title-sm: fontFamily: "'Inter', sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.44 letterSpacing: 0.18px body-md: fontFamily: "'Inter', sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.16px body-strong: fontFamily: "'Inter', sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.16px body-sm: fontFamily: "'Inter', sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 1.47 letterSpacing: 0.15px caption: fontFamily: "'Inter', sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 caption-uppercase: fontFamily: "'Inter', sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.96px textTransform: uppercase button: fontFamily: "'Inter', sans-serif" fontSize: 15px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0 nav-link: fontFamily: "'Inter', sans-serif" fontSize: 15px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0

rounded: none: 0px xs: 4px sm: 6px md: 8px lg: 12px xl: 16px xxl: 24px pill: 9999px full: 9999px

spacing: xxs: 4px xs: 8px sm: 12px base: 16px md: 20px lg: 24px xl: 32px xxl: 48px section: 96px

components: top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" height: 64px button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 10px 20px height: 40px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" rounded: "{rounded.pill}" button-outline: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 9px 19px height: 40px button-tertiary-text: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.button}" hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-mega}" padding: 96px gradient-orb-card: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" rounded: "{rounded.xxl}" padding: 32px feature-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.xl}" padding: 24px product-card-stack: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: 0 voice-row: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" padding: 12px 0 voice-icon-circular: backgroundColor: "{colors.surface-strong}" rounded: "{rounded.full}" size: 32px pricing-tier-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: 32px pricing-tier-featured: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: 32px text-input: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 12px 16px height: 44px badge-pill: backgroundColor: "{colors.surface-strong}" textColor: "{colors.ink}" typography: "{typography.caption-uppercase}" rounded: "{rounded.pill}" padding: 4px 10px cta-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: 96px testimonial-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.body}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: 32px audio-waveform-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 24px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" padding: 64px 48px footer-link: backgroundColor: transparent textColor: "{colors.body}" typography: "{typography.body-sm}"

Overview

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.

Colors

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.

Typography

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

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.

Layout

Spacing System

• Base unit: 4px.
• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.base} 16px · {spacing.md} 20px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 96px.
• Section padding: 96px.

Grid & Container

• Max content width: ~1200px.
• Editorial body: 12-column grid.
• Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids.
• Footer: 5-column at desktop.

Whitespace Philosophy

Generous editorial pacing — print-magazine feel. 96px between bands; cards inside bands sit close (16-24px gap). The atmospheric gradient orbs occupy generous breathing space without competing with copy.

Elevation & Depth

系统使用细线 + 柔投影。卡片通过 1px 细线和单一微妙阴影档浮在近白画布之上。氛围深度来自渐变球体。

装饰性深度

• 粉彩渐变球是品牌最强的氛围模式。薄荷、桃、薰衣草、天蓝或玫瑰色的柔和径向光晕飘过 hero 带和功能区，不承载任何内容 —— 它们是纯氛围。

形状

圆角等级

组件

顶部导航

top-nav —— 底色 {colors.canvas}，文字 {colors.ink}，高 64px。布局：左侧 ElevenLabs 字标、中左主菜单（Creative / Agents / Video / Pricing / Enterprise / Docs）、右侧 Sign In + "Try free" 主 CTA。

按钮

button-primary —— 近黑墨色胶囊。底色 {colors.primary}，文字 {colors.on-primary}，字体 {typography.button}（15px / 500），内边距 10px × 20px，高 40px，圆角 {rounded.pill}。

button-primary-active —— 按下态。底色 {colors.primary-active}。

button-outline —— 透明胶囊配 1px 墨色边框。底色透明，文字 {colors.ink}，1px {colors.hairline-strong} 边框。

button-tertiary-text —— 行内墨色文字链接。

Hero 与氛围

hero-band —— 底色 {colors.canvas}，满版展示标题用 {typography.display-mega}（64px / 300 / -1.92px），副标题用 {typography.body-md}，两个 CTA，居中标题背后有氛围渐变球。

gradient-orb-card —— 一张大卡，居中展示文字背后有柔和径向渐变球。底色 {colors.canvas-soft}，圆角 {rounded.xxl}（24px），内边距 32px。每种变体使用五个渐变 token 之一（gradient-mint、gradient-peach、gradient-lavender、gradient-sky、gradient-rose）。

audio-waveform-card —— 波形可视化卡。底色 {colors.surface-card}，圆角 {rounded.xl}，内边距 24px。承载播放按钮 + 波形图 + 语音元数据。

卡片

feature-card —— 2 栏或 3 栏栅格。底色 {colors.surface-card}，文字 {colors.ink}，圆角 {rounded.xl}，内边距 24px，1px 细线边框。

product-card-stack —— 堆叠的产品预览卡。底色 {colors.surface-card}，圆角 {rounded.xl}，无内边距（子元素填满卡片）。

testimonial-card —— 引言卡。底色 {colors.surface-card}，文字 {colors.body}，圆角 {rounded.xl}，内边距 32px。

语音库

voice-row —— 语音列表中的横排。底色透明，1px 细线分隔。布局：左侧 32px 圆形语音图标（{component.voice-icon-circular}），语音名 + 口音堆叠，右侧可选预览按钮。

voice-icon-circular —— 底色 {colors.surface-strong}，圆角 {rounded.full}，32px 直径。承载首字母或语音图。

价格

pricing-tier-card —— 底色 {colors.surface-card}，圆角 {rounded.xl}，内边距 32px，1px 细线边框。

pricing-tier-featured —— 主推档反色。底色 {colors.surface-dark}，文字 {colors.on-dark}。同一形状，深色反转。

表单与标签

text-input —— 底色 {colors.surface-card}，文字 {colors.ink}，圆角 {rounded.md}（8px），内边距 12px × 16px，高 44px，1px {colors.hairline-strong} 边框。聚焦时边框加粗到 2px 墨色。

badge-pill —— 底色 {colors.surface-strong}，文字 {colors.ink}，字体 {typography.caption-uppercase}，圆角 {rounded.pill}，内边距 4px × 10px。

CTA / 页脚

cta-band —— 页脚前。底色 {colors.canvas}，居中展示标题用 {typography.display-lg}，单一墨色胶囊 CTA。96px 内边距。

footer —— 收尾页脚。底色 {colors.canvas}，文字 {colors.body}。5 栏链接列表。64×48px 内边距。

footer-link —— 底色透明，文字 {colors.body}，字体 {typography.body-sm}。

推荐与避免

推荐

• 把 {colors.primary}（墨色胶囊）留给主 CTA。
• 每个展示标题用 Waldenburg Light 300。绝不粗体。
• 正文用 Inter +0.15-0.18px 字距 —— 编辑式方言。
• 把氛围渐变球（薄荷/桃/薰衣草/天蓝/玫瑰）仅用作装饰。
• 每个 CTA 和徽标用胶囊形状。

避免

• 不要引入饱和的品牌动作色。墨色胶囊是唯一的 CTA 色。
• 不要加粗展示字。展示字保持 300 —— 加粗会把品牌声调从编辑式变为消费营销。
• 不要把渐变球用作按钮填充、文字色或组件背景。它们是纯氛围。
• 不要在 CTA 上用尖角 {rounded.none}（0px）。胶囊几何是品牌按钮。
• 不要把正文 Inter 降到 300 匹配 Waldenburg —— 正文保持 400/500 以保证可读性。
• 不要从第三方 widget（cookie 同意、OneTrust）抽取 CTA 色。品牌的 CTA 色是页面上实际 CTA 出现的色。

响应式行为

断点

触控目标

• 主胶囊 40px 高 —— 达 WCAG AA，加内边距可达 AAA。
• 语音图标圆 32px —— 加行内边距创造 48px 有效点击区。

折叠策略

• 顶栏在 768px 以下切为汉堡菜单。
• 功能栅格：3 栏 → 2 栏 → 1 栏。
• 渐变球在各断点缩小直径但从不消失。

迭代指南

1. 一次专注一个组件。
2. CTA 默认 {rounded.pill}。卡片用 {rounded.xl}（16px）。
3. 变体作为独立条目存在。
4. 始终用 {token.refs} —— 绝不内联 hex。
5. 悬停态永不入文档。
6. Waldenburg 300 用于展示，Inter 400/500 用于正文。
7. 渐变球限于氛围装饰。

已知缺口

• Waldenburg 是授权字体；EB Garamond / GT Sectra 是文档化替代。
• 动效时长（球体漂浮、波形脉冲、hero 入场）不在范围内。
• 产品内表面（语音库编辑器、agent playground）仅通过营销 mockup 部分捕获。
• 超出聚焦态的表单校验态在截取表面上不可见。