HERE Core UI granular color theming

HERE Core UI granular color theming allows you to easily customize the look and feel of Here Core UI to match your organization's branding. Theming lets you change the colors used throughout the application interface by setting four colors:

"brand.base.dark"
"brand.base.light"
"brand.accent.dark"
"brand.accent.light"

Based on these four hexadecimal, RGB, or RGBA colors, the theming engine generates the full color spectrum of your company's brand to elements like buttons, tabs, menus, and backgrounds. If you want more control over your color theme, you can override one or more of the generated values.

info

For information on RGB and RGBA, see W3Schools CSS RGB Colors. For information on hexadecimal colors, see W3Schools CSS HEX Colors.

Advantage over the previous version of theming

You can customize individual UI elements with specific tokens, rather than having a single token control multiple elements at once. This enables precise branding without affecting unrelated components.

Light and dark modes

Theming fully supports both light and dark display modes. When you configure your theme:

You provide colors for both light and dark variants
The system generates appropriate shades for each mode
Users can switch between modes, and your branding remains consistent
The application can follow the user's system preference automatically

This means you don't need to create two separate themes; the system handles the adaptation while keeping your brand identity intact in both modes.

Customization approach

HERE fully customizable color theming offers two approaches to customization. Choose the one that best fits your needs, or combine both for maximum flexibility.

Simple mode

This is the best mode if you want quick, consistent branding without managing individual color elements. In simple mode, you provide just a few core brand colors, and the theming engine generates the complete theming. You can always add specific customizations later if needed.

The colors you provide include:

Base colors: Your primary dark and light foundation colors
Accent colors: Your brand's highlight color for buttons and interactive elements

From these colors, the theming engine creates all the necessary shades, variations, and component colors that provide proper contrast for both light and dark display modes.

Advanced mode

This is the best mode if you have specific brand guidelines that require precise control over individual interface elements. Advanced mode lets you override the colors of specific components without affecting others.

Advanced mode is useful when:

Your brand guidelines specify exact colors for certain types of elements
You want a particular component to stand out differently from the generated theme
You need to match an existing application's exact appearance
Accessibility requirements demand specific color combinations

You can use advanced mode alongside simple mode (with generated colors) to override only the specific components that need different colors.

Comparison at a glance

Aspect	Simple Mode	Advanced Mode
Setup effort	Minimal — just a few colors	More involved — specify each element
Control level	Automatic, system-generated	Precise, per-component
Best for	Quick branding, consistency	Strict brand guidelines
Can be combined?	Yes	Yes

What you can customize with theming

The fully customizable color theming allows you to customize colors across all major interface components:

Component	What You Can Change
Buttons	Background, text, borders, hover and active states
Tabs	Active tab, inactive tabs, tab bar background
Menus	Menu background, item colors, selection highlights
Dialogs	Dialog backgrounds, headers, borders
Backgrounds	Main surfaces, sidebars, panels
Text	Primary text, secondary text, links
Status indicators	Success, warning, error, and informational colors

What you cannot customize with theming

The following properties are not customizable:

Layout: The arrangement and positioning of interface elements
Spacing: Margins, padding, and gaps between elements
Typography: Fonts, font sizes, and text styling
Component sizing: The dimensions of buttons, inputs, and other controls

Recommendations

Begin with simple mode and only add specific overrides if needed.
Always review your theme in both light and dark display modes.
Ensure text remains easily readable against all backgrounds.
Verify color contrast meets accessibility standards if required.
Keep a record of the colors you've selected for future reference.
Have colleagues review the theme before finalizing.

Setting up your theme

Theme configuration is handled through your HERE representative. Here's the typical process:

Gather your brand colors: Collect your organization's primary brand colors, including dark and light variants and accent colors.
Decide on your approach: Choose whether simple mode meets your needs or if you require advanced mode customizations.
Provide your specifications: Share your color values (in hexadecimal, RGB, or RGBA) and any specific component requirements with your HERE representative.
Review the generated theme: Examine the theme in both light and dark modes to ensure it meets your expectations.
Deploy: Once approved, the theme is applied to your deployment.

Upgrading from a previous theme

important

You cannot use elements of both themes at the same time. You can use the granular color theming or you can use the legacy color theming.

If your organization already has a custom theme configured, you can continue using it without changes.

Your existing legacy theme will continue to work
No immediate action is required
You can migrate to the new system at your convenience

Example code

info

The following example does not include all available override tokens.

To generate a new granular color theme for your app, pass the theme object into WorkspacePlatform.init().

WorkspacePlatform.init({
  ...,
  "theme": [
    {
      // These values are required. By default, the theming engine generates all
      // colors from these four hexadecimal token values.
      "label": "Corporate Brand Theme",
      "seed": {
        "brand.base.dark": "#140611",
        "brand.base.light": "#ffffff",
        "brand.accent.dark": "#FFD6D2",
        "brand.accent.light": "#641E55"
      },
      // If provided, these hexadecimal values override the applicable
      // token values generated by the theme engine.
      "overrides": {
        "light": {
          "icon.symbol": "https://EXAMPLE.COM/brand-symbol-light.svg",
          "color.role.background.1": "#fafafa",
          "color.role.background.2": "#f5f5f5",
          "color.role.accent.base": "#0066cc",
          "color.role.accent.hover": "#0052a3",
          "color.role.status.success": "#28a745",
          "color.role.status.warning": "#ffc107",
          "color.role.status.critical": "#dc3545",
          "color.role.border.neutral": "#e0e0e0"
        },
        "dark": {
          "icon.symbol": "https://EXAMPLE.COM/brand-symbol-dark.svg",
          "color.role.background.1": "#1a1a1a",
          "color.role.background.2": "#252525",
          "color.role.accent.base": "#4da6ff",
          "color.role.accent.hover": "#80bfff",
          "color.role.status.success": "#34d058",
          "color.role.status.warning": "#ffdf5d",
          "color.role.status.critical": "#f85149",
          "color.role.border.neutral": "#333333"
        }
      }
    }
  ]
})

Token hierarchy

The easiest way to understand all these tokens is to look at them as a cascading hierarchy, like a tree or a set of nested layers. The architecture flows from the most basic foundational colors up to highly specific UI elements in this order: Primitives/Seeds → Generated → Roles → Components.

The diagram below shows how each layer builds on the one below it. Colors flow upward from your inputs; when you override a token at any level, every layer above it that depends on that value is affected.

┌──────────────────────────────────────────────────────────────────────────┐
│  4. Component layer (granular control)                                   │
│     Shared · Browser · Home · Store                                      │
│     Specific UI elements (buttons, tabs, search bars, app cards, …)      │
└───────────────────────────────────▲──────────────────────────────────────┘
                                    │ provides default colors for
┌───────────────────────────────────┴──────────────────────────────────────┐
│  3. Semantic layer (broad sweeps)                                        │
│     Role override tokens (color.role.*)                                  │
│     Purpose-based names: background, border, foreground, link, status    │
└───────────────────────────────────▲──────────────────────────────────────┘
                                    │ maps values into
┌───────────────────────────────────┴──────────────────────────────────────┐
│  2. Generation layer (the math)                                          │
│     Generated color tokens                                               │
│     Full color ramps (100–600) for brand, status, and palette scales     │
└───────────────────────────────────▲──────────────────────────────────────┘
                                    │ mathematically generates
