Platform · Semantic color click any color to copy its name
The semantic layer is what product components actually reference. Every value here resolves from
the brand spine and flips with data-theme —
the same role, a different value on light and dark. Status, feedback, categorical, and chart
colors live here too.
Everyday roles
The dozen you reach for most — surfaces, text, borders, and status.
text-primary text-secondary text-link surface-page surface-raised surface-sunken border-subtle border-strong status-success-solid status-error-solid status-warning-solid status-info-solid
Theme in a product
These roles are what the product's components actually render — buttons, fields, the data grid, status. To see them applied and flipping with data-theme, browse the live components in Storybook ↗ , rather than a mock here that would drift from what ships.
Surfaces & grounds Expand · 35 surface-highlight surface-highlight-active surface-data-grid-header surface-data-grid-selected surface-data-grid-selected-hover surface-data-grid-hover surface-data-grid-default surface-data-grid-border surface-data-grid-border-strong surface-data-grid-stripe surface-data-grid-focused surface-data-grid-pinned surface-data-grid-disabled surface-raised-header surface-tab-active surface-row-hover surface-shadow-neutral surface-shadow-primary surface-tooltip surface-scrim surface-tab-secondary surface-snackbar-brand surface-black surface-search-input surface-nav-search-highlight surface-nav-search-input surface-nav-search-highlight-active surface-canvas surface-field surface-sunken-deep surface-scrim-soft surface-raised-frosted surface-knob surface-field-hover surface-field-disabled
Text Expand · 22 text-link-hover text-nav-search-highlight text-nav text-link-on-dark text-tab-disabled text-tab-inactive text-tab-active text-tooltip-muted text-tooltip text-input-placeholder text-input text-input-label text-input-helper text-code text-code-muted text-link-disabled text-link-on-brand text-error text-success text-warning text-legal text-on-primary
Action, border & state Expand · 25 border-overlay border-primary border-focus action-default action-navy action-tint action-border action-on-accent action-emphasis-hover action-danger-bg state-disabled-bg state-disabled-fg state-checked-fg state-loading-shimmer feedback-success-fg feedback-success-bg feedback-success-border feedback-warning-fg feedback-warning-bg feedback-warning-border feedback-error-fg feedback-error-bg feedback-error-border feedback-info-bg feedback-info-border
Status & feedback Expand · 36 status-active-fg status-active-solid status-active-bg status-active-tint status-active-border status-queued-fg status-queued-solid status-queued-bg status-queued-tint status-queued-border status-canceled-fg status-canceled-solid status-canceled-bg status-canceled-tint status-canceled-border status-success-border status-success-bg status-success-tint status-success-fg status-error-border status-error-bg status-error-tint status-error-fg status-warning-border status-warning-bg status-warning-tint status-warning-fg status-info-border status-info-fg status-info-bg status-info-tint status-neutral-border status-neutral-fg status-neutral-solid status-neutral-bg status-neutral-tint
Chart & categorical Expand · 45 categorical-magenta categorical-lilac categorical-periwinkle action-brand categorical-teal categorical-green categorical-lime categorical-gold categorical-tangerine categorical-orange categorical-coral categorical-default-bg categorical-default-fg categorical-green-bg categorical-green-border categorical-tangerine-bg categorical-tangerine-border categorical-berry-fg categorical-blue-fg categorical-blue-bg categorical-blue-border categorical-jade-fg boundary-coral boundary-orange boundary-tangerine boundary-gold boundary-green boundary-na boundary-periwinkle boundary-teal boundary-lilac boundary-magenta boundary-lime na series-red1 series-red2 tag-violet-border tag-violet-tint tag-violet-fg tag-magenta-tint tag-magenta-fg tag-magenta-border tag-teal-tint tag-teal-fg tag-teal-border
Icon Expand · 11 icon-border-hover icon-bg-pressed icon-inverse icon-hover icon-bg-hover icon-disabled icon-placeholder icon-pressed icon-utility icon-default icon-active