Guidelines

Design
Code
keyboardshortcuts
d
Design
c
Code
,
Previous Section
.
Next Section
/
Toggle Preview Environment
[
Previous Platform
]
Next Platform
command +
Scroll to Top
command +
Scroll to Bottom

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 Information77, 102, 128, 1.0
LE Utility Information Bg230, 240, 250, 1.0
DE Utility Information Bg27, 46, 66, 1.0
LE Utility Information Text77, 102, 128, 1.0
DE Utility Information Text125, 152, 179, 1.0
Utility Confirmation120, 161, 0, 1.0
LE Utility Confirmation Bg245, 252, 222, 1.0
DE Utility Confirmation Bg50, 66, 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 Bg255, 249, 230, 1.0
DE Utility Warning Bg89, 67, 0, 1.0
LE Utility Warning Text145, 109, 0, 1.0
DE Utility Warning Text237, 197, 77, 1.0
Utility Critical232, 28, 0, 1.0
LE Utility Critical Bg255, 239, 237, 1.0
DE Utility Critical Bg87, 9, 0, 1.0
LE Utility Critical Text185, 24, 4, 1.0
DE Utility Critical Text255, 75, 51, 1.0