┌───────────────────────────────────┴──────────────────────────────────────┐
│  1. Foundation layer (the inputs)                                        │
│     Seed / brand tokens          Color primitive tokens                  │
│     (brand.base.*, brand.accent.*)  (colorPrimitives.*)                  │
└──────────────────────────────────────────────────────────────────────────┘

Layer	Token type	What it does	Override when…
1 — Foundation	Seed / brand tokens	Four core colors you provide in simple mode; the entire theme derives from them	You want to change your base brand palette
1 — Foundation	Color primitive tokens	Hardcoded underlying color scales (Red, Blue, Green, Indigo, …) used internally by the engine	You need to change the underlying color math of the system
2 — Generation	Generated color tokens	Blends seeds with primitives to produce full read-only color ramps	You rarely override these; role tokens are usually a better target
3 — Semantic	Role override tokens	Assigns meaningful names (background, border, link, status) to generated colors	You want one change to update many components at once
4 — Component	Shared (including notifications and dock tokens), Browser, Home, and Store tokens	Targets specific UI elements in named product areas	You need precise control over a single element without affecting the rest of the app

Foundation layer (the inputs)

At the bottom of the hierarchy are the raw colors used to build the theme.

Seed tokens / brand tokens: These are the four foundational colors (brand.base.dark, brand.base.light, brand.accent.dark, brand.accent.light) that you provide during simple mode. The entire theme is ultimately derived from these four seeds.

Color primitive tokens: These are the most basic, hardcoded underlying color scales (for example, specific shades of Red, Blue, Green, and Indigo) used internally by the theming engine. Override these only when you need to fundamentally change the underlying color math of the system.

Generation layer (the math)

Generated color tokens: The system takes your four seed/brand tokens and blends them with the color primitives to mathematically generate full color ramps (for example, generating scales from 100 to 600 for statuses like positive, warning, and critical). These generated tokens act as a large read-only color palette for the application.

Semantic layer (broad sweeps)

Role override tokens: Role tokens pull their colors directly from the generated color tokens and give them meaningful, semantic names based on their purpose—such as background, border, foreground, or link.

Because component tokens inherit their default colors from role tokens, changing a single role token (like color.role.background.accent.base) applies a broad sweep that instantly updates every UI component that uses that role.

Component layer (granular control)

The remaining tokens, Shared, Browser, Home, and Store override tokens, are all sub-categories of component tokens. Component tokens inherit their colors from role tokens and represent the actual, specific UI elements on the screen.

These are grouped into namespaces so you know exactly which product or area you are customizing:

Shared override tokens (color.shared...): Target UI components used everywhere across multiple HERE Core UI surfaces, such as buttons, form fields, lists, and dialog modals. Notifications and Dock have shared tokens.
Browser override tokens (color.coreui.browser...): Target elements specific to the HERE Enterprise Browser interface, such as window tabs, top toolbars, and view splitters.
Home override tokens (color.coreui.home...): Target elements specific to the Home digital assistant, such as search input bars, hotkey badges, and search results.
Store override tokens (color.coreui.store...): Target elements specific to the Store marketplace, such as app cards, sidebars, and store banners.

How overrides cascade

If you change a seed token, the update cascades upward: generated tokens are recalculated, which feed into role tokens, which in turn color component tokens (Shared, Browser, Home, and Store).

If you want precise, granular control over a single button or tab without changing the rest of the app, bypass the cascading system and directly override the specific component token for that element.

Tokens

The following list shows all seed, brand, and override tokens. Use only those tokens that you need; the remainder's color values (hexadecimal, RGB, or RGBA string values) are generated by the theming engine based on the seed values.

Provide seed colors in the seed object. Scheme-specific overrides belong in overrides.light and overrides.dark.

Seed tokens

info

Accent colors can be different or the same between light and dark modes.

brand.accent.dark // Required - The primary accent color for dark mode, used for primary buttons, focus borders, selection highlights, and interactive emphasis
brand.accent.light // Required - The primary accent color for light mode, used for primary buttons, focus borders, selection highlights, and interactive emphasis
brand.base.dark // Required - The primary foundation color for dark mode; used to derive dark-mode backgrounds and light-mode foreground colors such as text and icons
brand.base.light // Required - The primary foundation color for light mode; used to derive light-mode backgrounds and dark-mode foreground colors such as text and icons

Brand tokens (generated)

The theming engine generates these brand color variants from the seed values. There is no need to include these in your code unless you want to override them.

brand.accent.100 // Lightest accent shade in light mode; darkest accent shade in dark mode
brand.accent.200 // Lighter accent shade derived from the accent seed color
brand.accent.300 // Light accent shade derived from the accent seed color
brand.accent.400 // Matches the accent seed color for the active color scheme
brand.accent.500 // Dark accent shade derived from the accent seed color
brand.accent.600 // Darkest accent shade in light mode; lightest accent shade in dark mode

These status color variants indicate positive, warning, critical, and informational messaging.

brand.status.positive.100 // Lightest success or positive shade in light mode; darkest in dark mode
brand.status.positive.200 // Lighter success or positive shade
brand.status.positive.300 // Light success or positive shade
brand.status.positive.400 // Base success or positive color used for status indicators and messaging
brand.status.positive.500 // Dark success or positive shade
brand.status.positive.600 // Darkest success or positive shade in light mode; lightest in dark mode
brand.status.warning.100 // Lightest warning shade in light mode; darkest in dark mode
brand.status.warning.200 // Lighter warning shade
brand.status.warning.300 // Light warning shade
brand.status.warning.400 // Base warning color used for status indicators and messaging
brand.status.warning.500 // Dark warning shade
brand.status.warning.600 // Darkest warning shade in light mode; lightest in dark mode
brand.status.critical.100 // Lightest error or critical shade in light mode; darkest in dark mode
brand.status.critical.200 // Lighter error or critical shade
brand.status.critical.300 // Light error or critical shade
brand.status.critical.400 // Base error or critical color used for status indicators and messaging
brand.status.critical.500 // Dark error or critical shade
brand.status.critical.600 // Darkest error or critical shade in light mode; lightest in dark mode
brand.status.informative.100 // Lightest informational shade in light mode; darkest in dark mode
brand.status.informative.200 // Lighter informational shade
brand.status.informative.300 // Light informational shade
brand.status.informative.400 // Base informational color used for status indicators and messaging
brand.status.informative.500 // Dark informational shade
brand.status.informative.600 // Darkest informational shade in light mode; lightest in dark mode

Icon override tokens

URLs to brand icon assets displayed in the interface.

icon.symbol // URL to the brand symbol icon displayed in light or dark mode
icon.wordmark // URL to the brand wordmark logo displayed in light or dark mode

Role override tokens

Semantic colors applied across the interface for backgrounds, borders, text, links, and overlays.

