# ElevenLabs — Marketing Site Design Spec

> Source: elevenlabs.io (live DOM, computed styles), 2026-07-10 (desktop 1512px).
> Coverage: marketing home (hero + product-switcher). Dashboard: pending login (`needs-dashboard`). Responsive: behavior only; mobile not verified.

## 1. Visual Theme & Atmosphere

Warm, gallery-white AI product design — a paper-toned off-white canvas, near-black text, and light-weight display type give it a calm, editorial, almost print feel. The recognizable brand moment is the grainy gradient orb: soft radial spheres with visible film-grain noise, each a different multi-hue blend (violet, coral, green-gold, blush), arranged like a row of planets in the product switcher. Chrome is minimal and monochrome — black pills, hairline outlines — so all the color energy is concentrated in the orbs and a rationed orange/blue accent pair. It avoids the neon-dark cliché of AI voice tools; instead it feels human, quiet and premium. Feels: warm, editorial, calm, crafted.

## 2. Color Palette & Roles

### Surfaces (warm paper)
| Token | Hex | Role / usage |
|---|---|---|
| paper-0 | `#ffffff` | Cards, active tab, top surface |
| paper-50 | `#fdfcfc` | Page background (warm white) |
| paper-100 | `#faf8f8` | Subtle raised fill |
| paper-200 | `#f5f3f1` | Section / inactive-tab background |
| paper-300 | `#ebe8e4` | Divider blocks, hover fill |
| ink | `#000000` | Primary text, black pill buttons |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#000000` | Headings, primary text |
| gray-700 | `#44403b` | Strong secondary text |
| gray-500 | `#59544f` | Body secondary |
| gray-400 | `#777169` | Muted / captions |
| gray-300 | `#a59f97` | Faint / placeholder |

### Accents (rationed)
| Token | Hex | Role / usage |
|---|---|---|
| orange-500 | `#ff4704` | Primary brand accent (highlights, orb hue) |
| red-500 | `#f41a2f` | Alert / warm accent variant |
| blue-600 | `#0447ff` | Secondary accent (links, focus) |
| blue-700 | `#0a59d2` / `#052f70` | Deep blue variants |

Rule: chrome stays black-on-paper; color lives in the grainy orbs and a rationed orange/blue pair.

## 3. Typography Rules

- Display / headings: `Waldenburg` (proprietary grotesque) — used LIGHT (weight 300) at large sizes with tight tracking.
- Body / UI: `Inter` (with Inter Fallback).
- Mono labels: `Geist Mono` — small technical labels, code, badges.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero display (h1) | 48 / 52 | 300 | -0.96px (-2%) |
| Section head (h2) | ~32 / 1.15 | 300–400 | -1% |
| Body / lead | 16–18 / 24 | 400 | 0 |
| UI / buttons | 14–15 | 400 | 0 |
| Mono label | 12–13 | 400 | 0, Geist Mono |

Patterns: display type is LIGHT (300), not bold — the lightness is the signature. Tight negative tracking on large sizes. Weight rarely exceeds 400.

## 4. Component Stylings

### Buttons
- **Primary**: bg `#000000`, text `#ffffff`, radius pill (9999px), h 36–40px, padding `0 14–16px`, 14–15px/400. Hover: slight lift/opacity.
- **Secondary (outline)**: bg `#ffffff`, text `#000000`, 1px hairline border, radius pill, same height.
- **Nav tab (segmented)**: radius 18px pill, h 36px, padding `8px 12px`; active tab bg `#ffffff` on `#f5f3f1` track, inactive transparent.

### Inputs
- Radius pill or 14px, hairline border on paper, placeholder `#a59f97`. (Exact focus ring not captured — treat as blue `#0447ff` hairline.)

### Cards / panels
- bg `#ffffff` or `#f5f3f1`, radius 20px, soft layered shadow (see §6), generous padding.

### Product switcher (signature)
- Tabbed panel: segmented pill tabs (ElevenCreative / ElevenAgents / ElevenAPI) over a large `#f5f3f1` panel (radius 20px) holding a row of grainy gradient orbs and a circular play button.

### Voice-chat launcher
- Floating bottom-right pill: white, hairline border, soft shadow, small gradient-orb avatar + "Voice chat" label.

## 5. Layout Principles

