Design Principle
Primary, background, border, text, status, and accent colors need stable responsibilities.
Principle
Primary, background, border, text, status, and accent colors need stable responsibilities.
Design action
Name palette tokens by role; control primary color area, combine neutrals with state colors, and avoid one-note palettes.
Examples
Positive example: Design systems, SaaS consoles, knowledge bases, and forms. Counterexample: Primary color also means link, success, selection, and danger.
Apply when
Design systems, SaaS consoles, knowledge bases, and forms. Light/dark or multi-theme support is needed.
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
Name palette tokens by role; control primary color area, combine neutrals with state colors, and avoid one-note palettes.