Token	Value	Description	Properties
background	{white.default}#ffffff	Default page background color. Use as the base surface for the entire application or page.	background
background-active	{gray.50} × 0.5αrgba(141, 141, 141, 0.5)	Background color for active/pressed state. Use when user clicks or presses interactive elements.	background
background-selected	{gray.50} × 0.2αrgba(141, 141, 141, 0.2)	Background color for selected state. Use to highlight currently selected items or active states.	background
background-selected-hover	{gray.50} × 0.32αrgba(141, 141, 141, 0.32)	Hover state for selected backgrounds	background
background-hover	{gray.50} × 0.12αrgba(141, 141, 141, 0.12)	Background color for hover state. Use when user hovers over interactive elements to provide visual feedback.	background
background-brand	{blue.60}#0f62fe	Brand color for backgrounds. Use for branded sections, headers, or promotional areas.	background
background-inverse	{gray.80}#393939	Inverse background color for dark UI elements. Use for tooltips, inverse buttons, or dark-themed sections.	background
background-inverse-hover	{gray.80Hover}#474747	Hover state for inverse backgrounds	background
layer-01	{gray.10}#f4f4f4	01. Token for 01 in the design system.	background
layer-active-01	{gray.30}#c6c6c6	01. Token for 01 in the design system.	background
layer-background-01	{white.default}#ffffff	01. Token for 01 in the design system.	background
layer-hover-01	{gray.10Hover}#e8e8e8	01. Token for 01 in the design system.	background
layer-selected-01	{gray.20}#e0e0e0	01. Token for 01 in the design system.	background
layer-selected-hover-01	{gray.20Hover}#d1d1d1	01. Token for 01 in the design system.	background
layer-02	{white.default}#ffffff	02. Token for 02 in the design system.	background
layer-active-02	{gray.30}#c6c6c6	02. Token for 02 in the design system.	background
layer-background-02	{gray.10}#f4f4f4	02. Token for 02 in the design system.	background
layer-hover-02	{gray.10Hover}#e8e8e8	02. Token for 02 in the design system.	background
layer-selected-02	{gray.20}#e0e0e0	02. Token for 02 in the design system.	background
layer-selected-hover-02	{gray.20Hover}#d1d1d1	02. Token for 02 in the design system.	background
layer-03	{gray.10}#f4f4f4	03. Token for 03 in the design system.	background
layer-active-03	{gray.30}#c6c6c6	03. Token for 03 in the design system.	background
layer-background-03	{white.default}#ffffff	03. Token for 03 in the design system.	background
layer-hover-03	{gray.10Hover}#e8e8e8	03. Token for 03 in the design system.	background
layer-selected-03	{gray.20}#e0e0e0	03. Token for 03 in the design system.	background
layer-selected-hover-03	{gray.20Hover}#d1d1d1	03. Token for 03 in the design system.	background
layer-selected-inverse	{gray.100}#161616	Inverse. Token for inverse in the design system.	background
layer-selected-disabled	{gray.50}#8d8d8d	Disabled. Token for disabled in the design system.	background
layer-accent-01	{gray.20}#e0e0e0	01. Token for 01 in the design system.	background
layer-accent-active-01	{gray.40}#a8a8a8	01. Token for 01 in the design system.	background
layer-accent-hover-01	{gray.20Hover}#d1d1d1	01. Token for 01 in the design system.	background
layer-accent-02	{gray.20}#e0e0e0	02. Token for 02 in the design system.	background
layer-accent-active-02	{gray.40}#a8a8a8	02. Token for 02 in the design system.	background
layer-accent-hover-02	{gray.20Hover}#d1d1d1	02. Token for 02 in the design system.	background
layer-accent-03	{gray.20}#e0e0e0	03. Token for 03 in the design system.	background
layer-accent-active-03	{gray.40}#a8a8a8	03. Token for 03 in the design system.	background
layer-accent-hover-03	{gray.20Hover}#d1d1d1	03. Token for 03 in the design system.	background
field-01	{gray.10}#f4f4f4	Background color for form fields on layer 01. Use for input fields, text areas, and selects on first layer.	background
field-hover-01	{gray.10Hover}#e8e8e8	Hover background for fields on layer 01. Use when user hovers over input fields on first layer.	background
field-02	{white.default}#ffffff	Background color for form fields on layer 02. Use for input fields on second layer surfaces.	background
field-hover-02	{gray.10Hover}#e8e8e8	Hover background for fields on layer 02. Use when user hovers over input fields on second layer.	background
field-03	{gray.10}#f4f4f4	Background color for form fields on layer 03. Use for input fields on third layer surfaces.	background
field-hover-03	{gray.10Hover}#e8e8e8	Hover background for fields on layer 03. Use when user hovers over input fields on third layer.	background
interactive	{blue.60}#0f62fe	Interactive element color. Use for clickable elements, links, and actionable items.	background text
border-subtle-00	{gray.20}#e0e0e0	Subtle border color for base layer. Use for low-contrast borders on page background.	border
border-subtle-01	{gray.30}#c6c6c6	Subtle border color for layer 01. Use for low-contrast borders on first layer surfaces.	border
border-subtle-selected-01	{gray.30}#c6c6c6	Subtle border for selected items on layer 01. Use for low-contrast borders on selected elements.	border
border-subtle-02	{gray.20}#e0e0e0	Subtle border color for layer 02. Use for low-contrast borders on second layer surfaces.	border
border-subtle-selected-02	{gray.30}#c6c6c6	Subtle border for selected items on layer 02. Use for low-contrast borders on selected elements.	border
border-subtle-03	{gray.30}#c6c6c6	Subtle border color for layer 03. Use for low-contrast borders on third layer surfaces.	border
border-subtle-selected-03	{gray.30}#c6c6c6	Subtle border for selected items on layer 03. Use for low-contrast borders on selected elements.	border
border-strong-01	{gray.50}#8d8d8d	Strong border color for layer 01. Use for high-contrast borders that need clear definition on first layer.	border
border-strong-02	{gray.50}#8d8d8d	Strong border color for layer 02. Use for high-contrast borders on second layer surfaces.	border
border-strong-03	{gray.50}#8d8d8d	Strong border color for layer 03. Use for high-contrast borders on third layer surfaces.	border
border-tile-01	{gray.30}#c6c6c6	Border color for tiles on layer 01. Use for card or tile borders on first layer.	border
border-tile-02	{gray.40}#a8a8a8	Border color for tiles on layer 02. Use for card or tile borders on second layer.	border
border-tile-03	{gray.30}#c6c6c6	Border color for tiles on layer 03. Use for card or tile borders on third layer.	border
border-inverse	{gray.100}#161616	Border color for inverse/dark UI elements. Use for borders on dark backgrounds or inverse components.	border
border-interactive	{blue.60}#0f62fe	Border color for interactive elements. Use for focused inputs, active selections, or clickable borders.	border
border-disabled	{gray.30}#c6c6c6	Border color for disabled elements. Use when borders need to indicate unavailable or inactive state.	border
text-primary	{gray.100}#161616	Primary. Token for primary in the design system.	text
text-secondary	{gray.70}#525252	Secondary. Token for secondary in the design system.	text
text-placeholder	{gray.100} × 0.4αrgba(22, 22, 22, 0.4)	Placeholder. Token for placeholder in the design system.	text
text-helper	{gray.60}#6f6f6f	Helper. Token for helper in the design system.	text
text-error	{red.60}#da1e28	Error. Token for error in the design system.	text
text-inverse	{white.default}#ffffff	Inverse. Token for inverse in the design system.	text
text-on-color	{white.default}#ffffff	Color. Token for color in the design system.	text
text-on-color-disabled	{gray.50}#8d8d8d	Disabled. Token for disabled in the design system.	text
text-disabled	{gray.100} × 0.25αrgba(22, 22, 22, 0.25)	Disabled. Token for disabled in the design system.	text
link-primary	{blue.60}#0f62fe	Primary. Token for primary in the design system.	text
link-primary-hover	{blue.70}#0043ce	Hover. Token for hover in the design system.	text
link-secondary	{blue.70}#0043ce	Secondary. Token for secondary in the design system.	text
link-inverse-visited	{purple.40}#be95ff	Visited. Token for visited in the design system.	text
link-visited	{purple.60}#8a3ffc	Visited. Token for visited in the design system.	text
link-inverse	{blue.40}#78a9ff	Inverse. Token for inverse in the design system.	text
link-inverse-active	{gray.10}#f4f4f4	Active. Token for active in the design system.	text
link-inverse-hover	{blue.30}#a6c8ff	Hover. Token for hover in the design system.	text
icon-primary	{gray.100}#161616	Primary icon color. Use for main icons with highest visual priority and emphasis.	background fill stroke
icon-secondary	{gray.70}#525252	Secondary. Token for secondary in the design system.	background fill stroke
icon-inverse	{white.default}#ffffff	Icon color for inverse/dark backgrounds. Use for icons on dark surfaces or inverse components.	background fill stroke
icon-on-color	{white.default}#ffffff	Icon color for colored backgrounds. Use for icons on brand colors, buttons, or colored surfaces.	background fill stroke
icon-on-color-disabled	{gray.50}#8d8d8d	Disabled icon color on colored backgrounds. Use when icons on colored surfaces are inactive.	background fill stroke
icon-disabled	{gray.100} × 0.25αrgba(22, 22, 22, 0.25)	Icon color for disabled state. Use when icons need to indicate unavailable or inactive functionality.	background fill stroke
icon-interactive	{blue.60}#0f62fe	Icon color for interactive elements. Use for clickable icons, buttons, and actionable items.	background fill stroke
support-error	{red.60}#da1e28	Error. Token for error in the design system.	background fill stroke
support-success	{green.50}#24a148	Success. Token for success in the design system.	background fill stroke
support-warning	{yellow.30}#f1c21b	Warning. Token for warning in the design system.	background fill stroke
support-info	{blue.70}#0043ce	Info. Token for info in the design system.	background fill stroke
support-error-inverse	{red.50}#fa4d56	Inverse. Token for inverse in the design system.	background fill stroke
support-success-inverse	{green.40}#42be65	Inverse. Token for inverse in the design system.	background fill stroke
support-warning-inverse	{yellow.30}#f1c21b	Inverse. Token for inverse in the design system.	background fill stroke
support-info-inverse	{blue.50}#4589ff	Inverse. Token for inverse in the design system.	background fill stroke
support-caution-major	{orange.40}#ff832b	Major. Token for major in the design system.	background fill stroke
support-caution-minor	{yellow.30}#f1c21b	Minor. Token for minor in the design system.	background fill stroke
support-caution-undefined	{purple.60}#8a3ffc	Undefined. Token for undefined in the design system.	background fill stroke
syntax-comment	{green.60}#198038	Syntax highlighting color for comments. Use for all comment types in code editors.	text
syntax-line-comment	{green.60}#198038	Syntax highlighting color for line comments. Use for single-line comments in code.	text
syntax-block-comment	{green.60}#198038	Syntax highlighting color for block comments. Use for multi-line comment blocks.	text
syntax-doc-comment	{green.60}#198038	Syntax highlighting color for documentation comments. Use for JSDoc, docstrings, etc.	text
syntax-doc-string	{gray.100}#161616	Syntax highlighting color for documentation strings. Use for docstring literals.	text
syntax-keyword	{blue.60}#0f62fe	Syntax highlighting color for keywords. Use for language keywords like if, for, class.	text
syntax-operator-keyword	{blue.60}#0f62fe	Syntax highlighting color for operator keywords. Use for keywords like and, or, not.	text
syntax-control-keyword	{purple.70}#6929c4	Syntax highlighting color for control flow keywords. Use for if, else, while, return.	text
syntax-definition-keyword	{cyan.70}#00539a	Syntax highlighting color for definition keywords. Use for def, function, class declarations.	text
syntax-module-keyword	{purple.70}#6929c4	Syntax highlighting color for module keywords. Use for import, export, require.	text
syntax-variable	{blue.60}#0f62fe	Syntax highlighting color for variables. Use for variable names and identifiers.	text
syntax-name	{blue.60}#0f62fe	Syntax name	text
syntax-variable-name	{blue.60}#0f62fe	Syntax variable name	text
syntax-label-name	{blue.60}#0f62fe	Syntax label name	text
syntax-attribute	{cyan.70}#00539a	Syntax attribute	text
syntax-attribute-name	{cyan.70}#00539a	Syntax attribute name	text
syntax-property-name	{cyan.70}#00539a	Syntax property name	text
syntax-tag	{teal.60}#007d79	Syntax tag	text
syntax-tag-name	{teal.60}#007d79	Syntax tag name	text
syntax-type	{teal.60}#007d79	Syntax type	text
syntax-type-name	{teal.60}#007d79	Syntax type name	text
syntax-class-name	{teal.60}#007d79	Syntax class name	text
syntax-namespace	{teal.60}#007d79	Syntax namespace	text
syntax-macro-name	{gray.100}#161616	Syntax macro name	text
syntax-atom	{gray.100}#161616	Syntax atom	text
syntax-literal	{gray.100}#161616	Syntax literal	text
syntax-bool	{gray.100}#161616	Syntax bool	text
syntax-null	{gray.100}#161616	Syntax null	text
syntax-self	{teal.60}#007d79	Syntax self	text
syntax-number	{green.60}#198038	Syntax number	text
syntax-integer	{green.60}#198038	Syntax integer	text
syntax-float	{green.60}#198038	Syntax float	text
syntax-unit	{green.60}#198038	Syntax unit	text
syntax-string	{gray.100}#161616	Syntax highlighting color for strings. Use for string literals in code.	text
syntax-character	{gray.100}#161616	Syntax character	text
syntax-attribute-value	{gray.100}#161616	Syntax attribute value	text
syntax-special-string	{purple.60}#8a3ffc	Syntax special string	text
syntax-regexp	{purple.70}#6929c4	Syntax regexp	text
syntax-escape	{coolGray.80}#343a3f	Syntax escape	text
syntax-url	{coolGray.80}#343a3f	Syntax url	text
syntax-color	{gray.100}#161616	Syntax color	text
syntax-operator	{coolGray.80}#343a3f	Syntax operator	text
syntax-deref-operator	{coolGray.80}#343a3f	Syntax deref operator	text
syntax-arithmetic-operator	{coolGray.80}#343a3f	Syntax arithmetic operator	text
syntax-logic-operator	{coolGray.80}#343a3f	Syntax logic operator	text
syntax-bitwise-operator	{coolGray.80}#343a3f	Syntax bitwise operator	text
syntax-compare-operator	{coolGray.80}#343a3f	Syntax compare operator	text
syntax-update-operator	{coolGray.80}#343a3f	Syntax update operator	text
syntax-definition-operator	{cyan.70}#00539a	Syntax definition operator	text
syntax-type-operator	{teal.60}#007d79	Syntax type operator	text
syntax-control-operator	{purple.70}#6929c4	Syntax control operator	text
syntax-modifier	{blue.60}#0f62fe	Syntax modifier	text
syntax-punctuation	{coolGray.80}#343a3f	Syntax punctuation	text
syntax-separator	{coolGray.80}#343a3f	Syntax separator	text
syntax-bracket	{coolGray.80}#343a3f	Syntax bracket	text
syntax-angle-bracket	{coolGray.60}#697077	Syntax angle bracket	text
syntax-square-bracket	{coolGray.80}#343a3f	Syntax square bracket	text
syntax-paren	{coolGray.80}#343a3f	Syntax paren	text
syntax-brace	{coolGray.80}#343a3f	Syntax brace	text
syntax-content	{gray.100}#161616	Syntax content	text
syntax-heading	{cyan.70}#00539a	Syntax heading	text
syntax-heading-1	{cyan.70}#00539a	Syntax heading 1	text
syntax-heading-2	{cyan.70}#00539a	Syntax heading 2	text
syntax-heading-3	{cyan.70}#00539a	Syntax heading 3	text
syntax-heading-4	{cyan.70}#00539a	Syntax heading 4	text
syntax-heading-5	{cyan.70}#00539a	Syntax heading 5	text
syntax-heading-6	{cyan.70}#00539a	Syntax heading 6	text
syntax-content-separator	{coolGray.80}#343a3f	Syntax content separator	text
syntax-list	{gray.100}#161616	Syntax list	text
syntax-quote	{green.60}#198038	Syntax quote	text
syntax-emphasis	{gray.100}#161616	Syntax emphasis	text
syntax-strong	{gray.100}#161616	Syntax strong	text
syntax-monospace	{gray.100}#161616	Syntax monospace	text
syntax-link	{blue.60}#0f62fe	Syntax link	text
syntax-strikethrough	{gray.100}#161616	Syntax strikethrough	text
syntax-invalid	{red.60}#da1e28	Syntax invalid	text
syntax-meta	{green.60}#198038	Syntax meta	text
syntax-document-meta	{green.60}#198038	Syntax document meta	text
syntax-annotation	{teal.60}#007d79	Syntax annotation	text
syntax-processing-instruction	{gray.100}#161616	Syntax processing instruction	text
syntax-definition	{cyan.70}#00539a	Syntax definition	text
syntax-constant	{blue.60}#0f62fe	Syntax constant	text
syntax-function	{yellow.60}#8e6a00	Syntax function	text
syntax-standard	{blue.60}#0f62fe	Syntax standard	text
syntax-local	{blue.60}#0f62fe	Syntax local	text
syntax-special	{blue.60}#0f62fe	Syntax special	text
syntax-inserted	{green.20}#a7f0ba	Syntax inserted	text
syntax-deleted	{red.20}#ffd7d9	Syntax deleted	text
ai-popover-background	{white.default}#ffffff	AI popover background	background
ai-popover-shadow-outer-01	{blue.70} × 0.06αrgba(0, 67, 206, 0.06)	AI popover outer shadow 01	background
ai-popover-shadow-outer-02	{black.default} × 0.04αrgba(0, 0, 0, 0.04)	AI popover outer shadow 02	background
ai-inner-shadow	{blue.50} × 0.1αrgba(69, 137, 255, 0.1)	AI inner shadow	background
ai-aura-start-sm	{blue.50} × 0.16αrgba(69, 137, 255, 0.16)	AI aura start small	background
ai-aura-start	{blue.50} × 0.1αrgba(69, 137, 255, 0.1)	AI aura start	background
ai-aura-end	{white.default} × 0αrgba(255, 255, 255, 0)	AI aura end	background
ai-aura-hover-background	{blue.10}#edf5ff	AI aura hover background	background
ai-aura-hover-start	{blue.50} × 0.32αrgba(69, 137, 255, 0.32)	AI aura hover start	background
ai-aura-hover-end	{white.default} × 0αrgba(255, 255, 255, 0)	AI aura hover end	background
ai-border-strong	{blue.50}#4589ff	AI strong border	background
ai-border-start	{blue.30} × 0.64αrgba(166, 200, 255, 0.64)	AI border start	background
ai-border-end	{blue.40}#78a9ff	AI border end	background
ai-drop-shadow	{blue.60} × 0.1αrgba(15, 98, 254, 0.1)	AI drop shadow	background
ai-skeleton-background	{blue.20}#d0e2ff	AI skeleton background	background
ai-skeleton-element-background	{blue.50}#4589ff	AI skeleton element background	background
ai-overlay	{blue.100} × 0.5αrgba(0, 17, 65, 0.5)	AI modal overlay	background
ai-popover-caret-center	{"colorSpace":"srgb","components":[0.627451,0.764706,1],"hex":"#a0c3ff"}#a0c3ff	AI popover caret center	background
ai-popover-caret-bottom	{blue.40}#78a9ff	AI popover caret bottom	background
ai-popover-caret-bottom-background	{"colorSpace":"srgb","components":[0.917647,0.945098,1],"hex":"#eaf1ff"}#eaf1ff	AI popover caret bottom background	background
ai-popover-caret-bottom-background-actions	{"colorSpace":"srgb","components":[0.913725,0.937255,0.980392],"hex":"#e9effa"}#e9effa	AI popover caret bottom background for actions	background
chat-prompt-background	{white.default}#ffffff	Chat prompt background	background
chat-prompt-border-start	{gray.10}#f4f4f4	Chat prompt border start	background
chat-prompt-border-end	{gray.10} × 0αrgba(244, 244, 244, 0)	Chat prompt border end	background
chat-prompt-text	{gray.100}#161616	Chat prompt text	background
chat-bubble-user	{gray.20}#e0e0e0	Chat bubble user background	background
chat-bubble-user-text	{gray.100}#161616	Chat bubble user text	background
chat-bubble-agent	{white.default}#ffffff	Chat bubble agent background	background
chat-bubble-agent-text	{gray.100}#161616	Chat bubble agent text	background
chat-bubble-border	{gray.20}#e0e0e0	Chat bubble border	background
chat-avatar-bot	{gray.60}#6f6f6f	Chat avatar bot	background
chat-avatar-agent	{gray.80}#393939	Chat avatar agent	background
chat-avatar-user	{blue.60}#0f62fe	Chat avatar user	background
chat-shell-background	{white.default}#ffffff	Chat shell background	background
chat-header-background	{white.default}#ffffff	Chat header background	background
chat-header-text	{gray.100}#161616	Chat header text	background
chat-button	{blue.60}#0f62fe	Chat button color	background
chat-button-hover	{gray.50} × 0.12αrgba(141, 141, 141, 0.12)	Chat button hover background	background
chat-button-text-hover	{blue.70}#0043ce	Chat button text hover	background
chat-button-active	{gray.50} × 0.5αrgba(141, 141, 141, 0.5)	Chat button active background	background
chat-button-selected	{gray.50} × 0.2αrgba(141, 141, 141, 0.2)	Chat button selected background	background
chat-button-text-selected	{gray.70}#525252	Chat button text selected	background
highlight	{blue.20}#d0e2ff	Highlight color for selected text or emphasized content. Use for text selection or search result highlighting.	—
overlay	{black.default} × 0.6αrgba(0, 0, 0, 0.6)	Overlay color for modal backgrounds. Use to dim content behind dialogs and modals.	background
color-scheme	light	—	color-scheme
toggle-off	{gray.50}#8d8d8d	Off. Token for off in the design system.	—
shadow	{black.default} × 0.3αrgba(0, 0, 0, 0.3)	Shadow color for elevation. Provides depth and layering for elevated components.	—
focus	{blue.60}#0f62fe	Focus indicator color. Use for focus rings and outlines on interactive elements for keyboard navigation.	border
focus-inset	{white.default}#ffffff	Inset focus indicator color. Use for inner focus rings on elements with colored backgrounds.	border
focus-inverse	{white.default}#ffffff	Focus indicator for inverse/dark elements. Use for focus rings on dark backgrounds.	border
skeleton-background	{gray.10Hover}#e8e8e8	Background. Token for background in the design system.	background
skeleton-element	{gray.30}#c6c6c6	Element. Token for element in the design system.	background
button-separator	{gray.20}#e0e0e0	Border color for button separators in button groups or split buttons. Use to visually divide adjacent buttons while maintaining their connection.
button-primary	{blue.60}#0f62fe	Background color for primary buttons in default state. Use for the main call-to-action on a page or in a workflow step.
button-secondary	{gray.80}#393939	Background color for secondary buttons in default state. Use for secondary actions that support the primary action or provide alternative paths.
button-tertiary	{blue.60}#0f62fe	Text and icon color for tertiary buttons in default state. Use for low-emphasis actions or when multiple actions need equal visual weight.
button-danger-primary	{red.60}#da1e28	Background color for primary danger buttons in default state. Use for destructive actions like delete, remove, or cancel that require high emphasis.
button-danger-secondary	{red.60}#da1e28	Border and text color for secondary danger buttons. Use for destructive actions that need less emphasis than primary danger buttons.
button-danger-active	{red.80}#750e13	Background color for danger buttons in active/pressed state. Use when user clicks or presses a destructive action button.
button-primary-active	{blue.80}#002d9c	Background color for primary buttons in active/pressed state. Use when user clicks or presses the primary action button.
button-secondary-active	{gray.60}#6f6f6f	Background color for secondary buttons in active/pressed state. Use when user clicks or presses a secondary action button.
button-tertiary-active	{blue.80}#002d9c	Text and icon color for tertiary buttons in active/pressed state. Use when user clicks or presses a tertiary action button.
button-danger-hover	#b81921#b81921	Background color for danger buttons on hover. Use when user hovers over a destructive action button to provide visual feedback.
button-primary-hover	{blue.60Hover}#0050e6	Background color for primary buttons on hover. Use when user hovers over the primary action button to provide visual feedback.
button-secondary-hover	{gray.80Hover}#474747	Background color for secondary buttons on hover. Use when user hovers over a secondary action button to provide visual feedback.
button-tertiary-hover	{blue.60Hover}#0050e6	Background color for tertiary buttons on hover. Use when user hovers over a tertiary action button to provide subtle visual feedback.
button-disabled	{gray.30}#c6c6c6	Background color for disabled buttons across all variants. Use when a button action is temporarily unavailable or not applicable in the current context.
content-switcher-selected	{white.default}#ffffff	Background color for the selected content switcher option. Use to highlight the currently active view or tab.
content-switcher-background	{gray.20}#e0e0e0	Background color for the content switcher container. Provides the base surface for unselected switcher options.
content-switcher-background-hover	{gray.20Hover}#d1d1d1	Background color for content switcher options on hover. Use to provide visual feedback when hovering over unselected options.
notification-background-error	{red.10}#fff1f1	Background color for error notifications. Use to alert users of critical issues, failures, or actions that require immediate attention.
notification-background-success	{green.10}#defbe6	Background color for success notifications. Use to confirm successful actions, completed processes, or positive outcomes.
notification-background-info	{blue.10}#edf5ff	Background color for informational notifications. Use to provide helpful context, tips, or non-critical updates to users.
notification-background-warning	{yellow.10}#fcf4d6	Background color for warning notifications. Use to alert users of potential issues, cautions, or actions that need attention but aren't critical.
notification-action-hover	{white.default}#ffffff	Background color for notification action buttons on hover. Use for interactive elements within light-themed notifications.
notification-action-tertiary-inverse	{white.default}#ffffff	Background color for tertiary action buttons in inverse (dark) notifications. Use for low-emphasis actions in dark notification variants.
notification-action-tertiary-inverse-active	{gray.30}#c6c6c6	Background color for tertiary action buttons in active/pressed state within inverse notifications. Use when user clicks action in dark notifications.
notification-action-tertiary-inverse-hover	{gray.10}#f4f4f4	Background color for tertiary action buttons on hover within inverse notifications. Use to provide feedback in dark notification variants.
notification-action-tertiary-inverse-text	{gray.100}#161616	Text color for tertiary action buttons in inverse notifications. Ensures readable contrast for action text in dark notification variants.
notification-action-tertiary-inverse-text-on-color-disabled	{white.default} × 0.25αrgba(255, 255, 255, 0.25)	Text color for disabled tertiary action buttons in inverse notifications. Use when actions are temporarily unavailable in dark notifications.
status-red	{red.60}#da1e28	Color for red status indicators. Use for error states, failed items, critical issues, or stopped/inactive status.
status-orange	{orange.40}#ff832b	Color for orange status indicators. Use for warning states, items needing attention, or moderate priority issues.
status-orange-outline	{orange.60}#ba4e00	Outline/border color for orange status indicators in light themes. Provides visual definition for outlined warning status variants.
status-yellow	{yellow.30}#f1c21b	Color for yellow status indicators. Use for caution states, pending items, or situations requiring user awareness.
status-yellow-outline	{yellow.60}#8e6a00	Outline/border color for yellow status indicators in light themes. Provides visual definition for outlined caution status variants.
status-purple	{purple.60}#8a3ffc	Color for purple status indicators. Use for special states, premium features, or custom priority levels.
status-green	{green.50}#24a148	Color for green status indicators. Use for success states, completed items, active/running status, or positive conditions.
status-blue	{blue.70}#0043ce	Color for blue status indicators. Use for informational states, in-progress items, or neutral status without specific semantic meaning.
status-gray	{gray.60}#6f6f6f	Color for gray status indicators. Use for inactive, disabled, or neutral states that don't require color semantics.
tag-background-red	{red.20}#ffd7d9	Background color for red tags. Use for error states, critical issues, or urgent/high-priority items.
tag-color-red	{red.70}#a2191f	Text color for red tags. Ensures readable contrast against red tag backgrounds.
tag-hover-red	{red.20Hover}#ffc2c5	Background color for red tags on hover. Use when red tags are interactive or dismissible.
tag-background-magenta	{magenta.20}#ffd6e8	Background color for magenta tags. Use for creative, design-related, or special category tags.
tag-color-magenta	{magenta.70}#9f1853	Text color for magenta tags. Ensures readable contrast against magenta tag backgrounds.
tag-hover-magenta	{magenta.20Hover}#ffbdda	Background color for magenta tags on hover. Use when magenta tags are interactive or dismissible.
tag-background-purple	{purple.20}#e8daff	Background color for purple tags. Use for premium features, special status, or priority indicators.
tag-color-purple	{purple.70}#6929c4	Text color for purple tags. Ensures readable contrast against purple tag backgrounds.
tag-hover-purple	{purple.20Hover}#dcc7ff	Background color for purple tags on hover. Use when purple tags are interactive or dismissible.
tag-background-blue	{blue.20}#d0e2ff	Background color for blue tags. Use for informational tags or to categorize content with blue semantic meaning.
tag-color-blue	{blue.70}#0043ce	Text color for blue tags. Ensures readable contrast against blue tag backgrounds.
tag-hover-blue	{blue.20Hover}#b8d3ff	Background color for blue tags on hover. Use when blue tags are interactive or dismissible.
tag-background-cyan	{cyan.20}#bae6ff	Background color for cyan tags. Use for tags related to data, analytics, or technical information.
tag-color-cyan	{cyan.70}#00539a	Text color for cyan tags. Ensures readable contrast against cyan tag backgrounds.
tag-hover-cyan	{cyan.20Hover}#99daff	Background color for cyan tags on hover. Use when cyan tags are interactive or dismissible.
tag-background-teal	{teal.20}#9ef0f0	Background color for teal tags. Use for tags related to support, help, or secondary informational content.
tag-color-teal	{teal.70}#005d5d	Text color for teal tags. Ensures readable contrast against teal tag backgrounds.
tag-hover-teal	{teal.20Hover}#57e5e5	Background color for teal tags on hover. Use when teal tags are interactive or dismissible.
tag-background-green	{green.20}#a7f0ba	Background color for green tags. Use for success states, positive indicators, or approved/active status.
tag-color-green	{green.70}#0e6027	Text color for green tags. Ensures readable contrast against green tag backgrounds.
tag-hover-green	{green.20Hover}#74e792	Background color for green tags on hover. Use when green tags are interactive or dismissible.
tag-background-gray	{gray.20}#e0e0e0	Background color for gray tags. Use for default or neutral tags without specific semantic meaning.
tag-color-gray	{gray.100}#161616	Text color for gray tags. Ensures readable contrast against gray tag backgrounds.
tag-hover-gray	{gray.20Hover}#d1d1d1	Background color for gray tags on hover. Use when gray tags are interactive or dismissible.
tag-border-red	{red.40}#ff8389	Border color for red tags. Provides visual definition and contrast for red tag variants.
tag-border-blue	{blue.40}#78a9ff	Border color for blue tags. Provides visual definition and contrast for blue tag variants.
tag-border-cyan	{cyan.40}#33b1ff	Border color for cyan tags. Provides visual definition and contrast for cyan tag variants.
tag-border-teal	{teal.40}#08bdba	Border color for teal tags. Provides visual definition and contrast for teal tag variants.
tag-border-green	{green.40}#42be65	Border color for green tags. Provides visual definition and contrast for green tag variants.
tag-border-magenta	{magenta.40}#ff7eb6	Border color for magenta tags. Provides visual definition and contrast for magenta tag variants.
tag-border-purple	{purple.40}#be95ff	Border color for purple tags. Provides visual definition and contrast for purple tag variants.
tag-border-gray	{gray.40}#a8a8a8	Border color for gray tags. Provides visual definition and contrast for gray tag variants.
tag-border-cool-gray	{coolGray.40}#a2a9b0	Border color for cool gray tags. Provides visual definition and contrast for cool gray tag variants.
tag-border-warm-gray	{warmGray.40}#ada8a8	Border color for warm gray tags. Provides visual definition and contrast for warm gray tag variants.
tag-background-cool-gray	{coolGray.20}#dde1e6	Background color for cool gray tags. Use for neutral categorization or when color semantics are not needed.
tag-color-cool-gray	{coolGray.100}#121619	Text color for cool gray tags. Ensures readable contrast against cool gray tag backgrounds.
tag-hover-cool-gray	{coolGray.20Hover}#cdd3da	Background color for cool gray tags on hover. Use when cool gray tags are interactive or dismissible.
tag-background-warm-gray	{warmGray.20}#e5e0df	Background color for warm gray tags. Use for neutral categorization with a warmer tone than cool gray.
tag-color-warm-gray	{warmGray.100}#171414	Text color for warm gray tags. Ensures readable contrast against warm gray tag backgrounds.
tag-hover-warm-gray	{warmGray.20Hover}#d8d0cf	Background color for warm gray tags on hover. Use when warm gray tags are interactive or dismissible.