Strategy ⚡ Low

Law of Common Region

Elements inside the same boundary are perceived as a group — even when nothing else connects them.

Visual grouping Card design Form sections Dashboard layout Navigation design Containers

01 — TL;DR

Two sentences.

The Law of Common Region is a Gestalt perceptual principle — identified and formalised by Stephen Palmer in 1992 as an addition to the original six Gestalt laws — establishing that elements enclosed within the same clearly perceptible boundary are automatically perceived as belonging to the same group, regardless of the spatial distances between them or any visual properties they may share or not share. For interface designers, this makes containment — through card borders, section backgrounds, panel outlines, and modal dialogs — the most explicit and most reliable mechanism for communicating group membership: stronger than proximity when layout density makes spacing-based grouping ambiguous, and stronger than similarity when enclosed elements are visually diverse.

Containment overrides distance

Palmer's key demonstration showed that elements inside a boundary are grouped together even when they are further apart than elements outside the boundary. "Inside vs outside" is a topological relationship — it doesn't depend on metric distance. That's why common region is the most powerful grouping principle in dense layouts: it works regardless of how tight or loose the spacing is, because the boundary itself makes group membership unambiguous.

Trigger phrase

When a layout has multiple elements that need to be explicitly grouped — and proximity alone is insufficient because elements are too close to non-related elements, or because the grouping needs to be unambiguous regardless of the surrounding layout density.

02 — When to Use

Apply this when…

→ A card component contains multiple visually diverse elements — an image, text block, button, metadata row — that must be perceived as a single unit despite their visual heterogeneity

→ A form has distinct sections (personal, address, payment) that must be clearly separated as discrete perceptual units, particularly when the form is long enough that proximity alone is insufficient

→ A dashboard contains multiple data modules that must be read as independent units rather than as one continuous data field

→ A modal dialog, tooltip, or contextual panel must be clearly separated from the content it overlays — the boundary makes the panel's contents an unambiguous perceptual unit distinct from the background

→ Navigation items need to be grouped into distinct categories where the boundaries must be explicit, not merely implied by spacing

→ A complex layout contains elements from multiple functional domains — labels, inputs, help text, validation messages — that must be clearly organised into comprehensible sections

When NOT to apply it

Skip common region when the layout is sparse and unambiguous — spacing alone creates reliable groupings and borders or fills would add unnecessary visual weight. Skip it when the design system is deliberately minimal — containment adds visual complexity that conflicts with a restrained aesthetic, and well-calibrated proximity does the job. And skip it when elements are already connected by strong visual similarity that makes category membership unambiguous — similarity is sufficient and common region adds noise.

03 — How It Works

The mechanism

Common region provides the visual system with the most explicit possible categorical signal: a boundary that literally encloses the elements that belong together and excludes the elements that do not. Unlike proximity (which requires elements to be closer to their group members than to non-members) and similarity (which requires shared visual properties), common region works through an unambiguous topological relationship — inside vs outside — that the visual system evaluates immediately and reliably across all layout densities and element diversities. Palmer's 1992 demonstrations showed this grouping can override proximity: dots inside a drawn circle were grouped together even when they were further apart than dots outside the circle.

Choose a containment mechanism for each group

Three primary mechanisms create common regions: borders (a visible outline), background fills (a colour or texture applied to the region), and shadows (a drop shadow elevating the region from the background). Each produces the same perceptual outcome through a different visual cue. Strength ordering, roughly: filled containers > bordered > shadow-elevated > proximity-only.

Use common region where proximity isn't sufficient

In sparse layouts, proximity alone creates reliable groupings — adding borders or fills adds visual weight without clarity gain. In dense layouts where many elements are simultaneously proximate to group members and to other-group members, common region becomes essential. The test: run the blur test first. If proximity produces the intended groupings in the blurred layout, skip containment; if not, add it.

Nest containment to communicate hierarchy

A card (inner common region) inside a section (outer common region) communicates a two-level hierarchy through containment alone — no explicit labels required. This scales to complex multi-level structures, but the visual system reliably differentiates only two to three nesting levels. Beyond that, the visual weight accumulates faster than the structural clarity it provides.

Keep containment mechanisms consistent within a system

If borders mean one level of grouping, fills should not silently mean the same level — they should mean a different level, or the same mechanism should be used consistently. When borders, fills, shadows, and proximity are mixed arbitrarily, users cannot infer the hierarchy from the mechanism. A design system should specify which containment mechanism represents which level of grouping, and apply it consistently.

Validate with group-membership testing

Ask users to identify which elements belong together. If their groupings match your intended common regions, containment is doing its job. Also compare against a proximity-only version of the same layout — if containment isn't improving grouping accuracy meaningfully, it is adding visual weight without earning it, and proximity is the cleaner solution.

Common Region + Proximity work together

In sparse layouts, proximity is often sufficient — adding borders where proximity already creates clear groupings increases visual weight without improving clarity. In dense layouts, where many elements are simultaneously close to both group members and other-group members, common region becomes essential — it creates unambiguous boundaries that proximity cannot establish when spacing differentials are small. The design question is not "common region or proximity?" but "is proximity alone sufficient at this density?" If the blur test shows ambiguous groupings, common region is the right addition.

04 — Real Example

