Spacing Scale Generator
Produce a consistent spacing scale from a base unit.
A fixed set of values is the whole point
Most inconsistent-looking interfaces are not badly designed — they are spaced arbitrarily. A 13px gap here, 15px there, 18px somewhere else, each chosen because it looked right in isolation. Restricting spacing to a defined scale removes the decision entirely: you pick the nearest step, and everything on the page ends up in alignment with everything else because there are only eight legal values.
A 4px or 8px base is the near-universal choice, because most icon sets, line heights, and component dimensions already sit on those grids. Scales typically grow non-linearly — 4, 8, 12, 16, 24, 32, 48, 64 — with tight increments at the small end where fine control matters and larger jumps at the top where precision does not.
Proximity communicates grouping
Spacing is not decoration; it is the primary way an interface signals what belongs with what. A label sitting closer to its input than to the field above it reads as attached to that input, and no amount of styling can override the grouping that proximity establishes. The practical rule is that the gap inside a group must be visibly smaller than the gap between groups — if a form's label-to-input gap equals its field-to-field gap, the whole form reads as an undifferentiated list.
Margin collapse and where to put the space
Adjacent vertical margins in normal flow collapse to the larger of the two, which is why stacked components often sit closer together than the sum of their margins suggests. Flex and grid gaps do not collapse, which is one reason gap has largely replaced margin for spacing between siblings. A useful convention is to have components own their internal padding but not their external margin, and let the parent container control the space between children — this stops the same component spacing itself differently depending on where it is used.
How to use it
- Pick a base unit — 4px or 8px suits almost every interface.
- Generate the scale and store it as tokens rather than as literal values.
- Snap every gap to the nearest step, resisting one-off in-between values.
- Use gap on containers for space between siblings and padding inside components.
Questions worth asking
Why 4px or 8px as a base?
Icon sets, line heights, and component sizes already tend to land on those grids, so a matching spacing scale aligns with them automatically. An 8px base with 4px half-steps covers fine adjustments without opening the door to arbitrary values.
Should the scale be linear or exponential?
Non-linear works better in practice. Small increments at the low end give the fine control that dense components need, while larger jumps at the top avoid a long list of barely distinguishable big values.
Should spacing be in px or rem?
px is defensible for spacing since layout gaps do not need to scale with the user's font size the way text does. rem is preferable if you want the whole interface, including its whitespace, to grow with the browser setting.
How do I stop components spacing themselves inconsistently?
Let components own their internal padding but not their external margin, and give the parent container control of the gap between children. The same component then spaces correctly wherever it is used.
Disclaimer: Generated colours, scales, and CSS are a starting point for your own design system. Always verify contrast, rendering, and behaviour on real devices — passing an automated check is not the same as meeting your accessibility obligations.