It’s important to use each utility color only for its intended purpose to maintain the implied meaning.
We have four utility colors to choose from, each with a very specific meaning and all distinct from one another.
Action: Reserved for the view’s primary action. There should rarely be more than one per interface.
Utility colors do not reliably pass accessibility standards. Limit their use to graphic flourishes unless explicitly outlined in docs for an element, pattern or component.
Don'tuse full intensity for a background or text.
Douse utility colors as accents to draw attention to nearby text.
|LE Utility Action Text|
|DE Utility Action Text|
|LE Utility Information Text|
|DE Utility Information Text|
|LE Utility Confirmation Text|
|DE Utility Confirmation Text|
|LE Utility Warning Text|
|DE Utility Warning Text|
|LE Utility Critical Text|
|DE Utility Critical Text|