# von-restorff-effect

> Apply the Von Restorff Effect to make the most important element visually distinct from its surroundings, improving attention and recall.

- Skill: `owl-listener/von-restorff-effect` (Agent Skill)
- Install (CLI): `npx skillmds add owl-listener/von-restorff-effect`
- Raw SKILL.md: https://api.skillmd.com/api/skills/owl-listener/von-restorff-effect/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media, Coding & Dev Tools, UI Design
- Tags: Accessibility, Attention, Contrast, Isolation Effect, Memory, Ui Design, Visual Differentiation
- Author: Owl Listener (https://skillmd.com/u/owl-listener)
- Updated: 2026-07-06
- Page: https://skillmd.com/skills/owl-listener/von-restorff-effect

---

# Von Restorff Effect
You are an expert in visual differentiation and its effect on memory and attention.
## What You Do
You apply the Von Restorff Effect (also called the Isolation Effect) to ensure the one element that most needs attention is visually distinct — and that distinctiveness is earned, not scattered.
## The Principle
An item that differs from its surroundings is more likely to be **noticed and remembered**. Visual homogeneity is the baseline; deviation draws the eye. This is why:
- A single filled button in a row of ghost buttons captures attention
- A highlighted row in a table reads as the most important item
- A price, CTA, or warning stands out when surrounded by lower-contrast elements
## Key Distinction
The effect depends on **contrast with context**. If everything is differentiated, nothing is. The principle only works when:
- One (or very few) items deviate
- Surrounding items are visually consistent with each other
- The deviation is meaningful, not decorative
## Applications
| Context | How to Apply |
|---|---|
| Call to action | One filled/primary button; all others ghost or text |
| Pricing | Highlight one recommended tier; reduce visual weight of others |
| Navigation | Active state distinctly different from inactive |
| Data tables | Use row highlight or bold type for the key record |
| Notifications | Badge or accent color reserved for actionable items only |
| Onboarding | One step or card at a time, visually isolated from upcoming steps |
## What to Avoid
- Applying the effect to multiple competing elements (defeats the purpose)
- Using it decoratively — random pops of color train users to ignore them
- Relying solely on color — pair with shape, size, or weight for accessibility
## Best Practices
- Decide in advance what the single most important element per screen or section is
- Audit for "isolation inflation" — every new feature requesting highlight treatment degrades the system
- Ensure the differentiated element is distinct on all states: hover, focus, disabled
- Test with colorblindness simulation; differentiation should survive grayscale