Semantic color tokens provide theme-aware design tokens that automatically adapt to both light and dark mode. These tokens use meaningful names like text-default or bg-surface-default instead of specific color values and should be used in most situations.
Text colors are all designed with a contrast ratio of at least 4.5:1 (AA) against common backgrounds like bg-surface-default or bg-surface-dim.
Status text colors are paired with matching status surfaces:
text-info, text-success, text-warning, and text-error are default status text colors for descriptions and secondary copy.
Use the matching -strong token for titles, emphasized text, and badges on status surfaces.
text-primary, text-on-*, and bg-surface-primary are deprecated in the Product Color Refresh table; use text-info, text-*-strong, and bg-surface-info for new status UI.
Name
Used for
Example
.text-default
Primary text color
The quick brown fox
.text-dim
Secondary text color
The quick brown fox
.text-placeholder
Input placeholder text
The quick brown fox
.text-primary
Brand-colored text
Deprecated - use .text-info
The quick brown fox
.text-info
Default info text; descriptions
The quick brown fox
.text-info-strong
Info emphasis; titles when paired with descriptions
The quick brown fox
.text-success
Success state text
The quick brown fox
.text-success-strong
Success emphasis; titles when paired with descriptions
The quick brown fox
.text-warning
Warning state text
The quick brown fox
.text-warning-strong
Warning emphasis; titles when paired with descriptions
The quick brown fox
.text-error
Error state text
The quick brown fox
.text-error-strong
Error emphasis; titles when paired with descriptions
Most interactive elements use border-default. In cases where a border is less important, such as dividing lines in a table, border-dim can be used instead. Use border-emphasis for stronger neutral borders, like hover states or active surfaces.
Name
Used for
Example
.border-default
Most borders: inputs, buttons, etc.
.border-dim
Subtler borders: separators, table rows, etc.
.border-emphasis
Emphasized neutral borders: hover states, active surfaces, etc.
.border-error
Error states
.border-focus
Focus states
.border-info
Info states: info banners, informational links, etc.
Surface elements are the background of the application. These colors are low-contrast and intended to group elements together into sections without attracting too much attention.
Element backgrounds are higher-contrast to draw the user's attention to specific actions or events. They are used for things like primary buttons, progress bars, switches, and other interactive or important UI.
Scrims appear inbetween any overlays and the rest of the application. They obscure the content behind it in order to draw the user's focus to an overlay.
Overlays are the top layer. The overlay background is a ligher shade than the default app background, and is used for dialogs, popovers, tooltips, and other floating UI. It is usually paired with a drop shadow.
Accent tokens are a single, unified family that serves two jobs: the categorical data-visualization series and branded-component accents (avatars, pins, click targets, page backgrounds). Like the semantic tokens above, they are theme-aware and adapt to light and dark mode automatically.
accent-1 through accent-5 are an ordered series — reach for them by position (series index), not by hue. The hue names below are only there to orient you; picking accent-2 because you want "orange" couples your UI to the current palette and will drift if the palette is refreshed. accent-neutral is the muted "no category" slot.
Each token resolves as text-, bg-, border-, and fill- utilities (use fill-accent-* for SVG data-viz).
Any colors in the palette can be used by applying the appropriate Tailwind CSS class to your element. Use the bg- prefix for background colors and text- prefix for text colors.
