Visual Hierarchy & Perception
Law of Similarity
Similar elements are perceived as belonging together.
In practice
Takeaways
- 1
Consistent component styling signals equal behavior.
- 2
Use one badge style, one card style, one button hierarchy.
- 3
Change appearance only when function changes.
Origins
When elements share color, size, or shape, users assume they work the same way. Similarity creates predictable systems and lowers the cost of exploration.
Breaking similarity without reason creates doubt about what is clickable, editable, or informational.
Design Applications
- Standardize status chips across the product.
- Keep card layouts consistent within a page type.
- Use one destructive-action treatment everywhere.
Related Principles
View all ›
Visual Hierarchy & Perception
Law of Proximity
Near elements are perceived as related.
Learn more ›
Visual Hierarchy & Perception
Law of Common Region
Elements within a bounded area are perceived as a group.
Learn more ›
Visual Hierarchy & Perception
Von Restorff Effect
Distinct items among similar ones are remembered best.
Learn more ›Tools worth a look
Some links are affiliate links — see disclosure.
- 25% lifetime
Anara
AI research & writing for designers
Learn more (opens in new tab) - Free plan
Fillout
Beautiful forms, fast
Learn more (opens in new tab) - Free plan
Cal.com
Scheduling without the back-and-forth
Learn more (opens in new tab) - AI dictation
Wispr Flow
Write by voice, 3× faster
Learn more (opens in new tab)