1 min readDesign
A practical introduction to CSS design tokens
Use shared colors, spacing, typography, and radii without turning your stylesheet into a configuration maze.
Design tokens give names to recurring visual decisions. Instead of repeating a color value throughout a project, you can express its purpose with a stable name.
Name purpose, not appearance
Names such as primary, surface, and muted survive redesigns better than names such as bright-red or light-gray.
Keep the first version small
Start with the values the interface already repeats. A compact set of useful tokens is easier to understand than an exhaustive system nobody remembers.
Connect tokens to utilities
Tailwind CSS theme variables can generate utilities from your tokens. A --color-primary value, for example, becomes available through classes such as text-primary and bg-primary.