ElevenLabs · scrub to study layout
ElevenLabs
> ElevenLabs
Warm cream editorial with whispered headlines. A Bauhaus studio notebook — eggshell paper, black ink, a single violet and orange spark for product moments. ElevenLabs runs on a warm-white minimalism: an off-white eggshell canvas (#fdfcfc) holding black type and a single layer of warm taupe surfaces (#f5f3f1). The brand voice is quiet and confident — whisper-weight Waldenburg at 300 carves display headlines with extreme tightness (-0.02em), while Inter at 400/500 carries everything else with calm neutrality. Two accent sparks — vivid violet #0447ff and vivid orange #ff4704 — only ignite inside product visuals (audio spheres, product icons), never as UI chrome. Components stay flat or barely elevated with hairline 1px borders, generous 20px radii on cards, and fully-pilled 9999px buttons. The system feels like a Bauhaus studio on cream paper: restrained, editorial, and technically precise.
↗ https://elevenlabs.ioColor Palette
BRAND
Violet Spark
#0447ff
Product visual accent — appears inside audio sphere illustrations and decorative product icons only; never used for UI chrome
ACCENT
Violet Spark
#0447ff
Product visual accent — appears inside audio sphere illustrations and decorative product icons only; never used for UI chrome
Ember Orange
#ff4704
Product visual accent — second sphere color and product icon highlight; paired with Violet Spark inside artwork, never in buttons or links
NEUTRALS
Ink
#000000
Primary text, filled buttons, nav, links — pure black anchors the otherwise warm palette and creates the system's only hard contrast
Graphite
#44403b
Strong secondary text, section labels — barely-warm dark gray for text that needs weight without true-black harshness
Smoke
#777169
Body text, muted descriptions, caption labels — mid warm-gray; the dominant readable-but-quiet voice across cards and feature copy
Ash
#a59f97
Faintest helper text, tertiary descriptions — the softest gray, used when text should feel like a footnote
Stone
#ebe8e4
Hairline borders, dividers, icon plate backgrounds — warm gray that sits between taupe and mid-gray without feeling cold
Warm Taupe
#f5f3f1
Section bands, feature cards, and secondary surface level — one step deeper than eggshell, creates quiet separation without borders
Eggshell
#fdfcfc
Page canvas, button surfaces, card surfaces — warm off-white rather than clinical white avoids digital glare and gives the site a paper-like calm)
Typography
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
THE QUICK BROWN FOX JUMPS
The quick brown fox jumps
FONTS
Spacing & Shape
Guidelines
✓ DO
- Use #8052ff (Electric Iris) exclusively for primary action buttons
- Set headlines at weight 400 with aggressive negative letter spacing (-0.04em)
- Use weight 200 (ultra-light) for 18px body text for airy readability
- Maintain pure #000000 black as section canvas background
✕ DON'T
- Do not use filled violet for large background surface containers
- Do not set body text at standard weight 400
- Do not introduce card containers with heavy borders or drop shadows
- Do not add color gradients to flat UI components
Similar Design Systems
Explore related DESIGN.md specifications & token sets.
Dala
Dala design tokens and UI patterns as AI-ready DESIGN.md for Cursor, Claude Code, and v0.
Caldera
Caldera runs on a warm limestone canvas flooded with molten orange. The interface is flat and unshadowed, letting ultrabold compressed type at near-architectural scale (up to 189px) carry all structural weight. A single vivid orange (#fc5000) acts as the only aggressive chromatic accent against monochrome warm grays, with a violet plasma reserved for the hero halftone and a sulfur yellow for tags. The visual language is volcanic: condensed heavy letterforms, halftone dot patterns, 40px radii on cards and buttons, and 800px pill controls — heat contained within a soft, paper-like surface. https://caldera.xyz
Awesomic
editorial zinc grid with confetti-orange punctuation. Awesomic operates in a restrained, neutral-first visual register: a zinc-gray scale carries nearly the entire interface, with one vivid orange badge accent and almost no other chromatic intrusion. The geometry is defined by generous corner rounding — 36px cards, 14px buttons, 10000px pills — and hairline 1px borders replace drop shadows as the primary elevation tool. Typography is a single custom geometric sans (Cosmica) deployed at bold display weights (56–64px / weight 600) for editorial headlines, paired with compact 14px body text that signals efficiency. The atmosphere is that of a confident, infrastructure-grade marketplace: quiet surfaces, precise density, and color deployed as functional punctuation rather than decoration.