# Cartesia — Marketing site Design Spec

> 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 an `extract.js` bug — 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 in
> `scripts/extract.js`; §10 below is from the corrected read.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

| 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.

## 3. Typography Rules

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 |

## 4. Component Stylings

Two button sizes. Compact nav controls are 36px tall at `7.2px` radius; hero CTAs
are 44px at a squarer `4px` radius with `0 20px` padding. Primary is the forest
green #004e23 with near-white #fefefe text; secondary is the canvas fill with a
1px #e4e3db border; over a green panel the pair inverts (white fill / transparent
with a light border). Cards and panels are bordered, not elevated — the page is
effectively shadowless. Signature surface: a floating rounded "Talk to voice
agent" composer pill with a circular green mic button.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary (green) | #004e23, #fefefe, 7.2px/4px | house 0.15s colour transition | border #a1a1a1 + 3px ring | — | opacity 0.5 |
| Secondary | #f9f9f8, 1px #e4e3db | bg → #f1f0ec | border #a1a1a1 + 3px ring | — | opacity 0.5 |
| On-green pair | #f9f9f8 fill / 1px #e4e3db outline | — | as above | — | — |
| Muted control | transparent | bg #f1f0ec, text #1e1c1a | as above | — | opacity 0.5 |

Focus: `focus-visible` sets `border-color:#a1a1a1` plus a 3px ring — a real
keyboard ring, worth keeping.

## 5. Layout Principles

Centred max-width column framed by vertical hairline rules that run the full page
height, with faint repeating-gradient hatch in the outer gutters and small
cross/plus marks at rule intersections — a drafting-grid motif. The hero is a
large rounded forest-green panel holding centred serif display type and a CTA
pair. Below, sections alternate between two-column splits (serif headline left,
grotesque body right) and full-width panels. Nav is a single 36px-tall bar:
wordmark, centred links with dropdown carets, then a secondary + primary CTA.

## 6. Depth & Elevation

Radius scale is fractional (Tailwind-derived): **4px**, **5px**, **5.76px**,
**7.2px** (dominant control), 10.08px, 15.84px. Shadows: effectively **none** —
the only box-shadow observed is a fully transparent Tailwind ring placeholder.
Separation is entirely the 1px #e4e3db hairline plus surface steps. One
`backdrop-filter: blur(8px)` on floating chrome.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color, background, border, fill, stroke | 0.15s | cubic-bezier(0.4, 0, 0.2, 1) | all interactive chrome (dominant, 96x) |
| all | 0.15s | cubic-bezier(0.4, 0, 0.2, 1) | controls |
| opacity | 0.15s | cubic-bezier(0, 0, 0.2, 1) | fades |
| all | 0.2s | cubic-bezier(0, 0, 0.2, 1) | larger surfaces |
| opacity, top | 0.35s / 0.5s | ease, cubic-bezier(0.4,0,0.2,1) | scroll reveals |
| transform, translate, scale, rotate | 0.15s | cubic-bezier(0.4, 0, 0.2, 1) | motion group |

House transition: **0.15s cubic-bezier(.4,0,.2,1)**. Notable custom easings
include `cubic-bezier(0.22, 1, 0.36, 1)` and `cubic-bezier(0.23, 1, 0.32, 1)`
(expo-out reveals). 18 `@keyframes`, and they map to the product: a live
transcription feed (`transcription-slide-in`/`-out`, `segment-fade-in`), a
four-bar audio meter (`bar-pulse-a`/`-b`/`-c`/`-d`, `dot-fade`), a customer-story
progress fill, scroll reveals (`scroll-fade-reveal-t`/`-b`) and accordions. The
site **ships a `prefers-reduced-motion: reduce` block** — honour it. No animation
library detected. 3 background videos.

## 8. Backgrounds, Effects & WebGL

