Elevenlabs
elevenlabs.ioThe reference for an achromatic warm-paper product page where colour is banned from the UI and survives only as gradient orbs (violet #0447ff, ember #ff4704) that read as sound made visible.
Developer Tool flagship
Design tokens
background
surface
text
textMuted
accent
border
tone1
tone2
- display
- Waldenburg
- body
- Inter
- mono
- Geist Mono
Do / Don't
Reference it for
- Warm-paper canvas system: parchment-white page #fdfcfc under a large warm-sand card #f5f3f1 at radius 20 to 24px, so the hero feels tactile, not flat white
- Strictly monochrome affordances: black pill primary (Sign up) beside a white pill with hairline border (Contact sales), both fully rounded (radius 9999px), no colour CTA anywhere
- Split-column hero: oversized display headline left, a short muted paragraph parked top-right as the subhead instead of stacked under the heading
- Gradient orb carousel as the product visual: a row of soft grainy spheres at varying scales with a centred circular play button, colour confined to the artwork
- Pill segmented control top-left of the card (ElevenCreative / ElevenAgents / ElevenAPI) with a small colour dot per tab as the only chromatic UI accent
- Bottom inner filter row of ghost text tabs (Text to Speech, Music, Speech to Text...) with one active item in a white pill, label-as-navigation
- Hairline borders #e5e5e5 and inset ring shadows (rgba(0,0,0,0.06) 0 0 0 1px) doing all the elevation, no drop shadows under the card
- Muted text hierarchy: pure black #000000 body over driftwood #777169 for secondary captions under each orb
Do not copy
- The IIElevenLabs wordmark and the double-bar I logo glyph
- The ElevenCreative / ElevenAgents / ElevenAPI product names and their dot colours
- The specific grainy gradient orb renders (the coral, violet-blue and green-orange spheres)
- Waldenburg / WaldenburgFH as the typeface (proprietary; substitute a neutral grotesque)
- The voice-AI copy framing (10,000+ studio quality AI voices, Narration/Conversational labels)
- The exact brand hex pairing of void violet #0447ff with ember orange #ff4704 as a signature