Design Atlas
한국어
⌘ UX terms & laws

Gestalt: Similarity

게슈탈트: 유사성

Elements sharing colour or shape read as one group, even when they aren't physically close together.

Also known as: Law of Similarity
···
html
<div class="grid" id="grid"></div>
css
.grid{width:88%;height:80%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:10px;place-items:center}
.shape{width:clamp(16px,4.4vmin,40px);height:clamp(16px,4.4vmin,40px);border-radius:6px;transition:background 1s ease}
js
const grid = document.getElementById('grid');
const order = [0,1,0,1, 1,0,1,0, 0,1,0,1];
const els = order.map(() => { const s = document.createElement('div'); s.className = 'shape'; grid.appendChild(s); return s; });
const muted = 'var(--muted)';
const colors = ['var(--accent)', 'var(--accent-2)'];
function mono() { els.forEach(e => e.style.background = muted); }
function colored() { els.forEach((e, i) => e.style.background = colors[order[i]]); }
mono();
setInterval(() => { const isMono = els[0].style.background === muted; isMono ? colored() : mono(); }, 2000);

Alongside proximity, this is Gestalt psychology's other core grouping law. Proximity groups by distance; similarity groups by shared attributes — colour, shape, size — even across a scattered layout.

In UI, this shows up as always colouring destructive actions red, or using a consistent shape for tags of the same category. Consistently underlining and colouring links blue teaches similarity: "this whole set is clickable."

The shapes below keep their grid positions the whole time — only colour changes — yet same-colour ones start reading as a group.

When to use

When defining a colour or icon system, keep "same meaning, same colour/shape" consistent. Exceptions turn similarity into a false signal.