Cartesia — design system & UI screens

AI · 1 screen · 10 sections · https://cartesia.ai/

Editorial voice-AI landing; a deep-green product panel announcing real-time speech and transcription models, then a serif 'Architecting AI that learns and interacts like humans' manifesto.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/cartesia.

Decoded design system

Cartesia's decoded design system: background #F9F9F8, text #1E1C1A, accent #004E23, link #004E23, primary #004E23; type scale h1 36px / h2 24px / body 48px; 8px spacing base; 4px base radius. The single interactive/action color is #004E23 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#F9F9F8`
surface	`#EBEBEA`
border	`#D8D7D6`
text	`#1E1C1A`
text_muted	`#716F6E`
primary	`#004E23`
accent	`#004E23`
link	`#004E23`
button_bg	`#004E23`
button_text	`#FEFEFE`

Using these colors

Action color #004E23 — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, link, button_bg are all #004E23 — one role, not several (the action color).
accent #004E23 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.

Typography

Heading: PP Kyoto
Body: ABC Diatype
h1: 36px
h2: 24px
body: 48px

Spacing

base unit: 8px
scale: 6px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px

Radii

base: 4px
button: 7px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 150ms · 300ms · 350ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · cubic-bezier(0, 0, 0.2, 1)
animated properties: color, background-color, border-color, outline-color

Native design tokens

Token	Value
`--cartesia-carbon`	`oklch(23.5% 0 0)`
`--cartesia-canvas`	`oklch(91.4% .011 100.8)`
`--cartesia-field`	`oklch(96.6% .004 106.5)`
`--cartesia-growth`	`oklch(82.7% .086 138.2)`
`--cartesia-verdant`	`oklch(61.6% .154 148)`
`--cartesia-forest`	`oklch(37.1% .099 151.4)`
`--cartesia-memory`	`oklch(74.8% .043 249.5)`
`--cartesia-mist`	`oklch(90.2% .02 220.9)`
`--cartesia-neutral-10`	`oklch(96.6% .004 106.5)`
`--cartesia-neutral-20`	`oklch(95.1% .008 98.9)`

…and 110 more measured on the page.

Button states (measured)

primary hover: background #E4E3DB
primary focus: border 1px solid oklch(0.708 0 0)

Layout (measured)

container max-width: 1250px
nav: 64px sticky
common grid: 3 columns

Motion choreography (measured)

Scroll reveal: 14 elements rest at opacity 0, animate in over 0.15s cubic-bezier(0, 0, 0.2, 1).

Responsive (measured)

mobile (390px): hero 36px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Cartesia - Meet Sonic-3.5 and Ink-2