Resources

Colors

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

Web
React Native
Android
Apple
Other

Brand

ColorVariable
$color-brand-orange
$color-brand-electric
$color-brand-ink
$color-brand-evening
$color-brand-slate

Component

Light Environment

ColorVariable
$color-le-btn-standard-primary-label
$color-le-btn-standard-primary-bg
$color-le-btn-standard-primary-bg-hover
$color-le-btn-standard-primary-bg-active
$color-le-btn-standard-secondary-label
$color-le-btn-standard-secondary-bg
$color-le-btn-standard-secondary-bg-hover
$color-le-btn-standard-secondary-bg-active
$color-le-btn-standard-subtle-label
$color-le-btn-standard-subtle-bg
$color-le-btn-standard-subtle-bg-hover
$color-le-btn-standard-subtle-bg-active
$color-le-btn-standard-confirm-label
$color-le-btn-standard-confirm-bg
$color-le-btn-standard-confirm-bg-hover
$color-le-btn-standard-confirm-bg-active
$color-le-btn-standard-destroy-label
$color-le-btn-standard-destroy-bg
$color-le-btn-standard-destroy-bg-hover
$color-le-btn-standard-destroy-bg-active
$color-le-btn-standard-disabled-bg
$color-le-btn-standard-disabled-label
$color-le-btn-minimal-primary-label
$color-le-btn-minimal-primary-label-hover
$color-le-btn-minimal-primary-label-active
$color-le-btn-minimal-secondary-label
$color-le-btn-minimal-secondary-label-hover
$color-le-btn-minimal-secondary-label-active
$color-le-btn-minimal-subtle-label
$color-le-btn-minimal-subtle-label-hover
$color-le-btn-minimal-subtle-label-active
$color-le-btn-minimal-confirm-label
$color-le-btn-minimal-confirm-label-hover
$color-le-btn-minimal-confirm-label-active
$color-le-btn-minimal-destroy-label
$color-le-btn-minimal-destroy-label-hover
$color-le-btn-minimal-destroy-label-active
$color-le-btn-minimal-disabled-label
$color-le-btn-minimal-cancel-label
$color-le-btn-minimal-cancel-label-hover
$color-le-btn-minimal-cancel-label-active

Dark Environment

ColorVariable
$color-de-btn-standard-primary-label
$color-de-btn-standard-primary-bg
$color-de-btn-standard-primary-bg-hover
$color-de-btn-standard-primary-bg-active
$color-de-btn-standard-secondary-label
$color-de-btn-standard-secondary-bg
$color-de-btn-standard-secondary-bg-hover
$color-de-btn-standard-secondary-bg-active
$color-de-btn-standard-subtle-label
$color-de-btn-standard-subtle-bg
$color-de-btn-standard-subtle-bg-hover
$color-de-btn-standard-subtle-bg-active
$color-de-btn-standard-confirm-label
$color-de-btn-standard-confirm-bg
$color-de-btn-standard-confirm-bg-hover
$color-de-btn-standard-confirm-bg-active
$color-de-btn-standard-destroy-label
$color-de-btn-standard-destroy-bg
$color-de-btn-standard-destroy-bg-hover
$color-de-btn-standard-destroy-bg-active
$color-de-btn-standard-disabled-bg
$color-de-btn-standard-disabled-label
$color-de-btn-minimal-primary-label
$color-de-btn-minimal-primary-label-hover
$color-de-btn-minimal-primary-label-active
$color-de-btn-minimal-secondary-label
$color-de-btn-minimal-secondary-label-hover
$color-de-btn-minimal-secondary-label-active
$color-de-btn-minimal-subtle-label
$color-de-btn-minimal-subtle-label-hover
$color-de-btn-minimal-subtle-label-active
$color-de-btn-minimal-confirm-label
$color-de-btn-minimal-confirm-label-hover
$color-de-btn-minimal-confirm-label-active
$color-de-btn-minimal-destroy-label
$color-de-btn-minimal-destroy-label-hover
$color-de-btn-minimal-destroy-label-active
$color-de-btn-minimal-disabled-label
$color-de-btn-minimal-cancel-label
$color-de-btn-minimal-cancel-label-hover
$color-de-btn-minimal-cancel-label-active
ColorVariable
$color-interjection-default
$color-interjection-information
$color-interjection-warning
$color-interjection-critical
$color-interjection-confirmation
ColorVariable
$color-bg-scrim
$color-bg-scrim-fallback

Light Environment

ColorVariable
$color-le-selection-outline
$color-le-selection-outline-hover
$color-le-selection-bg
$color-le-selection-bg-hover
$color-le-selection-edge
$color-le-selection-edge-hover
$color-le-selectmark-unselected
$color-le-selectmark-unselected-hover
$color-le-selectmark-selected
$color-le-selectmark-selected-hover

Dark Environment

ColorVariable
$color-de-selection-outline
$color-de-selection-outline-hover
$color-de-selection-bg
$color-de-selection-bg-hover
$color-de-selection-edge
$color-de-selection-edge-hover
$color-de-selectmark-unselected
$color-de-selectmark-unselected-hover
$color-de-selectmark-selected
$color-de-selectmark-selected-hover

