A calm, academic research-lab aesthetic that reads more like a well-set paper than an AI product page — and notably LIGHT rather than the dark its category implies. The canvas is a warm off-white #f9f9f8 with warm near-black #1e1c1a ink, and the display face is a transitional SERIF (PP Kyoto, stand-in Newsreader) at weight 500 — 48/48 with -0.48px tracking — giving headlines a scholarly, printed authority, while every piece of UI, nav and body runs in the neutral grotesque ABC Diatype at 16/24. One accent does all the work: a deep forest green #004e23 deployed as large full-bleed rounded panels and the primary button (near-white #fefefe text), with #309d4b reserved for a single highlighted word; it never appears as tint or glow. Structure is drawn rather than shaded — 1px #e4e3db hairlines plus decorative repeating-linear-gradient rule grids and -45deg hatch in the gutters, a drafting-paper motif — and the page is effectively shadowless, the only box-shadow being a transparent ring placeholder. Radii are fractional Tailwind values (7.2px controls, 4px hero CTAs, 15.84px panels). Motion runs at 0.15s cubic-bezier(.4,0,.2,1) across 18 keyframes that map to the product itself (a live transcription feed, a four-bar audio meter), and the site ships a real prefers-reduced-motion block.
Browse Cartesia in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: cartesia.ai (live DOM, computed styles), 2026-07-25. 0 stylesheets blocked — full coverage. Tailwind v4 site: colour tokens are utility-resolved rather than named :root brand vars, so §2 is read from computed fills/text. Reality check: the hint was wrong on both counts. The queue said "elegant dark, waveform motifs"; Cartesia is a LIGHT warm off-white #f9f9f8 canvas with a deep forest-green #004e23 as its only accent, and its signature is not a waveform but a PP KYOTO SERIF display over hairline rule-grid gutters drawn with repeating-linear-gradients. Green appears as full-bleed panels, not glow. Extraction note: this capture found anextract.jsbug — the breakpoint regex matched only legacy(min-width:)and missed Tailwind v4 range syntax(width >= 40rem), reporting zero breakpoints for a site with six. Fixed inscripts/extract.js; §10 below is from the corrected read.
A calm, academic research-lab aesthetic that reads more like a well-set paper than an AI product page. The canvas is a warm off-white, ink is a warm near-black, and the display face is a transitional serif (PP Kyoto) that gives headlines a scholarly, printed authority — while all UI, nav and body run in a neutral grotesque (ABC Diatype). The single accent is a deep forest green, deployed as large full-bleed panels rather than as tint or glow. Structure is drawn with 1px hairline rules and faint repeating-gradient grid gutters, giving the page a drafting-paper precision. Effectively shadowless. Feels: scholarly, calm, precise, quietly premium.
| Token | Hex | Role / usage |
|---|---|---|
| ink | #1e1c1a | primary text (warm near-black) |
| muted | #525150 | secondary text |
| muted-2 | #535150 | tertiary text |
| canvas | #f9f9f8 | page background (warm off-white) |
| paper | #fafaf8 | alt warm surface |
| surface | #f3f2ef | raised panel |
| surface-2 | #f1f0ec | inset / hover fill |
| border | #e4e3db | hairline border + rule-grid stroke |
| border-hover | #dfdcd7 | hover border/input fill |
| white | #fefefe | text on green, light button fill |
| green | #004e23 | THE accent — full-bleed panels, primary button |
| green-bright | #309d4b | inline highlighted words, accent text |
| ring | #a1a1a1 | focus border colour |
Rules: green is the only chroma on the page and appears as a **panel fill or a highlighted word**, never as a tint on chrome. Borders are always #e4e3db at 1px — the same colour draws the decorative rule grid.
Three faces, strictly divided: PP Kyoto (transitional serif) for display and section headlines at weight 500; ABC Diatype (neutral grotesque) for all nav, UI, buttons and body at 400/500; IBM Plex Mono for rare code/labels. The serif is expressive-only — it never runs as body copy. Tracking is essentially normal, tightening slightly (-0.48px) at the 48px display.
Specimen substitution: previews load Newsreader for PP Kyoto and Inter
for ABC Diatype (one bundled Google Fonts link); the site ships the licensed
PP Kyoto / ABC Diatype.
| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (hero) | PP Kyoto | 48/48 | 500 | -0.48px |
| Headline (h1) | PP Kyoto | 36/45 | 500 | normal |
| Section (h2) | PP Kyoto | 24/30 | 500 | normal |
| Body / sub (h3) | ABC Diatype | 16/24 | 400 | normal |
| Nav / button | ABC Diatype | 16/24 | 500 | normal |
| Large CTA label | ABC Diatype | 16 | 500 | +0.14px |
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.