Color Tokens
Comprehensive guide to the color token system including palettes, shades, transparency values, and context-specific colors.
This documentation is a work in progress. Some information may be incomplete, outdated, or differ from the current product behavior.
Overview
Color tokens are predefined color values used throughout the design system to ensure consistency and accessibility. They represent colors for backgrounds, text, borders, icons, and other UI elements.
Architecture
Chassis Tokens uses a multi-layer token architecture where colors are defined in the Brand group and referenced by tokens in the Theme group. This separation allows independent switching between brands and color modes while maintaining consistency.
How it works:
Each color token in the Theme group references a corresponding base token in the Brand group. The specific base token referenced automatically changes based on the active theme mode:
- In light mode:
color.context.default.fg-subtle→color.base.context.light.fg-subtle - In dark mode:
color.context.default.fg-subtle→color.base.context.dark.fg-subtle
This means designers and developers work exclusively with Theme group tokens (like color.context.default.fg-subtle), and the system automatically resolves the appropriate values based on the selected brand and color mode.
Benefits:
- Switch brands without changing color mode preferences
- Switch color modes without affecting brand identity
- Single source of truth for each color across all variations
- Automatic updates when brand or theme values change
This documentation focuses on Theme group tokens—the colors actually used in UI design and development. For details on how Brand group tokens are structured and defined, see the Tokens Studio page.
Organization
Color tokens in the Theme group are organized into two primary categories:
Palette Colors: Foundation-level color definitions including nine predefined colors (primary, secondary, neutral, danger, success, warning, info, black, white). Each palette color includes a complete set of shades, transparency variations, and contrast colors.
Context Colors: Semantic colors assigned to specific UI purposes and component states. These reference palette colors and provide meaningful names for backgrounds, foregrounds, borders, and other visual properties.
This two-tier organization ensures both flexibility (through palette colors) and clarity (through context colors) when applying colors to UI elements.
Palette Colors
Nine colors are defined by default based on brand identity and UI context. Each color has a complete palette with shades, transparency variations, and contrast colors.
| Color Name | Purpose |
|---|---|
primary | Brand's main identity color. Used for primary actions, links, and brand presence. |
secondary | Brand's accent color. Used for secondary actions and supporting visual elements. |
neutral | Grayscale palette typically tinted with brand identity. Used for text, borders, and neutral UI elements. |
danger | Error and destructive actions. Used for delete buttons, error messages, and critical warnings. |
success | Positive feedback and completion states. Used for success messages, confirmations, and valid states. |
warning | Cautionary information. Used for warnings, potential issues, and actions requiring attention. |
info | Informational content. Used for tips, information messages, and neutral notifications. |
black | Pure black (#000000). Used for maximum contrast and accessibility needs. |
white | Pure white (#FFFFFF). Used for maximum contrast and light backgrounds. |
Key Colors
Key colors are the foundational colors in each palette, used to generate shades, transparency variations, and effects. Three key colors exist for each palette color:
| Token Name | Purpose |
|---|---|
color.palette.[color-name].base | The foundation color (50 shade) from which all other shades are generated. References the brand's defined color value. |
color.palette.[color-name].contrast | High-contrast companion color that ensures text and icons remain readable when placed on the base color. Meets WCAG AA accessibility standards. |
color.palette.[color-name].transparent | Fully transparent version (0% opacity) of the base color. Used as a starting point for gradient effects. |
Solid Colors
Each color has 11 shades ranging from 10 to 90, plus 05 (lightest) and 95 (darkest), for a total of 13 shades. These shades are automatically generated by the Tokens Studio color processor extension by mixing the base color with white (for lighter shades) or black (for darker shades). Each shade can be overridden manually if needed.
| Token Name | Default Generation Method |
|---|---|
color.palette.[color-name].05 | Lightest shade: Mix base color with 96% white (very subtle tint) |
color.palette.[color-name].10 | Very light: Mix base color with 85% white |
color.palette.[color-name].20 | Light: Mix base color with 70% white |
color.palette.[color-name].30 | Light-medium: Mix base color with 50% white |
color.palette.[color-name].40 | Medium-light: Mix base color with 25% white |
color.palette.[color-name].50 | Base: Pure brand color (no mixing) |
color.palette.[color-name].60 | Medium-dark: Mix base color with 30% black |
color.palette.[color-name].70 | Dark-medium: Mix base color with 50% black |
color.palette.[color-name].80 | Dark: Mix base color with 65% black |
color.palette.[color-name].90 | Very dark: Mix base color with 75% black |
color.palette.[color-name].95 | Darkest shade: Mix base color with 85% black (deep tone) |
It is possible to change the shade generation values for each shade or set direct values manually.
Black and White colors do not have shades since they are absolute colors.
Transparency Colors
Each color has 11 transparency variations based on its 50 shade, ranging from 05 (highest transparency) to 95 (lowest transparency). These are created by applying opacity tokens to the base color (50 shade). Transparency colors are useful for overlays, highlights, and layered visual effects.
| Token Name | Composition | Resulting Opacity |
|---|---|---|
color.palette.[color-name].t-5005 | Base color (50) with opacity.level.05 | ~5% visible (very transparent) |
color.palette.[color-name].t-5010 | Base color (50) with opacity.level.10 | ~10% visible |
color.palette.[color-name].t-5020 | Base color (50) with opacity.level.20 | ~20% visible |
color.palette.[color-name].t-5030 | Base color (50) with opacity.level.30 | ~30% visible |
color.palette.[color-name].t-5040 | Base color (50) with opacity.level.40 | ~40% visible |
color.palette.[color-name].t-5050 | Base color (50) with opacity.level.50 | 50% visible (half transparent) |
color.palette.[color-name].t-5060 | Base color (50) with opacity.level.60 | ~60% visible |
color.palette.[color-name].t-5070 | Base color (50) with opacity.level.70 | ~70% visible |
color.palette.[color-name].t-5080 | Base color (50) with opacity.level.80 | ~80% visible |
color.palette.[color-name].t-5090 | Base color (50) with opacity.level.90 | ~90% visible |
color.palette.[color-name].t-5095 | Base color (50) with opacity.level.95 | ~95% visible (nearly opaque) |
Transparency colors are named with their solid shade value. For example, color.palette.[color-name].t-5050 indicates 50% opacity applied to the 50 shade. Custom transparency values can be created by applying different opacity tokens to other solid shades.
For example, color.palette.[color-name].t-9550 would be created by applying opacity.level.50 to color.palette.[color-name].95.
Since black and white colors do not have shades, their transparency tokens are created by applying opacity tokens to their base color solid and named only with the transparency value like color.palette.black.t-50 or color.palette.white.t-50.
Context Colors
While palette colors provide foundational color definitions, context colors assign semantic meaning to colors for specific UI elements and states. Context colors ensure clarity and usability by connecting colors to their intended purpose.
Two special context colors exist in addition to the palette-based contexts: default and alternate.
- default: Used for standard page content (body background and text). Typically dark text on a light background in light mode, inverting in dark mode.
- alternate: Used for emphasized sections like sidebars, banners, or highlighted areas. May use colored backgrounds and typically maintains consistent appearance across color modes.
| Context Name | Purpose & Usage |
|---|---|
default | Standard page content and body background. Forms the base layer for most UI elements. |
alternate | Emphasized sections requiring visual distinction. Used for sidebars, callouts, hero sections, and featured content areas. |
primary | Brand-forward elements like primary buttons, key navigation items, and important call-to-action components. |
secondary | Supporting interactive elements like secondary buttons, tabs, and complementary actions. |
neutral | UI chrome, form inputs, cards, and elements that need to recede from primary content. |
danger | Destructive actions (delete, remove), error states, validation failures, and critical warnings. |
success | Positive feedback, successful operations, valid form states, and completion indicators. |
warning | Cautionary messages, potential issues, important notices requiring user attention. |
info | Helpful information, tips, educational content, and neutral status messages. |
black | Maximum contrast elements, pure black overlays, and accessibility-critical text. |
white | Pure white surfaces, contrast against dark backgrounds, and light mode foundations. |
Key Context Colors
Key context colors reference the foundational palette colors and serve as the basis for all other context color variations.
| Token Name | Reference & Purpose |
|---|---|
color.context.[color-name].base-color | References color.palette.[color-name].base. The primary solid color for this context. |
color.context.[color-name].contrast-color | References color.palette.[color-name].contrast. Ensures readable text/icons on base-color backgrounds. |
color.context.[color-name].transparent-color | References color.palette.[color-name].transparent. Foundation for creating gradient and overlay effects. |
Since default and alternate context colors do not have corresponding palette colors, their base colors usually references black or white (or shades of neutral) depending on the color mode.
Background Colors
Background colors are derived from palette shades and applied to surfaces within each context. Each context has 6 background color tokens designed for different levels of prominence and specific use cases.
| Token Name | Usage & Hierarchy |
|---|---|
color.context.[color-name].bg-main | Primary background surface for the context. The base layer on which other elements sit. |
color.context.[color-name].bg-even | Alternating background for striped patterns, table rows, or secondary surfaces within the context. |
color.context.[color-name].bg-evident | Emphasized background that stands out from bg-main. Used for cards, panels, or important content areas. |
color.context.[color-name].bg-solid | Full-strength color (typically base-color). Used for filled buttons and bold UI elements. Pairs with fg-solid. |
color.context.[color-name].bg-inverse | Inverted background that contrasts with the color mode (dark in light mode, light in dark mode). Pairs with fg-inverse. |
color.context.[color-name].bg-highlight | Background for active, selected, or focused states. Indicates current selection or interactive feedback. Pairs with fg-highlight. |
Chassis uses hierarchical names like as main, even, evident to indicate the relative prominence while avoiding confusion like color.context.primary.bg-secondary which may be misinterpreted as a color for secondary context.
Foreground Colors
Foreground colors are used for text and other elements that appear on top of backgrounds. Each context has 6 foreground color tokens with varying levels of emphasis.
| Token Name | Usage & Hierarchy |
|---|---|
color.context.[color-name].fg-main | Primary text and icon color. Highest contrast and prominence for body text and key content. |
color.context.[color-name].fg-subtle | Secondary text and icons with reduced prominence. Created by applying opacity.context.fg-subtle to fg-main. Used for supporting text, captions, and metadata. |
color.context.[color-name].fg-slight | Tertiary text with minimal prominence. Created by applying opacity.context.fg-slight to fg-main. Used for placeholder text, disabled labels, and subtle hints. |
color.context.[color-name].fg-solid | High-contrast text/icons on solid colored backgrounds (typically contrast-color). Ensures readability on bg-solid. |
color.context.[color-name].fg-inverse | Inverted foreground that contrasts with bg-inverse. Light text in light mode, dark text in dark mode. |
color.context.[color-name].fg-highlight | Text/icon color for active or selected states. Provides clear visual feedback for current selections. Pairs with bg-highlight. |
Chassis uses hierarchical names like as main, subtle, slight to indicate the relative prominence while avoiding confusion like color.context.primary.fg-secondary which may be misinterpreted as a color for secondary context.
fg-subtle and fg-slight are created by applying the corresponding opacity tokens to fg-main color to create hierarchy in text elements.
Border Colors
Border colors define the appearance of component boundaries, dividers, and separators within each context. Each context has 2 border tokens for different visual weights.
| Token Name | Usage & Appearance |
|---|---|
color.context.[color-name].border-main | Standard border for components, cards, inputs, and layout divisions. Provides clear visual separation. |
color.context.[color-name].border-subtle | Subtle separator with transparency. Used for lightweight dividers, table borders, and when minimal visual weight is needed. |
Icon Colors
Icon colors provide a consistent hierarchy for iconography within each context. Each context has 3 icon tokens matching the foreground color hierarchy.
| Token Name | Usage & Hierarchy |
|---|---|
color.context.[color-name].icon-main | Primary icons with full prominence. Used for navigation icons, action buttons, and primary visual indicators. |
color.context.[color-name].icon-subtle | Secondary icons with reduced emphasis. Created by applying opacity.context.icon-subtle to icon-main. Used for supporting actions and decorative icons. |
color.context.[color-name].icon-slight | Tertiary icons with minimal emphasis. Created by applying opacity.context.icon-slight to icon-main. Used for disabled states and background decorations. |
icon-subtle and icon-slight are created by applying the corresponding opacity tokens to icon-main color to create hierarchy in icon elements.
Indicator Colors
Indicator colors are used for status badges, notification dots, and presence indicators within each context. Each context has 2 indicator states.
| Token Name | Usage & State |
|---|---|
color.context.[color-name].indicator-main | Active or enabled indicator. Used for online status, unread badges, active states, and live notifications. |
color.context.[color-name].indicator-slight | Inactive or disabled indicator. Used for offline status, read notifications, and unavailable states. |
Dim Colors
Dim colors create overlay effects and backdrop layers within each context. Each context has 3 dim levels with varying opacity for different use cases.
| Token Name | Usage & Intensity |
|---|---|
color.context.[color-name].dim-main | Heavy dimming overlay. Used for modal backdrops, dialog overlays, and focus-locking effects that block page interaction. |
color.context.[color-name].dim-subtle | Medium dimming effect. Used for dropdown backgrounds, temporary overlays, and moderate attention-directing effects. |
color.context.[color-name].dim-slight | Light tinted background. Used for hover states, subtle distinction layers, and gentle color-flavored backgrounds. |
Link Colors
Link colors define hyperlink appearance across different interaction states within each context. Each context has 4 link state tokens.
| Token Name | State & Usage |
|---|---|
color.context.[color-name].link-main | Default link color before interaction. Used for unvisited links and standard hyperlink text. |
color.context.[color-name].link-hover | Link appearance when cursor hovers. Provides interactive feedback indicating the element is clickable. |
color.context.[color-name].link-active | Link color during click/press. Provides immediate feedback that the action has been registered. |
color.context.[color-name].link-visited | Color for previously visited links. Helps users track navigation history and distinguish visited from unvisited content. |
Interaction Colors
Interaction colors define the appearance of interactive components (buttons, inputs, controls) across all interaction states within each context. Each context has 4 states with both background and foreground variants.
| Token Name | State & Usage |
|---|---|
color.context.[color-name].bg-idle | Background for default/resting state. The initial appearance before any user interaction. |
color.context.[color-name].fg-idle | Foreground (text/icon) for default/resting state. Pairs with bg-idle for accessible contrast. |
color.context.[color-name].bg-hover | Background when cursor hovers over the element. Provides visual feedback that the element is interactive. |
color.context.[color-name].fg-hover | Foreground when cursor hovers. Maintains readable contrast on bg-hover background. |
color.context.[color-name].bg-press | Background during active press/click. Provides immediate tactile feedback that the action has been registered. |
color.context.[color-name].fg-press | Foreground during active press/click. Ensures text/icons remain readable on bg-press background. |
color.context.[color-name].bg-disabled | Background for disabled/unavailable state. Indicates the element cannot currently be interacted with. |
color.context.[color-name].fg-disabled | Foreground for disabled state. Reduced contrast and prominence to communicate unavailability. |
Shadow Colors
Shadow colors define the color used in shadow effects for each context. Each context has a single shadow color token that adapts automatically between light and dark modes.
| Token Name | Usage & Purpose |
|---|---|
color.shadow.default | Default shadow color for standard elevation effects. Used in shadow.elevation.default.* tokens. |
color.shadow.alternate | Alternative shadow color for emphasized surfaces. Used in shadow.elevation.alternate.* tokens. |
color.shadow.primary | Brand-colored shadow for primary elements. Used in shadow.elevation.primary.* tokens. |
color.shadow.secondary | Secondary brand shadow. Used in shadow.elevation.secondary.* tokens. |
color.shadow.neutral | Neutral shadow color. Used in shadow.elevation.neutral.* tokens. |
color.shadow.danger | Error/danger shadow. Used in shadow.elevation.danger.* tokens. |
color.shadow.success | Success/positive shadow. Used in shadow.elevation.success.* tokens. |
color.shadow.warning | Warning/caution shadow. Used in shadow.elevation.warning.* tokens. |
color.shadow.info | Informational shadow. Used in shadow.elevation.info.* tokens. |
Shadow colors automatically reference different values in light vs dark modes (e.g., color.base.shadow.light.default in light mode, color.base.shadow.dark.default in dark mode). This ensures shadows have appropriate opacity and tone for proper contrast—typically lighter with lower opacity in light mode, and darker or more saturated in dark mode to maintain perceived depth.
For more information on how shadow colors are used in elevation tokens, see Shadow Tokens.
Component Colors
Component colors are specialized color tokens tailored for specific UI components. These tokens reference context colors and provide dedicated color assignments for buttons, form inputs, badges, and other interactive elements.
Button Colors
Button components have granular color tokens for each variant and interaction state.
| Token Name | References | Applied To |
|---|---|---|
color.button.default.fg-idle | color.context.default.fg-idle | Default button text (idle) |
color.button.default.bg-idle | color.context.default.bg-idle | Default button background (idle) |
color.button.default.border-idle | color.context.default.border-main | Default button border (idle) |
color.button.default.fg-hover | color.context.default.fg-hover | Default button text (hover) |
color.button.default.bg-hover | color.context.default.bg-hover | Default button background (hover) |
color.button.default.fg-press | color.context.default.fg-press | Default button text (pressed) |
color.button.default.bg-press | color.context.default.bg-press | Default button background (pressed) |
color.button.default.fg-disabled | color.context.default.fg-disabled | Default button text (disabled) |
color.button.default.bg-disabled | color.context.default.bg-disabled | Default button background (disabled) |
Available button variants: default, primary, secondary, neutral, danger, success, warning, info
Each variant follows the same pattern with fg/bg/border colors for idle/hover/press/disabled states.
Form Input Colors
Form input components have color tokens for different validation states and interaction modes.
| Token Name | References | Applied To |
|---|---|---|
color.form-input.idle.bg-regular | color.context.default.bg-main | Input background (idle, regular style) |
color.form-input.idle.bg-floating | color.context.default.bg-even | Input background (idle, floating label) |
color.form-input.idle.border | color.context.default.border-main | Input border (idle) |
color.form-input.idle.fg-active | color.context.default.fg-main | Input text (when typing) |
color.form-input.idle.fg-inactive | color.context.default.fg-subtle | Input text (empty/placeholder) |
color.form-input.idle.caret | color.context.default.fg-main | Input cursor color |
color.form-input.idle.help | color.context.default.fg-main | Helper text |
color.form-input.focus.border | color.context.primary.icon-main | Input border (focused) |
color.form-input.focus.help | color.context.primary.icon-main | Helper text (focused) |
color.form-input.error.border | color.context.danger.base-color | Input border (validation error) |
color.form-input.error.help | color.context.danger.fg-main | Error message text |
color.form-input.success.border | color.context.success.base-color | Input border (validation success) |
color.form-input.success.help | color.context.success.fg-main | Success message text |
color.form-input.disabled.bg-regular | color.context.default.bg-disabled | Input background (disabled) |
color.form-input.disabled.border | color.context.default.fg-slight | Input border (disabled) |
Badge Colors
Badge tokens reference context solid backgrounds for prominent display.
| Token Name | References | Applied To |
|---|---|---|
color.badge.default.fg-main | color.context.default.fg-solid | Default badge text |
color.badge.default.bg-main | color.context.default.bg-solid | Default badge background |
color.badge.primary.fg-main | color.context.primary.fg-solid | Primary badge text |
color.badge.primary.bg-main | color.context.primary.bg-solid | Primary badge background |
color.badge.danger.fg-main | color.context.danger.fg-solid | Danger badge text |
color.badge.danger.bg-main | color.context.danger.bg-solid | Danger badge background |
Available badge variants: default, primary, secondary, neutral, danger, success, warning, info
Alert & Notification Colors
Alert components have color tokens for title, body, icon, and border.
| Token Name | References | Applied To |
|---|---|---|
color.alert.default.fg-title | color.context.default.fg-main | Alert title text |
color.alert.default.fg-body | color.context.default.fg-main | Alert body text |
color.alert.default.icon | color.context.default.icon-main | Alert icon |
color.alert.default.bg-main | color.context.default.bg-evident | Alert background |
color.alert.default.border-main | color.context.default.border-main | Alert border |
color.alert.danger.fg-title | color.context.danger.fg-main | Danger alert title |
color.alert.danger.icon | color.context.danger.icon-main | Danger alert icon |
color.alert.danger.bg-main | color.context.danger.bg-evident | Danger alert background |
Available alert variants: default, primary, secondary, neutral, danger, success, warning, info
Dropdown & Date Picker Colors
Dropdown menu items have colors for idle, hover, active, and disabled states.
| Token Name | References | Applied To |
|---|---|---|
color.dropdown.fg-idle | color.context.default.fg-main | Dropdown item text (idle) |
color.dropdown.bg-idle | color.context.default.transparent-color | Dropdown item background (idle) |
color.dropdown.icon-idle | color.context.default.icon-main | Dropdown item icon (idle) |
color.dropdown.fg-hover | color.context.default.fg-highlight | Dropdown item text (hover) |
color.dropdown.bg-hover | color.context.default.bg-highlight | Dropdown item background (hover) |
color.dropdown.fg-active | color.context.primary.fg-solid | Dropdown item text (selected) |
color.dropdown.bg-active | color.context.primary.bg-solid | Dropdown item background (selected) |
color.dropdown.fg-header | color.context.default.fg-subtle | Dropdown header text |
color.dropdown.fg-disabled | color.context.default.fg-slight | Dropdown item text (disabled) |
Date Picker Colors
| Token Name | References | Applied To |
|---|---|---|
color.date-picker.fg-idle | color.context.default.fg-main | Calendar date (default) |
color.date-picker.bg-idle | color.context.default.transparent-color | Calendar date background (default) |
color.date-picker.fg-hover | color.context.default.fg-main | Calendar date (hover) |
color.date-picker.bg-hover | color.context.default.bg-even | Calendar date background (hover) |
color.date-picker.fg-active | color.context.white.base-color | Selected date text |
color.date-picker.bg-active | color.context.default.cue-main | Selected date background |
color.date-picker.fg-range | color.context.default.fg-idle | Date in range text |
color.date-picker.bg-range | color.context.default.bg-highlight | Date in range background |
color.date-picker.fg-today | color.context.default.cue-main | Today's date text |
color.date-picker.fg-weekend | color.context.default.fg-subtle | Weekend date text |
color.date-picker.fg-outside | color.context.default.fg-slight | Outside month date text |
Table Colors
Table components have color tokens for headers, rows, and interactive states.
| Token Name | References | Applied To |
|---|---|---|
color.table.fg-head | color.context.default.fg-main | Table header text |
color.table.bg-head | color.context.default.bg-evident | Table header background |
color.table.fg-data | color.context.default.fg-main | Table cell text |
color.table.bg-data | color.context.default.bg-main | Table cell background |
color.table.bg-alt | color.context.default.bg-even | Alternating row background |
color.table.bg-hover | color.context.default.bg-evident | Row background (hover) |
color.table.bg-active | color.context.default.bg-highlight | Row background (selected) |
color.table.bg-edit | color.palette.warning.10 | Row background (edit mode) |
color.table.cue-active | color.context.default.cue-main | Active row indicator |
color.table.border-main | color.context.default.border-subtle | Table borders |
color.table.icon-sort | color.context.default.fg-subtle | Sort indicator icon |
Pagination Colors
Pagination components have color tokens for page numbers and navigation.
| Token Name | References | Applied To |
|---|---|---|
color.pagination.fg-idle | color.context.default.fg-main | Page number text (idle) |
color.pagination.bg-idle | color.context.default.transparent-color | Page number background (idle) |
color.pagination.border-idle | color.context.default.border-main | Page number border (idle) |
color.pagination.fg-hover | color.context.default.fg-highlight | Page number text (hover) |
color.pagination.bg-hover | color.context.default.bg-highlight | Page number background (hover) |
color.pagination.fg-current | color.context.primary.fg-solid | Current page text |
color.pagination.bg-current | color.context.primary.bg-solid | Current page background |
color.pagination.border-current | color.context.primary.base-color | Current page border |
color.pagination.fg-disabled | color.context.default.fg-slight | Disabled page text |
Accordion Colors
Accordion components have color tokens for title, body, and interaction states.
| Token Name | References | Applied To |
|---|---|---|
color.accordion.item-fg-color | color.context.default.fg-main | Accordion item text |
color.accordion.item-bg-color | color.context.default.bg-main | Accordion item background |
color.accordion.title-fg-idle | color.context.default.fg-main | Accordion title text (collapsed) |
color.accordion.title-bg-idle | color.context.default.bg-main | Accordion title background (collapsed) |
color.accordion.title-fg-active | color.context.default.fg-main | Accordion title text (expanded) |
color.accordion.title-bg-active | color.context.default.bg-main | Accordion title background (expanded) |
color.accordion.indicator-idle | color.context.default.fg-main | Expansion indicator (collapsed) |
color.accordion.indicator-active | color.context.default.icon-main | Expansion indicator (expanded) |
color.accordion.border-main | color.context.default.border-subtle | Accordion borders |
Chip Colors
Chip/tag components follow the same variant system as badges.
| Token Name | References | Applied To |
|---|---|---|
color.chip.default.fg-main | color.context.default.fg-solid | Default chip text |
color.chip.default.bg-main | color.context.default.bg-solid | Default chip background |
color.chip.primary.fg-main | color.context.primary.fg-solid | Primary chip text |
color.chip.primary.bg-main | color.context.primary.bg-solid | Primary chip background |
color.chip.danger.fg-main | color.context.danger.fg-solid | Danger chip text |
color.chip.danger.bg-main | color.context.danger.bg-solid | Danger chip background |
Available chip variants: default, primary, secondary, neutral, danger, success, warning, info
Card Colors
Card components have color tokens for background, content, and borders.
| Token Name | References | Applied To |
|---|---|---|
color.card.fg-main | color.context.default.fg-main | Card content text |
color.card.bg-main | color.context.default.bg-main | Card background |
color.card.border-main | color.context.default.border-main | Card border |
color.card.bg-header | color.context.default.bg-even | Card header background |
color.card.bg-footer | color.context.default.bg-even | Card footer background |
Modal & Notification Colors
Modal dialogs and notification toasts have dedicated color tokens.
| Token Name | References | Applied To |
|---|---|---|
color.modal.fg-main | color.context.default.fg-main | Modal content text |
color.modal.bg-main | color.context.default.bg-main | Modal background |
color.modal.bg-overlay | color.context.default.dim-evident | Modal backdrop overlay |
color.modal.border-main | color.context.default.border-main | Modal border |
color.notification.fg-main | color.context.default.fg-main | Notification text |
color.notification.bg-main | color.context.default.bg-evident | Notification background |
color.notification.icon | color.context.default.icon-main | Notification icon |
color.notification.border-main | color.context.default.border-main | Notification border |
List Colors
List components have color tokens for items and disclosure indicators.
| Token Name | References | Applied To |
|---|---|---|
color.list.icon | color.context.default.icon-main | List item icon |
color.list.disclosure | color.context.default.fg-subtle | Disclosure indicator (chevron) |
Navigation Colors
Navigation components including tabs, breadcrumbs, and sidebars.
| Token Name | References | Applied To |
|---|---|---|
color.nav-top.bg-main | color.context.default.bg-evident | Top navigation background |
color.nav-top.fg-main | color.context.default.fg-main | Top navigation text |
color.nav-left.bg-main | color.context.default.bg-even | Side navigation background |
color.nav-left.fg-main | color.context.default.fg-main | Side navigation text |
color.tab.fg-idle | color.context.default.fg-subtle | Tab text (inactive) |
color.tab.fg-active | color.context.default.fg-main | Tab text (active) |
color.tab.border-active | color.context.default.cue-main | Active tab indicator |
color.breadcrumb.fg-main | color.context.default.fg-subtle | Breadcrumb link text |
color.breadcrumb.fg-current | color.context.default.fg-main | Current page in breadcrumb |
Progress & Section Colors
Progress indicators and content sections.
| Token Name | References | Applied To |
|---|---|---|
color.progress.fg-past | color.context.neutral.contrast-color | Completed step text |
color.progress.bg-past | color.context.neutral.base-color | Completed step background |
color.progress.border-past | color.context.neutral.base-color | Completed step border |
color.progress.fg-current | color.context.primary.contrast-color | Current step text |
color.progress.bg-current | color.context.primary.base-color | Current step background |
color.progress.border-current | color.context.primary.base-color | Current step border |
color.progress.fg-next | color.context.default.contrast-color | Future step text |
color.progress.bg-next | color.context.default.base-color | Future step background |
color.progress.border-next | color.context.default.base-color | Future step border |
color.section.fg-large | color.context.default.fg-main | Large section content |
color.section.fg-medium | color.context.default.fg-main | Medium section content |
color.section.fg-small | color.context.default.fg-main | Small section content |
color.section.icon-large | color.context.default.icon-main | Large section icons |
color.section.icon-medium | color.context.default.icon-main | Medium section icons |
color.section.icon-small | color.context.default.icon-main | Small section icons |
Message & Map Colors
Messaging interfaces and map components.
| Token Name | References | Applied To |
|---|---|---|
color.message.bg-chat | color.context.default.bg-evident | Chat interface background |
color.message.fg-form | color.context.primary.base-color | Message input text |
color.message.bg-form | color.context.default.bg-even | Message input background |
color.message.fg-received | color.context.default.fg-main | Received message text |
color.message.bg-received | color.context.default.bg-main | Received message bubble |
color.message.fg-sent | color.context.default.fg-main | Sent message text |
color.message.bg-sent | color.context.primary.bg-even | Sent message bubble |
color.map.marker-bg | color.context.primary.base-color | Map marker background |
color.map.marker-fg | color.context.primary.contrast-color | Map marker icon |
color.map.path-ride | color.context.default.cue-main | Route path (primary) |
color.map.path-walk | color.context.neutral.base-color | Route path (walking) |
color.map.trip-start | color.context.success.base-color | Start point marker |
color.map.trip-stop | color.context.danger.base-color | End point marker |
Page Colors
Page-level background colors for body and content sections.
| Token Name | References | Applied To |
|---|---|---|
color.page.bg-body | color.context.default.bg-main | Page body background |
color.page.bg-section | color.context.default.bg-main | Page section background |
Component color tokens follow consistent naming patterns: color.[component].[variant].[property]-[state]. They always reference context or palette colors, never hard-coded values, ensuring theme compatibility across light and dark modes.
Usage Guidelines
Choosing Between Token Levels
Use Palette Colors: Only when defining new context or component tokens in the Brand group
Use Context Colors: For most UI design work—backgrounds, text, borders, icons
Use Component Colors: When building or styling specific components for consistent application
Accessibility
Contrast Ratios: All token combinations maintain WCAG AA contrast requirements (4.5:1 for text, 3:1 for UI elements)
Color Blindness: Context colors are designed to be distinguishable beyond color alone (using patterns, icons, text)
Focus Indicators: Always use dedicated focus/cue colors for keyboard navigation
Dark Mode: Test all color combinations in both light and dark modes
Best Practices
Do:
- Use semantic context colors (
color.context.primary.*) over base palette colors - Reference component tokens when building UI components
- Test color combinations in both light and dark themes
- Use opacity tokens to create color variations consistently
- Pair colors that reference each other (e.g.,
fg-mainwithbg-main)
Don't:
- Use palette colors directly in components (use context colors)
- Mix light and dark theme colors
- Override token values with hard-coded colors
- Ignore contrast requirements
- Use color as the only means of conveying information