What is a spacing system in UX design?
A spacing system is a predefined set of spacing values that are used consistently for all margins, padding, gaps, and spatial relationships within an interface. Rather than making individual spacing decisions for each component, a spacing system establishes a scale of values from which designers choose. Common spacing systems are based on a base unit, typically 4px or 8px, with a scale of multiples: 4, 8, 12, 16, 24, 32, 48, 64, and so on. All spacing in the interface is drawn from this scale, creating a consistent visual rhythm across the entire product.
Why do spacing systems improve interface design?
Consistent spacing creates visual rhythm that makes interfaces feel organized and intentional. When all elements in an interface share spacing relationships drawn from the same scale, the interface has a coherent spatial logic that users perceive as quality even if they cannot articulate why. Spacing systems also accelerate design decisions by eliminating arbitrary choices: rather than deciding whether a gap should be 14px or 16px, the designer chooses from the defined scale. This decision constraint, similar to how typography scales constrain type size choices, paradoxically produces more consistent and higher-quality results than unconstrained decisions.
How do spacing systems relate to design tokens?
Like color and typography values, spacing values are stored as design tokens in well-maintained design systems. Naming spacing tokens semantically, such as space.xs, space.sm, space.md, space.lg, space.xl, provides a shared vocabulary between designers and developers. When both use the same token names to describe spacing, the translation from design to code becomes more reliable and consistent than when spacing values must be specified as raw pixel values that may be rounded or approximated differently.