law-of-common-region

The Law of Common Region is a Gestalt principle stating that elements enclosed within a shared boundary or background are perceived as a group. In UI design, cards, panels, and colored sections use this principle to show which elements belong together.

Use proximity first since it adds no visual weight. Add common region when spacing alone is insufficient, when the boundary must be explicit, or when a group acts as a unit, such as a clickable card, a modal, or a form section within a longer form.

Proximity groups elements through spatial closeness with zero visual overhead, while common region uses a shared border or background for a stronger, explicit boundary. Proximity suits most layout grouping; common region suits cards, panels, sidebars, and modals.

Yes. Using cards for everything flattens visual hierarchy, and nested common regions create noise. Limit nesting to two levels, prefer the weakest container that works, and skip borders when proximity already communicates the grouping.

Ensure containers remain distinguishable in low-contrast and dark mode contexts by testing background and border contrast. Consistent corner radius, padding, and shadow within the design system also help groupings survive theme changes.