Von Restorff Effect — Design Atlas

.row{display:flex;gap:5%;width:90%} .dot{width:16%;aspect-ratio:1;border-radius:50%;background:var(--line);position:relative} .dot.special{background:var(--accent-2)} .check{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:900 14px/1 monospace;opacity:0} .dot.special .check{animation:show 3s ease-in-out infinite} @keyframes show{0%,40%{opacity:0}60%,90%{opacity:1}100%{opacity:0}} .cur{position:absolute;font-size:16px;color:var(--fg);transform:rotate(-45deg);animation:seek 3s ease-in-out infinite} @keyframes seek{0%{left:10%;top:70%}40%{left:52%;top:44%}100%{left:52%;top:44%}}

const row = document.getElementById('row'); for (let i = 0; i < 5; i++) { const d = document.createElement('div'); d.className = 'dot' + (i === 2 ? ' special' : ''); if (i === 2) d.innerHTML = '<span class="check">✓</span>'; row.appendChild(d); }

German pediatrician and psychologist Hedwig von Restorff identified this in 1933 memory experiments. A single item that looks different among identical peers draws attention and is recalled far more often afterward.

Colouring only the "recommended" plan differently on a pricing table, or badging just the newest item in a list, are direct applications. But highlight everything and nothing stands out (see: visual-hierarchy) — limit isolation to one thing per screen.

The attention dot below keeps returning to the one differently-coloured circle among the grey ones, and only that circle keeps its memory checkmark.

When to use

Use it when you need "don't miss this one" — a recommended pricing tier, a new item in a list. Limit it to one per screen.