Design System Inspiration of ElevenLabs

Voice-AI brand reading like an editorial magazine. Off-white canvas, Waldenburg Light at weight 300, pastel gradient orbs as the only color moments.

01 — Color Palette

Off-white canvas, ink primary, atmospheric pastels

No saturated brand action color. Single ink-pill primary; five pastel gradient orbs as decorative atmosphere only.

Brand

primary (Ink)
#292524
Ink pill — primary CTA.
primary-active
#0c0a09
Press state.

Surface

canvas
#f5f5f5
Off-white page floor.
canvas-soft
#fafafa
Subtle alternating band.
surface-card
#ffffff
Pure white card.
surface-strong
#f0efed
Badges, voice icon plates.
surface-dark
#0c0a09
Dark CTA bands, featured pricing.

Text & Hairlines

ink
#0c0a09
Display, primary text.
body
#4e4e4e
Default running-text.
muted
#777169
Sub-titles, captions.
muted-soft
#a8a29e
Disabled text.
hairline
#e7e5e4
1px divider.
hairline-strong
#d6d3d1
Stronger panel outline.

Atmospheric Gradient Stops (signature)

gradient-mint
#a7e5d3
Mint orb. Atmosphere only.
gradient-peach
#f4c5a8
Peach orb.
gradient-lavender
#c8b8e0
Lavender orb.
gradient-sky
#a8c8e8
Sky-blue orb.
gradient-rose
#e8b8c4
Rose orb.

Semantic

success
#16a34a
Confirmation.
error
#dc2626
Validation errors.
02 — Typography

Waldenburg Light 300 + Inter

Display weight stays at 300. Body Inter at +0.15-0.18px tracking — slightly looser than default for an editorial dialect.

display-mega64px / 300 / 1.05 / -1.92px (Waldenburg)
Bringing technology to life
display-xl48px / 300 / 1.08 / -0.96px
Two patterns, built to the same research foundation
display-lg36px / 300 / 1.17 / -0.36px
Section heading
display-md32px / 300 / 1.13 / -0.32px
Sub-section heading
title-md20px / 500 / 1.35 (Inter)
Component title
body-md16px / 400 / 1.5 / 0.16px
Default body Inter at +0.16px tracking — slightly looser than default.
body-sm15px / 400 / 1.47 / 0.15px
Footer body.
caption-uppercase12px / 600 / 1.4 / 0.96px
Section label
button15px / 500 / 1.0
Try free
nav-link15px / 500 / 1.4
Creative · Agents · Video · Pricing
03 — Buttons

Subtle pill geometry

Ink pill primary, transparent outline secondary. No saturated CTA color.

button-primary
Ink pill / 9999px / 40px
button-primary-active
Pure black press state.
button-outline
Transparent + 1px hairline border.
button-tertiary-text
Inline ink text.
04 — Atmospheric Gradient Orbs (signature)

Pastel orbs as decoration only

Five gradient stops drift through the page as soft radial blooms. Never used as button fills, text colors, or component backgrounds — pure atmosphere.

Mint orb
Peach orb
Lavender orb
Sky orb
Rose orb
05 — Audio Waveform Card

Voice preview component

A horizontal card with circular play button, ink-tinted waveform glyph, and voice metadata.

Rachel — calm narrator
English (American) · Adult · Studio
06 — Voice List

Voice library rows

Hairline-divided rows with circular voice icon, name + accent, and preview button.

RA
Rachel
English (American) · Adult
DA
Daniel
English (British) · Adult
SO
Sofia
Spanish · Young Adult
YU
Yuki
Japanese · Adult
07 — Feature Cards

3-up benefit grid

Studio quality

Generate broadcast-grade voice from a few seconds of reference audio.

30+ languages

One model, every language. Native fluency without retraining.

Real-time API

Stream voice with sub-300ms latency for live applications.

08 — Pricing Tiers

Featured tier inverts to dark

Visual inversion signals "highlighted choice" without colored ribbons.

Starter

$5/mo
  • 30,000 characters
  • 10 voices
  • Commercial license

Pro

$99
  • 500,000 characters
  • Unlimited voices
  • Pro voice cloning
  • 96kHz studio quality
09 — Forms

Inputs

10 — Badges

Small uppercase pills.

NewBetaProEnterprise
11 — Spacing Scale

4px base, 96px section rhythm.

xxs · 4
xs · 8
sm · 12
base · 16
md · 20
lg · 24
xl · 32
xxl · 48
section · 96
12 — Border Radius

Pill for CTAs and badges, 16-24px for cards, 9999px for voice icons.

0 · none
4 · xs
6 · sm
8 · md
12 · lg
16 · xl
24 · xxl
pill
13 — Elevation & Depth

Hairline + soft drop. Atmospheric depth comes from gradient orbs.

Flat / Canvas

Body bands, footer.

Card

White card with 1px hairline border.

Soft drop

0 4px 16px rgba(0,0,0,0.04). Single shadow tier.

Gradient orb

Atmospheric depth — never a card surface.

14 — Responsive Behavior
NameWidthKey Changes
Mobile< 640pxHero h1 64→32px; feature cards 1-up; nav hamburger; gradient orbs shrink.
Tablet640–1024pxHero h1 48px; feature cards 2-up.
Desktop1024–1280pxFull hero h1 64px; feature cards 3-up.
Wide> 1280pxContent caps at 1200px.
375
mobile
640
small
768
tablet
1024
laptop
1280
desktop

Touch Targets

Collapsing Strategy