law-of-similarity
Apply the Law of Similarity — shared colour, shape, or size signals that elements belong to one category. Use when signalling relationships across distance. For grouping by position, use `law-of-proximity`.
git clone --depth 1 https://github.com/Owl-Listener/designer-skills /tmp/law-of-similarity && cp -r /tmp/law-of-similarity/ui-design/skills/law-of-similarity ~/.claude/skills/law-of-similaritySKILL.md
# Law of Similarity You are an expert in Gestalt visual perception and systematic visual language design. ## What You Do You apply the Law of Similarity to use shared visual attributes — shape, color, size, and style — to signal that elements belong to the same category or group, and to maintain that coding consistently so the signal stays meaningful. ## The Principle Elements that share visual characteristics are perceived as related, even when they are not spatially adjacent. The mind groups by likeness automatically and without instruction. Similarity can be carried through: - **Color**: same fill signals same category, role, or state - **Shape**: icons all the same style (outline vs. filled vs. rounded) read as a set - **Size**: elements of equal size read as peers; size difference signals hierarchy - **Style**: same illustration weight, same type treatment, same corner radius, same stroke width ## Similarity vs. Proximity These are the two most fundamental Gestalt grouping principles. They interact and can conflict: | Situation | What happens | |---|---| | Elements close together, same color | Both reinforce — strongest grouping signal | | Elements far apart, same color | Similarity groups them despite the distance | | Elements close together, different colors | Proximity and similarity compete; the color pulls them into different sub-groups | | Elements close together, different styles | Proximity groups the set; style difference creates sub-groups within it | When they conflict, similarity can override proximity: a red element embedded in a group of blue elements reads as distinct even if it is spatially adjacent. Use this deliberately to signal category boundaries. ## Design Applications ### Interactive state signaling All interactive elements should share a visual property (color, underline treatment, cursor affordance) that non-interactive elements do not. This tells users what is actionable without requiring explicit instruction — the similarity set defines the interactive category. ### Category and role coding - Navigation items as a set: consistent type treatment across all items - Destructive actions: a distinctive color used only within that category — similarity within the set signals "these all carry the same risk" - Status indicators: consistent color-to-meaning mapping (green = success, amber = warning, red = error) applied uniformly When any element deviates from an established similarity set without purpose, users read the deviation as meaningful — as if the deviant element belongs to a different category. ### Design systems and component coherence Similarity is the mechanism that makes a design system feel like one thing rather than a collection of unrelated components: - Same button shape across all button variants - Same input height and border treatment across all form elements - Same icon stroke weight and style across all icons Unintended similarity breaks — two buttons with slightly different corner radii that are supposed to be the same type — read as categorical differences. Treat them as bugs. ### Data visualisation - Same color = same data series across all charts in a report - Same mark shape = same variable across chart types - Grouping by similarity (color, shape) before spatial proximity is standard in multi-series visualisations ## Common Mistakes - Breaking similarity unintentionally: slight visual inconsistencies in what should be a uniform set signal a difference the designer did not intend - Overusing a single attribute: coding too many distinct categories with the same color makes the attribute meaningless as a signal - Relying on color similarity alone: colorblind users cannot distinguish groups encoded only through hue — always use redundant coding ## Best Practices - Define a similarity vocabulary in design tokens: which visual attributes encode which relationship types - Treat unintended visual differences as bugs — if two elements should read as the same type, they must look identical - Use redundant coding (shape + color, not color alone) for critical category signals so the information survives colorblind viewing and monochrome rendering - Test similarity groupings without color: do elements still read as related from shape and size alone? - Review dense layouts for unintended sub-groupings created by similarity interacting with proximity
Facilitate a structured team critique — framing, feedback rules, and actionable outcomes. Use when running a session with people in the room. For a solo expert review, use `heuristic-evaluation` (prototyping-testing).
Inventory and prioritise accumulated design inconsistencies across a product. Use when drift has built up over time. For token coverage specifically use `design-token-audit` (designer-toolkit); for WCAG gaps use `accessibility-audit` (design-systems).
Communicate design's contribution to business and user outcomes in stakeholder language. Use when reporting results upward. For choosing the metrics in the first place, use `metrics-definition` (ux-strategy).
Build a QA checklist for verifying that a build matches the design. Use at implementation review. For the spec engineers build from, use `handoff-spec`.
Establish review gates — criteria, checkpoints, and approval flow. Use when work ships without consistent review. For running one individual session, use `design-critique`.
Plan and facilitate a design sprint from challenge framing through prototype testing. Use when compressing discovery into days. For ongoing team cadence, use `team-workflow`.
Write the implementation handoff — measurements, behaviours, assets, states, and edge cases. Use when engineering picks up the work. For verifying the result afterwards use `design-qa-checklist`; for reusable library components use `component-spec` (design-systems).
Design the team's operating rhythm — task management, collaboration rituals, and tooling. Use when the day-to-day cadence needs structure. For a time-boxed sprint, use `design-sprint-plan`.