color.role.background.1 // Background layer 1 - primary application background
color.role.background.2 // Background layer 2 - secondary nested surface
color.role.background.3 // Background layer 3 - tertiary nested surface
color.role.background.4 // Background layer 4 - quaternary nested surface
color.role.background.5 // Background layer 5 - deepest nested surface
color.role.background.6 // Background layer 6 - deepest contrast surface
color.role.background.accent.base // Brand accent background color at standard intensity
color.role.background.accent.soft // Brand accent background color at subtle intensity
color.role.background.accent.softer // Brand accent background color at very subtle intensity
color.role.background.accent.softest // Brand accent background color at most subtle intensity
color.role.background.accent.strong // Brand accent background color at emphasized intensity
color.role.background.accent.stronger // Brand accent background color at most emphasized intensity
color.role.background.base // Primary background surface color
color.role.background.critical.base // Error or critical background color at standard intensity
color.role.background.critical.soft // Error or critical background color at subtle intensity
color.role.background.critical.softer // Error or critical background color at very subtle intensity
color.role.background.critical.softest // Error or critical background color at most subtle intensity
color.role.background.critical.strong // Error or critical background color at emphasized intensity
color.role.background.critical.stronger // Error or critical background color at most emphasized intensity
color.role.background.informative.base // Informational background color at standard intensity
color.role.background.informative.soft // Informational background color at subtle intensity
color.role.background.informative.softer // Informational background color at very subtle intensity
color.role.background.informative.softest // Informational background color at most subtle intensity
color.role.background.informative.strong // Informational background color at emphasized intensity
color.role.background.informative.stronger // Informational background color at most emphasized intensity
color.role.background.inverse // Inverted background color used for high-contrast surfaces
color.role.background.positive.base // Success or positive background color at standard intensity
color.role.background.positive.soft // Success or positive background color at subtle intensity
color.role.background.positive.softer // Success or positive background color at very subtle intensity
color.role.background.positive.softest // Success or positive background color at most subtle intensity
color.role.background.positive.strong // Success or positive background color at emphasized intensity
color.role.background.positive.stronger // Success or positive background color at most emphasized intensity
color.role.background.warning.base // Warning background color at standard intensity
color.role.background.warning.soft // Warning background color at subtle intensity
color.role.background.warning.softer // Warning background color at very subtle intensity
color.role.background.warning.softest // Warning background color at most subtle intensity
color.role.background.warning.strong // Warning background color at emphasized intensity
color.role.background.warning.stronger // Warning background color at most emphasized intensity
color.role.border.1 // Border color paired with background layer 1
color.role.border.2 // Border color paired with background layer 2
color.role.border.3 // Border color paired with background layer 3
color.role.border.4 // Border color paired with background layer 4
color.role.border.5 // Border color paired with background layer 5
color.role.border.6 // Border color paired with background layer 6
color.role.border.accent.base // Brand accent border color at standard intensity
color.role.border.accent.soft // Brand accent border color at subtle intensity
color.role.border.accent.softer // Brand accent border color at very subtle intensity
color.role.border.accent.softest // Brand accent border color at most subtle intensity
color.role.border.accent.strong // Brand accent border color at emphasized intensity
color.role.border.accent.stronger // Brand accent border color at most emphasized intensity
color.role.border.base // Default border color for dividers, outlines, and component edges
color.role.border.critical.base // Error or critical border color at standard intensity
color.role.border.critical.soft // Error or critical border color at subtle intensity
color.role.border.critical.softer // Error or critical border color at very subtle intensity
color.role.border.critical.softest // Error or critical border color at most subtle intensity
color.role.border.critical.strong // Error or critical border color at emphasized intensity
color.role.border.critical.stronger // Error or critical border color at most emphasized intensity
color.role.border.positive.base // Success or positive border color at standard intensity
color.role.border.positive.soft // Success or positive border color at subtle intensity
color.role.border.positive.softer // Success or positive border color at very subtle intensity
color.role.border.positive.softest // Success or positive border color at most subtle intensity
color.role.border.positive.strong // Success or positive border color at emphasized intensity
color.role.border.positive.stronger // Success or positive border color at most emphasized intensity
color.role.border.strong // Stronger border color for increased separation
color.role.border.stronger // Strongest border color for maximum separation
color.role.border.warning.base // Warning border color at standard intensity
color.role.border.warning.soft // Warning border color at subtle intensity
color.role.border.warning.softer // Warning border color at very subtle intensity
color.role.border.warning.softest // Warning border color at most subtle intensity
color.role.border.warning.strong // Warning border color at emphasized intensity
color.role.border.warning.stronger // Warning border color at most emphasized intensity
color.role.focusRing // Focus ring color shown around keyboard-focused interactive elements
color.role.foreground.accent.base // Brand accent text or icon color at standard intensity
color.role.foreground.accent.soft // Brand accent text or icon color at subtle intensity
color.role.foreground.accent.softer // Brand accent text or icon color at very subtle intensity
color.role.foreground.accent.softest // Brand accent text or icon color at most subtle intensity
color.role.foreground.accent.strong // Brand accent text or icon color at emphasized intensity
color.role.foreground.accent.stronger // Brand accent text or icon color at most emphasized intensity
color.role.foreground.base // Primary text and icon color for body content
color.role.foreground.critical // Text or icon color for error or critical messaging
color.role.foreground.informative // Text or icon color for informational messaging
color.role.foreground.inverse // Text and icon color used on inverted or accent backgrounds
color.role.foreground.neutral // Neutral text color for non-emphasized labels
color.role.foreground.onPrimary // Text and icon color displayed on primary accent backgrounds
color.role.foreground.positive // Text or icon color for success or positive messaging
color.role.foreground.soft // Secondary text color for de-emphasized content
color.role.foreground.softer // Tertiary text color for the least prominent content
color.role.foreground.warning // Text or icon color for warning messaging
color.role.identifier.blue // Identifier color for blue tags, badges, or categorized items
color.role.identifier.gray // Identifier color for gray tags, badges, or categorized items
color.role.identifier.green // Identifier color for green tags, badges, or categorized items
color.role.identifier.indigo // Identifier color for indigo tags, badges, or categorized items
color.role.identifier.orange // Identifier color for orange tags, badges, or categorized items
color.role.identifier.pink // Identifier color for pink tags, badges, or categorized items
color.role.identifier.red // Identifier color for red tags, badges, or categorized items
color.role.identifier.teal // Identifier color for teal tags, badges, or categorized items
color.role.identifier.yellow // Identifier color for yellow tags, badges, or categorized items
color.role.link.default // Hyperlink color in default state
color.role.link.hover // Hyperlink color in hover state
color.role.overlay // Dimmed overlay color behind modals, dialogs, and blocking surfaces
color.role.transparent.0 // Transparent overlay color at 0% opacity
color.role.transparent.12 // Transparent overlay color at 12% opacity
color.role.transparent.18 // Transparent overlay color at 18% opacity
color.role.transparent.32 // Transparent overlay color at 32% opacity
color.role.transparent.50 // Transparent overlay color at 50% opacity
color.role.transparent.8 // Transparent overlay color at 8% opacity

Generated color tokens

Intermediate palette values derived from seed colors. Override these when you need to adjust the generated palette before it flows into role and component tokens.

