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. Apple HIG Layout: https://developer.apple.com/design/human-interface-guidelines/layout Material Design Layout: https://m3.material.io/foundations/layout/applying-layout NN/g Visual Design Principles: https://www.nngroup.com/articles/principles-visual-design/
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.