Colors
Color carries meaning. Across complex enterprise workflows, it drives how information is displayed, categorized, and prioritized, giving content perceptual weight that matches its actual importance. Used well, it tells the user where to look first.
Our workflows are data dense. Too much color creates noise, and noise buries the signal. Every application of color should sharpen meaning, reinforce impact, and speed up the decision at hand. If it does none of those things, remove it.
Global navigation
The persistent shell that frames every page and stays fixed as content changes. Distinct from the in-page sidebar, which is scoped to a single workflow.
Nav
--nav
Top navigation and app chrome bars.
Navigation
--color-global-navigation
Global navigation background.
Icon selected
--color-global-icon-selected
Selected nav icon.
Button
--color-global-button
Global nav action button.
Surface
Surface colors define page structure. Applied to backgrounds, container fills, and border rules to establish hierarchy and separation.
Page
--color-surface-page
Page background.
Rules & lines
--color-surface-rules
Dividers and rule lines.
Container borders
--color-surface-border
Default container border.
Container
--color-surface-container
Card and panel backgrounds.
Table row header
--color-surface-table-row
Table header row background.
Modal
--color-surface-modal
Modal and dialog backgrounds.
Tooltip
--color-surface-tooltip
Tooltip background.
Scrim overlay
--color-surface-scrim
Modal/drawer backdrop tint.
Text
Text colors apply to all typography, establishing reading hierarchy through contrast.
Primary
--color-text-primary
Default body text.
Secondary
--color-text-secondary
Secondary text.
Tertiary
--color-text-tertiary
Tertiary / low-emphasis text.
Primary button
--color-text-primary-button
Text on primary/destructive buttons.
Tooltip
--color-text-tooltip
Text on tooltip surfaces.
Disabled
--color-text-disabled
Disabled text.
Error
--color-text-error
Error text.
Warning
--color-text-warning
Warning text.
Positive
--color-text-positive
Positive/success text.
Interactive
Interactive colors signal that an element responds to input. Applied to buttons, links, and controls across all states.
Default
--color-interactive
Primary interactive color.
Primary hover
--color-interactive-primary-hover
Primary hover state.
Primary pressed
--color-interactive-primary-pressed
Primary pressed state.
Secondary hover
--color-interactive-secondary-hover
Secondary hover state.
Secondary pressed
--color-interactive-secondary-pressed
Secondary pressed state.
Selected background
--color-interactive-selected-bg
Selected row/item background.
Destructive
--color-interactive-destructive
Destructive action color.
Destructive hover
--color-interactive-destructive-hover
Destructive hover state.
Destructive pressed
--color-interactive-destructive-pressed
Destructive pressed state.
Semantic
Semantic colors carry fixed meaning. They communicate status and severity across the system.
Negative
--color-semantic-negative
Negative/error status.
Caution
--color-semantic-caution
Caution/warning status.
Positive
--color-semantic-positive
Positive/success status.
Informative
--color-semantic-informative
Informative status.
Neutral
--color-semantic-neutral
Neutral status.
Feedback backgrounds
Semantic low-emphasis background tints for banners, badges, and alerts.
Negative
--color-feedback-bg-negative
Negative feedback background.
Caution
--color-feedback-bg-caution
Caution feedback background.
Positive
--color-feedback-bg-positive
Positive feedback background.
Informative
--color-feedback-bg-informative
Informative feedback background.
Neutral
--color-feedback-bg-neutral
Neutral feedback background.
Alert severity
Severity scale for alerting and incident UIs.
Fatal
--color-alert-fatal
Fatal severity.
Critical
--color-alert-critical
Critical severity.
High
--color-alert-high
High severity.
Medium
--color-alert-medium
Medium severity.
Low
--color-alert-low
Low severity.
Info
--color-alert-info
Info severity.
Unknown
--color-alert-unknown
Unknown severity.
Code syntax
Syntax highlighting colors for inline and block code.
Variable
--color-code-variable
Variable tokens.
Event type
--color-code-event-type
Event type tokens.
Identifier
--color-code-identifier
Identifier tokens.
Operator
--color-code-operator
Operator tokens.
String
--color-code-string
String literal tokens.
Data visualization: charts & graphs
Non-series chart colors — the card, gridlines, titles, and axis.
Card background
--color-chart-card-bg
Chart card background.
Gridlines
--color-chart-gridlines
Chart gridlines.
Titles
--color-chart-titles
Chart titles.
Axis
--color-chart-axis
Chart axis labels.
Data visualization: categorical palette
14-step palette for distinguishing series/categories in data viz.
Cat 01
--color-cat-01
Category 01.
Cat 02
--color-cat-02
Category 02.
Cat 03
--color-cat-03
Category 03.
Cat 04
--color-cat-04
Category 04.
Cat 05
--color-cat-05
Category 05.
Cat 06
--color-cat-06
Category 06.
Cat 07
--color-cat-07
Category 07.
Cat 08
--color-cat-08
Category 08.
Cat 09
--color-cat-09
Category 09.
Cat 10
--color-cat-10
Category 10.
Cat 11
--color-cat-11
Category 11.
Cat 12
--color-cat-12
Category 12.
Cat 13
--color-cat-13
Category 13.
Cat 14
--color-cat-14
Category 14.
Data visualization: chart series
A 5-step categorical palette used by chart components directly.
Chart 1
--chart-1
Series 1.
Chart 2
--chart-2
Series 2.
Chart 3
--chart-3
Series 3.
Chart 4
--chart-4
Series 4.
Chart 5
--chart-5
Series 5.
Sidebar
Tokens scoped to sidebar navigation, like the one on this page.
Sidebar
--sidebar
Sidebar background.
Sidebar primary
--sidebar-primary
Active/selected sidebar item.
Sidebar accent
--sidebar-accent
Hovered sidebar item.
Sidebar border
--sidebar-border
Sidebar dividers.