Choosing a spacing scale for a design system
turning spacing into a consistent system.
a numeric base-grid gives predictable math, semantic t-shirt names give readable intent, often combine them.
free-form pixel values with no scale or rationale.
What's really being asked
The interviewer wants to see that you treat spacing as a constrained system, not ad hoc pixels, and that you can articulate the tradeoffs between a numeric grid and semantic naming.
The full answer
Start from why a scale exists: limiting choices enforces visual rhythm and consistency across teams. A numeric base-unit grid, typically a 4-point or 8-point system, defines spacing as multiples of a base unit, so values compose predictably, align to a grid, and are easy to reason about mathematically; the downside is that consumers handle raw numbers and very large or very small steps need care. T-shirt sizes expose semantic tokens like sm, md, and lg that read clearly in code and communicate intent rather than magnitude, decoupling design decisions from concrete pixels; the downside is ambiguity about exact values and awkward extension when you need something between md and lg or beyond xl. The strongest approach usually combines both: define a numeric base scale as the source of truth, then layer semantic named tokens that map onto specific steps, giving readable intent backed by predictable math.
The mistakes people make
Allowing arbitrary pixel values with no scale, which destroys consistency. Choosing t-shirt names without defining their numeric values, leaving ambiguity. Picking a base unit so small that everything is just a number with no rhythm.
What usually comes next
How do you handle a one-off spacing that does not fit the scale? How does the scale interact with responsive breakpoints and density modes? Should the scale be linear or use a multiplier?
A concrete example
Define a 4-point base scale of 4, 8, 12, 16, 24, 32, then expose semantic tokens space-sm equal to 8, space-md equal to 16, and space-lg equal to 24. Designers and engineers reference the named tokens for intent, while the underlying multiples keep every layout aligned to the same grid.
Interview question
Why do many teams map semantic t-shirt-size spacing tokens onto an underlying numeric base-unit grid rather than choosing only one approach?
- a.It lets designers use arbitrary values outside the scale
- b.It eliminates the need to define any concrete pixel values at all
- c.It gives readable, intent-based names backed by predictable, grid-aligned mathCorrect
- d.It guarantees the layout works without responsive breakpoints
Why? this is the answer
Combining them keeps the clarity of named intent while the numeric base ensures consistent, composable alignment. The named tokens still resolve to concrete values, and a scale constrains rather than permits arbitrary spacing.
Just read this? Test yourself on what you have been reading.
Read the original → blog.designary.com
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
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. Open roles that interview on design-systems — each one lists the topics its interview covers.
See open roles