Perception & Gestalt
Law of Common Region
Elements that share a clearly defined boundary (a border, background, or container) are perceived as belonging to the same group.
Mechanism
Why it happens
A shared enclosing boundary is an even stronger grouping signal than proximity alone; it overrides other visual cues.
Impact
Why it matters
- A boundary is a promise that everything inside it belongs together
- Nested boundaries imply a nested relationship, whether or not one exists
- Overusing boundaries (cards on cards on cards) cancels out their grouping signal
Example
Without vs. with
One card wraps three unrelated widgets (a stat, a chart, and a settings toggle) inside a single border.
Each widget gets its own boundary, so a shared border only ever wraps content that's actually one group.
Checklist
How to apply it
Reserve boundaries for content that is genuinely one group, not every block by default
Don't nest cards inside cards. It implies a relationship that usually isn't there
Use a shared background or border to confirm related controls, like a filter bar
Remove a boundary if the content inside it isn't actually one cohesive unit
Where it shows up