Visual Foundations
Whitespace
Empty space groups content, sets focus and makes pages feel calm and premium.
See it
Don't
- Almost no padding inside the card
- Line height too tight to scan
- Buttons crammed together
Do
Weekly report ready
Your traffic grew 12% this week. Top page was /pricing.
DownloadShare
Why it matters
Whitespace isn't wasted space. Padding and line height give content room to breathe, and cutting copy to what matters lowers cognitive load.
How to apply it
- Give cards generous padding (16 to 24px is a good start)
- Put more space between sections than within them
- Cut copy before you cut space
Common mistakes
- Filling every gap with content
- Tight padding inside buttons and cards
Quick answers
What is Whitespace?
Empty space groups content, sets focus and makes pages feel calm and premium. Whitespace isn't wasted space. Padding and line height give content room to breathe, and cutting copy to what matters lowers cognitive load.
How do I apply Whitespace in UI design?
Give cards generous padding (16 to 24px is a good start). Put more space between sections than within them. Cut copy before you cut space.
What are common mistakes with Whitespace?
Filling every gap with content. Tight padding inside buttons and cards.