Hudl Uniform

/

Utility

Design

Code

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.

Don'tuse full intensity for a background or text.

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

Values

Color	Name	RGBA
	Utility Action	`0, 156, 227, 1.0`
	LE Utility Action Text	`0, 124, 181, 1.0`
	DE Utility Action Text	`77, 185, 235, 1.0`
	Utility Information	`77, 102, 128, 1.0`
	LE Utility Information Bg	`230, 240, 250, 1.0`
	DE Utility Information Bg	`27, 46, 66, 1.0`
	LE Utility Information Text	`77, 102, 128, 1.0`
	DE Utility Information Text	`125, 152, 179, 1.0`
	Utility Confirmation	`120, 161, 0, 1.0`
	LE Utility Confirmation Bg	`245, 252, 222, 1.0`
	DE Utility Confirmation Bg	`50, 66, 0, 1.0`
	LE Utility Confirmation Text	`92, 124, 0, 1.0`
	DE Utility Confirmation Text	`169, 201, 77, 1.0`
	Utility Warning	`242, 182, 0, 1.0`
	LE Utility Warning Bg	`255, 249, 230, 1.0`
	DE Utility Warning Bg	`89, 67, 0, 1.0`
	LE Utility Warning Text	`145, 109, 0, 1.0`
	DE Utility Warning Text	`237, 197, 77, 1.0`
	Utility Critical	`232, 28, 0, 1.0`
	LE Utility Critical Bg	`255, 239, 237, 1.0`
	DE Utility Critical Bg	`87, 9, 0, 1.0`
	LE Utility Critical Text	`185, 24, 4, 1.0`
	DE Utility Critical Text	`255, 75, 51, 1.0`