Skip to main content

Colors colors are designed to be clear and accessible. They are made up of Core Colors, Alert Colors, Theme Colors and Highlight Colors.

How it Works

The different color groups have different applications. The Core Color group is coded as actionable for clear navigability. The Focus Colors and Alert Colors are to get attention. The Theme Colors harmonize and unify the site experience.

How to Use

Each color group outlined on this page has a different usage as detailed below. 

Core Colors

Core Colors are used for consistency in body text and link colors. With consistent colors for buttons and calls-to-action, the user quickly learns what is actionable, making it easy to navigate the site.

Focus Colors

Alert Colors are intentionally loud, and therefore are to be used sparingly. Alert Colors can commonly be found in line strokes, where the content needs to be more pronounced than other content on the page.

Theme Colors

Theme Colors, paired in Bright and Dark shades, used in backgrounds and in line strokes, help define the tone of the site, giving it expression. See Theme Colors page for more on this subject.

Alert Colors

Highlight Colors are used in the background of Alert messages to convey the tone of a message. Since the background is a color field, it separates it from the white background of the page and other graphics.

Using Color with Headline Type

Color backgrounds can be used with White headlines in the following configurations. The ADA compliance guidelines dictate that the contrast ratio for headlines be at least 3:1.

Headline type with Bright colored background

Headline type with Dark colored background

All of the colors which are specified as Dark can be used as color backgrounds with white header type.

Using Color with Body Text

Color backgrounds can be used with White colored body text in the following configuration. The AA compliance guidelines dictate that the contrast ratio for normal text be at least 4.5:1.

Body text with Bright colored background

Body text with Dark colored background

Last Modified on Feb 25, 2021
Back to Top