Colors

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

Branding

--brand-blue
--brand-midnight

App / Platform

--brand-ic
--brand-mi
--brand-pi

Primary Palette

--interface-primary
--interface-primary-light
--interface-primary-x-light

Secondary Palette

--interface-secondary
--interface-secondary-light
--interface-secondary-x-light
--interface-secondary-xx-light
--interface-secondary-dark

State: Success

--interface-success
--interface-success-light
--interface-success-x-light
--interface-success-dark

State: Highlight

--interface-highlight
--interface-highlight-light
--interface-highlight-x-light

State: Error / Dangerous

--interface-error
--interface-error-light
--interface-error-x-light

Utilities

--interface-white
--interface-black
--ghost-text-color
--text-color
--link-color

Do

  • Rely on colors for impact and focus
  • Use interface-primary for primary actions and header treatment
  • Use interface-secondary for text color and background colors
  • Ensure text is legible on Interface colors (e.g. use interface-white text on interface-primary)

Don't

  • Use error styles on non-blocking actions
  • Use interface-secondary-xx-light for text (it doesn’t meet our minimum contrast ratio of 4.5).

Accessibility

  • Needs to have a minimum contrast ratio of 4.5