Spacing Scales: Using Multiples for Consistent UI
A spacing scale builds consistent UI layouts from a limited set of values, usually multiples of a base unit like 8px. It's used for everything from button padding to page gaps. The footgun is using arbitrary pixel values, which breaks the system's rhythm.
Why it exists
To prevent chaotic, inconsistent layouts. Without a system, designers and developers pick arbitrary spacing values, leading to a visually jarring user experience. A spacing system provides a shared language and constraints to create predictable, scannable UIs and lays the groundwork for responsive design.
The mental model
A spacing scale is like a set of Lego bricks in specific, related sizes. You don't use a brick of size 1.73x; you combine standard sizes to build your structure. Similarly, a spacing scale uses multiples of a base unit (e.g., 8px) to define all gaps, margins, and padding. Instead of picking any pixel value, you choose from a limited, predefined palette of sizes like 8px, 16px, 24px, and 32px.
How it works
A base unit, often 8px, is chosen. The entire scale is built from multiples or fractions of this unit. Design systems formalize this with "space tokens," which are named variables representing these values (e.g., space.100 for 8px, space.200 for 16px). Developers use these tokens in code instead of raw pixel values. This ensures that if the base unit ever changes, the entire UI scales proportionally. Some systems also include negative values for special cases like overlapping elements.
When to use it
Use a spacing scale for all spatial relationships in a UI. This includes small-scale spacing like the gap between an icon and its text (using values like 4px or 8px), medium-scale spacing for gaps between elements in a card (12px, 16px, 24px), and large-scale spacing for page layout, like the space between major sections of a page (32px, 48px, 64px). Consistent use creates visual hierarchy and groups related elements.
When not to use it
Deviations should be rare. While some systems provide negative spacing tokens for technical needs like breaking an element out of a container's padding, you should first check if a dedicated component or primitive exists for that purpose. Avoid using the spacing scale for properties that are not about empty space, such as font sizes or border widths, which should have their own dedicated scales.
One canonical example
A card component has a title and a description. To create a clear visual hierarchy, you place them close together. Using a spacing scale, you might apply space.100 (8px) between the title and description. The card itself needs padding to keep content from hitting the edges, so you might apply space.200 (16px) of padding. If this card is in a list with other cards, you might use space.300 (24px) between each card. The use of related values (8, 16, 24) creates a predictable, harmonious rhythm.
Interview question
What is the primary reason for adopting a spacing scale in UI design?
- a.To enable developers to use raw pixel values directly in code for faster implementation.
- b.To allow for highly granular and unique spacing adjustments on every UI element.
- c.To establish a consistent visual rhythm and prevent arbitrary spacing choices in layouts.Correct
- d.To ensure that font sizes and border widths are consistently applied across the entire interface.
Why? this is the answer
The card states that a spacing scale exists "To prevent chaotic, inconsistent layouts" and provides "a shared language and constraints to create predictable, scannable UIs." Option C directly reflects this goal. Option B is incorrect because a spacing scale limits choices, rather than enabling unique adjustments for every element. Options B and D contradict the card's explicit statements about what spacing scales are not used for (font sizes/borders) and how they are implemented (using tokens, not raw pixel values).
Just read this? Test yourself on what you have been reading.
Read the original → atlassian.design
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles