Colors

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

--brand-blue

--brand-midnight

--brand-ic

--brand-mi

--brand-pi

--interface-primary

--interface-primary-light

--interface-primary-x-light

--interface-secondary

--interface-secondary-light

--interface-secondary-x-light

--interface-secondary-xx-light

--interface-secondary-dark

--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

--interface-white

--interface-black

--ghost-text-color

--text-color

--link-color

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)

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).