Foundation
Palette & system
Every token in one place. Toggle the theme to see both palettes. The values shown are the live CSS custom properties, what you see is what ships if these tokens land in src/index.css.
Surfaces & rules
Background, raised, elevated, and the hairlines between them.
Text
Primary / secondary / muted, three steps, all warm.
Accent & semantic
One accent earns the eye. Semantics are quiet on purpose.
Stage indicators
Five stages, one filled pill. Color is signal, not decoration.
Saved
Drafting
Applied
Interviewing
Offer
Closed
Typography
Source Serif 4 for content & headlines. Inter for chrome. JetBrains Mono for numerics.
display · 36
Drafting your cover letter
h1 · 28
Senior Product Designer
h2 · 22
About the role
h3 · 18
What you'll work on
body · 16
The team is small, the surface area is large, and we ship every Friday. Inter at 16px is the default for forms, lists, and labels.
body-doc · 17
Generated drafts and job posting bodies render in Source Serif 4. It reads like writing, not like UI, and that is the entire point of using a serif here.
small · 14
Used for sub-labels, form helper text, and meta lines under titles.
micro · 11
Stage · count · timestamp
mono · 14
$180,000, $240,000 · 4d ago · Remote
Components
Same primitives, dressed in the new tokens.
Buttons
Badges & chips
Default outline
Offer
Drafting
Applied
Talking
Design systems
React
Stakeholder management
Figma
Inputs
Cards
A
Senior Product Designer
Anthropic
L
Staff Engineer, Platform
Linear