Color helps create consistent experiences across web properties. Various colors are available in two themes, light and dark. Each theme consists of red, neutral, text, link, and alert colors.
The choice of which theme to apply is based on content and user experience needs.
The light theme is the default theme. It’s designed for simplicity and accessibility while allowing UI elements to be distinguished from each other.
The dark theme applies dark surface colors to UI elements. It’s supplemental to the light theme, but can be used in tandem on the same page if necessary.
The primary brand color is red, it brings boldness and helps guide the eye or highlight important information.
To learn more about how the red color is used, visit the Brand standards page.
The design system features eight shades of gray plus white for background, text, or UI elements. Be mindful of accessibility when using shades on top of each other.
White with shadow
Text in the design system features two shades of grays in both themes, one color for primary text and one for secondary text.
To learn more about how to use text, visit the typography page.
Link styles in the design system features two shades of blue in each theme, one for default and focus states and one for hover and active states.
#0066CC (10% opacity)
#73BCF7 (20% opacity)
Alert colors have assigned meanings and are used to set expectations. Use alert colors as a clear and predictable way to communicate a situation or the result of an interaction.
To learn more about how to use alerts, visit the Alert component page.
Contrast is important when choosing colors for UI elements for visitors. Awareness of standards and best practices is the key to an accessible color palette.
We're committed to complying with the Web Content Accessibility Guidelines AA standard contrast ratios. We choose colors that support usability by ensuring sufficient color contrast between elements so that user’s with low vision can browse our web properties.
Text on backgrounds
Black text should be used on light backgrounds and vice versa. If a page features both light and dark theme layouts, UI elements and text should be placed on contrasting background colors.
Layouts with colored backgrounds or a photo change the rules regarding the placement of text, so use White or Black-900 for body copy applications.
Icons and symbols
Icons and other elements should be as visible as possible to indicate a function or communicate information. They require a contrast ratio of at least 3:1 per WCAG 2.1.