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