Perception & Gestalt
Law of Similarity
Elements that look visually similar are perceived as related or performing the same function, even when they aren't near each other.
Mechanism
Why it happens
Shared visual properties (colour, shape, size) are grouped by the visual system before any content is read.
Impact
Why it matters
- Visual language is a promise of behaviour; matching styles implies matching function
- Inconsistent styling for the same action forces people to re-learn it every time
- Reusing a style for two different meanings (e.g. destructive and routine) invites mistakes
Example
Without vs. with
"Delete workspace" and "Export data" both use the same solid red pill button.
Only genuinely destructive actions use the red destructive style; export uses the neutral secondary style.
Checklist
How to apply it
Style every instance of the same interactive pattern identically across the product
Never reuse a primary-action style for a purely decorative element
Differentiate elements that behave differently, even if they'd otherwise look alike
Keep colour meaning consistent everywhere, e.g. red only ever means destructive
Where it shows up