color.generated.accent.base // Generated brand accent color at standard intensity, derived from seed values
color.generated.accent.soft // Generated brand accent color at subtle intensity, derived from seed values
color.generated.accent.softer // Generated brand accent color at very subtle intensity, derived from seed values
color.generated.accent.softest // Generated brand accent color at most subtle intensity, derived from seed values
color.generated.accent.strong // Generated brand accent color at emphasized intensity, derived from seed values
color.generated.accent.stronger // Generated brand accent color at most emphasized intensity, derived from seed values
color.generated.background.base // Generated base background color derived from brand base seed values
color.generated.critical.base // Generated error or critical color at standard intensity, derived from seed values
color.generated.critical.soft // Generated error or critical color at subtle intensity, derived from seed values
color.generated.critical.softer // Generated error or critical color at very subtle intensity, derived from seed values
color.generated.critical.softest // Generated error or critical color at most subtle intensity, derived from seed values
color.generated.critical.strong // Generated error or critical color at emphasized intensity, derived from seed values
color.generated.critical.stronger // Generated error or critical color at most emphasized intensity, derived from seed values
color.generated.foreground.base // Generated foreground color at standard intensity, derived from brand base seed values
color.generated.foreground.soft // Generated foreground color at subtle intensity, derived from brand base seed values
color.generated.foreground.softer // Generated foreground color at very subtle intensity, derived from brand base seed values
color.generated.identifier.blue // Generated identifier color for blue tags and badges
color.generated.identifier.gray // Generated identifier color for gray tags and badges
color.generated.identifier.green // Generated identifier color for green tags and badges
color.generated.identifier.indigo // Generated identifier color for indigo tags and badges
color.generated.identifier.orange // Generated identifier color for orange tags and badges
color.generated.identifier.pink // Generated identifier color for pink tags and badges
color.generated.identifier.red // Generated identifier color for red tags and badges
color.generated.identifier.teal // Generated identifier color for teal tags and badges
color.generated.identifier.yellow // Generated identifier color for yellow tags and badges
color.generated.informative.base // Generated informational color at standard intensity, derived from seed values
color.generated.informative.soft // Generated informational color at subtle intensity, derived from seed values
color.generated.informative.softer // Generated informational color at very subtle intensity, derived from seed values
color.generated.informative.softest // Generated informational color at most subtle intensity, derived from seed values
color.generated.informative.strong // Generated informational color at emphasized intensity, derived from seed values
color.generated.informative.stronger // Generated informational color at most emphasized intensity, derived from seed values
color.generated.positive.base // Generated success or positive color at standard intensity, derived from seed values
color.generated.positive.soft // Generated success or positive color at subtle intensity, derived from seed values
color.generated.positive.softer // Generated success or positive color at very subtle intensity, derived from seed values
color.generated.positive.softest // Generated success or positive color at most subtle intensity, derived from seed values
color.generated.positive.strong // Generated success or positive color at emphasized intensity, derived from seed values
color.generated.positive.stronger // Generated success or positive color at most emphasized intensity, derived from seed values
color.generated.scale.1 // Generated background scale value 1, mapped to background layer 1
color.generated.scale.2 // Generated background scale value 2, mapped to background layer 2
color.generated.scale.3 // Generated background scale value 3, mapped to background layer 3
color.generated.scale.4 // Generated background scale value 4, mapped to background layer 4
color.generated.scale.5 // Generated background scale value 5, mapped to background layer 5
color.generated.scale.6 // Generated background scale value 6, mapped to background layer 6
color.generated.warning.base // Generated warning color at standard intensity, derived from seed values
color.generated.warning.soft // Generated warning color at subtle intensity, derived from seed values
color.generated.warning.softer // Generated warning color at very subtle intensity, derived from seed values
color.generated.warning.softest // Generated warning color at most subtle intensity, derived from seed values
color.generated.warning.strong // Generated warning color at emphasized intensity, derived from seed values
color.generated.warning.stronger // Generated warning color at most emphasized intensity, derived from seed values

Shared override tokens

Colors for shared UI components used across multiple HERE Core UI surfaces.

