Home
DESIGN.mdStar on GitHub

Bringing technology to life

Generate ultra-realistic speech, videos, music, and sound effects — the most realistic AI audio platform.

Colors
Primary (monochrome)
ink#000000Text, buttons (light)
eggshell#FDFCFCPage (light)
canvas-dark#0F1117Page (dark)
Surfaces
surface-muted#F5F3F1Cards, panels
surface-fill#EBE8E4Fills, hover
sand#E8DCC8Warm accent block
neutral-950#1C1C1CRaised (dark)
neutral-900#3D3D3DBorder (dark)
border#E4E1DDDividers (light)
Text
text-primary#1C1C1Cneutral-950
text-muted#767676neutral-500
text-tertiary#949494neutral-400
text-invert#FFFFFFOn dark / on ink
Semantic (categorical endpoints)
blue-500#2B7FFFInfo, links
green-500#10B978Ready, success
orange-500#F36F1CWarning
red-500#EB524BError, destructive
Typography · Waldenburg (real, CDN CORS ✅) · Geist Mono
display
400 · −0.035em
Bringing technology to life
44px400
h2
700 · −0.02em
Two platforms built on the same research foundation
28px700
h3
400
Create, edit, and localize in one AI platform
21px400
body
Inter · 400
Deploy agents that talk, type, and take action — trusted by leading developers and enterprises.
16px400
eyebrow
600 · uppercase
Text to Speech · Voices · Agents · Studio
12px600
mono
Geist Mono · 400
model_id="eleven_multilingual_v2" · stability=0.50
12pxmono
Text to Speech · Voice studio
Generate speech
0 / 10,000
0:00
Idle voice Aria model eleven_multilingual_v2
Python · elevenlabs
# pip install elevenlabs from elevenlabs.client import ElevenLabs from elevenlabs import play client = ElevenLabs(api_key=API_KEY) audio = client.text_to_speech.convert( voice_id="9BWtsMINqrJLrRacOk9x", # Aria model_id="eleven_multilingual_v2", text="Bringing technology to life.", output_format="mp3_44100_128", ) play(audio)
Components
Buttons
Input & product tags
Text to Speech Ready Voice Cloning Dubbing
Spacing
space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-6
24px
space-8
32px
space-12
48px
Guardrails
DO
Keep the shell monochrome — ink #000/#1C1C1C on eggshell #FDFCFC (light) or #0F1117 (dark)
Use the categorical ramps for voices, languages, waveforms and states — not as one brand hue
Make primary buttons the ink color (black on light, white on dark), not a colored accent
Use Waldenburg for display and UI; Geist Mono only for model IDs, code and metrics
Use real model IDs (eleven_multilingual_v2, eleven_turbo_v2_5, eleven_v3) and real voice names
DON'T
Invent a single "ElevenLabs brand color" — the brand is monochrome, the scale is categorical
Use #000 for text on the dark surface — flip to #FFFFFF
Over-saturate dark surfaces; step within the real neutral ramp (#0F1117 → #1C1C1C → #3D3D3D)
Mix Waldenburg into code/metadata or Geist Mono into headings
Derive the waveform from Math.random() — it must be deterministic from the input text