Guidelines

Utility

Design
Code

Assign deliberate meaning to an interface element.

It’s important to use each utility color only for its intended purpose to maintain the implied meaning.

Options

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.

Usage

Accessibility

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.

colors-utility-dont

Don'tuse full intensity for a background or text.

colors-utility-do

Douse utility colors as accents to draw attention to nearby text.

Values

ColorNameRGBA
Utility Action0, 156, 227, 1.0
LE Utility Action Text0, 124, 181, 1.0
DE Utility Action Text77, 185, 235, 1.0
Utility Information69, 82, 94, 1.0
LE Utility Information Text47, 56, 65, 1.0
DE Utility Information Text91, 108, 123, 1.0
Utility Confirmation120, 161, 0, 1.0
LE Utility Confirmation Text92, 124, 0, 1.0
DE Utility Confirmation Text169, 201, 77, 1.0
Utility Warning242, 182, 0, 1.0
LE Utility Warning Text166, 124, 4, 1.0
DE Utility Warning Text237, 197, 77, 1.0
Utility Critical232, 28, 0, 1.0
LE Utility Critical Text185, 24, 4, 1.0
DE Utility Critical Text255, 75, 51, 1.0