Hey there! This is the Uniform version 3 documentation site. If you’re looking for version 4, go here instead.
Our token system makes it easy to apply the right hues to individual elements.
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| Color | RGBA / HEX | Variable |
|---|---|---|
| 255, 255, 255, 1.0 | $color-base-white | |
| 0, 0, 0, 1.0 | $color-base-black |
| 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 |
| 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 |
| Color | RGBA / HEX | Variable |
|---|---|---|
| 167, 174, 181, 0.60 | $color-le-divider |
| Color | RGBA / HEX | Variable |
|---|---|---|
| 122, 138, 153, 0.60 | $color-de-divider |
| 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 |
| 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 |
| 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 |