Key insights
- Proximity is a Gestalt principle: elements placed close together read as one group, elements spaced apart read as separate. The eye infers relationships from distance alone.
- You rarely need borders, boxes, or dividers to create structure — spacing does the grouping by itself.
- The trick is contrast: make the gap within a group smaller than the gap between groups. Equal spacing everywhere flattens the hierarchy and everything reads as one undifferentiated block.
- In forms, tighten related fields (~12px) and open up section breaks (~40px) so 'Personal Info' and 'Payment' visibly separate without a single line.
- In toolbars and nav, group controls by function — navigate, actions, system — instead of laying them out in one evenly-spaced row.
- Same content, more clarity: a flat list of eight sidebar links becomes scannable the moment it's split into labeled groups like Dashboard, Management, and Account.
Do / Don't
- Do: Keep spacing within a group tighter than the spacing between groups
- Do: Group form fields and nav items by function or meaning
- Do: Let whitespace carry the grouping before reaching for borders or dividers
- Don't: Space every element equally — it erases hierarchy and forces users to parse everything at once
- Don't: Reach for boxes and dividers when a larger gap would communicate the same grouping
