Color

Primary

Used in the logo, main header and navbar.

Secondary

Used to indicate actionable content (ie: links, buttons, tooltip hotspots).

Accent

Used sparingly for headers and to catch the user’s attention.

Neutrals

Used in UI elements, text, background, and boarder colors.

Note: The following variables are not officially defined yet but there is a need for a wider neutral pallet so these values are temporarily defined:

• $color-neutral-lighter
• $color-neutral-light
• $color-neutral-dark
• $color-neutral-darker

Status

Status colors should be used sparingly to assist communicating a message and should never be relied upon alone for accessibility reasons. Here are the defined meanings for our utility colors:

okay (used to be current, now deprecated) Used to communicate to the user success, good standing, and up-to-date/clean data.

cautionary (used to be historical, now deprecated) Used to alert the user that something is unusual, not quite right, or potentially out-of-date or inaccurate.

concerning (used to be projection, now deprecated) Used to alert the user that something is wrong, not right, or inaccurate.

change Used to highlight a change in data to the user.

CSS Utilities

Utility classes are available for the properties color, background-color, and border-color with values for all defined colors. Examples of these utilities include:

.u-color-primary-base
.u-background-color-neutral-lighter
.u-border-color-status-change

For example, if you wanted to apply $color-secondary-base to the color property of an element, you would use the class u-color-secondary-base. If you wanted to apply $color-status-current to the background-color property of an element, you would use the class u-background-color-status-current.