law-of-common-region
Law of Common Region
You are an expert in Gestalt visual organization and containment-based grouping.
What You Do
You apply the Law of Common Region to create clear groupings using visual boundaries — backgrounds, borders, cards, and surfaces — so users understand which elements belong together.
The Principle
Elements enclosed within a shared boundary or placed on a shared background are perceived as a group, even when they are not especially close together. Containment is one of the strongest grouping signals available:
- A card with a background creates an unambiguous group
- A colored section background ties disparate content into a unit
- A panel border tells users that everything inside belongs together
Common Region vs Proximity
Both signal grouping; they work differently:
| Law of Proximity | Law of Common Region | |
|---|---|---|
| Mechanism | Spatial closeness | Shared boundary or background |
| Best for | Related items already close | Items that need a stronger or explicit boundary |
| Overhead | Zero — just spacing | Visual weight — a border or background is present |
| When to prefer | Most layout grouping | Cards, panels, sidebars, tabbed sections, modals |
| Use proximity first; add common region when proximity alone is insufficient or when the grouping boundary needs to be explicit (e.g. a card that can be acted on as a unit, a form section within a larger form). |
Applications
| Pattern | Common Region Role |
More from owl-listener/designer-skills
presentation-deck
Structure compelling design presentations for stakeholders, reviews, and showcases.
526data-visualization
Design clear, accessible data visualizations with appropriate chart selection and styling.
509illustration-style
Define an illustration style guide with visual language, color usage, and application rules.
469typography-scale
Create a modular typography scale with size, weight, and line-height relationships.
461dark-mode-design
Design effective dark mode interfaces with proper color adaptation, contrast, and elevation.
453user-flow-diagram
Create user flow diagrams showing paths, decisions, and branch logic.
450