Teams rush to define brand palettes and type scales, then wonder why the UI still feels chaotic. The missing piece is almost always spacing.

Minimal interior with strong vertical rhythm

Rhythm over rules

A spacing scale — 4, 8, 12, 16, 24, 32, 48, 64 — does more work than any component library. It creates visual hierarchy without extra decoration.

“White space is to be regarded as an active element, not a passive background.” — Jan Tschichold

When every margin and padding snaps to the same grid, unrelated elements start to feel related.

One scale, two contexts

Use the same numbers for both macro layout (section gaps) and micro layout (button padding). A practical breakdown:

  • Macro — page-level structure
    • Section padding: 48–64px
    • Grid gutters: 24–32px
    • Hero-to-content gap: 64px
  • Micro — component internals
    • Input padding: 8–12px
    • Icon-to-label gap: 4–8px
    • List item spacing: 8px
  • Exceptions — document them, don’t freestyle
    • Tight toolbars (4px) when density matters
    • Marketing heroes (96px+) when you need air

Splitting macro and micro into separate systems doubles the decisions and halves the consistency.

Tokens in code

Define spacing once and reference it everywhere:

css
:root {
  --space-xs: 0.25rem;  /* 4 */
  --space-sm: 0.5rem;   /* 8 */
  --space-md: 1rem;     /* 16 */
  --space-lg: 1.5rem;   /* 24 */
  --space-xl: 2rem;     /* 32 */
  --space-2xl: 3rem;    /* 48 */
}

.card {
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.card__header {
  margin-bottom: var(--space-sm);
}

The test

Screenshot your page and blur it heavily. If the blocks still read as distinct groups, your spacing is doing its job. If everything collapses into a gray smear, no amount of color will save you.