Space Creates Meaning
Spacing decides which elements belong together and which stand apart.
Tight spacing inside groups signals relationship. Wider spacing between groups signals a context switch.
Three Whitespace Zones
Micro: text line-height and icon-label gaps
Meso: space between cards and sections
Macro: outer margins and page breathing room
Fix micro space first for readability. Use meso and macro space to create calm structure.
Overstuffing Signals Panic
If every pixel is filled, nothing has room to stand out.
Dense layouts can work, but only with strict hierarchy and rhythm. Most beginner UIs look better when you remove one block or add one spacing step.
Choose the whitespace move that improves readability fastest.
Deliberate empty space used to group content, create rhythm, and improve readability.
A repeatable spacing cadence that makes a page feel steady and easy to scan.