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	{"value":"{gray.50}","alpha":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	{"value":"{gray.50}","alpha":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	{"value":"{gray.50}","alpha":0.32}rgba(141, 141, 141, 0.32)	Hover state for selected backgrounds. Use when user hovers over already-selected items.	background
background-hover	{"value":"{gray.50}","alpha":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. Use when user hovers over dark UI elements.	background
layer-01	{gray.10}#f4f4f4	Primary layer background	background
layer-active-01	{gray.30}#c6c6c6	Active state for layer 01	background
layer-background-01	{white.default}#ffffff	Background behind layer 01	background
layer-hover-01	{gray.10Hover}#e8e8e8	Hover state for layer 01	background
layer-selected-01	{gray.20}#e0e0e0	Selected state for layer 01	background
layer-selected-hover-01	{gray.20Hover}#d1d1d1	Hover state for selected layer 01	background
layer-02	{white.default}#ffffff	Secondary layer background	background
layer-active-02	{gray.30}#c6c6c6	Active state for layer 02	background
layer-background-02	{gray.10}#f4f4f4	Background behind layer 02	background
layer-hover-02	{gray.10Hover}#e8e8e8	Hover state for layer 02	background
layer-selected-02	{gray.20}#e0e0e0	Selected state for layer 02	background
layer-selected-hover-02	{gray.20Hover}#d1d1d1	Hover state for selected layer 02	background
layer-03	{gray.10}#f4f4f4	Tertiary layer background	background
layer-active-03	{gray.30}#c6c6c6	Active state for layer 03	background
layer-background-03	{white.default}#ffffff	Background behind layer 03	background
layer-hover-03	{gray.10Hover}#e8e8e8	Hover state for layer 03	background
layer-selected-03	{gray.20}#e0e0e0	Selected state for layer 03	background
layer-selected-hover-03	{gray.20Hover}#d1d1d1	Hover state for selected layer 03	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	Primary accent layer	background
layer-accent-active-01	{gray.40}#a8a8a8	Active state for accent layer 01	background
layer-accent-hover-01	{gray.20Hover}#d1d1d1	Hover state for accent layer 01	background
layer-accent-02	{gray.20}#e0e0e0	Secondary accent layer	background
layer-accent-active-02	{gray.40}#a8a8a8	Active state for accent layer 02	background
layer-accent-hover-02	{gray.20Hover}#d1d1d1	Hover state for accent layer 02	background
layer-accent-03	{gray.20}#e0e0e0	Tertiary accent layer	background
layer-accent-active-03	{gray.40}#a8a8a8	Active state for accent layer 03	background
layer-accent-hover-03	{gray.20Hover}#d1d1d1	Hover state for accent layer 03	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	{"value":"{gray.100}","alpha":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	{"value":"{gray.100}","alpha":0.25}rgba(22, 22, 22, 0.25)	Disabled. Token for disabled in the design system.	text
link-primary	{blue.60}#0f62fe	Primary link color. Use for standard hyperlinks and navigation links.	text
link-primary-hover	{blue.70}#0043ce	Hover color for primary links. Use when user hovers over standard links.	text
link-secondary	{blue.70}#0043ce	Secondary link color. Use for less prominent links or alternative link styles.	text
link-inverse-visited	{purple.40}#be95ff	Visited link color for dark backgrounds. Use for previously clicked links on inverse surfaces.	text
link-visited	{purple.60}#8a3ffc	Color for visited links. Use to indicate previously clicked links.	text
link-inverse	{blue.40}#78a9ff	Link color for dark backgrounds. Use for links on inverse or dark surfaces.	text
link-inverse-active	{gray.10}#f4f4f4	Active state for inverse links. Use when user clicks links on dark backgrounds.	text
link-inverse-hover	{blue.30}#a6c8ff	Hover state for inverse links. Use when hovering over links on dark backgrounds.	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 icon color. Use for supporting icons with less emphasis than primary.	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	{"value":"{gray.100}","alpha":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 color for critical states. Use for error messages, failed validations, and critical alerts.	background fill stroke
support-success	{green.50}#24a148	Success color for positive states. Use for success messages, completed actions, and confirmations.	background fill stroke
support-warning	{yellow.30}#f1c21b	Warning color for caution states. Use for warnings, potential issues, and items needing attention.	background fill stroke
support-info	{blue.70}#0043ce	Info color for informational states. Use for helpful tips, neutral information, and guidance.	background fill stroke
support-error-inverse	{red.50}#fa4d56	Error color for dark backgrounds. Use for error indicators on inverse surfaces.	background fill stroke
support-success-inverse	{green.40}#42be65	Success color for dark backgrounds. Use for success indicators on inverse surfaces.	background fill stroke
support-warning-inverse	{yellow.30}#f1c21b	Warning color for dark backgrounds. Use for warning indicators on inverse surfaces.	background fill stroke
support-info-inverse	{blue.50}#4589ff	Info color for dark backgrounds. Use for info indicators on inverse surfaces.	background fill stroke
support-caution-major	{orange.40}#ff832b	Major caution color. Use for high-severity warnings or significant issues.	background fill stroke
support-caution-minor	{yellow.30}#f1c21b	Minor caution color. Use for low-severity warnings or minor issues.	background fill stroke
support-caution-undefined	{purple.60}#8a3ffc	Undefined caution color. Use for unknown or indeterminate caution states.	background fill stroke
syntax-comment	{green.60}#198038	Comment. Token for comment in the design system.	text
syntax-line-comment	{green.60}#198038	Comment. Token for comment in the design system.	text
syntax-block-comment	{green.60}#198038	Comment. Token for comment in the design system.	text
syntax-doc-comment	{green.60}#198038	Comment. Token for comment in the design system.	text
syntax-doc-string	{gray.100}#161616	String. Token for string in the design system.	text
syntax-keyword	{blue.60}#0f62fe	Keyword. Token for keyword in the design system.	text
syntax-operator-keyword	{blue.60}#0f62fe	Keyword. Token for keyword in the design system.	text
syntax-control-keyword	{purple.70}#6929c4	Keyword. Token for keyword in the design system.	text
syntax-definition-keyword	{cyan.70}#00539a	Keyword. Token for keyword in the design system.	text
syntax-module-keyword	{purple.70}#6929c4	Keyword. Token for keyword in the design system.	text
syntax-variable	{blue.60}#0f62fe	Variable. Token for variable in the design system.	text
syntax-name	{blue.60}#0f62fe	Name. Token for name in the design system.	text
syntax-variable-name	{blue.60}#0f62fe	Name. Token for name in the design system.	text
syntax-label-name	{blue.60}#0f62fe	Name. Token for name in the design system.	text
syntax-attribute	{cyan.70}#00539a	Attribute. Token for attribute in the design system.	text
syntax-attribute-name	{cyan.70}#00539a	Name. Token for name in the design system.	text
syntax-property-name	{cyan.70}#00539a	Name. Token for name in the design system.	text
syntax-tag	{teal.60}#007d79	Tag. Token for tag in the design system.	text
syntax-tag-name	{teal.60}#007d79	Name. Token for name in the design system.	text
syntax-type	{teal.60}#007d79	Type. Token for type in the design system.	text
syntax-type-name	{teal.60}#007d79	Name. Token for name in the design system.	text
syntax-class-name	{teal.60}#007d79	Name. Token for name in the design system.	text
syntax-namespace	{teal.60}#007d79	Namespace. Token for namespace in the design system.	text
syntax-macro-name	{gray.100}#161616	Name. Token for name in the design system.	text
syntax-atom	{gray.100}#161616	Atom. Token for atom in the design system.	text
syntax-literal	{gray.100}#161616	Literal. Token for literal in the design system.	text
syntax-bool	{gray.100}#161616	Bool. Token for bool in the design system.	text
syntax-null	{gray.100}#161616	Null. Token for null in the design system.	text
syntax-self	{teal.60}#007d79	Self. Token for self in the design system.	text
syntax-number	{green.60}#198038	Number. Token for number in the design system.	text
syntax-integer	{green.60}#198038	Integer. Token for integer in the design system.	text
syntax-float	{green.60}#198038	Float. Token for float in the design system.	text
syntax-unit	{green.60}#198038	Unit. Token for unit in the design system.	text
syntax-string	{gray.100}#161616	String. Token for string in the design system.	text
syntax-character	{gray.100}#161616	Character. Token for character in the design system.	text
syntax-attribute-value	{gray.100}#161616	Value. Token for value in the design system.	text
syntax-special-string	{purple.60}#8a3ffc	String. Token for string in the design system.	text
syntax-regexp	{purple.70}#6929c4	Regexp. Token for regexp in the design system.	text
syntax-escape	{coolGray.80}#343a3f	Escape. Token for escape in the design system.	text
syntax-url	{coolGray.80}#343a3f	Url. Token for url in the design system.	text
syntax-color	{gray.100}#161616	Color. Token for color in the design system.	text
syntax-operator	{coolGray.80}#343a3f	Operator. Token for operator in the design system.	text
syntax-deref-operator	{coolGray.80}#343a3f	Operator. Token for operator in the design system.	text
syntax-arithmetic-operator	{coolGray.80}#343a3f	Operator. Token for operator in the design system.	text
syntax-logic-operator	{coolGray.80}#343a3f	Operator. Token for operator in the design system.	text
syntax-bitwise-operator	{coolGray.80}#343a3f	Operator. Token for operator in the design system.	text
syntax-compare-operator	{coolGray.80}#343a3f	Operator. Token for operator in the design system.	text
syntax-update-operator	{coolGray.80}#343a3f	Operator. Token for operator in the design system.	text
syntax-definition-operator	{cyan.70}#00539a	Operator. Token for operator in the design system.	text
syntax-type-operator	{teal.60}#007d79	Operator. Token for operator in the design system.	text
syntax-control-operator	{purple.70}#6929c4	Operator. Token for operator in the design system.	text
syntax-modifier	{blue.60}#0f62fe	Modifier. Token for modifier in the design system.	text
syntax-punctuation	{coolGray.80}#343a3f	Punctuation. Token for punctuation in the design system.	text
syntax-separator	{coolGray.80}#343a3f	Separator. Token for separator in the design system.	text
syntax-bracket	{coolGray.80}#343a3f	Bracket. Token for bracket in the design system.	text
syntax-angle-bracket	{coolGray.60}#697077	Bracket. Token for bracket in the design system.	text
syntax-square-bracket	{coolGray.80}#343a3f	Bracket. Token for bracket in the design system.	text
syntax-paren	{coolGray.80}#343a3f	Paren. Token for paren in the design system.	text
syntax-brace	{coolGray.80}#343a3f	Brace. Token for brace in the design system.	text
syntax-content	{gray.100}#161616	Content. Token for content in the design system.	text
syntax-heading	{cyan.70}#00539a	Heading. Token for heading in the design system.	text
syntax-heading-1	{cyan.70}#00539a	1. Token for 1 in the design system.	text
syntax-heading-2	{cyan.70}#00539a	2. Token for 2 in the design system.	text
syntax-heading-3	{cyan.70}#00539a	3. Token for 3 in the design system.	text
syntax-heading-4	{cyan.70}#00539a	4. Token for 4 in the design system.	text
syntax-heading-5	{cyan.70}#00539a	5. Token for 5 in the design system.	text
syntax-heading-6	{cyan.70}#00539a	6. Token for 6 in the design system.	text
syntax-content-separator	{coolGray.80}#343a3f	Separator. Token for separator in the design system.	text
syntax-list	{gray.100}#161616	List. Token for list in the design system.	text
syntax-quote	{green.60}#198038	Quote. Token for quote in the design system.	text
syntax-emphasis	{gray.100}#161616	Emphasis. Token for emphasis in the design system.	text
syntax-strong	{gray.100}#161616	Strong. Token for strong in the design system.	text
syntax-monospace	{gray.100}#161616	Monospace. Token for monospace in the design system.	text
syntax-link	{blue.60}#0f62fe	Link. Token for link in the design system.	text
syntax-strikethrough	{gray.100}#161616	Strikethrough. Token for strikethrough in the design system.	text
syntax-invalid	{red.60}#da1e28	Invalid. Token for invalid in the design system.	text
syntax-meta	{green.60}#198038	Meta. Token for meta in the design system.	text
syntax-document-meta	{green.60}#198038	Meta. Token for meta in the design system.	text
syntax-annotation	{teal.60}#007d79	Annotation. Token for annotation in the design system.	text
syntax-processing-instruction	{gray.100}#161616	Instruction. Token for instruction in the design system.	text
syntax-definition	{cyan.70}#00539a	Definition. Token for definition in the design system.	text
syntax-constant	{blue.60}#0f62fe	Constant. Token for constant in the design system.	text
syntax-function	{yellow.60}#8e6a00	Function. Token for function in the design system.	text
syntax-standard	{blue.60}#0f62fe	Standard. Token for standard in the design system.	text
syntax-local	{blue.60}#0f62fe	Local. Token for local in the design system.	text
syntax-special	{blue.60}#0f62fe	Special. Token for special in the design system.	text
syntax-inserted	{green.20}#a7f0ba	Inserted. Token for inserted in the design system.	text
syntax-deleted	{red.20}#ffd7d9	Deleted. Token for deleted in the design system.	text
ai-popover-background	{white.default}#ffffff	Background color for AI popovers and tooltips. Provides the base surface for AI-generated content displays.	background
ai-popover-shadow-outer-01	{"value":"{blue.70}","alpha":0.06}rgba(0, 67, 206, 0.06)	Primary outer shadow for AI popovers. Provides the first layer of depth for elevated AI elements.	background
ai-popover-shadow-outer-02	{"value":"{black.default}","alpha":0.04}rgba(0, 0, 0, 0.04)	Secondary outer shadow for AI popovers. Adds additional depth layer for AI element elevation.	background
ai-inner-shadow	{"value":"{blue.50}","alpha":0.1}rgba(69, 137, 255, 0.1)	Inner shadow color for AI elements. Creates inset depth effect for AI-enhanced surfaces.	background
ai-aura-start-sm	{"value":"{blue.50}","alpha":0.16}rgba(69, 137, 255, 0.16)	Start color for small AI aura gradient. Use for compact AI indicators or smaller UI elements.	background
ai-aura-start	{"value":"{blue.50}","alpha":0.1}rgba(69, 137, 255, 0.1)	Start color for AI aura gradient effect. Provides the vibrant blue beginning of the gradient for AI-enhanced elements.	background
ai-aura-end	{"value":"{white.default}","alpha":0}rgba(255, 255, 255, 0)	End color for AI aura gradient effect. Creates a fade-to-transparent effect at the edge of AI-enhanced elements.	background
ai-aura-hover-background	{blue.10}#edf5ff	Background color for AI aura on hover. Use when user hovers over AI-enhanced interactive elements.	background
ai-aura-hover-start	{"value":"{blue.50}","alpha":0.32}rgba(69, 137, 255, 0.32)	Start color for AI aura gradient on hover. Provides the vibrant blue beginning of the hover gradient.	background
ai-aura-hover-end	{"value":"{white.default}","alpha":0}rgba(255, 255, 255, 0)	End color for AI aura gradient on hover. Creates hover state fade effect for AI elements.	background
ai-border-strong	{blue.50}#4589ff	Strong border color for AI elements. Use for high-emphasis AI borders that need clear definition.	background
ai-border-start	{"value":"{blue.30}","alpha":0.64}rgba(166, 200, 255, 0.64)	Start color for AI border gradient. Creates the darker edge of gradient borders on AI elements.	background
ai-border-end	{blue.40}#78a9ff	End color for AI border gradient. Creates the lighter edge of gradient borders on AI elements.	background
ai-drop-shadow	{"value":"{blue.60}","alpha":0.1}rgba(15, 98, 254, 0.1)	Drop shadow color for AI elements. Provides depth and elevation for AI-enhanced components.	background
ai-skeleton-background	{blue.20}#d0e2ff	Background color for AI skeleton loaders. Use while AI-generated content is loading.	background
ai-skeleton-element-background	{blue.50}#4589ff	Element background color for AI skeleton loaders. Provides the animated shimmer effect for loading AI content.	background
ai-overlay	{"value":"{blue.100}","alpha":0.5}rgba(0, 17, 65, 0.5)	Overlay color for AI modal backgrounds. Use to dim content behind AI dialogs or popovers.	background
ai-popover-caret-center	{"colorSpace":"srgb","components":[0.627451,0.764706,1],"hex":"#a0c3ff"}#a0c3ff	Center color for AI popover caret gradient. Creates the vibrant middle of the gradient pointer.	background
ai-popover-caret-bottom	{blue.40}#78a9ff	Bottom caret color for AI popovers. Creates the gradient pointer at the bottom of AI tooltips.	background
ai-popover-caret-bottom-background	{"colorSpace":"srgb","components":[0.917647,0.945098,1],"hex":"#eaf1ff"}#eaf1ff	Background color for bottom caret of AI popovers. Provides the base color for the popover pointer.	background
ai-popover-caret-bottom-background-actions	{"colorSpace":"srgb","components":[0.913725,0.937255,0.980392],"hex":"#e9effa"}#e9effa	Background color for action area in AI popover bottom caret. Use for interactive sections within AI tooltips.	background
chat-prompt-background	{white.default}#ffffff	Background color for chat input prompt area. Use for the message composition field.	background
chat-prompt-border-start	{gray.10}#f4f4f4	Start color for chat prompt border gradient. Defines the beginning of input border gradient.	background
chat-prompt-border-end	{"value":"{gray.10}","alpha":0}rgba(244, 244, 244, 0)	End color for chat prompt border gradient. Creates fade effect at edge of input area.	background
chat-prompt-text	{gray.100}#161616	Text color for chat input prompt. Ensures readable text in message composition area.	background
chat-bubble-user	{gray.20}#e0e0e0	Background color for user message bubbles. Use for messages from the current user in chat interfaces.	background
chat-bubble-user-text	{gray.100}#161616	Text color for user message bubbles. Ensures readable contrast in user messages.	background
chat-bubble-agent	{white.default}#ffffff	Background color for agent message bubbles. Use for messages from human agents in chat interfaces.	background
chat-bubble-agent-text	{gray.100}#161616	Text color for agent message bubbles. Ensures readable contrast in agent messages.	background
chat-bubble-border	{gray.20}#e0e0e0	Border color for chat message bubbles. Provides visual definition for all message types.	background
chat-avatar-bot	{gray.60}#6f6f6f	Avatar background color for AI bots in chat. Use to identify automated or AI-generated responses.	background
chat-avatar-agent	{gray.80}#393939	Avatar background color for human agents in chat. Use to distinguish agent messages from bot or user.	background
chat-avatar-user	{blue.60}#0f62fe	Avatar background color for users in chat. Use to identify messages from the current user.	background
chat-shell-background	{white.default}#ffffff	Background color for chat container shell. Use as the base surface for entire chat interface.	background
chat-header-background	{white.default}#ffffff	Background color for chat header. Use for the top section of chat interfaces.	background
chat-header-text	{gray.100}#161616	Text color for chat header. Ensures readable titles and labels in chat header.	background
chat-button	{blue.60}#0f62fe	Icon color for chat action buttons. Use for interactive elements within chat interface.	background
chat-button-hover	{"value":"{gray.50}","alpha":0.12}rgba(141, 141, 141, 0.12)	Background color for chat buttons on hover. Use to provide feedback when hovering over chat actions.	background
chat-button-text-hover	{blue.70}#0043ce	Text color for chat buttons on hover. Provides visual feedback for interactive chat elements.	background
chat-button-active	{"value":"{gray.50}","alpha":0.5}rgba(141, 141, 141, 0.5)	Background color for chat buttons in active/pressed state. Use when user clicks chat actions.	background
chat-button-selected	{"value":"{gray.50}","alpha":0.2}rgba(141, 141, 141, 0.2)	Background color for selected chat buttons. Use to highlight currently active chat action.	background
chat-button-text-selected	{gray.70}#525252	Text color for selected chat buttons. Indicates the currently active chat action.	background
highlight	{blue.20}#d0e2ff	Highlight color for selected text or emphasized content. Use for text selection or search result highlighting.	—
overlay	{"value":"{black.default}","alpha":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	{"value":"{black.default}","alpha":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 color for skeleton loaders. Use as base for loading placeholders.	background
skeleton-element	{gray.30}#c6c6c6	Element color for skeleton loaders. Provides the animated shimmer effect for loading states.	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.