Similarity

Definition

Similarity is the way our eyes bundle elements that look alike into a single group based on shared color, shape, size, or orientation. If proximity groups things by distance, similarity groups them by appearance. That's why items with the same color and form read as the same kind of thing even when they sit far apart on the screen. When list rows share the same icon, or items carry the same colored badge, similarity is what makes them feel like one set. Flip it around and give one element a deliberately different look, and it pops out of the group to signal that it plays a different role. So similarity lets you tune relationships purely through likeness and difference, without moving anything, and it becomes the foundation for the visual language of the whole interface.

Why does it matter?

Similarity is a powerful signal that hints at an element's role through its form alone. When every button that does the same job shares the same shape, users can guess they belong together without reading a single label. Make the important action look different from the secondary ones, and that difference itself becomes a hierarchy that tells people which action is primary. In other words, similarity both groups elements and separates them. An interface with a consistent visual language lets users apply a rule they learned once to every other screen, so the product feels predictable and there's far less to learn from scratch. That's why similarity underpins the sense of order and trust in a design, and its value only becomes clearer as a product grows and the screens multiply.

Common mistakes

• Giving buttons with the same role slightly different colors and sizes from one screen to the next. Those small inconsistencies pile up across pages, and users can no longer be sure the buttons really do the same thing, so they stop to check every time, which slows them down and wears them out.
• The opposite trap: making elements with completely different roles look identical. If the delete button and the save button share the same shape, similarity bundles the two functions into one kind and invites a dangerous mix-up that can lead to mistakes you can't undo.
• Scattering the same color across unrelated elements just for decoration. When the color matches, things look connected, so an unintended group forms and the meaning the screen is trying to convey gets muddied.

Practical tips

• Give the same kind the same style, and give different roles a noticeably different style. When you design likeness and difference on purpose, a single screen can express hierarchy and grouping at the same time.
• For repeating elements like buttons, badges, and cards, bundle the styles into tokens and reuse them. When a rule defined in one place spreads across every screen, similarity holds together on its own without much manual effort.
• Don't rely on color alone to tell kinds apart — pair it with a second cue like shape or an icon. That way similarity still comes through for users who see color differently, so accessibility improves, and the grouping holds up even in grayscale print or on a dim screen.

Related concepts