Design System

The AI voice
platform,
defined.

A deep black canvas ignited by warm orange fire. Minimal, confident, and engineered for an AI-first audio platform.

14 color tokens 8 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Deep black neutrals with a bold orange accent. 14 tokens across base surfaces, text hierarchy, interaction, and semantic states.

Void Black
#0A0A0B
Primary page background
Obsidian
#111113
Cards, panels, elevated surfaces
Carbon
#18181B
Code blocks, inputs
Smoke
#27272A
Borders, dividers
Zinc
#3F3F46
Inactive states, hints
Pure White
#ffffff
Primary text, icons
Silver
#A1A1AA
Secondary text
Slate
#71717A
Placeholders, labels
Ember
#FF6B00
Primary accent, CTAs, links
Amber Glow
#FF8A33
Hover states, secondary accent
Deep Amber
#CC5500
Pressed states, accent depth
Signal Green
#22C55E
Success states
Error Red
#EF4444
Error states, destructive
Info Blue
#3B82F6
Informational, tooltips

Accent Scale

Deep Amber #CC5500
Ember #FF6B00
Amber Glow #FF8A33
Typography

Type Scale

Inter as primary typeface — clean, geometric, and highly legible. JetBrains Mono for code and technical data.

Display The AI voice platform 48px / 1.0 / −0.025em
Heading-lg Clone any voice 32px / 1.2 / −0.025px
Heading Section heading 24px / 1.3 / −0.02px
Heading-sm Subsection heading 20px / 1.4 / −0.02px
Body Default body text for readable content 16px / 1.6 / 0
Body-sm Dense data, comparison rows 14px / 1.5 / 0.01px
Caption Meta info · Footer · Labels 12px / 1.5 / 0.02px

Fonts

Primary Inter 400–700 · 12–48px
Mono JetBrains Mono 400–500 · 12–14px · Code only
Layout

Spacing & Shapes

Base unit 4px. Balanced density with generous breathing room. 12-step spacing scale, 7 border radius values.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
9696px

Border Radius

sm 4px
default 6px
md 8px
lg / cards 12px
xl 16px
pill 9999px

Surface Levels

Void Black #0A0A0B
Obsidian #111113
Carbon #18181B
Smoke #27272A
Elevation

Depth & Surfaces

Clean layering through subtle surface differentiation. No heavy shadows — just clean, dark surfaces stacked with intention.

Void Black
Base page background — the canvas
Level 0
Obsidian
Cards, panels, elevated sections
Level 1
Carbon
Code blocks, inputs, secondary surfaces
Level 2
Smoke
Borders, dividers, subtle outlines
Level 3
Components

Button Variants

Primary CTA (Ember), secondary ghost, and outlined accent — a clear interaction hierarchy built on a single accent voice.

Primary CTA Button
Main call to action — highest visual weight
.btn-primary
Ember (#FF6B00) background, Pure White text, 6px radius. The only orange on the page — use exclusively for the single most important action.
Secondary Ghost Button
Secondary actions, navigation
.btn-secondary
Pure White text, Smoke border, 6px radius. For less prominent actions that still need visual presence.
Outlined Accent Button
Secondary interactive, branded moments
.btn-ghost
Ember text, Ember border. Clear branded interactive target without competing with primary CTA fill.
Input Field
User text input
input
Carbon background, Smoke border, 6px radius. Focus state shifts border to Ember (#FF6B00).
Badge
Status indicators, labels
.badge
New Active Beta
Pill shape, subtle tinted backgrounds. Ember for accent, Signal Green for success, Silver for neutral.
Guidelines

Do's & Don'ts

Do — Embrace
  • Void Black (#0A0A0B) as the primary canvas
  • Ember (#FF6B00) exclusively for CTAs and links
  • Pure White (#ffffff) for all primary text
  • 6px radius for buttons, 12px for cards, 9999px for pills
  • 4px-based spacing with generous breathing room
  • Obsidian (#111113) for elevated surfaces
  • JetBrains Mono only for code and technical data
Don't — Avoid
  • Ember as a large surface background
  • Bright saturated backgrounds
  • Hard sharp corners on cards or buttons
  • Dense information packing without whitespace
  • Multiple accent colors for interactive elements
  • Monospace fonts for body copy or headings
  • Overly complex gradients or decorative shadows