Spacing, Grids & Layout

4.3.1Definition

Spacing systems define a limited, consistent scale of margins and padding (commonly a base-4 or base-8 pixel scale) applied throughout a product. A grid system defines how content aligns into columns and gutters, providing a consistent structural skeleton beneath every layout.

4.3.2Why It Exists

Inconsistent spacing is one of the fastest ways an interface reads as unpolished, even when every individual element is well-designed. A defined spacing scale and grid exist to guarantee visual rhythm and alignment are systematic rather than eyeballed per screen, which both improves perceived quality and makes layout implementation faster and more predictable for engineers.

4.3.3Core Decisions

• Base unit — most systems use 4px or 8px as the atomic spacing unit, with all margins/padding as multiples of it.
• Grid columns — commonly 12 columns for flexible desktop layouts, collapsing to 4 or fewer on mobile.
• Whitespace as a hierarchy tool — greater spacing between unrelated groups, tighter spacing within related ones, communicates grouping without needing visible borders.

4.3.4Common Mistakes

• Arbitrary spacing values chosen per screen (13px here, 18px there), producing subtle but perceptible inconsistency across the product.
• Uniform spacing everywhere, failing to use whitespace differences to communicate which elements are related and which aren't.

4.3.5Best Practices

• Define spacing as tokens on a fixed scale (4, 8, 12, 16, 24, 32, 48...) and never use an off-scale value.
• Use tighter spacing within a related group and looser spacing between unrelated groups — proximity itself communicates structure.