Resources

Colors

Our token system makes it easy to apply the right hues to individual elements.

Web
React Native
Android
Apple
Other

Brand

Color
RGBA / HEX
Variable
255, 99, 0, 1.0$color-brand-orange
0, 156, 227, 1.0$color-brand-electric
35, 42, 49, 1.0$color-brand-ink
56, 67, 79, 1.0$color-brand-evening
78, 93, 108, 1.0$color-brand-slate

Component

Light Environment

Color
RGBA / HEX
Variable
255, 255, 255, 1.0$color-le-btn-standard-primary-label
0, 156, 227, 1.0$color-le-btn-standard-primary-bg
51, 175, 232, 1.0$color-le-btn-standard-primary-bg-hover
16, 143, 203, 1.0$color-le-btn-standard-primary-bg-active
255, 255, 255, 1.0$color-le-btn-standard-secondary-label
122, 138, 153, 1.0$color-le-btn-standard-secondary-bg
143, 161, 179, 1.0$color-le-btn-standard-secondary-bg-hover
102, 115, 128, 1.0$color-le-btn-standard-secondary-bg-active
19, 41, 63, 0.7$color-le-btn-standard-subtle-label
25, 77, 128, 0.08$color-le-btn-standard-subtle-bg
25, 77, 128, 0.05$color-le-btn-standard-subtle-bg-hover
25, 77, 128, 0.12$color-le-btn-standard-subtle-bg-active
255, 255, 255, 1.0$color-le-btn-standard-confirm-label
120, 161, 0, 1.0$color-le-btn-standard-confirm-bg
140, 186, 0, 1.0$color-le-btn-standard-confirm-bg-hover
101, 135, 0, 1.0$color-le-btn-standard-confirm-bg-active
255, 255, 255, 1.0$color-le-btn-standard-destroy-label
232, 28, 0, 1.0$color-le-btn-standard-destroy-bg
255, 75, 51, 1.0$color-le-btn-standard-destroy-bg-hover
217, 25, 0, 1.0$color-le-btn-standard-destroy-bg-active
180, 180, 180, 1.0$color-le-btn-standard-disabled-bg
250, 250, 250, 1.0$color-le-btn-standard-disabled-label
0, 156, 227, 1.0$color-le-btn-minimal-primary-label
51, 175, 232, 1.0$color-le-btn-minimal-primary-label-hover
16, 143, 203, 1.0$color-le-btn-minimal-primary-label-active
19, 41, 63, 0.9$color-le-btn-minimal-secondary-label
19, 41, 63, 0.65$color-le-btn-minimal-secondary-label-hover
19, 41, 63, 1.00$color-le-btn-minimal-secondary-label-active
19, 41, 63, 0.5$color-le-btn-minimal-subtle-label
19, 41, 63, 0.40$color-le-btn-minimal-subtle-label-hover
19, 41, 63, 0.65$color-le-btn-minimal-subtle-label-active
120, 161, 0, 1.0$color-le-btn-minimal-confirm-label
140, 186, 0, 1.0$color-le-btn-minimal-confirm-label-hover
101, 135, 0, 1.0$color-le-btn-minimal-confirm-label-active
232, 28, 0, 1.0$color-le-btn-minimal-destroy-label
255, 75, 51, 1.0$color-le-btn-minimal-destroy-label-hover
217, 25, 0, 1.0$color-le-btn-minimal-destroy-label-active
100, 100, 100, 1.0$color-le-btn-minimal-disabled-label
19, 41, 63, 0.4$color-le-btn-minimal-cancel-label
19, 41, 63, 0.3$color-le-btn-minimal-cancel-label-hover
19, 41, 63, 0.5$color-le-btn-minimal-cancel-label-active

Dark Environment

