Skip to main content

Utility Colors

Component status:Ready
Utility colors are only to be used to indicate a status to the user, such as an Alert or the hover state of a visited inline link.
NameHexSass VariableSwatch
Info Light#c6e9f8$info-light
Info#41b6e6$info
Info-Dark#2E7FA1$info-dark
Success Light#dcf5d0$success-light
Success#80c75b$success
Success-Dark#55853D$success-dark
Warning Light#fff0cc$warning-light
Warning#ffb600$warning
Warning-Dark#E65F33$warning-dark
Error#ba0c2f$error
Focus#41b6e6$focus
Visited Light#e7cdf4$visited-light
Visited#660099$visited

Usage#

Dos#

  • Use a utility color when indicating a status to the user, as seen in Alerts

Don’ts#

  • Don’t use a utility color for a decorative purpose.

Accessibility#

  • Reference Primary Colors to see important notes about color contrast and use of color