Whitespace Mastery

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.