Whitespace Mastery
Whitespace as Communication
Macro Whitespace (Between Sections)
- More space = greater separation of ideas.
- Section spacing should be 2-3x component spacing.
- Hero sections use whitespace to convey importance.
- Luxury brands use extreme whitespace (one element per viewport).
Micro Whitespace (Within Components)
- Padding inside cards, buttons, inputs.
- Line height in text blocks.
- Letter spacing in headlines.
- Icon-to-label spacing.
Proportional Spacing
- Space above a heading should be MORE than space below.
- This visually connects the heading to its content.
Content from previous section
← more space here (32-48px)
## New Section Heading
← less space here (8-16px)
Content for this section
Anti-Patterns
- Uniform spacing everywhere (no hierarchy).
- Cramming elements to "fit above the fold."
- Adding spacing to fill space (whitespace needs purpose too).
- Inconsistent spacing that creates unintended groupings.
