Loading…
Loading…
Similar-looking elements are perceived as related.
stellae.design
Elements that look alike are perceived as having the same function or belonging to the same group. Consistent visual styling signals shared purpose, while visual differences signal distinct purposes.
Elements that share visual characteristics such as shape, size, color, or orientation are perceived as part of the same group or as having a related function. This Gestalt principle operates automatically and is one of the primary ways users build expectations about interactive behavior in an interface.
Change the similarity property to see grouping shift:
Columns 1-3 feel grouped (purple) vs columns 4-5 (blue) — despite equal spacing.
Consistent button styles by action type
Primary actions are all blue, destructive actions are all red — clear visual language
Inconsistent styling across similar elements
Same action type styled differently in different contexts, creating confusion
Similarity is the visual language through which interfaces communicate function. When all buttons look the same, users learn one interaction pattern and apply it everywhere. When links share a consistent style, users know what is clickable without checking each element individually. Breaking similarity — making functionally identical elements look different — forces users to relearn interaction patterns on every screen and destroys the transfer learning that makes interfaces feel intuitive.
A well-implemented design system defines primary buttons (filled, high contrast), secondary buttons (outlined), and tertiary buttons (text-only), each with a distinct but internally consistent visual style. Users learn these three categories once and can predict button behavior across the entire application. The consistency within each category and the clear differences between categories create an efficient visual vocabulary.
Project management tools use consistent color coding for task status: green for complete, yellow for in-progress, red for blocked, gray for not started. Because all items of the same status share the same color, users can scan a board of hundreds of tasks and instantly identify patterns and outliers. The similarity principle enables this at-a-glance comprehension at scale.
Some websites use blue underlined text for links in one section, bold uncolored text in another, and styled buttons in a third, all for the same type of navigation action. Users cannot build a reliable mental model of 'what a link looks like' because the visual pattern keeps changing. Each section requires re-learning what is clickable, which dramatically increases cognitive load and error rates.
In Spotify's Browse and Library views, all playlist cards share identical proportions, typography placement, and hover behavior. This visual similarity signals that every card works the same way: click to open, hover for preview. When Spotify introduces a different card shape or behavior (like a podcast episode card), the visual difference immediately signals a different interaction model.
• The most harmful misuse is applying the same visual style to elements with different behaviors — like making non-clickable headings look like links, or styling informational badges the same as action buttons. This trains users to expect interactions that do not exist and to ignore interactions that do. Another mistake is breaking similarity for purely decorative reasons, like giving each section of a page its own button style to add visual variety, which undermines the learned meaning of each visual pattern.
| Check | Good Pattern | How to Test |
|---|---|---|
| Functionally identical elements are visually identical | All instances of each component type (button, link, input, card) use the same styling across every screen and state | Screenshot every instance of a component type across the product and place them side by side — any visible differences that are not state-based (hover, active, disabled) need investigation |
| Visual differences signal functional differences | Elements that look different actually behave differently, and the visual difference is proportional to the behavioral difference | Click or interact with every distinct-looking element on a screen and verify that different-looking elements actually do different things |
| Interactive elements are visually distinct from non-interactive elements | Users can identify all clickable or tappable elements without hovering or guessing, based on visual similarity to known interactive patterns | Ask five users to circle everything they think is clickable on a screenshot — compare their circles to the actual interactive elements and investigate any mismatches |
| Design system enforces consistency programmatically | Component tokens, shared styles, and linting rules prevent ad-hoc styling that would break similarity patterns | Run a CSS audit to identify one-off styles, overrides, and inline styles that create visual inconsistencies between instances of the same component |
When you intentionally need to draw attention to a single element that differs from its peers — like a recommended pricing tier, a primary CTA among secondary actions, or a warning state — breaking similarity is the mechanism that creates emphasis. The break only works because the surrounding similarity establishes a baseline from which the exception stands out.
Was this article helpful?