Layout

Spacing Systems

Constrained scales for consistent design

Key Insight

A spacing system uses a constrained set of values (typically based on a base unit like 4px or 8px) to create consistent, harmonious layouts without guesswork.

Key Points

  • •Start with too much white space, then remove—it's easier to tighten than to loosen
  • •Use a defined spacing scale rather than arbitrary values
  • •A linear scale won't work—adjacent values need ~25% relative difference to be meaningful
  • •Base your scale on a sensible base value like 16px that divides nicely
  • •Don't fill the whole screen just because you can—give elements only the space they need
  • •Grids are useful alignment tools, not sacred rules—break the grid when content demands it
  • •Relative sizing doesn't scale well—elements need different proportions at different screen sizes
  • •Avoid ambiguous spacing—make it clear which elements belong together through proximity
  • •[FIGURE — White space before/after] Shows: Same card component with minimal spacing vs generous white space. Teaches: Elements given "just enough" space look cramped; generous white space makes designs feel clean and professional. Reproduce as: Interactive spacing slider on a card component.
  • •[FIGURE — Remove vs add white space] Shows: Design process comparison—adding minimal space vs starting spacious and removing. Teaches: Start with too much space and reduce; you'll end up with more breathing room than if you add incrementally. Reproduce as: Step-by-step spacing workflow animation.
  • •[FIGURE — Linear vs proportional scale] Shows: Scale showing 12px→16px (33% jump) vs 500px→520px (4% jump). Teaches: Spacing scales need proportional jumps—small values need small increments, large values need larger jumps. Reproduce as: Interactive scale builder showing relative differences. Data: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 192, 256, 384, 512.
  • •[FIGURE — Don't fill the screen] Shows: Full-width content vs constrained-width centered content. Teaches: Stretching to fill available space often hurts readability; max-width with centering often reads better. Reproduce as: Resizable container showing content behavior.
  • •[FIGURE — Grids are overrated] Shows: Strict 12-column grid vs content-driven layout breaking grid where needed. Teaches: Grids are tools for alignment, not rules—let content dictate layout when the grid doesn't serve it. Reproduce as: Layout with grid overlay toggling on/off.
  • •[FIGURE — Relative sizing problem] Shows: Same component at mobile vs desktop with proportionally scaled elements (broken) vs independently sized elements (correct). Teaches: Don't use percentages or relative units for everything—some elements need fixed sizes regardless of container. Reproduce as: Responsive comparison at different viewports.
  • •[FIGURE — Ambiguous spacing] Shows: List with uniform spacing (unclear grouping) vs varied spacing (clear sections). Teaches: When inter-group and intra-group spacing are identical, visual grouping breaks down. Reproduce as: Navigation list with adjustable section spacing.

Guidelines

  • ✓Define your spacing scale before designing—pick a base unit (4px or 8px) and build multiples
  • ✓Use smaller increments (4, 8, 12) for tight relationships like icon-to-label gaps
  • ✓Use medium increments (16, 24, 32) for component padding and intra-section spacing
  • ✓Use large increments (48, 64, 96, 128) for section separations and page-level breathing room
  • ✓Apply the same scale to both padding and margin to maintain rhythm across the page
  • ✓Resist stretching elements to fill containers—centered or left-aligned with max-width often reads better

Want to learn this interactively?

Experience hands-on experiments and test your understanding.

Start Learning
🔥

Practice this topic

Active recall — strengthens long-term retention

Related Topics