DESIGN.md@.agents/tools/design/library/brands/elevenlabs git:20260404.2e83279A

Immutable. This exact content is served forever at /api/v1/blob/79f87d500a46af2a.

<!-- SPDX-License-Identifier: MIT -->
<!-- SPDX-FileCopyrightText: 2025-2026 Marcus Quinn -->

# Design System: ElevenLabs

Near-white canvas with warm undertones, Waldenburg weight 300 (light) for display headings, Inter with positive letter-spacing for body, multi-layered shadow stacks at sub-0.1 opacity, and pill buttons with warm stone-tinted backgrounds.

## Chapters

| # | File | Contents |
|---|------|----------|
| 1 | [01-visual-theme.md](01-visual-theme.md) | Visual theme & atmosphere, key characteristics |
| 2 | [02-color-palette.md](02-color-palette.md) | Full color palette — primary, neutral, interactive, shadows |
| 3 | [03-typography.md](03-typography.md) | Font families, type hierarchy table, typographic principles |
| 4 | [04-components.md](04-components.md) | Buttons, cards, inputs, navigation, images, distinctive components |
| 5 | [05-layout.md](05-layout.md) | Spacing system, grid, whitespace philosophy, border radius scale |
| 6 | [06-depth-elevation.md](06-depth-elevation.md) | Elevation levels table, shadow philosophy |
| 7 | [07-dos-donts.md](07-dos-donts.md) | Do's and don'ts — common mistakes and correct patterns |
| 8 | [08-responsive.md](08-responsive.md) | Breakpoints, touch targets, collapsing strategy, image behavior |
| 9 | [09-agent-prompt-guide.md](09-agent-prompt-guide.md) | Quick color reference, example component prompts, iteration guide |

## Quick Reference

| Token | Value |
|-------|-------|
| Background | `#ffffff` (pure white) or `#f5f5f5` (light gray) |
| Primary text | `#000000` |
| Secondary text | `#4e4e4e` |
| Muted text | `#777169` (warm gray) |
| Warm surface | `rgba(245, 242, 239, 0.8)` (warm stone) |
| Border | `#e5e5e5` or `rgba(0,0,0,0.05)` |
| Display font | Waldenburg weight 300 (light — NOT bold) |
| Body font | Inter, letter-spacing +0.14px to +0.18px |
| CTA font | WaldenburgFH weight 700 uppercase (specific labels only) |
| Code font | Geist Mono |
| Button radius | 9999px (pill) |
| Card radius | 16px–24px |
| Warm CTA shadow | `rgba(78,50,23,0.04) 0px 6px 16px` |