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;
- Needs to have a minimum contrast ratio of 4.5