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

표시용 쌍 **Waldenburg Light**(가중치 300의 사용자 정의 세리프)를 입력하고 본문, 탐색, 캡션에는 **Inter**를 입력합니다. 300의 디스플레이 무게는 편집자의 시그니처입니다. 결코 굵지도 무겁지도 않습니다.

CTA는 미묘합니다. 검은색에 가까운 잉크 알약(`{comComponent.button-primary}`)이 기본이고 투명한 윤곽선(`{comComponent.button-outline}`)이 보조입니다. 브랜드는 브랜드 작업을 수행하기 위해 분위기 있는 사진과 겸손한 유형의 무게를 신뢰합니다.

**주요 특징:**

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

색상

브랜드 및 액센트

• **잉크 기본** (`{colors.primary}` — #292524): 기본 작업 색상 — 검은색에 가까운 따뜻한 알약입니다. 거의 사용되지 않았습니다.
• **잉크 기본 활성**(`{colors.primary-active}` — #0c0a09): 프레스 상태.

표면

• **캔버스** (`{colors.canvas}` — #f5f5f5): 황백색 페이지 바닥.
• **캔버스 소프트**(`{colors.canvas-soft}` — #fafafa): 미묘한 교대 섹션을 위한 더 밝은 밴드입니다.
• **Canvas Deep** (`{colors.canvas-deep}` — #0c0a09): 잉크와 동일 — 희귀한 다크 모드 영웅에 사용됩니다(에이전트 페이지).
• **표면 카드**(`{colors.surface-card}` — #ffffff): 순백색 카드.
• **Surface Strong** (`{colors.surface-strong}` — #f0efed): 배지, 음성 아이콘 플레이트.
• **Surface Dark** (`{colors.surface-dark}` — #0c0a09): 다크 히어로/CTA 밴드 캔버스.
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1c1917): 어두운 캔버스 위의 카드.

헤어라인

• **헤어라인** (`{colors.hairline}` — #e7e5e4): 기본 1px 구분선입니다.
• **Hairline Soft** (`{colors.hairline-soft}` — #f0efed): 더 가벼운 구분선.
• **Hairline Strong** (`{colors.hairline-strong}` — #d6d3d1): 패널 윤곽선이 더 강해졌습니다.

텍스트

• **잉크**(`{colors.ink}` — #0c0a09): 디스플레이, 기본 텍스트.
• **본문**(`{colors.body}` — #4e4e4e): 기본 실행 텍스트입니다.
• **Body Strong** (`{colors.body-strong}` — #292524): 기본 — 강조와 동일합니다.
• **음소거됨** (`{colors.muted}` — #777169): 부제목.
• **음소거 소프트**(`{colors.muted-soft}` — #a8a29e): 비활성화된 텍스트입니다.
• **On Primary** (`{colors.on-primary}` — #ffffff): 잉크 알약에 흰색 텍스트.
• **On Dark** (`{colors.on-dark}` — #ffffff): 어두운 영웅에 흰색 텍스트입니다.
• **어두운 부드러움** (`{colors.on-dark-soft}` — #a8a29e): 어두운 바탕에 음소거된 황백색.

대기 경사 정지(서명)

• **그라디언트 민트** (`{colors.gradient-mint}` — #a7e5d3): 민트 그린 오브.
• **그라디언트 복숭아** (`{colors.gradient-peach}` — #f4c5a8): 복숭아 구.
• **그라디언트 라벤더** (`{colors.gradient-lavender}` — #c8b8e0): 라벤더 구.
• **그라디언트 스카이** (`{colors.gradient-sky}` — #a8c8e8): 하늘색 구체.
• **그라디언트 장미** (`{colors.gradient-rose}` — #e8b8c4): 장미 구체.

이는 `{comComponent.gradient-orb-card}` 내부의 부드러운 방사형 그라데이션 대기 구로만 나타나며 영웅 사본 뒤의 배경 대기 꽃으로만 나타납니다. 절대로 버튼을 채우거나 텍스트 색상으로 채우지 마세요.

의미론

• **성공** (`{colors.semantic-success}` — #16a34a): 확인.
• **오류** (`{colors.semantic-error}` — #dc2626): 유효성 검사 오류.

타이포그래피

글꼴 계열

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

계층 구조

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

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

| `{typography.display-mega}` | 64px | 300 | 1.05 | -1.92px | 홈페이지 히어로 h1 |

| `{typography.display-xl}` | 48px | 300 | 1.08 | -0.96px | 자회사 영웅 |

| `{typography.display-lg}` | 36px | 300 | 1.17 | -0.36px | 부문장 |

| `{typography.display-md}` | 32px | 300 | 1.13 | -0.32px | 하위 부문장 |

| `{typography.display-sm}` | 24px | 300 | 1.2 | 0 | 카드 그룹 제목 |

| `{typography.title-md}` | 20픽셀 | 500 | 1.35 | 0 | 구성 요소 제목 — Inter |

| `{typography.title-sm}` | 18px | 500 | 1.44 | 0.18px | 라벨 목록 |

| `{typography.body-md}` | 16px | 400 | 1.5 | 0.16px | 기본 본문 — Inter |

| `{typography.body-strong}` | 16px | 50

概要

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

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

CTA は微妙です。黒に近いインクの丸 (`{component.button-primary}`) が主で、透明な輪郭 (`{component.button-outline}`) が副です。このブランドは、雰囲気のある写真と控えめなタイプの重みを信頼してブランド作品を伝えています。

**主な特徴:**

• Off-white canvas, warm near-black ink.飽和した CTA カラーはありません。
• 単一のプライマリ アクション: `{rounded.pill}` のインクの丸薬。大気の勾配は視覚的なブランドボルテージをもたらします。
• ディスプレイは Waldenburg Light を重量 300 で実行します — 雑誌編集者の声。
• 本文は Inter を 400 で実行し、微妙な文字間隔 (+0.15 ～ 0.18 ピクセル) を設定します。
• パステル グラデーション オーブ (5 トークン: ミント、ピーチ、ラベンダー、スカイ、ローズ) は、雰囲気のあるブランドの装飾としてのみ使用されます。
• ソフト ピル ジオメトリ (CTA の場合は `{rounded.pill}`、カードの場合は `{rounded.xl}`)。
• 96pxセクションリズム。

色

ブランドとアクセント

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

表面

• **キャンバス** (`{colors.canvas}` — #f5f5f5): オフホワイトのページフロア。
• **Canvas Soft** (`{colors.canvas-soft}` — #fafafa): 微妙な交互セクション用の明るいバンド。
• **キャンバス ディープ** (`{colors.canvas-deep}` — #0c0a09): インクと同じ — レアなダークモード ヒーローに使用されます (エージェント ページ)。
• **Surface Card** (`{colors.surface-card}` — #ffffff): 純白のカード。
• **Surface Strong** (`{colors.surface-strong}` — #f0efed): バッジ、音声アイコン プレート。
• **Surface Dark** (`{colors.surface-dark}` — #0c0a09): ダーク ヒーロー/CTA バンド キャンバス。
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1c1917): ダーク キャンバス上のカード。

ヘアライン

• **ヘアライン** (`{colors.hairline}` — #e7e5e4): デフォルトの 1 ピクセルの分割線。
• **Hairline Soft** (`{colors.hairline-soft}` — #f0efed): より明るい分割線。
• **ヘアライン ストロング** (`{colors.hairline-strong}` — #d6d3d1): より強力なパネル アウトライン。

テキスト

• **インク** (`{colors.ink}` — #0c0a09): 表示、プライマリ テキスト。
• **本文** (`{colors.body}` — #4e4e4e): デフォルトの実行テキスト。
• **Body Strong** (`{colors.body-strong}` — #292524): プライマリと同じ — 強調。
• **ミュート** (`{colors.muted}` — #777169): サブタイトル。
• **ミュート ソフト** (`{colors.muted-soft}` — #a8a29e): 無効なテキスト。
• **プライマリ上** (`{colors.on-primary}` — #ffffff): インク錠に白い文字。
• **オン ダーク** (`{colors.on-dark}` — #ffffff): ダーク ヒーローに白のテキスト。
• **オン ダーク ソフト** (`{colors.on-dark-soft}` — #a8a29e): ダークでミュートされたオフホワイト。

Atmospheric Gradient Stops (signature)

• **グラデーションミント** (`{colors.gradient-mint}` — #a7e5d3): ミントグリーンのオーブ。
• **グラデーション ピーチ** (`{colors.gradient-peach}` — #f4c5a8): ピーチ オーブ。
• **グラデーション ラベンダー** (`{colors.gradient-lavender}` — #c8b8e0): ラベンダーのオーブ。
• **グラデーション スカイ** (`{colors.gradient-sky}` — #a8c8e8): 空色のオーブ。
• **グラデーション ローズ** (`{colors.gradient-rose}` — #e8b8c4): ローズ オーブ。

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

セマンティック

• **成功** (`{colors.semantic-success}` — #16a34a): 確認。
• **エラー** (`{colors.semantic-error}` — #dc2626): 検証エラー。

タイポグラフィー

フォントファミリー

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

階層

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

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

| `{typography.display-mega}` | 64ピクセル | 300 | 1.05 | -1.92ピクセル |ホームページ ヒーロー h1 |

| `{typography.display-xl}` | 48ピクセル | 300 | 1.08 | -0.96ピクセル |サブヒーロー |

| `{typography.display-lg}` | 36ピクセル | 300 | 1.17 | -0.36ピクセル |課長 |

| `{typography.display-md}` | 32ピクセル | 300 | 1.13 | -0.32ピクセル |サブセクションの責任者 |

| `{typography.display-sm}` | 24ピクセル | 300 | 1.2 | 0 |カードグループタイトル |

| `{typography.title-md}` | 20ピクセル | 500 | 1.35 | 0 |コンポーネントのタイトル — Inter |

| `{typography.title-sm}` | 18ピクセル | 500 | 1.44 | 0.18ピクセル |リストラベル |

| `{typography.body-md}` | 16ピクセル | 400 | 1.5 | 0.16ピクセル |デフォルトの本文 — Inter |

| `{typography.body-strong}` | 16ピクセル | 50