similarity-and-contrast

What problem does it solve?

It solves the problem of unclear visual hierarchy by distinguishing elements that must be perceived as different while keeping related items grouped.

Core Features & Use Cases

Deliberate contrast calibration: Uses contrast as similarity’s complement to separate roles, states, and emphasis levels without visual chaos. Hierarchy-first application: Applies contrast to primary vs. secondary actions, normal vs. exceptional states, foreground vs. background, and now vs. later flow steps. Anti-pattern avoidance: Prevents over-emphasis, inconsistent styling across screens, subtle differences that don’t communicate, and contradiction of importance.

Quick Start

Use similarity-and-contrast to redesign your UI emphasis so each level has a single clearly emphasized “one thing,” such as making your primary action unmistakable from secondary actions.