color.shared.banner.critical.background // Background color for the critical inline banner
color.shared.banner.critical.border // Border color for the critical inline banner
color.shared.banner.critical.icon // Icon color for the critical inline banner
color.shared.banner.critical.text // Text color for the critical inline banner
color.shared.banner.positive.background // Background color for the success or positive inline banner
color.shared.banner.positive.border // Border color for the success or positive inline banner
color.shared.banner.positive.icon // Icon color for the success or positive inline banner
color.shared.banner.positive.text // Text color for the success or positive inline banner
color.shared.banner.warning.background // Background color for the warning inline banner
color.shared.banner.warning.border // Border color for the warning inline banner
color.shared.banner.warning.icon // Icon color for the warning inline banner
color.shared.banner.warning.text // Text color for the warning inline banner
color.shared.button.critical.background.default // Background color for the critical button in default state
color.shared.button.critical.background.hover // Background color for the critical button in hover state
color.shared.button.critical.background.pressed // Background color for the critical button in pressed state
color.shared.button.critical.border.default // Border color for the critical button in default state
color.shared.button.critical.border.hover // Border color for the critical button in hover state
color.shared.button.critical.border.pressed // Border color for the critical button in pressed state
color.shared.button.critical.focusRing // Focus ring color for the critical button
color.shared.button.critical.icon.default // Icon color for the critical button in default state
color.shared.button.critical.icon.hover // Icon color for the critical button in hover state
color.shared.button.critical.icon.pressed // Icon color for the critical button in pressed state
color.shared.button.critical.text.default // Text color for the critical button in default state
color.shared.button.critical.text.hover // Text color for the critical button in hover state
color.shared.button.default.background.default // Background color for the standard button in default state
color.shared.button.default.background.hover // Background color for the standard button in hover state
color.shared.button.default.background.pressed // Background color for the standard button in pressed state
color.shared.button.default.background.selected // Background color for the standard button in selected state
color.shared.button.default.border.default // Border color for the standard button in default state
color.shared.button.default.border.hover // Border color for the standard button in hover state
color.shared.button.default.border.pressed // Border color for the standard button in pressed state
color.shared.button.default.border.selected // Border color for the standard button in selected state
color.shared.button.default.focusRing // Focus ring color for the standard button
color.shared.button.default.icon.default // Icon color for the standard button in default state
color.shared.button.default.icon.hover // Icon color for the standard button in hover state
color.shared.button.default.icon.pressed // Icon color for the standard button in pressed state
color.shared.button.default.icon.selected // Icon color for the standard button in selected state
color.shared.button.default.text.default // Text color for the standard button in default state
color.shared.button.default.text.hover // Text color for the standard button in hover state
color.shared.button.default.text.selected // Text color for the standard button in selected state
color.shared.button.ghost.background // Background color for the ghost button
color.shared.button.ghost.icon.active // Icon color for the ghost button in active state
color.shared.button.ghost.icon.default // Icon color for the ghost button in default state
color.shared.button.ghost.icon.hover // Icon color for the ghost button in hover state
color.shared.button.ghost.text.default // Text color for the ghost button in default state
color.shared.button.ghost.text.hover // Text color for the ghost button in hover state
color.shared.button.ghost.text.pressed // Text color for the ghost button in pressed state
color.shared.button.primary.background.default // Background color for the primary button in default state
color.shared.button.primary.background.hover // Background color for the primary button in hover state
color.shared.button.primary.background.pressed // Background color for the primary button in pressed state
color.shared.button.primary.border.default // Border color for the primary button in default state
color.shared.button.primary.border.hover // Border color for the primary button in hover state
color.shared.button.primary.border.pressed // Border color for the primary button in pressed state
color.shared.button.primary.focusRing // Focus ring color for the primary button
color.shared.button.primary.icon.default // Icon color for the primary button in default state
color.shared.button.primary.icon.hover // Icon color for the primary button in hover state
color.shared.button.primary.icon.pressed // Icon color for the primary button in pressed state
color.shared.button.primary.text.default // Text color for the primary button in default state
color.shared.button.primary.text.hover // Text color for the primary button in hover state
color.shared.button.subtle.background.default // Background color for the subtle button in default state
color.shared.button.subtle.background.hover // Background color for the subtle button in hover state
color.shared.button.subtle.background.pressed // Background color for the subtle button in pressed state
color.shared.button.subtle.border.default // Border color for the subtle button in default state
color.shared.button.subtle.border.hover // Border color for the subtle button in hover state
color.shared.button.subtle.border.pressed // Border color for the subtle button in pressed state
color.shared.button.subtle.icon.default // Icon color for the subtle button in default state
color.shared.button.subtle.icon.hover // Icon color for the subtle button in hover state
color.shared.button.subtle.icon.pressed // Icon color for the subtle button in pressed state
color.shared.button.subtle.text.default // Text color for the subtle button in default state
color.shared.button.subtle.text.hover // Text color for the subtle button in hover state
color.shared.card.background.default // Background color for card in default state
color.shared.card.background.hover // Background color for card in hover state
color.shared.card.background.loading // Background color for card in loading
color.shared.card.background.selected // Background color for card in selected state
color.shared.card.border.default // Border color for card in default state
color.shared.card.border.hover // Border color for card in hover state
color.shared.card.border.selected // Border color for card in selected state
color.shared.card.shadow.default // Card color
color.shared.card.shadow.hover // Card color
color.shared.card.text.base // Text color for card in base
color.shared.card.text.soft // Text color for card in soft
color.shared.colorChannel.blue // Color channel swatch color
color.shared.colorChannel.gray // Color channel swatch color
color.shared.colorChannel.green // Color channel swatch color
color.shared.colorChannel.indigo // Color channel swatch color
color.shared.colorChannel.orange // Color channel swatch color
color.shared.colorChannel.pink // Color channel swatch color
color.shared.colorChannel.red // Color channel swatch color
color.shared.colorChannel.selected // Color channel swatch color
color.shared.colorChannel.teal // Color channel swatch color
color.shared.colorChannel.unlink // Color channel swatch color
color.shared.colorChannel.yellow // Color channel swatch color
color.shared.dock.background // Background color for dock
color.shared.dock.border // Border color for dock
color.shared.dock.dragIndicator // Drag indicator color for dock
color.shared.dropzone.background // Background color for file drop zone
color.shared.dropzone.border // Border color for file drop zone
color.shared.focusRing // Focus ring color
color.shared.form.background.default // Background color for form field in default state
color.shared.form.background.error // Background color for form field in error state
color.shared.form.background.filled // Background color for form field in filled state
color.shared.form.background.focus // Background color for form field in focused state
color.shared.form.background.hover // Background color for form field in hover state
color.shared.form.background.selected // Background color for form field in selected state
color.shared.form.border.default // Border color for form field in default state
color.shared.form.border.error // Border color for form field in error state
color.shared.form.border.filled // Border color for form field in filled state
color.shared.form.border.focus // Border color for form field in focused state
color.shared.form.border.hover // Border color for form field in hover state
color.shared.form.border.selected // Border color for form field in selected state
color.shared.form.errorMessage.background // Form field color
color.shared.form.errorMessage.icon // Form field color
color.shared.form.errorMessage.text // Form field color
color.shared.form.focusRing // Focus ring color for form field
color.shared.form.helpIcon // Form field color
color.shared.form.hint // Hint text color for form field
color.shared.form.icon.default // Icon color for form field in default state
color.shared.form.icon.focus // Icon color for form field in focused state
color.shared.form.icon.selected // Icon color for form field in selected state
color.shared.form.label // Form field color
color.shared.form.optionalDot // Form field color
color.shared.form.placeholder.default // Placeholder text color for form field in default state
color.shared.form.placeholder.focus // Placeholder text color for form field in focused state
color.shared.form.placeholder.hover // Placeholder text color for form field in hover state
color.shared.form.value.default // Input value text color for form field in default state
color.shared.form.value.filled // Input value text color for form field in filled state
color.shared.form.value.focus // Input value text color for form field in focused state
color.shared.form.value.hover // Input value text color for form field in hover state
color.shared.icon.accent // Icon color for the brand accent variant
color.shared.icon.accentTransparent // Icon color
color.shared.icon.background1 // Icon color
color.shared.icon.background3 // Icon color
color.shared.icon.base // Icon color
color.shared.icon.border // Border color for icon
color.shared.icon.error // Icon color
color.shared.icon.soft // Icon color
color.shared.iconButton.default.background.default // Background color for the standard icon button in default state
color.shared.iconButton.default.background.hover // Background color for the standard icon button in hover state
color.shared.iconButton.default.background.pressed // Background color for the standard icon button in pressed state
color.shared.iconButton.default.background.selected // Background color for the standard icon button in selected state
color.shared.iconButton.default.border.default // Border color for the standard icon button in default state
color.shared.iconButton.default.border.hover // Border color for the standard icon button in hover state
color.shared.iconButton.default.border.pressed // Border color for the standard icon button in pressed state
color.shared.iconButton.default.border.selected // Border color for the standard icon button in selected state
color.shared.iconButton.default.focusRing // Focus ring color for the standard icon button
color.shared.iconButton.default.icon.default // Icon color for the standard icon button in default state
color.shared.iconButton.default.icon.hover // Icon color for the standard icon button in hover state
color.shared.iconButton.default.icon.pressed // Icon color for the standard icon button in pressed state
color.shared.iconButton.default.icon.selected // Icon color for the standard icon button in selected state
color.shared.iconButton.ghost.background // Background color for the ghost icon button
color.shared.iconButton.ghost.icon.default // Icon color for the ghost icon button in default state
color.shared.iconButton.ghost.icon.hover // Icon color for the ghost icon button in hover state
color.shared.iconButton.ghost.icon.pressed // Icon color for the ghost icon button in pressed state
color.shared.iconButton.primary.background.default // Background color for the primary icon button in default state
color.shared.iconButton.primary.background.hover // Background color for the primary icon button in hover state
color.shared.iconButton.primary.border.default // Border color for the primary icon button in default state
color.shared.iconButton.primary.border.hover // Border color for the primary icon button in hover state
color.shared.iconButton.primary.border.pressed // Border color for the primary icon button in pressed state
color.shared.iconButton.primary.focusRing // Focus ring color for the primary icon button
color.shared.iconButton.primary.icon.default // Icon color for the primary icon button in default state
color.shared.iconButton.primary.icon.hover // Icon color for the primary icon button in hover state
color.shared.iconButton.primary.icon.pressed // Icon color for the primary icon button in pressed state
color.shared.iconButton.subtle.background.default // Background color for the subtle icon button in default state
color.shared.iconButton.subtle.background.hover // Background color for the subtle icon button in hover state
color.shared.iconButton.subtle.background.pressed // Background color for the subtle icon button in pressed state
color.shared.iconButton.subtle.border.default // Border color for the subtle icon button in default state
color.shared.iconButton.subtle.border.hover // Border color for the subtle icon button in hover state
color.shared.iconButton.subtle.border.pressed // Border color for the subtle icon button in pressed state
color.shared.iconButton.subtle.icon.default // Icon color for the subtle icon button in default state
color.shared.iconButton.subtle.icon.hover // Icon color for the subtle icon button in hover state
color.shared.iconButton.subtle.icon.pressed // Icon color for the subtle icon button in pressed state
color.shared.indicator.background.blue // Background color for status indicator badge in blue
color.shared.indicator.background.expired // Background color for status indicator badge in expired
color.shared.indicator.background.green // Background color for status indicator badge in green
color.shared.indicator.background.indigo // Background color for status indicator badge in indigo
color.shared.indicator.background.orange // Background color for status indicator badge in orange
color.shared.indicator.background.pink // Background color for status indicator badge in pink
color.shared.indicator.background.red // Background color for status indicator badge in red
color.shared.indicator.background.teal // Background color for status indicator badge in teal
color.shared.indicator.background.transparent // Background color for status indicator badge in transparent
color.shared.indicator.background.yellow // Background color for status indicator badge in yellow
color.shared.indicator.text // Text color for status indicator badge
color.shared.listItem.background.default // Background color for list item in default state
color.shared.listItem.background.hover // Background color for list item in hover state
color.shared.listItem.background.selected // Background color for list item in selected state
color.shared.listItem.icon.default // Icon color for list item in default state
color.shared.listItem.icon.hover // Icon color for list item in hover state
color.shared.listItem.icon.selected // Icon color for list item in selected state
color.shared.listItem.iconBackground.default // Icon background color for list item in default state
color.shared.listItem.iconBackground.hover // Icon background color for list item in hover state
color.shared.listItem.iconBackground.selected // Icon background color for list item in selected state
color.shared.listItem.text.default // Text color for list item in default state
color.shared.listItem.text.hover // Text color for list item in hover state
color.shared.listItem.text.selected // Text color for list item in selected state
color.shared.modal.background // Background color for modal dialog
color.shared.modal.border // Border color for modal dialog
color.shared.modal.text.base // Text color for modal dialog in base
color.shared.modal.text.soft // Text color for modal dialog in soft
color.shared.notification.background // Background color for notification toast
color.shared.notification.border // Border color for notification toast
color.shared.notification.text.base // Text color for notification toast in base
color.shared.notification.text.soft // Text color for notification toast in soft
color.shared.notificationCenter.background // Background color for notification center
color.shared.notificationCenter.border // Border color for notification center
color.shared.notificationCenter.icon.base // Icon color for notification center in base
color.shared.notificationCenter.icon.soft // Icon color for notification center in soft
color.shared.notificationCenter.text.base // Text color for notification center in base
color.shared.notificationCenter.text.soft // Text color for notification center in soft
color.shared.overlay // Overlay color
color.shared.placementOption.backdrop // Backdrop color for window placement option
color.shared.placementOption.background.default // Background color for window placement option in default state
color.shared.placementOption.background.hover // Background color for window placement option in hover state
color.shared.placementOption.background.selected // Background color for window placement option in selected state
color.shared.placementOption.previewObject.default // Preview object color for window placement option in default state
color.shared.placementOption.previewObject.hover // Preview object color for window placement option in hover state
color.shared.placementOption.previewObject.selected // Preview object color for window placement option in selected state
color.shared.placementOption.text.default // Text color for window placement option in default state
color.shared.platformSelector.underline // Underline color for platform selector
color.shared.scrollBar.area // Scroll area color for scroll bar
color.shared.scrollBar.bar // Scroll bar color for scroll bar
color.shared.toggle.thumb.off // Thumb color for toggle switch in off
color.shared.toggle.thumb.on // Thumb color for toggle switch in on
color.shared.toggle.track.off // Track color for toggle switch in off
color.shared.toggle.track.on // Track color for toggle switch in on
color.shared.watermark // Watermark color