- Wide canvas; hero is a two-column split — big light headline left, muted paragraph right.
- Section rhythm generous; large rounded (20px) panels for product demos.
- Base radii: 4px small, 14–20px cards, full pills for controls/tabs.
- Nav: logo left, center product/nav links, right "Log in" (ghost) + "Sign up" (black pill).

## 6. Depth & Elevation

- Radii: small `4px`, control/tab pill (`9999`/`18–20px`), card `20px`, mid `14px`.
- Control height: buttons `36–40px`; tabs `36px`.
- Shadow (cards/floaters): `0 0 1px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.04), 0 2px 4px rgba(0,0,0,.04)` — soft, low, warm-neutral.
- Elevation is gentle; hairlines + soft shadows, no heavy drop shadows.

## 7. Motion

- Restrained micro-motion: tab cross-fades, hover lifts, and the orbs' grain shimmer / slow drift.
- Play button and voice-chat launcher animate on hover.
- No aggressive parallax; treat transitions as 150–300ms ease. (Library not confirmed.)

## 8. Backgrounds, Effects & WebGL

- **Signature**: grainy gradient orbs — soft radial-gradient spheres overlaid with film-grain/noise, each a distinct multi-hue blend (violet→blue, coral→red→gold, green→olive→orange, blush→pink). Arranged as a planet row in the product switcher.
- Canvas is flat warm paper (`#fdfcfc`); no dark mode on marketing home.
- Grain/noise texture is the key effect; gradients are radial and soft, never hard-edged. No large WebGL scenes observed on the home hero.

## 9. Do's and Don'ts

### Do
- Use a warm paper canvas (`#fdfcfc`/`#f5f3f1`) with near-black text — not a dark neon theme.
- Set display headlines in Waldenburg at LIGHT weight (300) with tight tracking (-2%).
- Concentrate color in grainy gradient orbs; keep chrome black-on-paper.
- Ration accents to an orange (`#ff4704`) / blue (`#0447ff`) pair.
- Use full-pill black primary buttons and white outline secondaries; 20px rounded panels.
- Add subtle film-grain noise over soft radial gradients.

### Don't
- Don't go dark/neon — the surface is warm paper.
- Don't set headings bold; the light 300 weight is the signature.
- Don't use hard-edged gradients or flat vector orbs — grain is essential.
- Don't introduce a third loud accent; keep orange/blue rationed.

## 10. Responsive Behavior

- Nav collapses to a menu; hero split stacks to single column.
- Product-switcher orbs scroll/scale down.
- Specific breakpoints not captured (desktop only).

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#fdfcfc` · Text `#000000` · Muted `#777169` · Panel `#f5f3f1` · Accent `#ff4704` / `#0447ff`
- Font: `Waldenburg` (display, 300) / `Inter` (body) / `Geist Mono` (labels) · Body: 16px · Radius: pill / 20px card · Control height: 36–40px
- Primary button: black `#000` pill, white text · Card shadow: `0 2px 4px rgba(0,0,0,.04)`

<elevenlabs_design_language>
Use the ElevenLabs design language: warm gallery-white AI product. Canvas is paper-toned off-white (#fdfcfc, panels #f5f3f1, cards #ffffff) with near-black text (#000, muted #777169, faint #a59f97). Display type is Waldenburg set LIGHT (weight 300) at 48px with tight -2% tracking — never bold; body is Inter 16px; small technical labels use Geist Mono. Chrome is strictly black-on-paper: primary buttons are solid black #000 full-pill with white text (36–40px), secondaries are white hairline-outline pills, and segmented tabs are 18px pills (active #fff on #f5f3f1). Panels are 20px-rounded with soft low shadows (0 2px 4px rgba(0,0,0,.04), 0 0 1px rgba(0,0,0,.4)). The signature brand moment is the grainy gradient orb: soft radial-gradient spheres overlaid with film-grain noise, each a distinct multi-hue blend (violet→blue, coral→red→gold, green→olive→orange), arranged as a planet row in a tabbed product switcher — all the color energy lives here while accents stay rationed to an orange #ff4704 / blue #0447ff pair. Motion is restrained: tab cross-fades, hover lifts, slow orb grain-drift at 150–300ms. Feels: warm, editorial, calm, crafted. Avoid: dark/neon themes, bold headings, hard-edged or grain-less gradients, and a third loud accent.
</elevenlabs_design_language>