Skip to content

Design tokens are not optional anymore

A design token is a named variable that holds a visual decision — a color, a spacing value, a radius, a shadow. The name is the contract: `--color-primary` means "the thing we use for primary actions," not "#3B82F6."

The deeper value is that tokens create a shared vocabulary between design and engineering. Tailwind CSS v4 nails this by making CSS custom properties first-class. There's no excuse for hardcoding anymore.