Elements that look alike are perceived as related. The Law of Similarity, one of the core Gestalt principles developed in the early twentieth century, states that the visual system groups elements that share visual characteristics — colour, shape, size, texture, or orientation — into a common category, regardless of their physical position relative to each other. Similarity groupings can override proximity: a red dot far from another red dot will be perceived as more related than a blue dot right next to the first red dot, if colour is the dominant visual attribute.
The Psychology
The mechanism is pattern matching. The brain builds rapid associations between elements that share features, because in natural environments shared features tend to indicate shared category membership. This feature-matching happens in pre-attentive processing — the stage of visual perception that operates before conscious attention is directed to any element. This is why visual groupings by colour, shape, and size are immediate and effortless. Users do not decide that all the blue buttons are the same type — they just know it without thinking about it.
In Product Design
In product design, similarity is the foundation of visual consistency. All primary call-to-action buttons use the same colour, size, and style, so users immediately recognise any instance of that element as the same type of action. All destructive or warning actions use a consistent colour (typically red or amber) so the risk level is communicated at a glance. All navigation items use the same typographic treatment so users know which text is navigable. Icon families use consistent line weight, corner radius, and visual style so the entire set reads as a unified vocabulary. These consistency decisions are not aesthetic preferences — they are the mechanism by which the interface teaches its own grammar.
How to Apply It
The inverse is equally important: elements that are visually similar but functionally different create confusion. If disabled buttons look nearly identical to active buttons, users will attempt to interact with them and be puzzled when nothing happens. If informational text uses the same treatment as interactive links, users will not know which is clickable. If two sections of a dashboard use the same card style to represent fundamentally different types of data, users will import meaning from the similarity that does not hold. Every instance of visual similarity in an interface creates a claim about functional similarity that you must be prepared to honour.
Why It Matters
The design rule is to build a visual vocabulary early and defend it consistently. Establish the treatment for primary actions, secondary actions, destructive actions, disabled states, navigational elements, and data display — and apply them without variation. When a new element type needs to be introduced, design its visual treatment so that it is appropriately similar to related elements and appropriately different from unrelated ones. Check your designs for accidental similarities: elements that have converged in appearance through iteration but represent different things. Users will not notice the intention behind the similarity; they will only notice the similarity itself.
