Design Principle
State colors are system feedback and should not be reused casually as decoration or brand emphasis.
Principle State colors are system feedback and should not be reused casually as decoration or brand emphasis.
Design action Communicate state with color plus icon/text and placement; separate destructive actions from ordinary actions and use consistent status labels.
Examples Positive example: Form validation, publishing states, workflow nodes, and notifications. Counterexample: Red means both brand and error.
Apply when Form validation, publishing states, workflow nodes, and notifications. Users need to judge risk and progress.
Source notes Source note: Synthesized from W3C WCAG 2.2, Apple Accessibility, IBM Carbon Accessibility, and accessibility practices in major design systems.
Agent Directive
Communicate state with color plus icon/text and placement; separate destructive actions from ordinary actions and use consistent status labels.