Light Environment

ColorVariable
$color-le-link-standard-article-text
$color-le-link-standard-article-underline
$color-le-link-standard-article-text-hover
$color-le-link-standard-article-underline-hover
$color-le-link-standard-article-text-active
$color-le-link-standard-article-underline-active
$color-le-link-standard-article-text-visited
$color-le-link-standard-article-underline-visited
$color-le-link-standard-default-underline
$color-le-link-standard-default-text-hover
$color-le-link-standard-default-underline-hover
$color-le-link-standard-default-text-active
$color-le-link-standard-default-underline-active
$color-le-link-standard-default-underline-visited
$color-le-link-standard-implied-underline-hover
$color-le-link-standard-implied-underline-active

Dark Environment

ColorVariable
$color-de-link-standard-article-text
$color-de-link-standard-article-underline
$color-de-link-standard-article-text-hover
$color-de-link-standard-article-underline-hover
$color-de-link-standard-article-text-active
$color-de-link-standard-article-underline-active
$color-de-link-standard-article-text-visited
$color-de-link-standard-article-underline-visited
$color-de-link-standard-default-underline
$color-de-link-standard-default-text-hover
$color-de-link-standard-default-underline-hover
$color-de-link-standard-default-text-active
$color-de-link-standard-default-underline-active
$color-de-link-standard-default-underline-visited
$color-de-link-standard-implied-underline-hover
$color-de-link-standard-implied-underline-active

Content

Light Environment

ColorVariable
$color-le-icon-contrast
$color-le-icon-default
$color-le-icon-subtle
$color-le-icon-nonessential

Dark Environment

ColorVariable
$color-de-icon-contrast
$color-de-icon-default
$color-de-icon-subtle
$color-de-icon-nonessential

Light Environment

ColorVariable
$color-le-text-contrast
$color-le-text-default
$color-le-text-subtle
$color-le-text-nonessential

Dark Environment

ColorVariable
$color-de-text-contrast
$color-de-text-default
$color-de-text-subtle
$color-de-text-nonessential

Identity

ColorVariable
$color-identity-maroon
$color-identity-scarlet
$color-identity-apple
$color-identity-orange
$color-identity-gold
$color-identity-yellow
$color-identity-forest
$color-identity-kelly
$color-identity-sky
$color-identity-royal
$color-identity-navy
$color-identity-purple
$color-identity-white
$color-identity-silver
$color-identity-grey
$color-identity-black
$color-identity-default

Tagging

ColorVariable
$color-tagging-content-white
$color-tagging-content-black
$color-tagging-white
$color-tagging-white-shade
$color-tagging-grey
$color-tagging-grey-shade
$color-tagging-black
$color-tagging-black-shade
$color-tagging-yellow
$color-tagging-yellow-shade
$color-tagging-orange
$color-tagging-orange-shade
$color-tagging-red
$color-tagging-red-shade
$color-tagging-green
$color-tagging-green-shade
$color-tagging-blue
$color-tagging-blue-shade
$color-tagging-purple
$color-tagging-purple-shade

Themes

ColorVariable
$color-base-white
$color-base-black

Light Environment

ColorVariable
$color-le-bg-level0
$color-le-bg-level0-accent
$color-le-bg-level1
$color-le-bg-level1-accent
$color-le-bg-level2
$color-le-bg-level2-accent
$color-le-bg-level3
$color-le-bg-level3-accent

Dark Environment

ColorVariable
$color-de-bg-level0
$color-de-bg-level0-accent
$color-de-bg-level1
$color-de-bg-level1-accent
$color-de-bg-level2
$color-de-bg-level2-accent
$color-de-bg-level3
$color-de-bg-level3-accent

Light Environment

ColorVariable
$color-le-divider

Dark Environment

ColorVariable
$color-de-divider

Utility

ColorVariable
$color-utility-action
$color-le-utility-action-text
$color-de-utility-action-text
$color-utility-information
$color-le-utility-information-bg
$color-de-utility-information-bg
$color-le-utility-information-text
$color-de-utility-information-text
$color-utility-confirmation
$color-le-utility-confirmation-bg
$color-de-utility-confirmation-bg
$color-le-utility-confirmation-text
$color-de-utility-confirmation-text
$color-utility-warning
$color-le-utility-warning-bg
$color-de-utility-warning-bg
$color-le-utility-warning-text
$color-de-utility-warning-text
$color-utility-critical
$color-le-utility-critical-bg
$color-de-utility-critical-bg
$color-le-utility-critical-text
$color-de-utility-critical-text

Light Environment

ColorVariable
$color-le-utility-accent-action
$color-le-utility-accent-information
$color-le-utility-accent-confirmation
$color-le-utility-accent-warning
$color-le-utility-accent-critical

Dark Environment

ColorVariable
$color-de-utility-accent-action
$color-de-utility-accent-information
$color-de-utility-accent-confirmation
$color-de-utility-accent-warning
$color-de-utility-accent-critical