Color
RGBA / HEX
Variable
255, 255, 255, 1.0$color-de-btn-standard-primary-label
0, 156, 227, 1.0$color-de-btn-standard-primary-bg
51, 175, 232, 1.0$color-de-btn-standard-primary-bg-hover
16, 143, 203, 1.0$color-de-btn-standard-primary-bg-active
255, 255, 255, 1.0$color-de-btn-standard-secondary-label
91, 116, 140, 0.8$color-de-btn-standard-secondary-bg
108, 137, 166, 0.8$color-de-btn-standard-secondary-bg-hover
73, 94, 115, 0.8$color-de-btn-standard-secondary-bg-active
238, 247, 255, 0.9$color-de-btn-standard-subtle-label
85, 105, 125, 0.35$color-de-btn-standard-subtle-bg
85, 105, 125, 0.5$color-de-btn-standard-subtle-bg-hover
85, 105, 125, 0.2$color-de-btn-standard-subtle-bg-active
255, 255, 255, 1.0$color-de-btn-standard-confirm-label
120, 161, 0, 1.0$color-de-btn-standard-confirm-bg
140, 186, 0, 1.0$color-de-btn-standard-confirm-bg-hover
101, 135, 0, 1.0$color-de-btn-standard-confirm-bg-active
255, 255, 255, 1.0$color-de-btn-standard-destroy-label
232, 28, 0, 1.0$color-de-btn-standard-destroy-bg
255, 75, 51, 1.0$color-de-btn-standard-destroy-bg-hover
217, 25, 0, 1.0$color-de-btn-standard-destroy-bg-active
130, 130, 130, 1.0$color-de-btn-standard-disabled-bg
60, 60, 60, 1.0$color-de-btn-standard-disabled-label
0, 156, 227, 1.0$color-de-btn-minimal-primary-label
51, 175, 232, 1.0$color-de-btn-minimal-primary-label-hover
16, 143, 203, 1.0$color-de-btn-minimal-primary-label-active
230, 242, 255, 0.9$color-de-btn-minimal-secondary-label
230, 242, 255, 1.00$color-de-btn-minimal-secondary-label-hover
230, 242, 255, 0.65$color-de-btn-minimal-secondary-label-active
230, 242, 255, 0.5$color-de-btn-minimal-subtle-label
230, 242, 255, 0.65$color-de-btn-minimal-subtle-label-hover
230, 242, 255, 0.40$color-de-btn-minimal-subtle-label-active
120, 161, 0, 1.0$color-de-btn-minimal-confirm-label
140, 186, 0, 1.0$color-de-btn-minimal-confirm-label-hover
101, 135, 0, 1.0$color-de-btn-minimal-confirm-label-active
232, 28, 0, 1.0$color-de-btn-minimal-destroy-label
255, 75, 51, 1.0$color-de-btn-minimal-destroy-label-hover
217, 25, 0, 1.0$color-de-btn-minimal-destroy-label-active
200, 200, 200, 1.0$color-de-btn-minimal-disabled-label
230, 242, 255, 0.4$color-de-btn-minimal-cancel-label
230, 242, 255, 0.5$color-de-btn-minimal-cancel-label-hover
230, 242, 255, 0.3$color-de-btn-minimal-cancel-label-active
Color
RGBA / HEX
Variable
77, 102, 128, 1.0$color-interjection-default
77, 102, 128, 1.0$color-interjection-information
242, 182, 0, 1.0$color-interjection-warning
232, 28, 0, 1.0$color-interjection-critical
120, 161, 0, 1.0$color-interjection-confirmation
Color
RGBA / HEX
Variable
10, 31, 51, 0.6$color-bg-scrim
35, 42, 49, 1.0$color-bg-scrim-fallback

Light Environment

Color
RGBA / HEX
Variable
0, 156, 227, 1.0$color-le-selection-outline
0, 156, 227, 0.5$color-le-selection-outline-hover
230, 247, 255, 1.0$color-le-selection-bg
240, 250, 255, 1.0$color-le-selection-bg-hover
0, 156, 227, 1.0$color-le-selection-edge
127, 215, 255, 1.0$color-le-selection-edge-hover
19, 41, 63, 0.65$color-le-selectmark-unselected
0, 156, 227, 1.0$color-le-selectmark-unselected-hover
0, 156, 227, 1.0$color-le-selectmark-selected
19, 41, 63, 0.65$color-le-selectmark-selected-hover

Dark Environment

