Inconsistent spacing is invisible and everywhere
Ask someone why a screen feels unpolished and they'll rarely say "the padding is 14px here and 18px there." They'll say it feels cluttered, or cramped, or like the elements don't belong together. That reaction is almost always spacing, even when nobody names it as such.
Arbitrary pixel values — 13px here, 22px there, whatever felt right in the moment — are the single most common source of that feeling, because the eye reads spacing relationships even when it can't consciously measure them.
Building a scale that removes the guessing
Pick a base unit and multiply
4px or 8px as a base, then a fixed scale — 4, 8, 12, 16, 24, 32, 48, 64. Every spacing decision becomes "which step," not "what number."
Related elements get less space than groups
A label and its input sit close (8px); two unrelated form sections sit further apart (32px+). The gap size itself communicates the relationship before anyone reads a word.
Never eyeball a "looks about right" gap
Every off-scale value is a future inconsistency. If none of the scale steps look right in a given spot, that's a sign the layout itself needs rethinking, not a signal to break the scale.
Component internal spacing is part of the system too
Button padding, card padding, input height — these need to sit on the same scale as page layout spacing, or components will visually clash with the grid around them.
Vertical rhythm needs the same discipline as horizontal
Heading-to-paragraph spacing, paragraph-to-paragraph spacing — these are read just as strongly as column gaps, and get overlooked just as often.
Encode the scale as tokens, not habit
`space-1` through `space-8` as design tokens (matching Tailwind's own spacing scale, for example) makes the system enforceable in code, not just a guideline designers remember.
The test: squint at the screen
A genuinely useful trick: blur your eyes slightly, or squint, while looking at a layout. Grouping and hierarchy that only work when you read labels carefully will fall apart; grouping built on a real spacing scale holds up even when you can't read anything. If the squint test fails, it's a spacing problem before it's a color or typography problem — fix that layer first.
The takeaway
A fixed spacing scale — 4 or 8px base, multiplied out, encoded as tokens — turns "does this look right" into "which step on the scale," and gives grouping and hierarchy a foundation that holds up even at a squint. Most interfaces that "feel off" are a spacing problem wearing a color or typography costume.
Let's talk about your productRelated reading
Visual Design · Hierarchy
Contrast, Weight and Whitespace: The Three Levers of Visual Hierarchy
Visual Design · Typography
Typography Hierarchy in Dashboards: Guiding the Eye Before the User Reads a Word
Visual Design · Color
Color as Function, Not Decoration: Building a Palette Enterprise Software Can Trust
See this spacing system applied in production on the Rota case study.