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.