The Gestalt principle stating that elements enclosed within the same clearly defined boundary are perceived as a group — even if they are otherwise visually dissimilar. In UI design, this principle explains why cards, panels, and dividers are effective grouping mechanisms, and why elements accidentally enclosed together by a border or background will be read as related.
Common contexts
- Debugging a layout where a decorative background container unintentionally groups a CTA with unrelated body text
- Using card containers to visually separate independent product recommendations in a feed
- Evaluating whether a settings panel divider creates the right grouping or accidentally separates related controls
Use when
Apply common region deliberately when grouping elements that are functionally related but visually different — a shared background or border communicates relationship without requiring identical styling.
Avoid when
Don't use borders or background fills as decoration — every enclosed region signals a meaningful group, and decorative containers create false relationships that confuse the visual hierarchy.
Common region is the most frequently accidental Gestalt principle in UI design — a background chosen for visual interest routinely creates groupings the designer never intended.
Real-world examples
- Google Calendar uses a subtle background tint to group all events on a given day, allowing users to scan a week view in seconds by visually chunking events into daily regions.
- Airbnb's listing search card places photo, title, star rating, and price inside a rounded-corner container — the common region makes the card read as a single visual unit versus a list of properties.
- iOS 16's notification grouping uses card-like borders to cluster notifications by app, using common region to reduce visual noise versus the previous one-notification-per-row layout.