Elements that share visual characteristics — colour, shape, size, texture — are automatically perceived as belonging to the same group, serving the same function, or carrying the same meaning.
The Law of Similarity is one of the core Gestalt principles. When two elements look alike — same colour, same shape, same size, same weight — the brain automatically groups them before any conscious interpretation occurs. They are perceived as related, as belonging to the same category, as doing the same thing. This grouping happens in under 200 milliseconds, long before a user reads a label or processes meaning.
The inverse is equally powerful: when two elements look different, the brain perceives them as different in kind, not just appearance. A button that looks different from every other button on the page will be perceived as serving a different function — more important, more dangerous, or categorically distinct. This is not an inference users make; it is a perceptual fact the visual system produces automatically.
For designers, the Law of Similarity is a tool for communicating relationships and distinctions without words. Visual similarity says “these belong together.” Visual difference says “this is different in kind.” Every design decision about colour, shape, size, and weight is either a deliberate use of this principle or an accidental one — and the accidents are usually the ones that produce confusion.
“Elements that share visual characteristics are perceived as more related than elements that do not share those characteristics.”
— Max Wertheimer, Gestalt Psychology, 1923
The delete confirmation dialog is the highest-stakes modal in most products. It asks users to choose between three meaningfully different actions: confirm a destructive operation, save their work instead, or cancel. These three actions are not equivalent. One is irreversible. One is the recommended safe path. One is an escape hatch. The visual treatment of the buttons must communicate these differences before users read a word.
When all three buttons share the same border style, the same size, the same grey colour, and the same weight, users must read all three labels to understand which is which. When visual similarity is applied correctly — destructive action in red, secondary action in a neutral border style, cancel as plain text — the hierarchy is communicated instantly.
Research on accidental destructive actions consistently shows that they occur most often when the destructive button looks identical to the safe alternatives. The similarity signal — “these are equivalent” — overrides the label, especially in high-stress moments where users are moving quickly. Visual differentiation is not aesthetic; it is a functional error-prevention mechanism.
Settings pages are one of the longest lists in any product. They typically contain items from multiple functional categories: account settings, notification preferences, privacy controls, billing, integrations, and account deletion. When all of these are presented as identical rows in a single list, the Law of Similarity groups them all together as equivalent. Users cannot perceive the categorical structure from the visual form.
Grouping related settings visually — using section headers, card borders, and colour-coded icons within each group — applies the Law of Similarity correctly: items that look similar are perceived as belonging together. Items in different groups look categorically distinct.
The danger zone group in the good example is differentiated by three simultaneous visual signals: a red section title, a red card border, and a red icon background. Any one of these would create some distinction. All three together make it categorically impossible to confuse “Delete account” with “Notifications.”
In a conversational interface, the most fundamental visual task is distinguishing who said what. The human message and the AI response need to be perceived as categorically different at a glance — before the user reads either one. When scanning back through a long exchange, users should be able to instantly locate their own messages and the AI's responses without reading.
When both sides share similar grey backgrounds and similar typography with only a slight colour difference, the Law of Similarity groups them together. When user messages are clearly distinguished by colour, alignment, and shape from AI responses, the two categories are perceptually immediate.
The good example uses four simultaneous similarity signals to distinguish the two groups: colour (blue vs white), alignment (right vs left), shape (rounded corners with different corner radii), and the presence of an avatar on one side. Any one of these would create some distinction. Together they make the two groups of messages look categorically different — which is what they are.
The Law of Similarity provides a simple audit question for any group of elements: do these look similar because they are functionally similar, or did they end up looking similar by accident? Every button that looks like every other button is claiming equivalence. Every settings row that looks like every other row is claiming equivalence. Every chat bubble that looks like the other kind is claiming equivalence. In each case, the visual claim may be false — and users will be confused by the contradiction between what they see and what they read.
Wertheimer, M. (1923). Laws of organization in perceptual forms. Psychologische Forschung, 4, 301–350. · Köhler, W. (1929). Gestalt psychology. Liveright. · Duncan, J. (1984). Selective attention and the organization of visual information. Journal of Experimental Psychology: General, 113(4), 501–517.