Color Roles
The color system defines how colors are mapped to roles used by components and interface elements.
Regardless of the specific colors in a palette, the same role-based structure ensures consistent use of light and dark backgrounds, primary and secondary actions, and accessible contrast across the site.
Light and dark roles map palette colors to text, backgrounds, buttons, and accents so components apply color consistently.
How the color system works
Colors are applied through predefined roles rather than chosen directly.
Components reference these roles to determine which colors to use for text, backgrounds, buttons, and accents. This allows the system to apply color consistently while adapting to different contexts.
The underlying palette can vary, but the role mapping remains the same.
Color roles
Color roles describe how a color is used, not what the color is.
Common roles include text, backgrounds, buttons, and accents. Each role includes a small set of approved values designed to work together across components.
By using roles instead of individual color choices, the system maintains visual consistency and predictable behavior throughout the interface.
Light and dark mappings
Most color roles include both light and dark variants.
These mappings allow components to render correctly across different backgrounds without requiring custom color decisions.
This approach helps preserve hierarchy, readability, and contrast in a wide range of layouts and contexts.
Color combinations
The examples below show how color roles work together in practice.
Each combination uses the same role-based mapping, even though the specific colors may differ.
How this fits with other visual systems
The color system applies consistently across all site styles and typography options.
Changing a site style or typography option does not change how colors are assigned to components.
Accessibility
All color roles are designed to meet accessibility and contrast requirements.
For more detail, see the accessibility and graphic design standards.