Browser override tokens

Colors for Browser-specific interface elements such as tabs, toolbars, views, and splitters.

color.coreui.browser.background // Background color for browser shell
color.coreui.browser.border // Border color for browser shell
color.coreui.browserPageTab.background.default // Background color for browser page tab in default state
color.coreui.browserPageTab.background.selected // Background color for browser page tab in selected state
color.coreui.browserPageTab.icon.default // Icon color for browser page tab in default state
color.coreui.browserPageTab.icon.selected // Icon color for browser page tab in selected state
color.coreui.browserPageTab.text.default // Text color for browser page tab in default state
color.coreui.browserPageTab.text.selected // Text color for browser page tab in selected state
color.coreui.browserToolbarIcon.active // Active color for browser toolbar icon button
color.coreui.browserToolbarIcon.background.active // Background color for browser toolbar icon button in active state
color.coreui.browserToolbarIcon.background.default // Background color for browser toolbar icon button in default state
color.coreui.browserToolbarIcon.background.focus // Background color for browser toolbar icon button in focused state
color.coreui.browserToolbarIcon.background.hover // Background color for browser toolbar icon button in hover state
color.coreui.browserToolbarIcon.background.selected // Background color for browser toolbar icon button in selected state
color.coreui.browserToolbarIcon.default // Default color for browser toolbar icon button
color.coreui.browserToolbarIcon.focus // Focus color for browser toolbar icon button
color.coreui.browserToolbarIcon.hover // Hover color for browser toolbar icon button
color.coreui.browserToolbarIcon.selected // Selected color for browser toolbar icon button
color.coreui.browserTopBar.background // Background color for browser top bar
color.coreui.browserTopBar.border // Border color for browser top bar
color.coreui.browserView.border.default // Border color for browser content view in default state
color.coreui.browserView.border.focus // Border color for browser content view in focused state
color.coreui.browserView.border.green // Green color for browser content view border
color.coreui.browserView.border.orange // Orange color for browser content view border
color.coreui.browserView.border.pink // Pink color for browser content view border
color.coreui.browserView.border.purple // Purple color for browser content view border
color.coreui.browserView.border.red // Red color for browser content view border
color.coreui.browserView.border.yellow // Yellow color for browser content view border
color.coreui.browserView.icon // Icon color for browser content view
color.coreui.browserViewSplitter.default // Default color for browser view splitter
color.coreui.browserViewSplitter.hover // Hover color for browser view splitter
color.coreui.browserViewTab.background.active // Background color for browser view tab in active state
color.coreui.browserViewTab.background.default // Background color for browser view tab in default state
color.coreui.browserViewTab.background.focus // Background color for browser view tab in focused state
color.coreui.browserViewTab.background.hover // Background color for browser view tab in hover state
color.coreui.browserViewTab.border.active // Border color for browser view tab in active state
color.coreui.browserViewTab.border.focus // Border color for browser view tab in focused state
color.coreui.browserViewTab.icon // Icon color for browser view tab
color.coreui.browserViewTab.text.default // Text color for browser view tab in default state

Home override tokens

Colors for Home-specific interface elements such as search inputs, results, templates, and cards.

