Color

Overview

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.


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’s designed for simplicity and accessibility while allowing UI elements to be distinguished from each other.

Light color theme

Dark theme

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.

Dark color theme

Brand

The primary brand color is red, it brings boldness and helps guide the eye or highlight important information.

Red

#E00

Crimson

#D40000

Examples

Light color theme heading
Light color theme calls to action
Dark color theme tabs
Dark color theme search

Learn more

To learn more about how the red color is used, visit the Brand standards page.


Neutrals

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

#FFF

White with shadow

#FFF

Black-100

#FAFAFA

Black-150

#F5F5F5

Black-200

#F0F0F0

Black-300

#D2D2D2

Black-400

#B8BBBE

Black-600

#6A6E73

Black-800

#3C3F42

Black-900

#151515


Text

Text in the design system features two shades of grays in both themes, one color for primary text and one for secondary text.

Light theme

Primary

#151515

Secondary

#6A6E73

Examples

Light theme text
Light theme text

Dark theme

Primary

#FFF

Secondary

#D2D2D2

Examples

Dark theme text
Dark text

Learn more

To learn more about how to use text, visit the typography page.


Links

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.

Light theme

Default/Focus

#0066CC

Hover/Active

#004080

Focus/Active background

#0066CC (10% opacity)

Examples

Light theme links
Light theme links

Dark theme

Default/Focus

#73BCF7

Hover/Active

#BEE1F4

Focus/Active background

#73BCF7 (20% opacity)

Examples

Dark theme links
Dark theme links CTAs

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.

Default

Background

#F2F9F9

Highlights

#009596

Text

#003737

Example

Default alert colors

Info

Background

#E7F1FA

Highlights

#2B9AF3

Text

#002952

Example

Info alert colors

Success

Background

#F3FAF2

Highlights

#3E8635

Text

#1E4F18

Example

Success alert colors

Warning

Background

#FDF7E7

Highlights

#F0AB00

Text

#795600

Example

Warning alert colors

Danger

Background

#FAEAE8

Highlights

#C9190B

Text

#7D1007

Example

Danger alert colors

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'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.

Feedback

To give feedback about this page, contact us.

Foundations

To learn more about color, grid, typography, etc., visit the Foundations section.