law-of-similarity

Give elements that share a category the same visual attributes such as color, shape, size, or style. Users will perceive them as related even when they are not spatially adjacent, so keep the coding consistent across the entire interface.

Proximity groups elements by spatial closeness, while similarity groups them by shared visual attributes regardless of distance. When they conflict, similarity can override proximity, so a differently colored element reads as distinct even inside a tight group.

Colorblind users cannot distinguish groups encoded only through hue, so color-only similarity fails for a significant portion of users. Always use redundant coding such as shape plus color so the grouping survives monochrome rendering and color vision deficiency.

Similarity makes a design system feel coherent by keeping attributes like button shape, input height, and icon stroke weight uniform across components. Unintended differences, such as mismatched corner radii on the same button type, read as categorical differences and should be treated as bugs.

Use similarity when related elements must be distributed across a layout, such as status indicators or data series in separate charts. Use proximity when elements are naturally co-located, and combine both for the strongest grouping signal.