Color
RGBA / HEX
Variable
0, 156, 227, 1.0$color-de-selection-outline
0, 156, 227, 0.5$color-de-selection-outline-hover
0, 56, 82, 1.0$color-de-selection-bg
0, 44, 64, 1.0$color-de-selection-bg-hover
0, 156, 227, 1.0$color-de-selection-edge
0, 103, 150, 1.0$color-de-selection-edge-hover
230, 242, 255, 0.65$color-de-selectmark-unselected
0, 156, 227, 1.0$color-de-selectmark-unselected-hover
0, 156, 227, 1.0$color-de-selectmark-selected
230, 242, 255, 0.65$color-de-selectmark-selected-hover

Light Environment

Color
RGBA / HEX
Variable
0, 115, 168, 1.0$color-le-link-standard-article-text
0, 115, 168, 0.2$color-le-link-standard-article-underline
0, 156, 227, 1.0$color-le-link-standard-article-text-hover
0, 156, 227, 1.0$color-le-link-standard-article-underline-hover
0, 115, 168, 1.0$color-le-link-standard-article-text-active
0, 115, 168, 1.0$color-le-link-standard-article-underline-active
0, 115, 168, 1.0$color-le-link-standard-article-text-visited
119, 83, 166, 0.2$color-le-link-standard-article-underline-visited
19, 41, 63, 0.2$color-le-link-standard-default-underline
0, 156, 227, 1.0$color-le-link-standard-default-text-hover
0, 156, 227, 1.0$color-le-link-standard-default-underline-hover
0, 115, 168, 1.0$color-le-link-standard-default-text-active
0, 115, 168, 1.0$color-le-link-standard-default-underline-active
19, 41, 63, 0.2$color-le-link-standard-default-underline-visited
19, 41, 63, 0.2$color-le-link-standard-implied-underline-hover
19, 41, 63, 0.65$color-le-link-standard-implied-underline-active

Dark Environment

Color
RGBA / HEX
Variable
77, 185, 235, 1.0$color-de-link-standard-article-text
77, 185, 235, 0.4$color-de-link-standard-article-underline
117, 211, 255, 1.0$color-de-link-standard-article-text-hover
117, 211, 255, 1.0$color-de-link-standard-article-underline-hover
0, 115, 168, 1.0$color-de-link-standard-article-text-active
0, 115, 168, 1.0$color-de-link-standard-article-underline-active
77, 185, 235, 1.0$color-de-link-standard-article-text-visited
184, 166, 185, 0.4$color-de-link-standard-article-underline-visited
238, 247, 255, 0.4$color-de-link-standard-default-underline
117, 211, 227, 1.0$color-de-link-standard-default-text-hover
117, 211, 227, 1.0$color-de-link-standard-default-underline-hover
0, 115, 168, 1.0$color-de-link-standard-default-text-active
0, 115, 168, 1.0$color-de-link-standard-default-underline-active
238, 247, 255, 0.4$color-de-link-standard-default-underline-visited
238, 247, 255, 0.4$color-de-link-standard-implied-underline-hover
238, 247, 255, 0.85$color-de-link-standard-implied-underline-active

Content

Light Environment

Color
RGBA / HEX
Variable
19, 41, 63, 1.0$color-le-icon-contrast
19, 41, 63, 0.80$color-le-icon-default
19, 41, 63, 0.65$color-le-icon-subtle
19, 41, 63, 0.4$color-le-icon-nonessential

Dark Environment

Color
RGBA / HEX
Variable
230, 242, 255, 1.0$color-de-icon-contrast
230, 242, 255, 0.80$color-de-icon-default
230, 242, 255, 0.65$color-de-icon-subtle
230, 242, 255, 0.40$color-de-icon-nonessential

Light Environment

Color
RGBA / HEX
Variable
19, 41, 63, 1.0$color-le-text-contrast
19, 41, 63, 0.80$color-le-text-default
19, 41, 63, 0.65$color-le-text-subtle
19, 41, 63, 0.4$color-le-text-nonessential

Dark Environment

Color
RGBA / HEX
Variable
230, 242, 255, 1.0$color-de-text-contrast
230, 242, 255, 0.80$color-de-text-default
230, 242, 255, 0.65$color-de-text-subtle
230, 242, 255, 0.40$color-de-text-nonessential

Identity

