A layout can have great colors and solid typography and still feel amateur, usually because the spacing was decided one margin at a time. 13px here, 18px there, 22px somewhere else, each chosen because it looked about right in isolation. None of those decisions are wrong on their own. Together they produce a layout with no underlying rhythm, which reads as unpolished even to people who couldn't say why.
The idea: one base unit, every value a multiple of it
Pick a base unit, 8px is the standard, 4px a common finer-grained alternative, and restrict every margin, padding, and gap in the interface to a multiple of it: 8, 16, 24, 32, 48, 64. Nothing in between. That's the entire idea behind the "8pt grid." Its value isn't that 8px is a magic number; it's that a single shared unit forces every spacing decision to relate to every other one.
The practical benefit shows up at the edges. Two sections built weeks apart, by different people, using the same scale will line up and feel related, because they're drawing from the same small set of numbers instead of each guessing independently.
A working scale
An 8px base unit typically expands to something like:
- 4px: tightest, icon-to-label gaps, inline spacing
- 8px: base, tight component padding
- 16px: standard, default padding, gaps between related elements
- 24px: comfortable, spacing between distinct components
- 32px: section-level, padding around cards or panels
- 48px / 64px: page-level, spacing between major sections
The 4px value breaks the strict multiple-of-8 rule on purpose. Most systems allow one half-step for the tightest spacing, where 8px would feel too loose, icon-to-label text being the usual example.
Internal vs. external spacing
It helps to split spacing into two categories that use the scale differently:
- Internal spacing (padding): the breathing room inside a component, between its edge and its content. Tends to stay on the smaller end of the scale (8 to 24px) and stay consistent across similar components.
- External spacing (margin/gap): the space between components. Tends to scale with how related two elements are: tight gaps for closely related items, larger gaps to signal a new section.
Confusing the two is a common source of inconsistency. Using the same value for "space inside a card" and "space between two unrelated sections" flattens a distinction spacing is supposed to communicate.
Vertical rhythm ties back to type
Spacing and typography aren't independent systems. Line-height and paragraph spacing are themselves spacing decisions, and they should draw from the same base unit as everything else. If your type scale produces a 24px line-height, paragraph spacing should be a value from the same scale, 16px or 24px, not an arbitrary number that happens to look fine next to it.
The scale only holds if it's followed even when a value feels slightly wrong for one specific spot.
The temptation is always "just this once, 20px instead of 24px looks a bit better here." That one exception is how a clean system quietly turns back into one-off guessing, component by component, until the consistency is gone again.
Build the scale instead of eyeballing it
The Spacing Builder generates a full base-unit scale and previews it against real layout, so you can check the rhythm before committing to it in code. Spacing, type scale, and font pairing work best as one system: bring them together in the Design Language Studio.
See also: modular type scales explained.
