Layout Principles

Whitespace Is Not Empty

Whitespace is an active design element. It creates hierarchy, groups related items, separates unrelated items, and gives the eye a place to rest. More whitespace usually means more perceived quality.

Proximity Principle

Items closer together are perceived as related. This is the most powerful layout tool you have. The space between a heading and its paragraph should be smaller than the space between sections.

Section gap:     48-64px (clear separation)
Heading to body: 8-16px  (clearly connected)
Paragraph gap:   16-24px (related but distinct)
List item gap:   8-12px  (tightly grouped)

Grid Systems