Color
RGBA / HEX
Variable
121, 6, 34, 1.0$color-identity-maroon
208, 0, 0, 1.0$color-identity-scarlet
255, 30, 30, 1.0$color-identity-apple
255, 140, 0, 1.0$color-identity-orange
237, 180, 7, 1.0$color-identity-gold
255, 221, 0, 1.0$color-identity-yellow
36, 89, 0, 1.0$color-identity-forest
62, 150, 0, 1.0$color-identity-kelly
83, 188, 239, 1.0$color-identity-sky
8, 77, 163, 1.0$color-identity-royal
12, 57, 112, 1.0$color-identity-navy
98, 18, 150, 1.0$color-identity-purple
250, 250, 250, 1.0$color-identity-white
215, 217, 221, 1.0$color-identity-silver
100, 101, 102, 1.0$color-identity-grey
34, 34, 34, 1.0$color-identity-black
56, 67, 79, 1.0$color-identity-default

Tagging

Color
RGBA / HEX
Variable
255, 255, 255, 1.0$color-tagging-content-white
0, 0, 0, 1.0$color-tagging-content-black
252, 251, 252, 1.0$color-tagging-white
197, 197, 197, 1.0$color-tagging-white-shade
114, 116, 118, 1.0$color-tagging-grey
89, 90, 92, 1.0$color-tagging-grey-shade
60, 60, 60, 1.0$color-tagging-black
41, 41, 41, 1.0$color-tagging-black-shade
255, 221, 0, 1.0$color-tagging-yellow
227, 192, 0, 1.0$color-tagging-yellow-shade
255, 144, 0, 1.0$color-tagging-orange
219, 123, 0, 1.0$color-tagging-orange-shade
201, 26, 26, 1.0$color-tagging-red
160, 20, 20, 1.0$color-tagging-red-shade
85, 167, 52, 1.0$color-tagging-green
59, 131, 29, 1.0$color-tagging-green-shade
45, 131, 201, 1.0$color-tagging-blue
36, 104, 160, 1.0$color-tagging-blue-shade
98, 18, 150, 1.0$color-tagging-purple
72, 11, 111, 1.0$color-tagging-purple-shade

Themes

Color
RGBA / HEX
Variable
255, 255, 255, 1.0$color-base-white
0, 0, 0, 1.0$color-base-black

Light Environment

Color
RGBA / HEX
Variable
255, 255, 255, 1.0$color-le-bg-level0
237, 240, 242, 1.0$color-le-bg-level0-accent
249, 250, 251, 1.0$color-le-bg-level1
228, 231, 235, 1.0$color-le-bg-level1-accent
242, 245, 247, 1.0$color-le-bg-level2
220, 225, 230, 1.0$color-le-bg-level2-accent
235, 239, 242, 1.0$color-le-bg-level3
211, 216, 222, 1.0$color-le-bg-level3-accent

Dark Environment

Color
RGBA / HEX
Variable
16, 20, 23, 1.0$color-de-bg-level0
35, 42, 49, 1.0$color-de-bg-level0-accent
25, 31, 36, 1.0$color-de-bg-level1
44, 53, 62, 1.0$color-de-bg-level1-accent
35, 42, 49, 1.0$color-de-bg-level2
49, 59, 69, 1.0$color-de-bg-level2-accent
53, 63, 74, 1.0$color-de-bg-level3
69, 82, 94, 1.0$color-de-bg-level3-accent

Light Environment

Color
RGBA / HEX
Variable
167, 174, 181, 0.60$color-le-divider

Dark Environment

Color
RGBA / HEX
Variable
122, 138, 153, 0.60$color-de-divider

Utility

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

Light Environment

Color
RGBA / HEX
Variable
0, 156, 227, 1.0$color-le-utility-accent-action
77, 102, 128, 1.0$color-le-utility-accent-information
120, 161, 0, 1.0$color-le-utility-accent-confirmation
242, 182, 0, 1.0$color-le-utility-accent-warning
232, 28, 0, 1.0$color-le-utility-accent-critical

Dark Environment

Color
RGBA / HEX
Variable
0, 156, 227, 1.0$color-de-utility-accent-action
77, 102, 128, 1.0$color-de-utility-accent-information
120, 161, 0, 1.0$color-de-utility-accent-confirmation
242, 182, 0, 1.0$color-de-utility-accent-warning
232, 28, 0, 1.0$color-de-utility-accent-critical