Made with 🧠 and πŸ«€ by Youssef Bouksim

Back to library
πŸ”²

Law of Common Region

Elements enclosed within a shared boundary are perceived as belonging to the same group β€” regardless of proximity or similarity. The boundary itself creates the group, before any reading occurs.

5 min readUX Β· Visual Design Β· Layout

The Law of Common Region, introduced by Stephen Palmer in 1992, adds a principle the other Gestalt laws miss. Where Proximity says β€œthings close together are perceived as related” and Similarity says β€œthings that look alike are perceived as related,” Common Region says something more fundamental: things enclosed within the same boundary are perceived as a group β€” before proximity, before similarity, before any reading begins.

A border, a background fill, a column boundary, a card β€” any visible enclosure creates a perceptual container. Whatever is inside that container is automatically grouped by the visual system in under 100 milliseconds. The user doesn't decide to group them. The boundary makes the decision for them, automatically and instantly.

This is why the Kanban board is one of the most intuitive tools in software. Strip away the column regions β€” present the same tasks in a flat list with status labels β€” and users must read every label to reconstruct the workflow state. Add the column boundaries back, and the entire state of the project is visible at a glance, before a word is read. The information is identical. The boundary is everything.

✦ Key takeaways
βœ“
The boundary creates the group β€” not the content. Two completely unrelated items inside the same card are perceived as related. Two identical items in different cards are perceived as separate. Common Region overrides both proximity and similarity as a grouping signal β€” containment is the strongest cue the visual system uses.
βœ“
A background fill is a boundary. Common Region doesn't require a visible border. A column with a slightly different background colour, a highlighted row, a tinted section β€” any surface-level distinction creates a region the visual system treats as a container. This is why alternating row backgrounds in a table create perceived groups even with no border at all.
βœ“
Common Region makes status visible without reading. Any time you need users to understand β€œwhich state is this in?” or β€œwhich group does this belong to?” β€” a shared boundary answers that question perceptually. Status labels, colour tags, and category text all require reading. A shared column background requires only a glance.
β€œA region of space enclosed by a boundary is perceived as a distinct group β€” one of the most powerful principles of perceptual organisation.”
β€” Stephen Palmer, Vision Science, 1999

The Kanban board β€” twelve tasks, no columns vs three regions

Both versions below contain the same twelve tasks, the same status labels, the same assignees, the same due dates. The bad version presents them as a flat list with status tags on each card. The good version encloses them in three column regions. The difference in comprehension time β€” how long it takes to answer β€œwhat is currently in progress?” β€” is not a matter of seconds. It is a matter of whether the question requires reading at all.

Before β€” flat list, no shared boundaries
yourapp.com/project/sprint-4
Board/Design system/Sprint 4
All tasks (12)
To do
Audit existing button variants across all product screens
Y
Apr 4
In progress
Redesign card component β€” mobile breakpoints
M
Apr 3
Done
Typography scale β€” define all heading tokens
S
Mar 31
To do
Write documentation for spacing tokens
Y
Apr 7
Done
Colour palette β€” WCAG contrast audit complete
L
Apr 1
In progress
Input field states β€” focus, error, disabled
S
Apr 1 ↑
To do
Icon library β€” finalise 24px grid and export rules
M
Apr 9
Done
Motion principles β€” easing curves defined
Y
Apr 2
In progress
Navigation component β€” active states and overflow
L
Apr 5
To do
Dark mode β€” map all semantic tokens to dark values
S
Apr 10
Done
Grid system β€” 4-column and 12-column defined
M
Mar 30
In progress
Toast notifications β€” variants and placement guide
Y
Apr 6
Twelve tasks, three status tags repeated throughout. Finding β€œwhat's in progress?” requires scanning every tag. The status information is there β€” but it requires reading, not glancing.
After β€” three column regions show status
yourapp.com/project/sprint-4
Board/Design system/Sprint 4
To do4
Design
Audit existing button variants across all product screens
Y
Apr 4
Docs
Write documentation for spacing tokens
Y
Apr 7
Design
Icon library β€” finalise 24px grid and export rules
M
Apr 9
Design
Dark mode β€” map all semantic tokens to dark values
S
Apr 10
In progress4
Design
Redesign card component β€” mobile breakpoints
M
Apr 3
Design
Input field states β€” focus, error, disabled
S
Apr 1 ↑
Design
Navigation component β€” active states and overflow
L
Apr 5
Design
Toast notifications β€” variants and placement guide
Y
Apr 6
Done4
Design
Typography scale β€” define all heading tokens
S
Mar 31
Design
Colour palette β€” WCAG contrast audit complete
L
Apr 1
Design
Motion principles β€” easing curves defined
Y
Apr 2
Design
Grid system β€” 4-column and 12-column defined
M
Mar 30
The same twelve tasks in three column regions. A glance answers β€œwhat's in progress?” β€” four tasks in the blue column. The yellow background, blue background, and green background are the boundaries. No status tags needed on each card.

