Design Atlas
한국어
⌘ UX terms & laws

Gestalt: Proximity

게슈탈트: 근접성

Elements placed close together are perceived as one group — spacing alone creates groups, no border needed.

Also known as: Law of Proximity
···
html
<div class="grid" id="grid"></div>
css
.grid{position:relative;width:88%;height:80%}
.dot{position:absolute;width:11%;aspect-ratio:1;max-width:20px;border-radius:50%;background:var(--accent);transition:left 1.2s cubic-bezier(.4,0,.2,1),top 1.2s cubic-bezier(.4,0,.2,1)}
js
const grid = document.getElementById('grid');
const N = 6;
const even = [];
for (let i = 0; i < N; i++) even.push({ x: 8 + (i % 3) * 38, y: 10 + Math.floor(i / 3) * 55 });
const grouped = [
  { x: 6, y: 10 }, { x: 20, y: 14 },
  { x: 44, y: 8 }, { x: 58, y: 12 },
  { x: 6, y: 62 }, { x: 20, y: 66 },
];
const dots = even.map(p => {
  const d = document.createElement('div');
  d.className = 'dot';
  d.style.left = p.x + '%';
  d.style.top = p.y + '%';
  grid.appendChild(d);
  return d;
});
let grouped_ = true;
function apply(layout) { dots.forEach((d, i) => { d.style.left = layout[i].x + '%'; d.style.top = layout[i].y + '%'; }); }
setInterval(() => { grouped_ = !grouped_; apply(grouped_ ? grouped : even); }, 2000);

One of the perceptual principles German Gestalt psychologists (Max Wertheimer and others) codified in the 1920s. It's the textbook case of "the whole is different from the sum of its parts" — identical dots read as different groups purely from spacing.

In UI, tightening the gap between a label and its input while widening the gap between field groups creates visible sections with zero borders or background colour — structure from whitespace alone.

The dots below alternate between evenly spaced (no groups) and grouped into pairs (spacing only) — colour and size never change.

When to use

Before adding a border or divider between form sections, try spacing alone — it's usually lighter and cleaner.