ElevenLabs

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

| 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.

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

The system uses **hairline + soft drop**. Cards float above the off-white canvas via 1px hairlines and a single subtle shadow tier. Atmospheric depth comes from gradient orbs.

| Level | Treatment | Use |

|---|---|---|

| Flat (canvas) | `{colors.canvas}` (#f5f5f5) | Body bands, footer |

| Card | `{colors.surface-card}` (#ffffff) | Content cards |

| Hairline border | 1px `{colors.hairline}` | Card outlines |

| Soft drop | `0 4px 16px rgba(0, 0, 0, 0.04)` | Hovered cards (single shadow tier) |

| Gradient orb | Radial gradient with one of `{colors.gradient-*}` | Atmospheric depth — never a card surface |

Decorative Depth

• **Pastel gradient orbs** are the brand's strongest atmospheric pattern. Soft radial blooms in mint, peach, lavender, sky, or rose drift through hero bands and feature sections without containing any content — they are pure atmosphere.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Reserved |

| `{rounded.xs}` | 4px | Inline tags |

| `{rounded.sm}` | 6px | Compact rows |

| `{rounded.md}` | 8px | Form inputs |

| `{rounded.lg}` | 12px | Compact cards |

| `{rounded.xl}` | 16px | Feature cards, pricing tiers |

| `{rounded.xxl}` | 24px | Gradient orb cards (extra-soft) |

| `{rounded.pill}` | 9999px | All CTA buttons, badges |

| `{rounded.full}` | 9999px | Voice icon circles, avatars |

Components

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.

CTA / Footer

**`cta-band`** — Pre-footer. Background `{colors.canvas}`, centered display headline in `{typography.display-lg}`, single ink pill CTA. 96px padding.

**`footer`** — Closing footer. Background `{colors.canvas}`, text `{colors.body}`. 5-column link list. 64×48px padding.

**`footer-link`** — Background transparent, text `{colors.body}`, type `{typography.body-sm}`.

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.

Responsive Behavior

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.

Iteration Guide

1. Focus on a single component at a time.

2. CTAs default to `{rounded.pill}`. Cards use `{rounded.xl}` (16px).

3. Variants live as separate entries.

4. Use `{token.refs}` everywhere — never inline hex.

5. Hover state never documented.

6. Waldenburg 300 for display, Inter 400/500 for body.

7. Gradient orbs scoped to atmospheric decoration.

Known Gaps

• Waldenburg is a licensed typeface; EB Garamond / GT Sectra are documented substitutes.
• Animation timings (orb drift, waveform pulse, hero entrance) out of scope.
• In-product surfaces (voice library editor, agent playground) only partially captured via marketing mockups.
• Form validation states beyond focus not visible on captured surfaces.

개요

ElevenLabs는 음성 AI 제품인 조용한 사설 인쇄 잡지처럼 읽습니다. 기본 캔버스는 검정색에 가까운 따뜻한 잉크 ``(#0c0a09)를 담고 있는 회백색 ``(#f5f5f5)입니다. 브랜드 전압은 **색채가 아닌 사진**입니다. 부드러운 파스텔 분위기의 그라데이션 구체(민트, 복숭아, 라벤더, 하늘, 장미)가 유일한 "색상" 순간으로 페이지를 떠다닙니다. 네온 액센트, 채도가 높은 CTA 색상, 어두운 캔버스 개발 도구 분위기가 없습니다.

표시용 유형 쌍 **Waldenburg Light**(가중치 300의 사용자 정의 세리프)와 본문, 탐색, 캡션용 **Inter**가 있습니다. 300의 디스플레이 무게는 편집자의 서명입니다. 결코 굵지도 무겁지도 않습니다.

CTA는 미묘합니다. 검은색에 가까운 잉크 알약(``)이 기본이고 투명한 윤곽선(``)이 보조입니다. 브랜드는 브랜드 작업을 전달하기 위해 분위기 있는 사진과 적당한 크기의 활자를 신뢰합니다.

**주요 특성:**

• 회백색 캔버스, 따뜻한 검정에 가까운 잉크. 포화 CTA 색상이 없습니다.
• 단일 기본 작업: ``의 잉크 알약. 분위기 있는 그라데이션은 시각적 브랜드 전압을 전달합니다.
• 디스플레이는 무게 300의 Waldenburg Light를 실행합니다. — 사설 잡지 음성입니다.
• Body는 미묘한 문자 간격(+0.15-0.18px)을 사용하여 400에서 Inter를 실행합니다.
• 파스텔 그라데이션 오브(5개 토큰: 민트, 복숭아, 라벤더, 하늘, 장미)는 분위기 있는 브랜드 장식으로만 사용됩니다.
• 소프트 알약 형상(CTA의 경우 ``, 카드의 경우 ``).
• 96px 섹션 리듬.

색상

브랜드 및 액센트

• **기본 잉크**(`` — #292524): 기본 작업 색상 — 검은색에 가까운 따뜻한 알약입니다. 거의 사용되지 않습니다.
• **잉크 기본 활성**(`` — #0c0a09): 누르기 상태.

표면

• **캔버스** (`` — #f5f5f5): 황백색 페이지 바닥.
• **캔버스 소프트**(`` — #fafafa): 미묘한 교차 섹션을 위한 더 가벼운 밴드.
• **캔버스 딥**(`` — #0c0a09): 잉크와 동일 — 드문 다크 모드 영웅에 사용됩니다(에이전트 페이지).
• **표면 카드**(`` — #ffffff): 순백색 카드.
• **Surface Strong** (`` — #f0efed): 배지, 음성 아이콘 플레이트.
• **표면 다크**(`` — #0c0a09): 다크 히어로/CTA 밴드 캔버스.
• **표면이 어둡게 높음**(`` — #1c1917): 어두운 캔버스에 카드.

헤어라인

• **가는 선** (`` — #e7e5e4): 기본 1px 구분선.
• **헤어라인 소프트**(`` — #f0efed): 더 가벼운 칸막이.
• **가는 선 강함** (`` — #d6d3d1): 패널 윤곽선이 더 강해졌습니다.

텍스트

• **잉크** (`` — #0c0a09): 디스플레이, 기본 텍스트.
• **본문**(`` — #4e4e4e): 기본 실행 텍스트.
• **Body Strong** (`` — #292524): 기본과 동일 — 강조.
• **음소거됨**(`` — #777169): 부제목.
• **음소거 소프트**(`` — #a8a29e): 비활성화된 텍스트.
• **기본**(`` — #ffffff): 잉크 알약에 흰색 텍스트.
• **어두운 곳**(`` — #ffffff): 어두운 영웅의 흰색 텍스트.
• **어두운 소프트**(`` — #a8a29e): 어두운 바탕에 음소거된 황백색.

대기 경사 정지점(서명)

• **그라디언트 민트** (`` — #a7e5d3): 민트 그린 오브.
• **그라디언트 복숭아** (`` — #f4c5a8): 복숭아 구.
• **그라디언트 라벤더** (`` — #c8b8e0): 라벤더 구.
• **그라디언트 스카이** (`` — #a8c8e8): 하늘색 구체.
• **그라데이션 장미** (`` — #e8b8c4): 장미 구체.

이것들은 `` 내부의 부드러운 방사형 그라데이션 대기 구로만 나타나며 영웅 사본 뒤의 배경 대기 꽃으로 나타납니다. 버튼 채우기나 텍스트 색상으로는 절대 사용하지 마세요.

의미

• **성공**(`` — #16a34a): 확인.
• **오류**(`` — #dc2626): 유효성 검사 오류.

타이포그래피

글꼴군

**Waldenburg Light**는 무게 300의 라이선스 디스플레이 세리프입니다. **Inter**에는 본문, 탐색, 캡션 및 버튼이 포함되어 있습니다. 대체: Waldenburg의 경우 `'Times New Roman', serif`, Inter.

의 경우 `sans-serif`

계층구조

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |

사용

|---|---|---|---|---|---|

| _`` | 64px | 300 | 1.05 | -1.92px | 홈페이지 히어로 h1 |

| _`` | 48px | 300 | 1.08 | -0.96px | 자회사 영웅 |

| _`` | 36px | 300 | 1.17 | -0.36px | 섹션 헤드 |

| _`` | 32px | 300 | 1.13 | -0.32px | 하위 섹션 머리글 |

| _`` | 24px | 300 | 1.2 | 0 | 카드 그룹 제목 |

| _`` | 20픽셀 | 500 | 1.35 | 0 | 구성 요소 제목 — Inter |

| _`` | 18px | 500 | 1.44 | 0.18px | 라벨 목록 |

| _`` | 16px | 400 | 1.5 | 0.16px | 기본 본문 — Inter |

| _`` | 16px | 500 | 1.5 | 0.16px | 강조된 본문 |

| _`` | 15px | 400 | 1.47 | 0.15px | 바닥글 본문 |

| _`` | 14px | 400 | 1.5 | 0 | 사진 캡션 |

| _`` | 12px | 600 | 1.4 | 0.96px | 섹션 라벨, 배지 |

| _`` | 15px | 500 | 1.0 | 0 | CTA 알약 |

| _`` | 15px | 500 | 1.4 | 0 | 상단 탐색 메뉴 |

원칙

• **디스플레이 무게는 300으로 유지됩니다.** Waldenburg Light는 편집자의 서명입니다. 문구를 굵은 글씨로 표시하지 마세요.
• **본문의 미묘한 문자 간격.** +0.15-0.18px 추적의 Inter - 보다 편집적인 느낌을 위해 기본 Inter보다 약간 느슨합니다.
• **디스플레이의 음수 문자 간격.** Waldenburg는 디스플레이 크기를 -0.32px에서 -1.92px로 더 좁힙니다.

글꼴 대체에 대한 참고사항

Waldenburg에는 라이선스가 부여되었습니다. 오픈 소스 대체품: 가중치 300의 **EB Garamond**(약간 더 인간주의적) 또는 **GT Sectra**(Waldenburg의 현대성에 더 가깝습니다). Inter를 신체에 직접 사용하세요. 이는 ElevenLabs가 사용하는 것과 동일한 제품군입니다.

레이아웃

간격 시스템

• **기본 단위:** 4px.
• **토큰:** `` 4px · `` 8px · `` 12px · `` 16px · `` 20px · `` 24px · `` 32px · `` 48px · `` 96px.
• **섹션 패딩:** 96px.

그리드 및 컨테이너

• 최대 콘텐츠 너비: ~1200px.
• 편집 본문: 12열 그리드.
• 기능 카드 그리드: 영웅 분할을 위한 데스크탑의 2-up, 혜택 그리드의 3-up.
• 바닥글: 데스크탑의 5열.

공백 철학

풍부한 편집 속도 — 인쇄 잡지 느낌. 밴드 간 96px; 밴드 내부의 카드는 가깝게 위치합니다(16-24px 간격). 대기 그라데이션 오브는 카피와 경쟁하지 않고 넉넉한 호흡 공간을 차지합니다.

고도 및 깊이

시스템은 **헤어라인 + 소프트 드롭**을 사용합니다. 카드는 1px 헤어라인과 단일 미묘한 그림자 계층을 통해 회백색 캔버스 위에 떠 있습니다. 대기의 깊이는 그라데이션 구체에서 비롯됩니다.

| 레벨 | 치료 | |

사용

|---|---|---|

| 플랫(캔버스) | _`` (#f5f5f5) | 바디 밴드, 바닥글 |

| 카드 | _`` (#ffffff) | 콘텐츠 카드 |

| 헤어라인 테두리 | 1픽셀 `` | 카드 개요 |

| 소프트 드롭 | _`0 4px 16px rgba(0, 0, 0, 0.04)` | 마우스오버된 카드(단일 섀도우 계층) |

| 그라데이션 구 | _`` 중 하나를 사용한 방사형 그래디언트 | 대기 깊이 - 카드 표면이 아님 |

장식적 깊이

• **파스텔 그라데이션 오브**는 브랜드의 가장 강력한 분위기 패턴입니다. 민트, 복숭아, 라벤더, 하늘 또는 장미의 부드러운 방사형 꽃은 콘텐츠를 포함하지 않고 히어로 밴드와 특집 섹션을 통해 표류합니다. 순수한 분위기입니다.

도형

경계 반경 배율

| 토큰 | 가치 | |

사용

|---|---|---|

| _`` | 0픽셀 | 예약됨 |

| _`` | 4픽셀 | 인라인 태그 |

| _`` | 6픽셀 | 압축 행 |

| _`` | 8픽셀 | 양식 입력 |

| _`` | 12px | 컴팩트 카드 |

| _`` | 16px | 기능 카드, 가격 책정 등급 |

| _`` | 24px | 그라데이션 오브 카드(엑스트라 소프트) |

| _`` | 9999px | 모든 CTA 버튼, 배지 |

| _`` | 9999px | 음성 아이콘 서클, 아바타 |

구성요소

상단 탐색

**`top-nav`** — 배경 ``, 텍스트 ``, 높이 64px. 레이아웃: ElevenLabs 워드마크 왼쪽, 기본 가로 메뉴(크리에이티브/대행사/동영상/가격/엔터프라이즈/문서), 로그인 + "무료 체험" 기본 CTA 오른쪽.

버튼

**`button-primary`** — 검정색에 가까운 잉크 알약. 배경 ``, 텍스트 ``, 유형 ``(15px/500), 패딩 10px × 20px, 높이 40px, 반올림 ``.

**`button-primary-active`** — 프레스 상태. 배경 ``.

**`button-outline`** — 1px 잉크 테두리가 있는 투명한 알약. 배경 투명, 텍스트 ``, 1px `` 테두리.

**`button-tertiary-text`** — 인라인 잉크 텍스트 링크.

영웅 및 분위기 있는 캐릭터

**`hero-band`** — 배경 ``, ``의 전체 너비 디스플레이 헤드라인(64px / 300 / -1.92px), ``의 하위 헤드, 두 개의 CTA 및 중앙 뒤에 대기 그라데이션 구 헤드라인.

**`gradient-orb-card`** — 중앙 디스플레이 사본 뒤에 부드러운 방사형 그라데이션 구가 있는 대형 카드입니다. 배경 ``, 반올림 ``(24px), 패딩 32px. 각 변형은 5가지 그라데이션 토큰(`gradient-mint`, `gradient-peach`, `gradient-lavender`, `gradient-sky`, `gradient-rose`) 중 하나를 사용합니다.

**`audio-waveform-card`** — 파형 시각화 카드. 배경 ``, 반올림 ``, 패딩 24px. 재생 버튼 + 파형 문자 모양 + 음성 메타데이터를 보유합니다.

카드

**`feature-card`** — 2-up 또는 3-up 그리드. 배경 ``, 텍스트 ``, 둥근 ``, 패딩 24px, 1px 가는선 테두리.

**`product-card-stack`** — 쌓인 제품 미리보기 카드. 배경 ``, 둥근 ``, 패딩 없음(하위 항목은 카드 가장자리에서 가장자리까지 채움).

**`testimonial-card`** — 견적 카드. 배경 ``, 텍스트 ``, 반올림 ``, 패딩 32px.

음성 라이브러리

**`voice-row`** — 음성 목록의 가로 행. 배경은 투명하며 1px 헤어라인 구분선입니다. 레이아웃: 32px 원형 음성 아이콘(``) 왼쪽, 음성 이름 + 악센트 스택, 선택적 미리보기 버튼 오른쪽.

**`voice-icon-circular`** — 배경 ``, 둥근 ``, 32px 직경. 이니셜 또는 음성 문자가 들어 있습니다.

가격

_**`pricing-tier-card`** — 배경 ``, 둥근 ``, 패딩 32px, 1px 가는선 테두리.

**`pricing-tier-featured`** — 주요 계층 반전. 배경 ``, 텍스트 ``. 같은 모양, 어두운 반전.

양식 및 태그

**`text-input`** — 배경 ``, 텍스트 ``, 반올림 ``(8px), 패딩 12px × 16px, 높이 44px, 1px `` 테두리. 초점이 맞춰지면 테두리가 2px 잉크로 두꺼워집니다.

**`badge-pill`** — 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 4px × 10px.

CTA/바닥글

**`cta-band`** — 앞부분 바닥글. 배경 ``, ``의 중앙 표시 헤드라인, 단일 잉크 알약 CTA. 96px 패딩.

**`footer`** — 바닥글 닫기 배경 ``, 텍스트 ``. 5열 링크 목록. 64×48px 패딩.

**`footer-link`** — 배경 투명, 텍스트 ``, 유형 ``.

해야 할 일과 하지 말아야 할 일

하세요

• 기본 CTA용으로 ``(잉크 알약)을 예약합니다.
• 모든 디스플레이 헤드라인에 가중치 300의 Waldenburg Light를 사용하세요. 굵게 표시하지 마세요.
• 본문에 대해 +0.15-0.18px 추적에서 Inter를 사용합니다. — 편집 방언입니다.
• 대기 그라데이션 구(민트/복숭아/라벤더/하늘/장미)를 장식용으로만 사용하세요.
• 모든 CTA와 배지에 알약 모양을 사용하세요.

하지 마세요

• 포화되어 있는 브랜드 액션 색상을 소개하지 마세요. 잉크알약이 유일한 CTA 색상입니다.
• 표시 사본을 굵은 글씨로 표시하지 마세요. 디스플레이의 무게는 300입니다. 굵은 글씨체는 브랜드 목소리를 편집에서 소비자 마케팅으로 전환합니다.
• 그라디언트 구를 버튼 채우기, 텍스트 색상 또는 구성 요소 배경으로 사용하지 마세요. 순수한 분위기입니다.
• CTA에 날카로운 문자 ``(0px)을 사용하지 마세요. 알약 모양이 브랜드 버튼입니다.
• Waldenburg와 일치하도록 Inter 본문의 무게를 300으로 낮추지 마십시오. 가독성을 위해 본문은 400/500으로 유지됩니다.
• 타사 위젯(쿠키 동의, OneTrust)에서 CTA 색상을 추출하지 마세요. 브랜드의 CTA 색상은 실제 제품 CTA에 표시되는 색상입니다.

반응적 행동

중단점

| 이름 | 폭 | 주요 변경 사항 |

|---|---|---|

| 모바일 | _< 640px | Hero h1 64→32px; feature cards 1-up; nav hamburger; gradient orbs shrink. |

| 태블릿 | 640~1024px | 영웅 h1 48px; 기능 카드 2개. |

| 데스크탑 | 1024~1280px | 전체 영웅 h1 64px; 기능 카드 3개. |

| 와이드 | > 1280px | 콘텐츠는 1200px로 제한됩니다. |

터치 대상

• 40픽셀 높이의 기본 알약 — WCAG AA, AAA용 패딩 처리됨
• 음성 아이콘 원 32px — 패딩 처리된 행은 효과적인 48px 탭 영역을 생성합니다.

축소 전략

• 상위 탐색은 768px 미만의 햄버거로 전환됩니다.
• 피처 그리드: 3개 → 2개 → 1개.
• 그라디언트 오브는 모든 중단점에서 직경을 줄이지만 사라지지는 않습니다.

반복 가이드

1. 한 번에 하나의 구성요소에 집중하세요.

2. CTA의 기본값은 ``입니다. 카드는 ``(16px)을 사용합니다.

3. 변형은 별도의 항목으로 표시됩니다.

4. 어디에서나 __CODEBCK_693___을 사용하세요. 16진수 인라인은 사용하지 마세요.

5. 호버 상태는 문서화되지 않았습니다.

6. 디스플레이용 Waldenburg 300, 바디용 Inter 400/500.

7. 대기 장식 범위의 그라데이션 구체입니다.

알려진 격차

• Waldenburg는 라이선스를 받은 서체입니다. EB Garamond / GT Sectra는 문서화된 대체품입니다.
• 애니메이션 타이밍(구 드리프트, 파형 펄스, 영웅 등장)이 범위를 벗어났습니다.
• 제품 내 표면(음성 라이브러리 편집기, 상담사 플레이그라운드)은 마케팅 모형을 통해 부분적으로만 캡처되었습니다.
• 초점을 벗어난 양식 유효성 검사 상태는 캡처된 표면에 표시되지 않습니다.

概要

イレブンラボは、静かに編集されている印刷雑誌のように読めますが、たまたま音声 AI 製品です。ベース キャンバスはオフホワイト `` (#f5f5f5) で、黒に近い温かみのあるインク `` (#0c0a09) です。ブランドのボルテージは**写真的なものであり、有彩色ではありません**。ソフトなパステル調の雰囲気のグラデーションの球体 (ミント、ピーチ、ラベンダー、空、バラ) が唯一の「カラー」の瞬間としてページを漂います。ネオンのアクセント、飽和した CTA カラー、ダークキャンバスの開発ツールの雰囲気はありません。

本文、ナビゲーション、キャプション用の **Inter** と表示用の **Waldenburg Light** (ウェイト 300 のカスタム セリフ) のペアを入力します。 300 での表示ウェイトは編集者の特徴であり、決して太字でなく、決して重くありません。

CTA は微妙です。黒に近いインクの錠剤 (``) が主で、透明な輪郭 (``) が副です。ブランドは、雰囲気のある写真と適度な文字の重みを信頼してブランド作品を伝えています。

**主な特徴:**

• _オフホワイトのキャンバス、黒に近い温かみのあるインク。飽和した CTA カラーはありません。
• 単一のプライマリ アクション: `` のインク剤。大気の勾配は、視覚的なブランドのボルテージを伝えます。
• ディスプレイはウェイト 300 で Waldenburg Light を実行します — 雑誌編集者の声。
• 本文は、微妙な文字間隔 (+0.15 ～ 0.18 ピクセル) で Inter を 400 で実行します。
• パステル グラデーション オーブ (5 つのトークン: ミント、ピーチ、ラベンダー、スカイ、ローズ) は、雰囲気のあるブランドの装飾としてのみ使用されます。
• ソフト ピル ジオメトリ (CTA の場合は``、カードの場合は``)。
• 96px セクションのリズム。

色

ブランドとアクセント

• **インク プライマリ** (`` — #292524): プライマリ アクション カラー — 黒に近い温かみのある色。 ほとんど使用されていません。
• **インク プライマリ アクティブ** (`` — #0c0a09): プレス状態。

サーフェス

• **キャンバス** (`` — #f5f5f5): オフホワイトのページフロア。
• **キャンバス ソフト** (`` — #fafafa): 微妙な交互セクション用の明るいバンド。
• **キャンバス ディープ** (`` — #0c0a09): インクと同じ — レアなダークモード ヒーロー (エージェント ページ) に使用されます。
• **表面カード** (`` — #ffffff): 純白のカード。
• **表面強度** (`` — #f0efed): バッジ、音声アイコン プレート。
• **Surface Dark** (`` — #0c0a09): ダーク ヒーロー/CTA バンド キャンバス。
• **サーフェス ダーク エレベーテッド** (`` — #1c1917): ダーク キャンバス上のカード。

ヘアライン

• **ヘアライン** (`` — #e7e5e4): デフォルトの 1 ピクセルの分割線。
• **ヘアライン ソフト** (`` — #f0efed): より軽い分割線。
• **強いヘアライン** (`` — #d6d3d1): より強いパネル アウトライン。

テキスト

• **インク** (`` — #0c0a09): 表示、プライマリ テキスト。
• **本文** (`` — #4e4e4e): デフォルトの実行テキスト。
• **ボディ ストロング** (`` — #292524): プライマリと同じ — 強調。
• **ミュート** (`` — #777169): 字幕。
• **ミュートソフト** (`` — #a8a29e): 無効なテキスト。
• **プライマリ** (`` — #ffffff): インク錠に白い文字。
• **ダーク上** (`` — #ffffff): ダーク ヒーローに白いテキスト。
• **ダーク ソフト上** (`` — #a8a29e): ダークでミュートされたオフホワイト。

大気勾配停止 (署名)

• **グラデーション ミント** (`` — #a7e5d3): ミント グリーンのオーブ。
• **グラデーション ピーチ** (`` — #f4c5a8): ピーチ オーブ。
• **グラデーション ラベンダー** (`` — #c8b8e0): ラベンダー オーブ。
• **グラデーション スカイ** (`` — #a8c8e8): 空色のオーブ。
• **グラデーション ローズ** (`` — #e8b8c4): ローズ オーブ。

これらは、__CODEBCK_577___ 内の柔らかい放射状グラデーションの大気球としてのみ表示され、ヒーロー コピーの背後にある背景の大気の花として表示されます。ボタンの塗りつぶしやテキストの色としては決して使用されません。

セマンティック

• **成功** (`` — #16a34a): 確認。
• **エラー** (`` — #dc2626): 検証エラー。

タイポグラフィ

フォント ファミリー

**Waldenburg Light** は、ウェイト 300 でライセンスされたディスプレイ セリフです。**Inter** には本文、ナビゲーション、キャプション、およびボタンが含まれます。 フォールバック: Waldenburg の場合は `'Times New Roman', serif`、Inter の場合は `sans-serif`。

階層_

|トークン |サイズ |重量 |行の高さ |文字間隔 | |

を使用します

|---|---|---|---|---|---|

| `` | 64ピクセル | 300 | 1.05 | -1.92ピクセル |ホームページ ヒーロー h1 |

| `` | 48ピクセル | 300 | 1.08 | -0.96ピクセル |補助ヒーロー |

| `` | 36ピクセル | 300 | 1.17 | -0.36ピクセル |セクションヘッド |

| `` | 32ピクセル | 300 | 1.13 | -0.32ピクセル |サブセクションの見出し |

| `` | 24ピクセル | 300 | 1.2 | 0 |カード グループのタイトル |

| `` | 20ピクセル | 500 | 1.35 | 0 |コンポーネントのタイトル — インター |

| `` | 18ピクセル | 500 | 1.44 | 0.18ピクセル |リストのラベル |

| `` | 16ピクセル | 400 | 1.5 | 0.16ピクセル |デフォルトの本文 — インター |

| `` | 16ピクセル | 500 | 1.5 | 0.16ピクセル |強調された本文 |

| `` | 15ピクセル | 400 | 1.47 | 0.15ピクセル |フッター本文 |

| `` | 14ピクセル | 400 | 1.5 | 0 |写真のキャプション |

| `` | 12ピクセル | 600 | 1.4 | 0.96ピクセル |セクションのラベル、バッジ |

| `` | 15ピクセル | 500 | 1.0 | 0 | CTA ピル |

| `` | 15ピクセル | 500 | 1.4 | 0 |トップナビゲーション メニュー |

原則_

• **表示ウェイトは 300 のままです。** Waldenburg Light は編集者の署名です。決して太字でコピーを表示しないでください。
• **本文の微妙な文字間隔。** インター +0.15 ～ 0.18 ピクセルのトラッキング — 編集感を高めるために、デフォルトのインターよりもわずかに緩めです。
• **表示上の負の文字間隔。** Waldenburg は表示サイズを -0.32 ピクセルから -1.92 ピクセルに狭めます。

フォントの代替に関する注意

ヴァルデンブルクはライセンスを取得しています。オープンソースの代替品: ウェイト 300 の **EB Garamond** (わずかにヒューマニスト) または **GT Sectra** (Waldenburg の現代性に近い)。ボディに Inter を直接使用します。これは、イレブンラボが使用しているのと同じファミリーです。

レイアウト

間隔システム_

• **基本単位:** 4px.
• **トークン:** `` 4px · `` 8px · `` 12px · `` 16px · `` 20px · `` 24px · `` 32px · `` 48px · `` 96px.
• **セクションのパディング:** 96px.

グリッドとコンテナ

• コンテンツの最大幅: ~1200px。
• 編集本文: 12 列グリッド。
• フィーチャー カード グリッド: ヒーロー スプリットの場合はデスクトップで 2 アップ、特典グリッドの場合は 3 アップ。
• フッター: デスクトップでは 5 列。

ホワイトスペースの哲学

ゆったりとした編集ペース — 印刷雑誌のような雰囲気。バンド間は96ピクセル。バンド内のカードは近くに配置されます (16 ～ 24 ピクセルの隙間)。大気のグラデーションのオーブは、コピーと競合することなく、十分な呼吸スペースを占めます。

標高と深さ

システムは **ヘアライン + ソフト ドロップ**を使用します。カードは、1 ピクセルのヘアラインと 1 つの微妙なシャドウ層を介して、オフホワイトのキャンバス上に浮かんでいます。 大気の深さは、グラデーション オーブから得られます。

|レベル |治療 | |

を使用します

|---|---|---|

|フラット（キャンバス） | `` (#f5f5f5) |ボディバンド、フッター |

|カード | `` (#ffffff) |コンテンツ カード |

|ヘアラインボーダー | ヘアラインボーダー1px `` |カードの概要 |

|ソフトドロップ | `0 4px 16px rgba(0, 0, 0, 0.04)` |ホバーされたカード (単一シャドウ層) |

|グラデーションオーブ | `` のいずれかを使用した放射状グラデーション |大気の深さ — カードの表面ではありません |

装飾の深さ_

• **パステル グラデーションのオーブ**は、ブランドの最も強力な雰囲気のパターンです。ミント、ピーチ、ラベンダー、スカイ、ローズなどの柔らかい放射状の花が、コンテンツを含まずにヒーロー バンドや特集セクションを漂います。それらは純粋な雰囲気です。

図形

境界線の半径スケール

|トークン |値 | |

を使用します

|---|---|---|

| `` | 0ピクセル |予約済み |

| `` | 4ピクセル |インライン タグ |

| `` | 6ピクセル |コンパクトな行 |

| `` | 8ピクセル |フォーム入力 |

| `` | 12ピクセル |コンパクト カード |

| `` | 16ピクセル |機能カード、価格帯 |

| `` | 24ピクセル |グラデーション オーブ カード (エクストラソフト) |

| `` | 9999ピクセル |すべての CTA ボタン、バッジ |

| `` | 9999ピクセル |音声アイコン サークル、アバター |

コンポーネント

トップナビゲーション_

_**`top-nav`** — 背景 ``、テキスト ``、高さ 64 ピクセル。レイアウト: イレブンラボのワードマーク左、プライマリ水平メニュー (クリエイティブ / エージェント / ビデオ / 価格設定 / エンタープライズ / ドキュメント)、右にサインイン + 「無料お試し」プライマリ CTA。

ボタン

**`button-primary`** — 黒に近いインクの錠剤。背景 ``、テキスト ``、タイプ `` (15px / 500)、パディング 10px × 20px、高さ 40px、丸め ``.

_**`button-primary-active`** — プレス状態。背景 ``.

**`button-outline`** — 1 ピクセルのインク枠が付いた透明な錠剤。背景透明、テキスト__CODEBCK_630___、1ピクセル__CODEBCK_631___境界線。

**`button-tertiary-text`** — インライン インク テキスト リンク。

ヒーローと雰囲気

_**`hero-band`** — 背景 ``、__CODEBCK_635___ (64px / 300 / -1.92px) の全幅表示見出し、__CODEBCK_636___ の小見出し、2 つの CTA、中央の背後にある大気のグラデーション オーブ見出し。

**`gradient-orb-card`** — 中央の表示コピーの後ろに柔らかい放射状グラデーションのオーブがある大きなカード。背景__CODEBCK_638___、角丸__CODEBCK_639___ (24ピクセル)、パディング32ピクセル。各バリアントは、5 つのグラデーション トークン (`gradient-mint`、__CODEBCK_641___、__CODEBCK_642___、__CODEBCK_643___、__CODEBCK_644___) のいずれかを使用します。

**`audio-waveform-card`** — 波形視覚化カード。背景__CODEBCK_646___、角丸__CODEBCK_647___、パディング24ピクセル。 再生ボタン + 波形グリフ + 音声メタデータを保持します。

カード

_**`feature-card`** — 2 アップまたは 3 アップのグリッド。背景__CODEBCK_649___、テキスト__CODEBCK_650___、角丸__CODEBCK_651___、パディング24ピクセル、ヘアライン境界線1ピクセル。

**`product-card-stack`** — 積み重ねられた製品プレビュー カード。背景__CODEBCK_653___、角丸__CODEBCK_654___、パディングなし(子はカードの端から端まで埋めます)。

_**`testimonial-card`** — 引用カード。背景__CODEBCK_656___、テキスト__CODEBCK_657___、角丸__CODEBCK_658___、パディング32ピクセル。

音声ライブラリ

**`voice-row`** — 音声リストの水平行。背景は透明、1 ピクセルのヘアラインの仕切り。レイアウト: 32 ピクセルの円形音声アイコン (``) 左側、音声名 + アクセント スタック、右側にオプションのプレビュー ボタン。

**`voice-icon-circular`** — 背景__CODEBCK_662___、丸みを帯びた__CODEBCK_663___、直径32ピクセル。イニシャルまたは音声グリフを保持します。

価格

_**`pricing-tier-card`** — 背景__CODEBCK_665___、角丸__CODEBCK_666___、パディング32ピクセル、ヘアライン境界線1ピクセル。

**`pricing-tier-featured`** — 注目の階層反転。背景__CODEBCK_668___、テキスト__CODEBCK_669___。同じ形状、ダーク反転。

フォームとタグ

**`text-input`** — 背景 ``、テキスト ``、角丸 `` (8 ピクセル)、パディング 12 ピクセル × 16 ピクセル、高さ 44 ピクセル、1 ピクセル `` 境界線。フォーカスすると、境界線が 2 ピクセルのインクに太くなります。

**`badge-pill`** — 背景__CODEBCK_676___、テキスト__CODEBCK_677___、タイプ__CODEBCK_678___、丸め__CODEBCK_679___、パディング4px × 10px。

CTA / フッター

**`cta-band`** — プレフッター。背景__CODEBCK_681___、__CODEBCK_682___の中央に表示される見出し、単一のインク錠剤CTA。 96 ピクセルのパディング。

**`footer`** — フッターを閉じます。背景__CODEBCK_684___、テキスト__CODEBCK_685___。 5列のリンクリスト。 64×48 ピクセルのパディング。

**`footer-link`** - 背景透明、テキスト__CODEBCK_687___、タイプ__CODEBCK_688___.

推奨事項と禁止事項

__HTMLTAG_454___ を実行してください

• __CODEBCK_689___ (インク錠剤) をプライマリ CTA 用に予約してください。
• _すべての表示見出しにウェイト 300 の Waldenburg Light を使用します。決して太字にしないでください。
• 本文には +0.15 ～ 0.18 ピクセルのトラッキングでインテルを使用します — 編集上の方言です。
• 大気のグラデーション オーブ (ミント/ピーチ/ラベンダー/スカイ/ローズ) は装飾としてのみ使用してください。
• すべての CTA とバッジに錠剤の形を使用します。

しないでください

• 飽和したブランド アクション カラーを導入しないでください。 CTA カラーはインク丸のみです。
• コピーを太字で表示しないでください。ディスプレイのウェイトは 300 です。大胆な表示により、ブランドの声が編集から消費者マーケティングに移行します。
• グラデーション オーブをボタンの塗りつぶし、テキストの色、コンポーネントの背景として使用しないでください。純粋な雰囲気です。
• CTA ではシャープ `` (0px) を使用しないでください。錠剤のジオメトリはブランド ボタンです。
• ヴァルデンブルクに合わせてインテルのボディをウェイト 300 に落とさないでください。読みやすさのため、ボディは 400/500 のままです。
• サードパーティのウィジェット (Cookie 同意、OneTrust) から CTA カラーを抽出しないでください。 ブランドの CTA カラーは、実際の商品 CTA に表示されるものです。

応答動作

ブレークポイント_

|名前 |幅 |主な変更点 |

|---|---|---|

|モバイル | < 640px | Hero h1 64→32px; feature cards 1-up; nav hamburger; gradient orbs shrink. |

|タブレット | 640–1024ピクセル |ヒーロー h1 48px;フィーチャーカードは2アップ。 |

|デスクトップ | 1024–1280ピクセル |フルヒーロー h1 64px;フィーチャーカード 3 アップ。 |

|ワイド | > 1280ピクセル |コンテンツの上限は 1200 ピクセルです。 |

_タッチターゲット_

• 高さ 40 ピクセルのプライマリ ピル — WCAG AA で、AAA 用にパディング。
• 音声アイコンの円は 32 ピクセルです — 埋め込まれた行により、有効な 48 ピクセルのタップ ゾーンが作成されます。

戦略の崩壊

• 上部のナビゲーションは 768 ピクセル以下のハンバーガーに切り替わります。
• フィーチャー グリッド: 3-up → 2-up → 1-up.
• グラデーション オーブはブレークポイントごとに直径を縮小しますが、消えることはありません。

反復ガイド

1.一度に 1 つのコンポーネントに注目してください。

2. CTA のデフォルトは `` です。カードは__CODEBCK_692___ (16ピクセル).

を使用します。

3.バリアントは個別のエントリとして存在します。

4. `` をどこでも使用します。16 進数をインライン化しないでください。

5.ホバー状態は文書化されていません。

6.ディスプレイは Waldenburg 300、本体は Inter 400/500。

7.大気の装飾を対象としたグラデーション オーブ。

既知のギャップ

• _Waldenburg はライセンスされた書体です。 EB Garamond / GT Sectra は文書化された代替品です。
• アニメーションのタイミング (オーブのドリフト、波形パルス、ヒーローの入場) は範囲外です。
• 製品内サーフェス (音声ライブラリ エディター、エージェント プレイグラウンド) は、マーケティング モックアップによって部分的にのみキャプチャされました。
• フォーカスを超えたフォーム検証状態は、キャプチャされたサーフェスには表示されません。

Design Approach

Elevenlabs's design system reflects a deliberate visual strategy that prioritizes expressive richness in every interface. The brand language centers on a #f5f5f5 anchor, creating an immediate visual signature that differentiates Elevenlabs from competitors in the same space. What makes this system particularly effective is how consistently the brand identity carries across surfaces — from marketing pages to product UI — without feeling repetitive or rigid.

Design Approach

Elevenlabs's design system reflects a deliberate visual strategy that prioritizes expressive richness in every interface. The brand language centers on a #f5f5f5 anchor, creating an immediate visual signature that differentiates Elevenlabs from competitors in the same space. What makes this system particularly effective is how consistently the brand identity carries across surfaces — from marketing pages to product UI — without feeling repetitive or rigid.

Design Approach

Elevenlabs's design system reflects a deliberate visual strategy that prioritizes expressive richness in every interface. The brand language centers on a #f5f5f5 anchor, creating an immediate visual signature that differentiates Elevenlabs from competitors in the same space. What makes this system particularly effective is how consistently the brand identity carries across surfaces — from marketing pages to product UI — without feeling repetitive or rigid.

Related Design Systems

Explore similar design languages from the same category:

• X Design System
• Voltagent Design System
• Together Design System
• Cohere Design System