Dark Mode

Design System
Inspired by ElevenLabs

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.

Try for Free Explore Voice AI
01 / Colors

Color Palette

Primary
Pure White
#ffffff
Primary surface
Light Gray
#f5f5f5
Section background
Warm Stone
rgba(245,242,239,0.8)
Featured CTA
Black
#000000
Text, buttons
Neutral Scale
Dark Gray
#4e4e4e
Secondary text
Warm Gray
#777169
Muted text, links
Border
#e5e5e5
Borders, dividers
Near Black
#292524
Dark sections
02 / Typography

Typography Scale

Display Hero
Display — 48px / 300 / 1.08 / -0.96px / Waldenburg
Section Heading
Section — 36px / 300 / 1.17 / Waldenburg
Card Heading
Card — 32px / 300 / 1.13 / Waldenburg
Body Large — Bringing every conversation to life
Body Large — 20px / 400 / 1.35 / Inter
Body — The most realistic AI voice platform. Create natural-sounding speech in any language.
Body — 18px / 400 / 1.60 / +0.18px / Inter
Nav / Button
Nav — 15px / 500 / 1.47 / +0.15px / Inter
Uppercase CTA
CTA — 14px / 700 / uppercase / +0.7px / WaldenburgFH
Caption — Last updated 3 hours ago
Caption — 14px / 400 / 1.43 / +0.14px / Inter
const audio = await elevenlabs.generate({ text: "Hello" })
Code — 13px / 400 / 1.85 / Geist Mono
03 / Buttons

Button Variants

Try for Free
Black Pill
Explore Voice AI
Warm Stone
Learn More
White Shadow
Get Started
Uppercase Bold
04 / Cards

Card Examples

Text to Speech

Generate natural, expressive speech from text in any language with the most realistic AI voices.

Voice Cloning

Create a digital replica of any voice with just a few minutes of audio. Elevated shadow variant.

Audio Native

Turn any written content into engaging audio. Light gray background variant for section differentiation.

05 / Forms

Form Elements

Default (inset border shadow)
Focus (blue ring)
Error (red ring)
06 / Spacing

Spacing Scale

4
8
12
16
20
24
32
40
07 / Radius

Border Radius Scale

4px
Tags
8px
Small
12px
Inputs
16px
Cards
20px
Panels
24px
Sections
pill
Buttons
08 / Elevation

Elevation & Depth

Inset Edge
0.5px inset border
Card
Outline + subtle lift
Button
Strong outline + lift
Warm Lift
Warm-tinted shadow
Focus
Blue ring