From harness-claude
Applies Gestalt similarity principle to group UI elements by color, size, shape, texture for visual categorization in status indicators, navigation, tables, and component libraries.
npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeThis skill uses the workspace's default tool permissions.
> Visual kinship — elements sharing color, size, shape, or texture are perceived as related, creating categories without explicit labels
Applies Gestalt proximity principle to group UI elements via spacing ratios (1:2+) and common regions. Useful for form fields, card layouts, navigation, dashboards, settings pages.
Provides practical UI design patterns and principles from Refactoring UI and Practical UI for layout, spacing, typography, color, hierarchy, and styling in web projects.
Guides visual hierarchy in UIs using size, weight, color, spacing, position, and density. Defines levels, patterns for heroes/cards/forms, and practices like squint test.
Share bugs, ideas, or general feedback.
Visual kinship — elements sharing color, size, shape, or texture are perceived as related, creating categories without explicit labels
Understand the law. The Gestalt principle of similarity states that elements sharing visual attributes — color, size, shape, texture, orientation, or typography — are perceived as belonging to the same category. Unlike proximity (which groups by distance), similarity groups by visual attribute regardless of position. A red dot in the top-left and a red dot in the bottom-right are perceived as "the same kind of thing" even though they are far apart.
Rank the similarity channels by perceptual strength. Not all visual attributes create equally strong similarity signals. Research from pre-attentive processing studies establishes a hierarchy:
| Channel | Strength | Example |
|---|---|---|
| Color | Highest | Red badges across a page instantly read as "alerts" |
| Size | High | 24px icons vs. 16px icons create two clear size-classes |
| Shape | Medium | Circular avatars vs. square thumbnails signal different types |
| Texture | Medium | Filled vs. outlined icons distinguish active from available |
| Orientation | Lower | Rotated elements stand out but rarely used for categorization |
Decision procedure: Use the strongest available channel that does not conflict with other design requirements. Color is the default choice for category signaling. Use shape when color is reserved for status. Use size when both color and shape are constrained.
Use color similarity to create implicit categories. Color is the fastest pre-attentive channel — the brain detects color differences in under 200ms, before conscious processing begins.
Worked example — GitHub status indicators:
Worked example — Vercel's monochrome design:
Use shape similarity to signal element type. Shape creates medium-strength grouping that persists across the page.
Worked example — Airbnb filter pills:
Worked example — Dashboard card grids:
Use size similarity to establish hierarchy classes. Elements of the same size are perceived as being at the same level of importance.
Worked example — Material Design type scale:
Decision procedure: Define 3-5 distinct size classes (not more). Assign each element to exactly one class. Never create a size that falls between two classes — a 22px element when you have 20px and 24px classes creates perceptual ambiguity.
Combine channels for redundant coding. The strongest category signals use two or more channels simultaneously:
Worked example — Slack message types:
Decision procedure: For critical categorizations (errors vs. warnings, active vs. inactive, user content vs. system content), always use at least two similarity channels. Never rely on color alone for semantic meaning — this is both a Gestalt principle and an accessibility requirement (WCAG 1.4.1).
Design systems rely on similarity to teach users the vocabulary of the interface. Every component type must have a consistent visual signature:
Buttons — Shopify Polaris defines three button variants:
All three share a consistent border-radius (4px) and font-size (14px), which signals "this is a button." The variations in fill, border, and color signal the button's importance tier. Users learn: "rounded rectangle with text = clickable action, green = primary, white = secondary, no border = tertiary."
Form inputs — Every text input across the application must share: height (40px), border style (1px solid #d1d5db), border-radius (6px), padding (8px 12px), font-size (14px). When one form input is 40px tall and another is 36px, users subconsciously perceive them as different kinds of elements — even if both are text inputs. This inconsistency erodes trust in the interface.
Intentionally breaking similarity makes an element stand out. This is the principle behind primary CTAs, error states, and badges:
Decision procedure for emphasis: Break exactly one similarity channel, keep all others consistent. Breaking two channels risks making the element look like a different component entirely rather than a highlighted version of the same component.
Similarity must be global, not local. If green means "success" in one part of the application and "active" in another, users must reconcile two meanings for the same visual signal. This creates cognitive overhead that accumulates across every screen.
GitHub's consistency model:
Decision procedure: Before assigning a color (or shape, or size) to a new element category, audit every existing use of that attribute. If green already means "success" in your system, do not use green for "active navigation item." Find another channel.
Color overload. Using more than 5-7 distinct colors for categorization. Human pre-attentive processing can distinguish roughly 6-8 colors reliably. Beyond that, categories blur — is that "coral" or "salmon"? Is that "teal" or "cyan"? Jira's label system suffers from this: with 10+ label colors, users cannot remember which color means what. Fix: limit to 5 functional colors (success, error, warning, info, neutral) plus brand colors.
Inconsistent visual signatures across contexts. Using rounded buttons on one page and square buttons on another. Using 14px body text in the app but 16px in the settings. Using filled icons in the sidebar but outlined icons in the toolbar. Each inconsistency forces the user to re-learn the interface vocabulary. Fix: audit component attributes across all surfaces and unify. Storybook or a design token system makes this mechanical.
Similarity without semantic meaning. Making elements look the same for aesthetic reasons when they are functionally different. If a "Delete" button and an "Export" button share identical visual treatment (same size, color, shape), their similarity signals "these do the same kind of thing" — which is dangerously wrong. Fix: destructive actions must visually differ from constructive actions on at least one channel (typically color: red for destructive).
Relying on a single weak channel. Using only orientation or only texture to categorize elements. These channels are too weak for reliable pre-attentive categorization. A user will not instantly perceive that "tilted icons are warnings" or that "dotted borders mean optional." Fix: use color or size as the primary channel, with weaker channels as reinforcement.
Vercel's Monochrome Similarity:
Material Design's Shape System:
Spotify's Card Consistency:
Apple's SF Symbols Consistency: