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
The Design System Blueprint
An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.
