Warm gallery-white AI voice: paper canvas, light-weight Waldenburg display, black pill CTAs, and signature grainy gradient orbs holding all the color, with a rationed orange/blue accent pair.
Browse ElevenLabs in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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 |
| 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.
Waldenburg (proprietary grotesque) — used LIGHT (weight 300) at large sizes with tight tracking.Inter (with Inter Fallback).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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.