Design Principle
Visual similarity is interpreted as functional similarity, so mixed styling creates confusion.
Principle Visual similarity is interpreted as functional similarity, so mixed styling creates confusion.
Design action Define consistent variants for buttons, tags, cards, and inputs; same function uses the same style, while different risk or priority changes color, density, and copy.
Examples Positive example: Pages repeat buttons, filters, status chips, or list cards. Counterexample: The same color means primary action, link, and status.
Apply when Pages repeat buttons, filters, status chips, or list cards. The product is used repeatedly over time.
Source notes Source note: Synthesized from Apple HIG, Material Design, NN/g usability principles, and layout/hierarchy practices in mature design systems.
Agent Directive
Define consistent variants for buttons, tags, cards, and inputs; same function uses the same style, while different risk or priority changes color, density, and copy.