In this article
Two elements that look alike are perceived as one family, therefore as having the same function. This is the law of similarity, the other pillar of perception.
Also from Gestalt, it complements proximity: where distance groups by position, similarity groups by appearance. Same color, same shape, same size, and the eye infers the same role.
The principle
In a grid of identical elements, coloring some of them differently instantly creates two categories. The brain links what looks alike and separates what differs, with no conscious effort.
What it implies in design
- Same style, same function. All links look alike, all primary buttons look alike: the user learns once, understands everywhere.
- Consistency becomes a language. One action color, one card shape, one icon style: reusable landmarks.
- Similarity creates families. It lets you group visually without placing items physically close.
If two elements look alike, the user expects them to do the same thing. Keep that promise.
The common mistake
Inconsistent styles break the promise: if two buttons look alike but do different things, or if a piece of text looks like a link without being one, the user hesitates and errs. Resemblance is a contract.
In practice
Similarity is the foundation of any design system: reusable components, named styles, clear rules. It is exactly what a brand identity documents so everything stays consistent, even when produced by other hands or by AI.
Frequently asked questions
-
What is the difference between proximity and similarity?
- Proximity groups by distance (what is near), similarity groups by appearance (what looks alike). The two can complement or contradict each other.
-
Why should all my buttons look alike?
- Because resemblance signals a shared function. A single button style for the primary action spares the user from relearning on every screen.
-
Can similarity backfire?
- Yes, if non-clickable elements look like clickable ones. Resemblance must always reflect a genuine kinship of function.