Semantic
Purpose-driven tokens that adapt across themes. Prefer these over primitive values in product code.
Surface
--color-background-surface-inverse-default --color-background-surface-inverse-soft --color-background-surface-inverse-strong --color-background-surface-neutral-default --color-background-surface-neutral-soft --color-background-surface-neutral-strong --color-background-surface-scrim Brand surfaces
--color-background-surface-brand-primary-default --color-background-surface-brand-primary-soft --color-background-surface-brand-primary-strong --color-background-surface-brand-secondary-default --color-background-surface-brand-secondary-soft --color-background-surface-brand-secondary-strong Feedback surfaces
--color-background-surface-feedback-ai --color-background-surface-feedback-error --color-background-surface-feedback-information --color-background-surface-feedback-neutral --color-background-surface-feedback-notification --color-background-surface-feedback-success --color-background-surface-feedback-warning Action surfaces
--color-background-action-brand-primary --color-background-action-brand-secondary --color-background-action-inverse Action labels
--color-action-label-brand-primary --color-action-label-brand-primary-inverse --color-action-label-brand-secondary --color-action-label-brand-secondary-inverse --color-action-label-ghost --color-action-label-ghost-inverse --color-action-label-inverse Action links
--color-action-link-default-hover --color-action-link-default-rest --color-action-link-default-visited --color-action-link-inverse-hover --color-action-link-inverse-rest --color-action-link-inverse-visited Disabled
--color-action-disabled-background --color-action-disabled-border --color-action-disabled-inverse-background --color-action-disabled-inverse-border --color-action-disabled-inverse-label --color-action-disabled-label --color-global-disabled --color-global-disabled-base Ink (text)
--color-ink-body-brand --color-ink-body-default --color-ink-body-default-inverse --color-ink-body-subtle --color-ink-heading-brand-primary --color-ink-heading-brand-primary-strong --color-ink-heading-brand-secondary --color-ink-heading-brand-secondary-strong --color-ink-heading-default --color-ink-heading-default-inverse Ink on brand
--color-ink-brand-on-primary-default --color-ink-brand-on-primary-soft --color-ink-brand-on-primary-strong --color-ink-brand-on-secondary-default --color-ink-brand-on-secondary-soft --color-ink-brand-on-secondary-strong Feedback ink
--color-feedback-icon-inverse --color-ink-feedback-ai --color-ink-feedback-error --color-ink-feedback-information --color-ink-feedback-neutral --color-ink-feedback-notification --color-ink-feedback-success --color-ink-feedback-warning Border
--color-border-action-brand-secondary --color-border-action-brand-secondary-inverse --color-border-default --color-border-strong Overlays
--color-global-overlay-hover-brand-secondary --color-global-overlay-hover-dark --color-global-overlay-hover-darker --color-global-overlay-hover-darkest --color-global-overlay-hover-light --color-global-overlay-hover-lighter --color-global-overlay-hover-lightest --color-global-overlay-pressed-brand-secondary --color-global-overlay-pressed-dark --color-global-overlay-pressed-darker --color-global-overlay-pressed-darkest --color-global-overlay-pressed-light --color-global-overlay-pressed-lighter --color-global-overlay-pressed-lightest Focus & base
--color-black-500 --color-focus-ring --color-focus-ring-inverse --color-white-500 Component
Scoped to a single component's anatomy. Components consume these directly — reach for a semantic token instead when building something new.
Button
--color-button-accent-background-default --color-button-accent-background-hover --color-button-accent-background-pressed --color-button-accent-border-default --color-button-accent-inverse-background-default --color-button-accent-inverse-background-hover --color-button-accent-inverse-background-pressed --color-button-accent-inverse-border-default --color-button-accent-inverse-label-default --color-button-accent-inverse-label-hover --color-button-accent-label-default --color-button-accent-label-hover --color-button-disabled-background-default --color-button-disabled-border-default --color-button-disabled-inverse-background-default --color-button-disabled-inverse-border-default --color-button-disabled-inverse-label-default --color-button-disabled-label-default --color-button-primary-background-default --color-button-primary-background-hover --color-button-primary-background-pressed --color-button-primary-border-default --color-button-primary-inverse-background-default --color-button-primary-inverse-background-hover --color-button-primary-inverse-background-pressed --color-button-primary-inverse-border-default --color-button-primary-inverse-label-default --color-button-primary-inverse-label-hover --color-button-primary-label-default --color-button-primary-label-hover --color-button-secondary-background-default --color-button-secondary-background-hover --color-button-secondary-background-pressed --color-button-secondary-border-default --color-button-secondary-inverse-background-default --color-button-secondary-inverse-background-hover --color-button-secondary-inverse-background-pressed --color-button-secondary-inverse-border-default --color-button-secondary-inverse-label-default --color-button-secondary-inverse-label-hover --color-button-secondary-label-default --color-button-secondary-label-hover --color-button-tertiary-background-default --color-button-tertiary-background-hover --color-button-tertiary-background-pressed --color-button-tertiary-border-default --color-button-tertiary-inverse-background-default --color-button-tertiary-inverse-background-hover --color-button-tertiary-inverse-background-pressed --color-button-tertiary-inverse-border-default --color-button-tertiary-inverse-label-default --color-button-tertiary-inverse-label-hover --color-button-tertiary-label-default --color-button-tertiary-label-hover Input
--color-input-background-active --color-input-background-default --color-input-background-disabled --color-input-background-hover --color-input-border-active --color-input-border-default --color-input-border-disabled --color-input-border-hover --color-input-border-invalid --color-input-border-valid --color-input-icon-default --color-input-icon-disabled --color-input-icon-invalid --color-input-icon-valid --color-input-label-default --color-input-label-disabled --color-input-label-helper-invalid --color-input-label-inline --color-input-label-required --color-input-label-valid --color-input-text-default --color-input-text-disabled --color-input-text-placeholder --color-input-text-placeholder-disabled Control (checkbox / radio / switch)
--color-control-background-base --color-control-background-selected --color-control-background-unselected --color-control-border-selected --color-control-border-unselected --color-control-text-default Navigation
--color-navigation-background-base --color-navigation-background-selected --color-navigation-label-default --color-navigation-label-selected Loader
--color-loader-inner --color-loader-inner-inverse --color-loader-outer --color-loader-outer-inverse Rating
--color-rating-empty --color-rating-filled Illustration
--color-illustration-primary-brand-default --color-illustration-primary-brand-highlight --color-illustration-primary-brand-shadow --color-illustration-primary-inverse-default --color-illustration-primary-inverse-highlight --color-illustration-primary-inverse-shadow --color-illustration-primary-neutral-default --color-illustration-primary-neutral-highlight --color-illustration-primary-neutral-shadow --color-illustration-primary-strong-default --color-illustration-primary-strong-highlight --color-illustration-primary-strong-shadow --color-illustration-secondary-brand-default --color-illustration-secondary-brand-highlight --color-illustration-secondary-brand-shadow --color-illustration-secondary-inverse-default --color-illustration-secondary-inverse-highlight --color-illustration-secondary-inverse-shadow --color-illustration-secondary-neutral-default --color-illustration-secondary-neutral-highlight --color-illustration-secondary-neutral-shadow --color-illustration-secondary-strong-default --color-illustration-secondary-strong-highlight --color-illustration-secondary-strong-shadow Primitive ramps
Raw colour values. Reference these only when no semantic token exists for the use case.
Grey
--color-grey-0 --color-grey-50 --color-grey-100 --color-grey-150 --color-grey-200 --color-grey-250 --color-grey-300 --color-grey-400 --color-grey-500 --color-grey-600 --color-grey-650 --color-grey-700 --color-grey-800 --color-grey-900 --color-grey-950 --color-grey-1000 Neutral
--color-neutral-100 --color-neutral-200 --color-neutral-300 --color-neutral-400 --color-neutral-500 --color-neutral-600 --color-neutral-700 --color-neutral-800 --color-neutral-900 Red
--color-red-50 --color-red-100 --color-red-200 --color-red-300 --color-red-400 --color-red-500 --color-red-600 --color-red-700 --color-red-800 --color-red-900 --color-red-1000 Blue
--color-blue-0 --color-blue-50 --color-blue-100 --color-blue-200 --color-blue-300 --color-blue-400 --color-blue-500 --color-blue-600 --color-blue-700 --color-blue-800 --color-blue-900 --color-blue-1000 Green
--color-green-50 --color-green-100 --color-green-200 --color-green-300 --color-green-400 --color-green-500 --color-green-600 --color-green-700 --color-green-800 --color-green-900 --color-green-1000 Orange
--color-orange-50 --color-orange-100 --color-orange-200 --color-orange-300 --color-orange-400 --color-orange-500 --color-orange-600 --color-orange-700 --color-orange-800 --color-orange-900 --color-orange-1000 Crimson
--color-crimson-50 --color-crimson-100 --color-crimson-200 --color-crimson-300 --color-crimson-400 --color-crimson-500 --color-crimson-600 --color-crimson-700 --color-crimson-800 --color-crimson-900 --color-crimson-1000 Feedback ramps
--color-feedback-ai-200 --color-feedback-ai-400 --color-feedback-error-200 --color-feedback-error-400 --color-feedback-error-600 --color-feedback-information-200 --color-feedback-information-400 --color-feedback-information-600 --color-feedback-neutral-200 --color-feedback-neutral-400 --color-feedback-notification-200 --color-feedback-notification-400 --color-feedback-success-200 --color-feedback-success-400 --color-feedback-success-600 --color-feedback-warning-200 --color-feedback-warning-400 --color-feedback-warning-600 Opacity
--color-opacity-black-100 --color-opacity-black-150 --color-opacity-black-200 --color-opacity-black-300 --color-opacity-black-400 --color-opacity-black-50 --color-opacity-black-500 --color-opacity-black-600 --color-opacity-black-700 --color-opacity-black-800 --color-opacity-black-900 --color-opacity-blue-100 --color-opacity-blue-200 --color-opacity-blue-300 --color-opacity-blue-400 --color-opacity-blue-500 --color-opacity-blue-600 --color-opacity-blue-700 --color-opacity-blue-800 --color-opacity-blue-900 --color-opacity-white-100 --color-opacity-white-200 --color-opacity-white-300 --color-opacity-white-400 --color-opacity-white-50 --color-opacity-white-500 --color-opacity-white-600 --color-opacity-white-700 --color-opacity-white-800 --color-opacity-white-900