Skip to content
UX Atlas
Plate FND·005 · UI foundationGrid C2 · Rev. 2026-08-14

Similarity

Elements that look alike are assumed to behave alike, which makes visual language a promise.

UI foundationEstablished researchFoundational

Definition

A Gestalt grouping principle. Shared colour, shape, size or orientation causes elements to be perceived as a set, regardless of their spatial arrangement.

Established research. Originates in published research and has been replicated. The effect is real. Its size in your product still needs measuring.

On this plate
  1. 1Definition
  2. 2The promise you make by styling something
  3. 3Similarity rules worth writing down
  4. 4Keeping the promise that styling makes
  5. 5In practice
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Defining component variants in a design system.
  • Auditing a product for inconsistent treatments.
  • Designing lists and grids for scanning.
  • Two things that are not the same kind of thing have ended up styled alike.

Common mistakes

  • Non-interactive elements styled as interactive.
  • The same visual treatment used for different meanings.
  • Uniformity so complete that nothing can be emphasised.

The promise you make by styling something

If two elements share a treatment, users expect them to do the same kind of thing. Styling a non-interactive badge like a button is a broken promise, and users will click it. Styling two different kinds of action identically is the same error in reverse.

This is why a design system is a semantic system rather than a visual one. The value is not that things look consistent, it is that appearance predicts behaviour.

Similarity rules worth writing down

  • One appearance per meaning: all destructive actions look alike and nothing else does.
  • Interactive and static elements are visually distinguishable at rest, not only on hover.
  • Status colours map to one meaning each across the whole product.
  • Icon style is consistent in weight, corner treatment and optical size within a set.
  • Cards of the same type share structure, so their contents can be compared position by position.

Keeping the promise that styling makes

Do

  • Give one visual treatment to one meaning, and write that mapping down.
  • Make interactive things look different from static things, consistently.
  • Vary one property when two categories genuinely differ, rather than several.

Do not

  • Style a status badge like a button, which makes people click it.
  • Use the same card treatment for navigable items and inert summaries.
  • Introduce a new visual style for something that already has a meaning attached.

In practice

  1. i.

    Badges styled as buttons

    Component libraries

    A pill-shaped status label with a filled background gets clicked, repeatedly, in usability testing. The fix is visual differentiation, not a tooltip explaining that it is not clickable.

  2. ii.

    Consistent card structure

    Listings

    When every card puts price in the same position, scanning a grid is a single vertical sweep. When positions vary, each card has to be read individually.

  3. iii.

    The tag that looked clickable

    A false promise

    Rounded, filled, coloured, and inert. People clicked it repeatedly and reported the product as broken, which from the appearance was a reasonable conclusion.

Local chart

FND·005 · Region II · Grid C2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Badge and TagCMP·023 · APPLIED THROUGHCardCMP·022 · APPLIED THROUGHConsistency and StandardsHEUR·004 · PRINCIPLES BEHIND THISLaw of PrägnanzLAW·017 · PRINCIPLES BEHIND THISVon Restorff EffectLAW·009 · PRINCIPLES BEHIND THISAffordances and SignifiersPRIN·007 · PRINCIPLES BEHIND THISComponentTERM·037 · SHORT DEFINITIONGestalt PrinciplesTERM·056 · SHORT DEFINITIONComponent API DesignSYS·002 · RELATED CONCEPTDesign TokensSYS·001 · RELATED CONCEPTIconographyFND·050 · RELATED CONCEPTProximityFND·004 · RELATED CONCEPT

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  1. [1]

    Principles of Gestalt Psychology

    K. Koffka, Harcourt Brace, 1935

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

Navigation

Applied through

Where this shows up as a concrete interface decision.

Principles behind this

The reasoning this solution is an application of.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.