Colors

Colors have been developed to help guide a user through our interface.

Brand Colors

Blue: used for primary actions and is our main brand color.
Midnight: used for body copy and background colors.

$brand-blue;
$brand-midnight;

Interface Colors

We use a variety of tints based on our two brand colors.

$interface-blue;
$interface-blue–light;
$interface-blue–x-light;

$interface-midnight;
$interface-midnight--light;
$interface-midnight--x-light;
$interface-midnight--xx-light;
$interface-midnight--dark;

$interface-white;
$interface-black;

Do

Use $interface-blue for primary actions and header treatment
Use $interface-midnight for text color and background colors
Ensure text is legible on Interface colors (e.g. use $interface-white text on $interface-blue)

Don't

Use $interface-midnight--xx-light for text (it doesn’t meet our minimum contrast ratio of 4.5)

Interface State Colors

We use these colors to communicate different states.

$interface-success;
$interface-success–light;
$interface-success–x-light;
$interface-success–dark;

$interface-highlight;
$interface-highlight--light;
$interface-highlight--x-light;

$interface-error;
$interface-error--light;
$interface-error--x-light;

Do

Rely on colors for impact and focus

Don't

Use error styles on non-blocking actions

Interface Importance Colors

⚠️ Work In Progress These colors map to our brand-colors and are used to communicate importance.

$interface-primary;
$interface-secondary;
$interface-tertiary;
$interface-tertiary--x-light;

Accessibility

Needs to have a minimum contrast ratio of 4.5