The Von Restorff effect
The Von Restorff (isolation) effect: the item that differs from its neighbors is the one people notice and remember. Isolate one thing — and only one.
In one line: when one item differs from a uniform field of neighbors, that item is the one the eye lands on and the memory keeps — so emphasize by isolating a single thing, not by shouting at everything.
What it is
The Von Restorff effect — also called the isolation effect — was first described in 1933 by psychiatrist Hedwig von Restorff: in a list of similar items, the one that stands out is the one people recall best. Difference, not loudness, is what draws attention.
The key word is difference. A standout isn't created by an item being bright or big in the absolute; it's created by that item being unlike its neighbors. Six grey chips and one blue chip: the blue one wins. Six blue chips and one blue chip: nothing wins. The effect lives in the contrast between an item and the uniform background it sits against.
Why it matters
This is the mechanism behind a huge amount of everyday UI emphasis. The "recommended" plan in a pricing table, the single primary CTA on a page full of secondary links, the "New" badge on one menu item, an error message tinted against a calm form — all of them work by being the one thing that differs.
The catch is in that word "one." The effect only fires when the rest stay uniform. The moment you mark three plans as recommended, or give every button a gradient, or stack badges on half your nav, you've rebuilt a uniform field — and uniform fields have no standout. Emphasis is a budget, and isolation spends it on a single item.
See it
Tweak it3
Switch the isolation signal in the controls and feel your eye snap to the chip that differs. With the signal off, the grid is flat and your gaze has nowhere to land; turn on color, size, or weight and one chip immediately separates from the rest.
How it works
Three ideas do most of the work.
Contrast against a uniform background. A standout is relative. Keep every other element identical — same surface, same size, same weight — so the isolated item has something plain to stand against. The uniformity of the field is doing as much work as the emphasis on the one item.
One or two signals, not five. You only need a single dimension of difference: color, or size, or weight. Reaching for all of them at once — bigger and bolder and a different color and a border and a glow — doesn't make the item stand out more; it just adds noise and starts to look like a separate component.
Don't over-isolate. If everything is emphasized, nothing is. Two "recommended" plans compete and cancel; a page where every card has an accent border reads as flat again. Spend the emphasis budget on the one item that genuinely deserves it, and pair that emphasis with meaning — the standout should be the thing you actually want chosen, not just the prettiest box.
Build it
A uniform list where one .is-featured item gets a single accent plus a text badge — so the emphasis is carried by more than color alone.
/* The uniform field: every chip identical so the standout has something plain
to differ against. */
.chip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.75rem 1rem;
border: 1px solid var(--border);
border-radius: 0.5rem;
background: var(--surface-muted);
color: var(--foreground);
font-weight: 400;
}
/* The one isolated item. A single signal — the accent surface. */
.chip.is-featured {
background: var(--accent);
color: var(--accent-foreground);
border-color: var(--accent);
}
/* The standout never relies on color alone: a text badge rides along so it
survives grayscale and color-blindness. Add <span class="chip__badge">Pick</span>
inside the featured chip's markup. */
.chip__badge {
flex-shrink: 0;
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
background: var(--accent-foreground);
color: var(--accent);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}Make it yours
Use the controls beside the demo above to change isolate by, isolated item, and extra emphasized items — each change updates the example live.
Experiment in the playground- Flip the signal between
color,size, andweight— each isolates the same chip a different way, and your eye finds it just as fast every time. - Set the signal to
noneand notice the grid go flat: with nothing differing, there's no standout to land on. That's a uniform field with no isolation. - Watch the "★ Pick" marker: it stays on the isolated chip under every signal, so the standout reads even if you imagine the page in grayscale.
Reproduce it with an LLM
Reproduce it with an LLM
You are a product designer who applies the Von Restorff (isolation) effect — the item that differs from its neighbors is the one people notice and remember. For a pricing page with three plans, design the visual treatment that makes the recommended plan stand out WITHOUT resorting to a dark pattern: choose one or two distinguishing signals (a badge, a subtle elevation, a single accent, more whitespace) and keep the rest uniform so the contrast reads. Explain why over-isolating (making everything shout) destroys the effect, and ensure the emphasis never depends on color alone (pair it with text/shape/position) so it survives color-blindness and grayscale. Return the treatment spec plus the accessibility notes.
Pitfalls & accessibility
- Resist over-isolating. The instant you emphasize a second item the same way, you've rebuilt a uniform field and lost the standout for both — keep the budget at one.