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.

Web
React Native
Android
Apple
Other

Use the values below.

Color
RGBA / HEX
Variable
0, 156, 227, 1.0$color-utility-action
0, 124, 181, 1.0$color-le-utility-action-text
77, 185, 235, 1.0$color-de-utility-action-text
77, 102, 128, 1.0$color-utility-information
230, 240, 250, 1.0$color-le-utility-information-bg
27, 46, 66, 1.0$color-de-utility-information-bg
77, 102, 128, 1.0$color-le-utility-information-text
125, 152, 179, 1.0$color-de-utility-information-text
120, 161, 0, 1.0$color-utility-confirmation
245, 252, 222, 1.0$color-le-utility-confirmation-bg
50, 66, 0, 1.0$color-de-utility-confirmation-bg
92, 124, 0, 1.0$color-le-utility-confirmation-text
169, 201, 77, 1.0$color-de-utility-confirmation-text
242, 182, 0, 1.0$color-utility-warning
255, 249, 230, 1.0$color-le-utility-warning-bg
89, 67, 0, 1.0$color-de-utility-warning-bg
145, 109, 0, 1.0$color-le-utility-warning-text
237, 197, 77, 1.0$color-de-utility-warning-text
232, 28, 0, 1.0$color-utility-critical
255, 239, 237, 1.0$color-le-utility-critical-bg
87, 9, 0, 1.0$color-de-utility-critical-bg
185, 24, 4, 1.0$color-le-utility-critical-text
255, 75, 51, 1.0$color-de-utility-critical-text