No colour gradients at all. The three gradients present are structural
`repeating-linear-gradient` patterns in the border colour #e4e3db — a 1px-per-10px
vertical rule grid, a -45deg hatch for gutter fills, and a 1px-per-20px variant.
One `backdrop-filter: blur(8px)` on floating chrome. Three autoplaying product
videos. No canvas/WebGL, no grain, no raster background layers.

## 9. Do's and Don'ts

### Do
- Pair a transitional serif (PP Kyoto) for headlines with a neutral grotesque (ABC Diatype) for everything else.
- Keep the canvas warm off-white #f9f9f8 with warm near-black #1e1c1a ink.
- Use forest green #004e23 as full-bleed panels and #309d4b for a highlighted word.
- Draw structure with 1px #e4e3db hairlines and repeating-gradient rule grids.
- Keep the page shadowless; separate with borders and surface steps.
- Use fractional radii (7.2px controls, 4px large CTAs) and honour reduced motion.

### Don't
- Don't go dark — this is a light brand despite the AI-voice category.
- Don't add glow, colour gradients or waveform decoration.
- Don't set body copy in the serif; the serif is display-only.
- Don't introduce a second accent hue beside the green.
- Don't add drop shadows for elevation.

## 10. Responsive Behavior

Tailwind v4 **range syntax** (`width >= …`) — invisible to a legacy
`min-width:` regex:

| Breakpoint | What changes |
|---|---|
| 360px | smallest-phone floor |
| 40rem (640px) | phone → large-phone |
| 48rem (768px) | tablet: nav + column splits |
| 64rem (1024px) | desktop layout |
| 80rem (1280px) | wide content |
| 96rem (1536px) | ultra-wide capping |

Plus a legacy `768px` block. Also present: `hover:hover`, `pointer:coarse/fine`,
`forced-colors:active`, and a `prefers-reduced-motion:reduce` block. **4 container
queries.** No dark-scheme blocks (`darkSchemeBlocks:0`) — light-only.

## 11. Agent Prompt Guide

- Canvas `#f9f9f8` · Ink `#1e1c1a` · Muted `#525150` · Border `#e4e3db` · Accent `#004e23` (panels) / `#309d4b` (inline)
- Font: PP Kyoto serif display (Newsreader stand-in) + ABC Diatype UI (Inter) · Body: 16/24 · Radius: 7.2px control / 4px large CTA · Control height: 36px nav / 44px hero
- Focus: border `#a1a1a1` + 3px ring · Hover fill: `#f1f0ec` · House motion: 0.15s cubic-bezier(.4,0,.2,1)

<cartesia_design_language>
Calm academic research-lab aesthetic — LIGHT, not dark. Warm off-white #f9f9f8
canvas, warm near-black #1e1c1a ink, muted #525150, hairline borders #e4e3db.
Headlines are a transitional SERIF (PP Kyoto, stand-in Newsreader) at weight 500,
48/48 with -0.48px tracking; everything else — nav, UI, body, buttons — is the
neutral grotesque ABC Diatype (stand-in Inter) at 16/24, 400/500. One accent: deep
forest green #004e23, used as large full-bleed rounded panels and the primary
button (near-white #fefefe text), with #309d4b for a single highlighted word;
never as tint or glow. Controls are 36px at 7.2px radius (44px at 4px for hero
CTAs); secondary is canvas with a 1px #e4e3db border; hover fills #f1f0ec; focus
sets border #a1a1a1 plus a 3px ring. Zero real shadows — structure is 1px
hairlines, surface steps, and decorative repeating-linear-gradient rule grids and
-45deg hatch in the border colour. One backdrop blur(8px). Motion is 0.15s
cubic-bezier(.4,0,.2,1) with product-specific keyframes (transcription feed,
four-bar audio meter) and a real prefers-reduced-motion block. Feels: scholarly,
calm, precise. Avoid: a dark canvas, glow or colour gradients, waveform
decoration, serif body copy, a second accent hue, drop shadows.
</cartesia_design_language>