The Kanban board is the canonical application of Common Region in product design β€” but notice what makes it work: the column background colour is doing most of the heavy lifting. There is no border between columns, no line separating To Do from In Progress. The shared background fill of each column is sufficient to create the perceptual region. Palmer's insight was that any enclosed surface β€” not just a visible border β€” creates a group.

Notice also that in the good version, the status tags on individual cards become redundant. The column already communicates status. The tags can now be repurposed to show the task type β€” Design, Docs β€” without creating confusion about what status means. When the boundary carries the status signal, the label is freed to carry something else.


Filter panels β€” bordered boxes vs spacing and headers

Common Region doesn't require a visible border. Any enclosed surface creates a perceptual region β€” and that enclosure can be defined by spacing and hierarchy just as effectively as by a drawn line. The filter sidebar is a case where heavy card borders around each section actively hurt: they add visual weight, fragment the panel, and make it feel busier without adding any structural information that a divider and section header couldn't carry alone.

The bad version encloses each filter group in a bordered card. The good version uses only section headers, dividers between groups, and consistent internal spacing. The perceptual grouping is identical β€” each section is still a region β€” but the visual weight is far lower. The same twelve filter options feel calmer and easier to scan when the boundary is implied rather than drawn.

Before β€” bordered cards add noise
shop.yourapp.com/surfboards
FiltersClear all
Categories
Surfboard Bags & Packs
Beach Towels
Surfboard Leashes
Surfboard Fins
Surfboard Straps & Pads
Recommended Use
Surf
Lifestyle
Travel
Paddle
New Arrivals
Brands
Search Brands...
DAKINE
FCS
Pro-Lite
142 products
Sort: Featured
Surfboard Day Bag 7'0"
$89.95
Quick-Dry Beach Towel
$45$31.95
Comp Leash 6' Regular
$29.95
FCS II Reactor Fins
$109.95
Traction Pad 3-Piece
$49.95
Surf Pack 35L
$129.95
Four bordered cards in a narrow panel. The borders add four outlines, four border-radius curves, four background fills β€” none of which communicate anything the section header and a divider line couldn't say more quietly.
After β€” spacing + dividers create regions
shop.yourapp.com/surfboards
FiltersClear all
Categories
Surfboard Bags & Packs
Beach Towels
Surfboard Leashes
Surfboard Fins
Surfboard Straps & Pads
Recommended Use
Surf
Lifestyle
Travel
Paddle
New Arrivals
Brands
Search Brands...
DAKINE
FCS
Pro-Lite
142 products
Sort: Featured
Surfboard Day Bag 7'0"
$89.95
Quick-Dry Beach Towel
$45$31.95
Comp Leash 6' Regular
$29.95
FCS II Reactor Fins
$109.95
Traction Pad 3-Piece
$49.95
Surf Pack 35L
$129.95
Same four groups, same items. The region is created by the section header + the divider line between groups. No border, no border-radius, no card background β€” the visual weight drops and the panel breathes.

This is the subtler side of Common Region: knowing when not to draw a boundary. A border is a strong signal β€” it adds weight and closure. In a narrow filter panel that already has section headers and consistent spacing, the border is redundant. The region already exists. Drawing a box around it adds noise, not clarity. The best boundary is often the lightest one that still does the job.


Applying this to your work

Common Region's audit question is simple: can a user determine the categorical structure of this screen without reading any labels? If the answer is no β€” if they must read to understand grouping β€” the structure is being communicated by text rather than by visual boundaries. Adding a shared background, a card border, or a column fill transfers that burden from reading to perception.

The principle applies wherever you have items that belong to distinct categories: settings pages, dashboards, onboarding flows, form sections, search results with different types. The mechanism is always the same β€” enclose the members of each category in a shared visual boundary, and the grouping becomes perceptible before comprehension begins.

βœ“ Apply it like this
β†’Give categorically distinct groups distinct column or card backgrounds β€” not just labels. Background colour is a boundary; it creates the region without a visible border.
β†’When a boundary carries the category signal (e.g. the column communicates status), free up the in-card labels to communicate something more useful.
β†’Use Common Region for any β€œstatus” or β€œstate” UI β€” pipeline stages, workflow steps, review queues β€” wherever the question β€œwhich group is this in?” must be answered quickly.
β†’Use card regions to group form sections β€” billing, shipping, account β€” so users can see the structure of the form at a glance before filling anything in.
βœ— Common mistakes
β†’Using only text labels to separate categories in a flat list β€” labels require reading; boundaries require only a glance. Text is the slowest way to communicate grouping.
β†’Creating regions that don’t map to meaningful categories β€” decorative cards around arbitrary content create false perceptual groups and actively mislead users about structure.
β†’Making all regions look identical when they are categorically different β€” two regions that share the same visual treatment are perceived as equivalent even if their meaning differs.
β†’Redundantly labelling status inside each item when the enclosing column already communicates it β€” this clutters the card with information the boundary already provides for free.

Palmer, S. E. (1992). Common region: A new principle of perceptual grouping. Cognitive Psychology, 24(3), 436–447. Β· Palmer, S. E. (1999). Vision science: Photons to phenomenology. MIT Press.