Notion's page-and-block structure and the containment hierarchy that scales

Notion's information architecture is one of the most sophisticated applications of the Law of Common Region in a production consumer product. The core structural metaphor — pages containing blocks, blocks containing inline content, nested pages containing sub-pages — is implemented visually through a carefully calibrated containment hierarchy where each level of nesting creates a visually distinct common region that users perceive as a perceptual unit.

At the page level, the page background creates a common region containing all content of that page. At the block level, hovering reveals a subtle block boundary that makes each block's extent perceptible as a distinct region within the page. At the database level, table views, board views, and gallery views each create explicit common region containers for their entries — bordered cells in tables, bordered cards in boards, bordered cards in galleries — providing unambiguous containment that groups each entry's fields as a single record.

Workspace · Documents / Databases · Notion

One containment principle scales from single block to complex nested database

What makes Notion's implementation notable is that the same containment principle scales from the simplest single-block note to the most complex nested database structure with sub-pages, linked databases, and embedded views — because the topological grouping mechanism works at every level of nesting without requiring different design patterns. Page → block → record → field: same principle, any complexity, no new grammar to learn. When a single Gestalt principle is pressed into structural service carefully, a product can hold enormous information hierarchies without new UI vocabulary for each level.

Page → block → record

05 — In the Wild

Test yourself & see real examples

No examples yet — be the first.

Spotted a product whose card or section design makes every piece of content feel like a clearly bounded unit — or one where content areas bleed into each other because nothing explicitly defines where one group ends and another begins? Submit a screenshot and annotate what you see. Every approved example gets attributed to you.

✓ Reviewed before publishing ✓ Your name on every example you submit ✓ Violation or fix — both welcome

Seen the Law of Common Region applied well or missed in a real product? Help grow the evidence base.

06 — Common Mistakes

Where teams go wrong

✗ Using borders as decoration rather than as grouping mechanisms. Every border applied to a layout is a common-region declaration — and that declaration has perceptual consequences. Adding a border to one card type but not to similar card types creates asymmetric groupings that communicate categorical differences the design did not intend. Decorative borders are never just decorative; the visual system reads them as grouping signals.

✗ Creating too many nested levels of containment. Page background → section background → card fill → inner-card element background — the visual system can technically parse four levels, but experiences them as visually heavy and cognitively demanding. Two clear levels serves most interface organisation needs; a third level should be used only when genuinely required by information architecture.

✗ Mixing containment mechanisms inconsistently. When some groups are defined by borders, others by fills, others by shadows, and others by proximity alone — with no consistent system for when each is used — users cannot infer structure from mechanism. Specify in the design system which mechanism represents which level of the grouping hierarchy, and apply it consistently.

✗ Adding containment to resolve density problems rather than addressing density. When a layout becomes dense, containment resolves ambiguous proximity — but it doesn't fix the underlying cognitive load of too many simultaneous items. A settings page with 40 items in 10 bordered sections may be less usable than the same 40 items in 5 sections after reducing redundancy. Common region is the right solution for grouping within density; progressive disclosure, tabs, and hierarchy are often the right solutions for density.

✗ Confusing containment fills with semantic fills. A card fill says "these elements belong together" (grouping); a priority-badge fill says "this element has this attribute" (meaning). Both are fills, but they serve different functions. When containment and semantic fills aren't visually distinct enough to read as different kinds of thing, users can't tell whether a fill is announcing a group or announcing a property — and hierarchy comprehension breaks down.

07 — Variations & Related Principles

Connected ideas

The Law of Common Region is the most explicit and strongest Gestalt grouping principle for interface design. Its closest relationships are with the other Gestalt principles and with the cognitive principles that explain what happens after containment-based grouping occurs.

The most important pairing is the Law of Common Region with the Law of Proximity. In sparse layouts, proximity alone is sufficient — spacing communicates grouping without the visual weight of containment. In dense layouts, proximity becomes ambiguous and common region provides the explicit boundary that makes grouping unambiguous. The decision of when to supplement proximity with containment should be driven by layout density — if a blurred version of the layout reveals that proximity groupings are not clearly perceivable, common region is the appropriate addition.

08 — 10-Min Exercise

Run it right now

⏱ 10 minutes · Solo · No prep

The Container Audit

Take a screenshot of your most complex screen — your dashboard, primary settings page, or most feature-rich view. Identify every containment element in the layout: every border, background fill, shadow-elevated element. List each one and note the boundary type (border, fill, shadow, or combination).

1. For each container, write down what is inside it. What is the intended group — what do the enclosed elements have in common functionally? Is the container communicating the grouping you intend, or is it enclosing elements that do not naturally belong together?

2. Count the nesting levels. Are there containers within containers within containers? More than two clear levels is worth reviewing — the visual system reliably distinguishes only two to three levels before hierarchy becomes ambiguous.

3. Look for elements that belong together but aren't in a common region — groups relying only on proximity in a dense layout. Run the blur test on those regions: if groupings aren't clearly perceivable in the blur, common region is the right addition.

4. For any group currently communicated only by proximity in a dense layout, write the minimum containment treatment that would create an unambiguous common region — a 1px border, a 4% background tint, or a 4px shadow. The minimum treatment that survives the blur test is the right treatment.

10 minutes