Reference fixture · cursor

# The editor your team writes through, not at.

Cursor pairs a serif voice with gothic compression so feature copy reads like a publication and headlines hit like an engineered statement. Three fonts, one warm cream canvas, every value below comes from tokens.css.

View tokens
Read the spec
System status Stable

Last reviewed 2026-05-14 · v0.1

Press `⌘` `K` to search tokens.

What this fixture exercises

## Every component below uses only var(--*) — no raw hex, no off-token type.

### Warm surfaces

--bg, --surface, --surface-warm form a three-tier cream ladder. Pure white only inside code panels; the page never reaches it on the canvas.

Inspect tokens →

### Three voices

CursorGothic for display, jjannon serif for body, berkeleyMono for code. Each voice carries one role; the system never collapses to two faces.

Read the spec →

### oklab borders

Borders ship as rgba fallbacks of the oklab originals at 0.1 / 0.06 alpha — perceptually uniform across every warm surface.

Inspect borders →

AI timeline · signature element

thinking…
grep "tokens.css" -r design-systems/
read default/tokens.css
edit cursor/tokens.css → +56 tokens

Form components

## Inputs inherit the same tokens.

The focus state is a soft 4px-12px depth shadow — no cool-blue halo. Border weights stay at oklab 0.1; on focus the active border lifts to 0.2.

Work email

We'll send the spec PDF and nothing else.