Law of Common Region

공통 영역의 법칙

Elements sharing a bounded region — a border, background, or card — are perceived as one group, even without proximity.

Also known as: Common regionGestalt common region
···
html
<div class="stage">
  <div class="pane"><div class="tag">A</div>
    <div class="scatter">
      <span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
  </div>
  <div class="pane"><div class="tag">B</div>
    <div class="grouped">
      <div class="box"><span></span><span></span><span></span></div>
      <div class="box"><span></span><span></span><span></span></div>
    </div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:6%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)}
.scatter{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.scatter span{width:16px;height:16px;border-radius:50%;background:var(--accent)}
.grouped{display:flex;gap:14%}
.box{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);animation:pulse 2.6s ease-in-out infinite}
.box span{width:16px;height:16px;border-radius:50%;background:var(--accent)}
@keyframes pulse{0%,100%{border-color:var(--line)}50%{border-color:var(--accent)}}

One of the perceptual principles Max Wertheimer and other early-20th-century Gestalt psychologists established; Stephen Palmer named and formalized "common region" in the 1990s. It resembles the law of proximity (nearby elements read as a group), but a shared boundary alone can override a lack of proximity.

Card UI is the clearest example — a title, image, and button can sit somewhat apart, but a shared card border still reads them as one unit. Without that boundary, users struggle to tell whether a button belongs to this card or the next one.

A scatters six dots with no boundary, so grouping is ambiguous; B splits the same dots into two boxes and reads instantly as two groups.

When to use

Use this when deciding whether to draw a card or section boundary. If proximity alone isn't reading as a group, a faint background or border often fixes it.