Most teams who implement design tokens start with colour. This is the right place to start — colour is the most immediately visible design decision and the one with the most variants (semantic, brand, functional, dark mode). But teams who stop at colour leave most of the value on the table.
The teams doing design systems work well have extended their token architecture to cover spacing, typography, motion, elevation, and border radius. These are the decisions that most often get made ad hoc, inconsistently, and in ways that accumulate into visual noise over time.
Spacing tokens
A spacing scale is one of the highest-leverage decisions in a design system. If every team member picks their own values — 14px here, 18px there, 22px in another component — the result is a product that looks technically correct and feels vaguely off. Spacing rhythm is perceived subconsciously.
A standard approach is a multiplier-based scale: a base unit (typically 4px or 8px) multiplied by fixed steps. --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; and so on. Every spacing decision in the product references a token, never a raw pixel value.
The constraint of a spacing scale is not a limitation. It is what makes a product feel considered rather than assembled.
Motion tokens
Animation is a design material. When it is inconsistent — some things ease in, some snap, some bounce — the product feels uncoordinated. Motion tokens standardise duration and easing:
--motion-duration-fast: 150ms; --motion-duration-base: 220ms; --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
These are referenced in CSS transitions and animations throughout the product. The result is a product that moves as a coherent system rather than as a collection of independent components.
Elevation tokens
Elevation — the shadow system that communicates depth hierarchy — is typically one of the last things teams tokenise and one of the first things that creates visual inconsistency. How many shadow values does your product actually use? If designers and engineers are pulling from memory, the answer is probably "too many."
A simple elevation scale of three to five levels — surface, raised, floating, overlay, modal — is enough for most products. Defined as tokens, referenced consistently, they make the depth hierarchy readable at a glance.
The implementation principle
The guiding principle for all of these token categories is the same: a decision made once, referenced everywhere, changed once. The overhead of implementing a token system is front-loaded. The payoff is every change after the first: rebrand in hours rather than weeks, dark mode without rebuilding components, platform parity between web and mobile without duplicating decisions.
Start with colour. Do not stop there.