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.
| Name | Hex | Sass Variable | Swatch |
|---|---|---|---|
| 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