color.coreui.home.background // Background color for home page
color.coreui.home.border // Border color for home page
color.coreui.homeCard.background // Background color for home card
color.coreui.homeHotkey.background // Background color for home keyboard shortcut badge
color.coreui.homeHotkey.icon // Icon color for home keyboard shortcut badge
color.coreui.homeHotkey.text // Text color for home keyboard shortcut badge
color.coreui.homeInput.background.active // Background color for home search input in active state
color.coreui.homeInput.background.default // Background color for home search input in default state
color.coreui.homeInput.background.focus // Background color for home search input in focused state
color.coreui.homeInput.background.hover // Background color for home search input in hover state
color.coreui.homeInput.border.active // Border color for home search input in active state
color.coreui.homeInput.border.default // Border color for home search input in default state
color.coreui.homeInput.border.focus // Border color for home search input in focused state
color.coreui.homeInput.border.hover // Border color for home search input in hover state
color.coreui.homeInput.value.active // Input value text color for home search input in active state
color.coreui.homeInput.value.default // Input value text color for home search input in default state
color.coreui.homeInput.value.filled // Input value text color for home search input in filled state
color.coreui.homeInput.value.hover // Input value text color for home search input in hover state
color.coreui.homeResult.background.default // Background color for home search result row in default state
color.coreui.homeResult.background.hover // Background color for home search result row in hover state
color.coreui.homeResult.background.launching // Background color for home search result row in launching state
color.coreui.homeResult.background.selected // Background color for home search result row in selected state
color.coreui.homeResult.description.default // Description text color for home search result row in default state
color.coreui.homeResult.description.hover // Description text color for home search result row in hover state
color.coreui.homeResult.description.launching // Description text color for home search result row in launching state
color.coreui.homeResult.description.selected // Description text color for home search result row in selected state
color.coreui.homeResult.icon // Icon color for home search result row
color.coreui.homeResult.title.default // Title text color for home search result row in default state
color.coreui.homeResult.title.hover // Title text color for home search result row in hover state
color.coreui.homeResult.title.launching // Title text color for home search result row in launching state
color.coreui.homeResult.title.selected // Title text color for home search result row in selected state
color.coreui.homeTemplate.background // Background color for home template tile
color.coreui.homeTemplate.icon // Icon color for home template tile
color.coreui.homeTemplate.text.base // Base color for home template tile text
color.coreui.homeTemplate.text.soft // Soft color for home template tile text
color.coreui.homeText.base // Home page text base text color
color.coreui.homeText.soft // Home page text soft text color

Store override tokens

Colors for Store-specific interface elements such as banners, cards, inputs, menus, and the sidebar.

color.coreui.store.background // Background color for store page
color.coreui.storeBanner.background // Background color for store banner
color.coreui.storeBanner.button.background.default // Background color for store banner button in default state
color.coreui.storeBanner.button.background.hover // Background color for store banner button in hover state
color.coreui.storeBanner.button.icon.default // Icon color for store banner button in default state
color.coreui.storeBanner.button.icon.hover // Icon color for store banner button in hover state
color.coreui.storeBanner.button.text.default // Text color for store banner button in default state
color.coreui.storeBanner.button.text.hover // Text color for store banner button in hover state
color.coreui.storeBanner.header.description // Description text color for store banner header text
color.coreui.storeBanner.header.title // Title text color for store banner header text
color.coreui.storeCard.background.default // Background color for store content card in default state
color.coreui.storeCard.background.hover // Background color for store content card in hover state
color.coreui.storeCard.description.default // Description text color for store content card in default state
color.coreui.storeCard.description.hover // Description text color for store content card in hover state
color.coreui.storeCard.title.default // Title text color for store content card in default state
color.coreui.storeCard.title.hover // Title text color for store content card in hover state
color.coreui.storeFooter.icon // Icon color for store footer
color.coreui.storeFooter.link.default // Link color for store footer in default state
color.coreui.storeFooter.link.hover // Link color for store footer in hover state
color.coreui.storeFooter.tagline // Tagline text color for store footer
color.coreui.storeInput.background.active // Background color for store search input in active state
color.coreui.storeInput.background.default // Background color for store search input in default state
color.coreui.storeInput.background.error // Background color for store search input in error state
color.coreui.storeInput.background.filled // Background color for store search input in filled state
color.coreui.storeInput.background.hover // Background color for store search input in hover state
color.coreui.storeInput.border.active // Border color for store search input in active state
color.coreui.storeInput.border.default // Border color for store search input in default state
color.coreui.storeInput.border.error // Border color for store search input in error state
color.coreui.storeInput.border.focus // Border color for store search input in focused state
color.coreui.storeInput.border.hover // Border color for store search input in hover state
color.coreui.storeInput.icon // Icon color for store search input
color.coreui.storeInput.value.active // Input value text color for store search input in active state
color.coreui.storeInput.value.default // Input value text color for store search input in default state
color.coreui.storeInput.value.error // Input value text color for store search input in error state
color.coreui.storeInput.value.filled // Input value text color for store search input in filled state
color.coreui.storeInput.value.hover // Input value text color for store search input in hover state
color.coreui.storeMenuItem.background.default // Background color for store menu item in default state
color.coreui.storeMenuItem.background.hover // Background color for store menu item in hover state
color.coreui.storeMenuItem.category // Category label color for store menu item
color.coreui.storeMenuItem.text.default // Text color for store menu item in default state
color.coreui.storeMenuItem.text.hover // Text color for store menu item in hover state
color.coreui.storeSidebar.background // Background color for store sidebar
color.coreui.storeSidebar.header // Header text color for store sidebar

Color primitive tokens

Underlying palette primitives used internally by the theming engine. Override these only when you need to change the base color scales.

