Design tokens for small teams: the minimum that works

Design tokens have a reputation for being enterprise machinery. In practice they are a list of named decisions: this grey, this type scale, these six spacing values. The point is that a decision made once is reused everywhere rather than remade slightly differently on every page.

What to tokenise first

• Colour: background surfaces, text levels, one accent, and line colours. Eight to twelve values.
• Type: a display scale using clamp() for fluid sizing, a body size, a small size and a label style.
• Spacing: a 4px base with a short list of multiples, plus a section spacing value.
• Radius, shadow and motion: two or three values each.

Where tokens live

Put them in CSS custom properties on the root element. Frameworks such as Tailwind can read them directly, and they work in plain CSS, in Liquid templates and inside a headless CMS preview without a build step.

The rule that keeps it working

If a value is not in the token list, it does not go in the code. When someone genuinely needs a new value, add it to the list with a name and a reason. This is the whole discipline, and it is what stops a site from drifting after launch.

What it buys you

New pages take hours instead of days because the decisions have already been made. Handovers to a new developer are shorter. Dark and light variants, or a brand refresh, become a change to one file rather than a rebuild.