law-of-common-region
owl-listener/designer-skills
Apply visual boundaries and containers to group elements clearly, regardless of spacing.
What is law-of-common-region?
The Law of Common Region is a Gestalt principle that groups elements using shared boundaries, backgrounds, or containers. Use it when elements need an explicit, robust grouping signal—especially in tight layouts where proximity alone is insufficient or when the group must function as a cohesive unit.
- Create unambiguous groupings using cards, backgrounds, borders, and surfaces
- Distinguish containment-based grouping from proximity-based grouping and choose the right tool
- Apply common region to cards, sidebars, modals, form sections, tables, tags, and tooltips
- Avoid visual noise by limiting nesting depth and using the weakest container that works
- Ensure containers remain visible and effective across contrast levels and dark mode
How to install law-of-common-region
npx skills add https://github.com/owl-listener/designer-skills --skill law-of-common-regionHow to use law-of-common-region
- 1.Identify elements that need grouping and assess whether proximity alone communicates the relationship
- 2.Determine if the grouping needs to be explicit or survive in a tight layout—if yes, apply common region
- 3.Choose the weakest container that works: background before border, border before card surface
- 4.Apply consistent styling (corner radius, padding, shadow) aligned with your design system
- 5.Test the grouping across contrast levels and dark mode to ensure visibility
- 6.Avoid nesting common regions more than two levels deep to prevent visual clutter
Use cases
- Designing a card-based product listing where each item must be perceived as a discrete, actionable unit
- Organizing a long form into visually distinct sections using background or rule dividers
- Creating a sidebar that clearly separates navigation from main content using a background or border
- Building a modal or sheet that signals an isolated task context through surface elevation
- Grouping related tags or pills where the background makes each element a discrete object
- UI/UX designers
- Product designers
- Design system maintainers
- Frontend developers implementing design systems
law-of-common-region FAQ
Use proximity first for most layout grouping. Add common region when proximity alone is insufficient, when the grouping boundary must be explicit, or when the group needs to function as a cohesive, actionable unit (e.g., a card, form section, or modal).
Both signal containment. A background is often lighter and less visually heavy; a border is more explicit. Use the weakest container that communicates the grouping—background before border, border before a full card surface.
Yes, but only when establishing hierarchy—for example, a card (common region) inside a panel section (common region). Avoid redundant layering on a single grouping, as it adds visual noise without benefit.
No. Using cards for everything flattens hierarchy and adds unnecessary visual weight. Reserve cards for discrete, actionable items. Use lighter containers (background or border) for logical groupings within larger layouts.
Test your backgrounds, borders, and shadows across both light and dark contexts. Ensure sufficient contrast and that the containment signal remains clear. Adjust opacity, color, and shadow values as needed for each mode.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: law-of-common-region
description: Apply the Law of Common Region — a shared container, background, or border groups elements regardless of spacing. Use when grouping must survive a tight layout. For grouping by spacing alone, use law-of-proximity.
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 |
|---|---|
| Cards | Container clearly delimits a discrete item |
| Sidebar | Background or border separates navigation from content |
| Modal / sheet | Surface elevation signals an isolated task context |
| Form sections | Background or rule divides logical groups within a long form |
| Table rows | Hover/selection background shows a row as a unit |
| Tag groups | Pill background makes each tag a discrete object |
| Tooltip | Container boundary distinguishes overlay from page content |
When Containment Is Counterproductive
- Using cards for everything flattens hierarchy — not every group needs a container
- Nested common regions create visual noise; limit nesting depth to two levels
- A border for its own sake adds clutter; if proximity already communicates the grouping, the border is redundant
Best Practices
- Give containers consistent corner radius, padding, and shadow within a design system
- Use the weakest container that gets the job done — background before border, border before card surface
- Ensure common regions survive in low-contrast or dark mode contexts
- Don't combine proximity and common region redundantly on the same grouping unless you are establishing hierarchy (a card inside a panel section, for example)
Related skills
More from owl-listener/designer-skills and the wider catalog.
law-of-proximity
Apply spatial closeness to group elements—the most fundamental Gestalt layout principle.
layout-grid
Define responsive grids with columns, gutters, margins, and breakpoint behavior for consistent page layouts.
loading-states
Design waiting experiences with spinners, skeletons, optimistic updates, and progressive reveal.
localization-design
Design UI that adapts to any language, script, and cultural context without breaking.
metrics-definition
Define UX metrics and KPIs that connect design decisions to measurable outcomes.
micro-interaction-spec
Specify single micro-interactions with trigger, rules, feedback, and loops for engineering handoff.