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. WCAG 2.2: https://www.w3.org/TR/WCAG22/ WCAG Contrast Minimum: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html WCAG Non-text Contrast: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html Apple HIG Accessibility: https://developer.apple.com/design/human-interface-guidelines/accessibility Carbon Accessibility Overview: https://carbondesignsystem.com/guidelines/accessibility/overview/
Agent Directive
Communicate state with color plus icon/text and placement; separate destructive actions from ordinary actions and use consistent status labels.