Color
Overview
Color helps create consistent experiences across web properties. Colors are available in two themes, light and dark.
Theme
The choice of which theme to apply is based on content and user experience needs.
Light theme
The light theme is the default theme. It is designed for simplicity and accessibility while allowing UI elements to be distinguished from each other.
Dark theme
The dark theme applies dark surface colors to UI elements. It can be used in tandem with the light theme or on its own.
Brand
The primary brand color is red, it brings boldness and helps guide the eye or highlight important information.
Red
#E00
Crimson
#D40000
Examples
Learn more
To learn more about how the red color is used, visit the Brand standards page.
Neutrals
In addition to white and black, each theme features various shades of gray. Be mindful of accessibility when using text or components on top of shades of gray.
Light theme
White (primary BG)
#FFF
Secondary BGs
#F0F0F0
Tertiary BGs
#F5F5F5
Secondary gray
#D2D2D2
Tertiary gray
#B8BBBE
Dark theme
Black (primary BG)
#151515
Secondary BGs
#212427
Tertiary BGs
#3C3F42
Secondary gray
#6A6E73
Tertiary gray
#8A8D90
Text
Each theme features two shades of gray for text, Primary and Secondary.
Light theme
Primary text
#151515
Secondary text
#6A6E73
Examples
Dark theme
Primary text
#FFF
Secondary text
#D2D2D2
Examples
Learn more
To learn more about how to use text, visit the typography page.
Links
Each theme features two shades of blue, one for Link and Focus states and one for Hover and Active states.
Light theme
Link/Focus
#06C
Focus background
#06C (10% opacity)
Hover/Active
#004080
Active background
#004080 (10% opacity)
Examples
Dark theme
Link/Focus
#73BCF7
Focus background
#73BCF7 (25% opacity)
Hover/Active
#BEE1F4
Active background
#BEE1F4 (25% opacity)
Examples
Alerts
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. Do not use alert colors for any other applications outside of the component.
Default
Background
#F2F9F9
Icon and top border
#009596
Text
#003737
Example
Info
Background
#E7F1F4
Icon and top border
#2B9AF3
Text
#002952
Example
Success
Background
#F3FAF2
Icon and top border
#3E8635
Text
#1E4F18
Example
Warning
Background
#FDF7E7
Icon and top border
#F0AB00
Text
#795600
Example
Danger
Background
#FAEAE8
Icon and top border
#C9190B
Title
#470000
Example
Learn more
To learn more about how to use alerts, visit the Alert component page.
Accessibility
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 are 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 visitors 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 themes, UI elements and text should be placed on contrasting background colors. Layouts with colored backgrounds or a photo changes the rules regarding the placement of text, so use white or black text 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 4.5:1 per WCAG 2.2.
Feedback
To give feedback about anything on this page, contact us.
Foundations
To learn how to use our other foundations in your designs, visit the foundations section.
