Design tokens
Style guide
Fraunces (variable serif, opsz axis) for display. Cabinet Grotesk for body and UI. OKLCH neutrals, one accent, no gradients, no pure black, no pure white.
Palette
Type ramp
Fluid clamps. Each step shown at its current viewport size.
Quiet light.
The west, in faces.
Editorial portraits, made deliberately.
Snow Canyon, late October.
How a brand session is structured.
A standfirst paragraph in Fraunces, set at the lead size — used for openers and pull quotes.
Body copy at the default ramp. Cabinet Grotesk, set at 1.5 line-height, slightly tightened tracking. Reads as quiet confidence rather than warmth.
Weights
Cabinet Grotesk · Light 300 — Quiet, confident, plainspoken.
Cabinet Grotesk · Regular 400 — Quiet, confident, plainspoken.
Cabinet Grotesk · Medium 500 — Quiet, confident, plainspoken.
Cabinet Grotesk · Bold 700 — Quiet, confident, plainspoken.
Fraunces · Display 300 · opsz 36 — Portraits of the individual.
Fraunces · Display 400 · opsz 48 — Portraits of the individual.
Fraunces · Display 500 · opsz 72 — Portraits of the individual.
Fraunces · Italic 400 · opsz 48 — Made in the American West.
Motion
Durations
- instant --dur-instant
- fast --dur-fast
- base --dur-base
- slow --dur-slow
- slower --dur-slower
- cinema --dur-cinema
Easings
- out-expo --ease-out-expo
- out-quart --ease-out-quart
- in-out-quart --ease-in-out-quart
- in-out-expo --ease-in-out-expo
Interactive states
Tab through. Focus rings use --focus-ring.