Most design system conversations stall in the wrong place. Teams spend three sprints debating whether the primary is or #0052CC, then ship a product where every screen feels slightly wrong in a way nobody can name. That feeling has a source. It lives in the spacing.
Colour gets the credit. Spacing does the work.
Open any design system documentation and you'll find the colour section first — swatches, semantic tokens, accessibility ratios. Spacing, if it appears at all, is treated as a footnote. A scale. Eight values listed without ceremony.
This ordering is backwards. Colour conveys brand. Spacing conveys structure. One tells you what something is. The other tells you how things relate. In a complex product — a dashboard, a data-heavy form, a multi-panel interface — relationship is everything. A user navigating a dense screen is reading spatial hierarchy. They're deciding what belongs together, what comes next, what they can ignore. Colour cannot do that work alone.
The failure mode is predictable. A team builds a colour system with care — semantic tokens, dark mode variants, the works — and then spaces components by feel. One engineer uses gap-4, another reaches for gap-6. The design file has 12px here, 16px there, 20px in one edge case that "just looked right." By the time the product ships, the spacing is a graveyard of exceptions. The colour system is pristine. The interface feels amateur.
A spacing system is a decision about meaning, not increments.
The actual job of a spacing system isn't to give you a list of allowed values. It's to encode a set of spatial relationships and make them repeatable. The gap between a label and its input means something different than the gap between two form sections. That difference should be systematic and named — not eyeballed per component.
In practice, this means thinking in tiers before thinking in pixels. We work with three: tight (intra-component, like padding inside a button or space between an icon and its label), medium (inter-component, the breathing room between a field and its neighbour), and loose (sectional, the whitespace that creates page-level rhythm). The specific values matter less than the fact that each tier is fixed and understood. If your designers and engineers share a vocabulary — "that should be a medium gap, not a loose one" — you have a spacing system. If that sentence doesn't parse, you don't.
The counterargument is that spacing is too contextual to systematise. Dense data tables need different treatment than marketing pages. True. But the response to that isn't no system — it's a system with clearly defined escape hatches. Tailwind handles this well: the default scale is a constraint, and you break it deliberately with arbitrary values when context demands it. The deliberateness is the point. Exceptions that are named are under control. Exceptions that are undocumented become debt.
Fix the spacing before you ship the colour tokens.
If you're building a design system now or inheriting one that feels wrong, run this check before anything else: open your most complex screen and remove the colour. Greyscale. If the hierarchy survives — if you can still parse what's primary, what's secondary, what groups together — the spacing is working. If the screen collapses into visual noise, the spacing is carrying nothing and the colour is doing too much.
From there, the fix is unglamorous. Audit what values are actually in use. Collapse the outliers into your scale or name the exceptions. Make sure Figma and the codebase share the same tokens — not approximately, exactly. In Tailwind projects, this means extending the spacing scale in tailwind.config and removing the temptation to reach for arbitrary values by default. One afternoon of alignment here saves weeks of QA conversation later.
The question to ask before any new component ships: does this component's spacing communicate the right relationship, or did we just make it look okay? That distinction is the whole discipline.
Colour is how your product is remembered. Spacing is how it's understood — and understanding comes first.