colorPrimitives.blue.100 // Blue primitive shade 100 used in generated palettes and status colors
colorPrimitives.blue.200 // Blue primitive shade 200 used in generated palettes and status colors
colorPrimitives.blue.300 // Blue primitive shade 300 used in generated palettes and status colors
colorPrimitives.blue.400 // Blue primitive shade 400 used in generated palettes and status colors
colorPrimitives.blue.50 // Blue primitive shade 50 used in generated palettes and status colors
colorPrimitives.blue.500 // Blue primitive shade 500 used in generated palettes and status colors
colorPrimitives.blue.600 // Blue primitive shade 600 used in generated palettes and status colors
colorPrimitives.blue.700 // Blue primitive shade 700 used in generated palettes and status colors
colorPrimitives.blue.800 // Blue primitive shade 800 used in generated palettes and status colors
colorPrimitives.blue.900 // Blue primitive shade 900 used in generated palettes and status colors
colorPrimitives.blue.base // Base blue primitive used to build the blue color scale
colorPrimitives.gray.100 // Gray primitive shade 100 used in generated palettes and status colors
colorPrimitives.gray.200 // Gray primitive shade 200 used in generated palettes and status colors
colorPrimitives.gray.300 // Gray primitive shade 300 used in generated palettes and status colors
colorPrimitives.gray.400 // Gray primitive shade 400 used in generated palettes and status colors
colorPrimitives.gray.50 // Gray primitive shade 50 used in generated palettes and status colors
colorPrimitives.gray.500 // Gray primitive shade 500 used in generated palettes and status colors
colorPrimitives.gray.600 // Gray primitive shade 600 used in generated palettes and status colors
colorPrimitives.gray.700 // Gray primitive shade 700 used in generated palettes and status colors
colorPrimitives.gray.800 // Gray primitive shade 800 used in generated palettes and status colors
colorPrimitives.gray.900 // Gray primitive shade 900 used in generated palettes and status colors
colorPrimitives.gray.base // Base gray primitive used to build the gray color scale
colorPrimitives.green.100 // Green primitive shade 100 used in generated palettes and status colors
colorPrimitives.green.200 // Green primitive shade 200 used in generated palettes and status colors
colorPrimitives.green.300 // Green primitive shade 300 used in generated palettes and status colors
colorPrimitives.green.400 // Green primitive shade 400 used in generated palettes and status colors
colorPrimitives.green.50 // Green primitive shade 50 used in generated palettes and status colors
colorPrimitives.green.500 // Green primitive shade 500 used in generated palettes and status colors
colorPrimitives.green.600 // Green primitive shade 600 used in generated palettes and status colors
colorPrimitives.green.700 // Green primitive shade 700 used in generated palettes and status colors
colorPrimitives.green.800 // Green primitive shade 800 used in generated palettes and status colors
colorPrimitives.green.900 // Green primitive shade 900 used in generated palettes and status colors
colorPrimitives.green.base // Base green primitive used to build the green color scale
colorPrimitives.indigo.100 // Indigo primitive shade 100 used in generated palettes and status colors
colorPrimitives.indigo.200 // Indigo primitive shade 200 used in generated palettes and status colors
colorPrimitives.indigo.300 // Indigo primitive shade 300 used in generated palettes and status colors
colorPrimitives.indigo.400 // Indigo primitive shade 400 used in generated palettes and status colors
colorPrimitives.indigo.50 // Indigo primitive shade 50 used in generated palettes and status colors
colorPrimitives.indigo.500 // Indigo primitive shade 500 used in generated palettes and status colors
colorPrimitives.indigo.600 // Indigo primitive shade 600 used in generated palettes and status colors
colorPrimitives.indigo.700 // Indigo primitive shade 700 used in generated palettes and status colors
colorPrimitives.indigo.800 // Indigo primitive shade 800 used in generated palettes and status colors
colorPrimitives.indigo.900 // Indigo primitive shade 900 used in generated palettes and status colors
colorPrimitives.indigo.base // Base indigo primitive used to build the indigo color scale
colorPrimitives.orange.100 // Orange primitive shade 100 used in generated palettes and status colors
colorPrimitives.orange.200 // Orange primitive shade 200 used in generated palettes and status colors
colorPrimitives.orange.300 // Orange primitive shade 300 used in generated palettes and status colors
colorPrimitives.orange.400 // Orange primitive shade 400 used in generated palettes and status colors
colorPrimitives.orange.50 // Orange primitive shade 50 used in generated palettes and status colors
colorPrimitives.orange.500 // Orange primitive shade 500 used in generated palettes and status colors
colorPrimitives.orange.600 // Orange primitive shade 600 used in generated palettes and status colors
colorPrimitives.orange.700 // Orange primitive shade 700 used in generated palettes and status colors
colorPrimitives.orange.800 // Orange primitive shade 800 used in generated palettes and status colors
colorPrimitives.orange.900 // Orange primitive shade 900 used in generated palettes and status colors
colorPrimitives.orange.base // Base orange primitive used to build the orange color scale
colorPrimitives.pink.100 // Pink primitive shade 100 used in generated palettes and status colors
colorPrimitives.pink.200 // Pink primitive shade 200 used in generated palettes and status colors
colorPrimitives.pink.300 // Pink primitive shade 300 used in generated palettes and status colors
colorPrimitives.pink.400 // Pink primitive shade 400 used in generated palettes and status colors
colorPrimitives.pink.50 // Pink primitive shade 50 used in generated palettes and status colors
colorPrimitives.pink.500 // Pink primitive shade 500 used in generated palettes and status colors
colorPrimitives.pink.600 // Pink primitive shade 600 used in generated palettes and status colors
colorPrimitives.pink.700 // Pink primitive shade 700 used in generated palettes and status colors
colorPrimitives.pink.800 // Pink primitive shade 800 used in generated palettes and status colors
colorPrimitives.pink.900 // Pink primitive shade 900 used in generated palettes and status colors
colorPrimitives.pink.base // Base pink primitive used to build the pink color scale
colorPrimitives.red.100 // Red primitive shade 100 used in generated palettes and status colors
colorPrimitives.red.200 // Red primitive shade 200 used in generated palettes and status colors
colorPrimitives.red.300 // Red primitive shade 300 used in generated palettes and status colors
colorPrimitives.red.400 // Red primitive shade 400 used in generated palettes and status colors
colorPrimitives.red.50 // Red primitive shade 50 used in generated palettes and status colors
colorPrimitives.red.500 // Red primitive shade 500 used in generated palettes and status colors
colorPrimitives.red.600 // Red primitive shade 600 used in generated palettes and status colors
colorPrimitives.red.700 // Red primitive shade 700 used in generated palettes and status colors
colorPrimitives.red.800 // Red primitive shade 800 used in generated palettes and status colors
colorPrimitives.red.900 // Red primitive shade 900 used in generated palettes and status colors
colorPrimitives.red.base // Base red primitive used to build the red color scale
colorPrimitives.teal.100 // Teal primitive shade 100 used in generated palettes and status colors
colorPrimitives.teal.200 // Teal primitive shade 200 used in generated palettes and status colors
colorPrimitives.teal.300 // Teal primitive shade 300 used in generated palettes and status colors
colorPrimitives.teal.400 // Teal primitive shade 400 used in generated palettes and status colors
colorPrimitives.teal.50 // Teal primitive shade 50 used in generated palettes and status colors
colorPrimitives.teal.500 // Teal primitive shade 500 used in generated palettes and status colors
colorPrimitives.teal.600 // Teal primitive shade 600 used in generated palettes and status colors
colorPrimitives.teal.700 // Teal primitive shade 700 used in generated palettes and status colors
colorPrimitives.teal.800 // Teal primitive shade 800 used in generated palettes and status colors
colorPrimitives.teal.900 // Teal primitive shade 900 used in generated palettes and status colors
colorPrimitives.teal.base // Base teal primitive used to build the teal color scale
colorPrimitives.yellow.100 // Yellow primitive shade 100 used in generated palettes and status colors
colorPrimitives.yellow.200 // Yellow primitive shade 200 used in generated palettes and status colors
colorPrimitives.yellow.300 // Yellow primitive shade 300 used in generated palettes and status colors
colorPrimitives.yellow.400 // Yellow primitive shade 400 used in generated palettes and status colors
colorPrimitives.yellow.50 // Yellow primitive shade 50 used in generated palettes and status colors
colorPrimitives.yellow.500 // Yellow primitive shade 500 used in generated palettes and status colors
colorPrimitives.yellow.600 // Yellow primitive shade 600 used in generated palettes and status colors
colorPrimitives.yellow.700 // Yellow primitive shade 700 used in generated palettes and status colors
colorPrimitives.yellow.800 // Yellow primitive shade 800 used in generated palettes and status colors
colorPrimitives.yellow.900 // Yellow primitive shade 900 used in generated palettes and status colors
colorPrimitives.yellow.base // Base yellow primitive used to build the yellow color scale

Advantage over the previous version of theming​

Light and dark modes​

Customization approach​

Simple mode​

Advanced mode​

Comparison at a glance​

What you can customize with theming​

What you cannot customize with theming​

Recommendations​

Setting up your theme​

Upgrading from a previous theme​

Example code​

Token hierarchy​

Foundation layer (the inputs)​

Generation layer (the math)​

Semantic layer (broad sweeps)​

Component layer (granular control)​

How overrides cascade​

Tokens​

Seed tokens​

Brand tokens (generated)​

Icon override tokens​

Role override tokens​

Generated color tokens​

Shared override tokens​

Browser override tokens​

Home override tokens​

Store override tokens​

Color primitive tokens​

Table of Contents

Advantage over the previous version of theming

Light and dark modes

Customization approach

Simple mode

Advanced mode

Comparison at a glance

What you can customize with theming

What you cannot customize with theming

Recommendations

Setting up your theme

Upgrading from a previous theme

Example code

Token hierarchy

Foundation layer (the inputs)

Generation layer (the math)

Semantic layer (broad sweeps)

Component layer (granular control)

How overrides cascade

Tokens

Seed tokens

Brand tokens (generated)

Icon override tokens

Role override tokens

Generated color tokens

Shared override tokens

Browser override tokens

Home override tokens

Store override tokens

Color primitive tokens