Enter fullscreen

Primary

Navy is our core brand color, Our navy’s should be used for headlines, buttons, accents, and backgrounds when deemed appropriate. Navy should account for 60% of all color usage on the site.

Secondary

These colors should be used primarily as background colors with the addition of a few accents (30% of all color usage). Please refer to the ‘Color Usage” page for how to use these colors.

Tertiary / Accent

These colors should only be used sparingly (10% of all color usage on site). Please refer to the ‘Color Usage” page for how to use these colors.

Text

Text colors should be used according to the specified usage on the “Color Usage” page. Text copy includes anything that is not labeled “headline”.

Utility

Utility colors should only be used in specific error states or on an as needed basis.

Color Usage

Here are some example components that use the established color scheme.

Light backgrounds

Light backgrounds should be the primary background across the site. The below colors associated with light backgrounds are the only colors to be used with them (also approved for white backgrounds). These colors have been tested and approved for accessibility.

Note: these buttons have yet to be updated to our new design system

Dark backgrounds

Dark backgrounds should be used sparingly across the site. The below colors associated with dark backgrounds are the only colors to be used with them. These colors have been tested and approved for accessibility.

Note: this button has yet to be updated to our new design system