Setting up a spacing system
What a spacing system is
A spacing system is a short list of allowed gaps, padding and margins. Designers choose every distance from that list instead of eyeballing it. The interface gains a steady rhythm, and developers can map each value to a token.
The 4- and 8-point scales
Most systems build on a 4 px or 8 px unit. Every value is a multiple of the unit, so layouts stay aligned and decisions are quick. The 8-point scale is common for larger gaps; the 4-point step helps with small details such as icon padding.
A typical token list:
- space-1: 4 px, space-2: 8 px, space-3: 12 px
- space-4: 16 px, space-5: 24 px, space-6: 32 px
- space-7: 48 px, space-8: 64 px
Tokens named by step, not by pixel value, can change later without renaming.
Use space to show relationships
The proximity principle says that items placed close together are seen as related. Apply it deliberately: a label sits closer to its own field than to the field above, and a heading sits closer to the paragraph it introduces than to the previous section.
- Inside a component: small steps, such as 4 to 16 px.
- Between components: medium steps, such as 16 to 32 px.
- Between page sections: large steps, such as 48 to 64 px.
Density options and a worked example
Some products offer compact, default and comfortable densities. Data-heavy tools such as tables and dashboards often benefit from a compact option, while content pages need more air. Build density by swapping which tokens a component uses, not by redesigning it.
- Pick a base unit of 4 or 8 px.
- Define eight or so tokens.
- Set padding inside components first.
- Then set gaps between components and sections.
- Review each screen: do related items sit closer than unrelated ones?
Take a simple card with a title, a short description and a button. A consistent set of values might be:
- Card padding: 24 px on every side.
- Gap between title and description: 8 px, because they belong together.
- Gap between description and button: 16 px, to separate reading from action.
- Gap between cards in a grid: 24 px.
Every number comes from the token list, so another designer or a developer can rebuild the card without measuring anything. Avoid values outside the scale, such as 13 px or 22 px. If a design seems to need one, the layout is usually the real issue.
Use the same scale for horizontal and vertical space, and prefer logical properties like padding-inline so right-to-left layouts mirror correctly.
Sources
- MDN Web Docs. CSS logical properties and values. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values
This guide was drafted with AI assistance from public standards and references. For the exact wording of a standard, use the sources listed above.