Design Systems & Tokens

A design system earns its cost at the point where the tokens make the wrong choice difficult rather than merely discouraged.

How I use it

Contrast built into the tokens
Every colour is an OKLCH token with light and dark ramps, so accessible contrast is a property of the system instead of something an audit claws back later.
Why OKLCH over hex
Perceptual uniformity means a step in lightness looks like the same step across every hue. In hex you are guessing, and the guess is worst exactly where it shows — yellows and cyans.
Fluid type scales
Built on clamp so the page is legible between breakpoints as well as at them.
Component interaction states
Hover, focus-visible and disabled defined in the component rather than left to whoever uses it. An unstyled focus ring is an accessibility bug that ships silently.

Want the detail behind any of this?

I can walk through any of it in as much depth as you want.