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