IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

AccessibilityIconUiExpandCollapseDown
LayeringIconUiExpandCollapseDown
LayoutIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Utility

/

Design

Assign deliberate meaning to an interface element.

It's important to use each utility color only for its intended purpose, typically feedback, to maintain the implied meaning.

Options

We have five 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 for an element, pattern or component.

Don't use full intensity for a background or text.

Don'tuse full intensity for a background or text.

Do use utility colors as accents to draw attention to nearby text.

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

Values

ColorNameRGBA
Utility Action0, 156, 227, 1
Utility Information77, 102, 128, 1
Utility Confirmation120, 161, 0, 1
Utility Warning242, 182, 0, 1
Utility Critical232, 28, 0, 1