Are you an LLM? You can read better optimized documentation at /base-elements/color.md for this page in Markdown format
Color ​
The semantic color tokens the design system exposes, in light and dark mode.
Each row lists a token, its value in light and dark mode, and where to use it. Reference tokens by name rather than by raw value, so your colors follow the theme.
Search:
| Color | Light | Dark |
|---|---|---|
background.default bg-default The primary background color used across all layouts and components. | bg-white #ffffff | bg-gray-1000 #151619 |
background.hover bg-hover Hover background color for hover state for components with default or transparent background like secondary buttons or dropdown options. | bg-gray-100 #f4f5f9 | bg-gray-800 #27282b |
background.active bg-active Active background color for active state for components with default or transparent background like secondary buttons or dropdown options. | bg-gray-200 #eeeff3 | bg-gray-700 #35373a |
background.disabled bg-disabled Disabled background color for components with default background. | bg-gray-200 #eeeff3 | bg-gray-700 #35373a |
background.secondary.default bg-secondary-default The secondary background color used to create contrast against default backgrounds, such as panel, section backgrounds. | bg-gray-50 #fafcff | bg-gray-900 #1d1e21 |
background.secondary.hover bg-secondary-hover Hover background color for hover state for components on secondary background. | bg-gray-200 #eeeff3 | bg-gray-700 #35373a |
background.secondary.active bg-secondary-active Active background color for active state for components on secondary background. | bg-gray-200 #eeeff3 | bg-gray-700 #35373a |
background.base.default bg-base-default Base background color used only for base layers that are less important than default or secondary background like Canvas Dashboard background, Reporting page background. | bg-gray-100 #f4f5f9 | bg-gray-800 #27282b |
background.interactive.switch bg-interactive-switch Background color for toggle switches and similar binary control elements in their default or "disabled" state. | bg-gray-400 #a3a4a8 | bg-gray-500 #77797c |
background.interactive.scrollbar bg-interactive-scrollbar Background color for scrollbar tracks and handles. | bg-gray-300 #dddee1 | bg-gray-600 #45464a |
background.interactive.default bg-interactive-default Default background color for interactive elements like badge or clickable components. | bg-gray-200 #eeeff3 | bg-gray-700 #35373a |
background.interactive.hover bg-interactive-hover Hover background color for interactive elements when users move their cursor over them. | bg-gray-300 #dddee1 | bg-gray-600 #45464a |
background.interactive.active bg-interactive-active Active/pressed background color for interactive elements when clicked or tapped, indicating the element is currently being activated. | bg-gray-400 #a3a4a8 | bg-gray-500 #77797c |
background.interactive.overlay bg-interactive-overlay Background color for overlay element. | bg-black-alpha-40 #00000066 | bg-black-alpha-40 #00000066 |
background.interactive.highlight.default bg-interactive-highlight-default Background color for informative/highlight interactive elements like badge or clickable components. | bg-blue-100 #d7e8ff | bg-blue-900 #062e5c |
background.interactive.highlight.hover bg-interactive-highlight-hover Hover background color for informative/highlight interactive elements when users move their cursor over them. | bg-blue-200 #c1dcfe | bg-blue-800 #083f7a |
background.interactive.highlight.active bg-interactive-highlight-active Active/pressed background color for informative/highlight interactive elements when clicked or tapped, indicating the element is currently being activated. | bg-blue-300 #a8cefe | bg-blue-700 #0b519c |
background.interactive.danger.default bg-interactive-danger-default Background color for danger interactive elements like badge or clickable components. | bg-red-100 #feded9 | bg-red-900 #5b090a |
background.interactive.danger.hover bg-interactive-danger-hover Hover background color for danger interactive elements when users move their cursor over them. | bg-red-200 #fecbc4 | bg-red-800 #790e10 |
background.interactive.danger.active bg-interactive-danger-active Active/pressed background color for danger interactive elements when clicked or tapped, indicating the element is currently being activated. | bg-red-300 #fbb7af | bg-red-700 #9b1115 |
background.interactive.warning.default bg-interactive-warning-default Background color for warning interactive elements like badge or clickable components. | bg-orange-100 #fcdfd3 | bg-orange-900 #632a09 |
background.interactive.warning.hover bg-interactive-warning-hover Hover background color for warning interactive elements when users move their cursor over them. | bg-orange-200 #fdcdb7 | bg-orange-800 #7e360c |
background.interactive.warning.active bg-interactive-warning-active Active/pressed background color for warning interactive elements when clicked or tapped, indicating the element is currently being activated. | bg-orange-300 #f7bb9f | bg-orange-700 #98420e |
background.interactive.success.default bg-interactive-success-default Background color for success interactive elements like badge or clickable components. | bg-green-100 #d3eedd | bg-green-900 #073922 |
background.interactive.success.hover bg-interactive-success-hover Hover background color for success interactive elements when users move their cursor over them. | bg-green-200 #b8e6ca | bg-green-800 #0b4c2f |
background.interactive.success.active bg-interactive-success-active Active/pressed background color for success interactive elements when clicked or tapped, indicating the element is currently being activated. | bg-green-300 #9edbb7 | bg-green-700 #0e623d |
background.interactive.adhoc.default bg-interactive-adhoc-default Background color for adhoc interactive elements like badge or clickable components. | bg-purple-100 #eae1fb | bg-purple-900 #3e0c6b |
background.interactive.adhoc.hover bg-interactive-adhoc-hover Hover background color for adhoc interactive elements when users move their cursor over them. | bg-purple-200 #e0d0fc | bg-purple-800 #53108e |
background.interactive.adhoc.active bg-interactive-adhoc-active Active/pressed background color for adhoc interactive elements when clicked or tapped, indicating the element is currently being activated. | bg-purple-300 #d3bff7 | bg-purple-700 #6b14b5 |
background.highlight.default bg-highlight-default Default solid background color for components’ highlight variants. | bg-blue-500 #1676dc | bg-blue-500 #1676dc |
background.highlight.hover bg-highlight-hover Hover solid background color for hover state for components’ highlight variants. | bg-blue-600 #1063bb | bg-blue-600 #1063bb |
background.highlight.active bg-highlight-active Active solid background color for active state for components’ highlight variants. | bg-blue-700 #0b519c | bg-blue-700 #0b519c |
background.highlight.secondary.default bg-highlight-secondary-default Secondary background color for components’ highlight variants. | bg-blue-50 #e7f1ff | bg-blue-1000 #031f40 |
background.highlight.secondary.hover bg-highlight-secondary-hover Secondary hover solid background color for hover state for components’ highlight variants. | bg-blue-100 #d7e8ff | bg-blue-900 #062e5c |
background.highlight.secondary.active bg-highlight-secondary-active Secondary active solid background color for active state for components’ highlight variants. | bg-blue-200 #c1dcfe | bg-blue-800 #083f7a |
background.highlight.disabled bg-highlight-disabled Disabled solid background color for disabled state for components’ highlight variants. | bg-blue-200 #c1dcfe | bg-blue-800 #083f7a |
background.success.default bg-success-default Default solid background color for components’ success variants. | bg-green-500 #188756 | bg-green-500 #188756 |
background.success.hover bg-success-hover Hover solid background color for hover state for components’ success variants. | bg-green-600 #127147 | bg-green-600 #127147 |
background.success.active bg-success-active Active solid background color for active state for components’ success variants. | bg-green-700 #0e623d | bg-green-700 #0e623d |
background.success.secondary.default bg-success-secondary-default Secondary background color for components’ success variants. | bg-green-50 #e4f5ea | bg-green-1000 #052616 |
background.success.secondary.hover bg-success-secondary-hover Secondary hover solid background color for hover state for components’ success variants. | bg-green-100 #d3eedd | bg-green-900 #073922 |
background.success.secondary.active bg-success-secondary-active Secondary active solid background color for active state for components’ success variants. | bg-green-200 #b8e6ca | bg-green-800 #0b4c2f |
background.success.disabled bg-success-disabled Disabled solid background color for disabled state for components’ success variants. | bg-green-200 #b8e6ca | bg-green-800 #0b4c2f |
background.adhoc.default bg-adhoc-default Default solid background color for components’ adhoc variants. | bg-purple-500 #9c46f8 | bg-purple-500 #9c46f8 |
background.adhoc.hover bg-adhoc-hover Hover solid background color for hover state for components’ adhoc variants. | bg-purple-600 #8a1de8 | bg-purple-600 #8a1de8 |
background.adhoc.active bg-adhoc-active Active solid background color for active state for components’ adhoc variants. | bg-purple-700 #6b14b5 | bg-purple-700 #6b14b5 |
background.adhoc.secondary.default bg-adhoc-secondary-default Secondary background color for components’ adhoc variants. | bg-purple-50 #f3edfe | bg-purple-1000 #2a084a |
background.adhoc.secondary.hover bg-adhoc-secondary-hover Secondary hover solid background color for hover state for components’ adhoc variants. | bg-purple-100 #eae1fb | bg-purple-900 #3e0c6b |
background.adhoc.secondary.active bg-adhoc-secondary-active Secondary active solid background color for active state for components’ adhoc variants. | bg-purple-200 #e0d0fc | bg-purple-800 #53108e |
background.adhoc.disabled bg-adhoc-disabled Disabled solid background color for disabled state for components’ adhoc variants. | bg-purple-200 #e0d0fc | bg-purple-800 #53108e |
background.warning.default bg-warning-default Default solid background color for components’ warning variants. | bg-orange-500 #c15615 | bg-orange-500 #c15615 |
background.warning.hover bg-warning-hover Hover solid background color for hover state for components’ warning variants. | bg-orange-600 #ad4c12 | bg-orange-600 #ad4c12 |
background.warning.active bg-warning-active Active solid background color for active state for components’ warning variants. | bg-orange-700 #98420e | bg-orange-700 #98420e |
background.warning.secondary.default bg-warning-secondary-default Secondary background color for components’ warning variants. | bg-orange-50 #ffece3 | bg-orange-1000 #3b1704 |
background.warning.secondary.hover bg-warning-secondary-hover Secondary hover solid background color for hover state for components’ warning variants. | bg-orange-100 #fcdfd3 | bg-orange-900 #632a09 |
background.warning.secondary.active bg-warning-secondary-active Secondary active solid background color for active state for components’ warning variants. | bg-orange-200 #fdcdb7 | bg-orange-800 #7e360c |
background.warning.disabled bg-warning-disabled Disabled solid background color for disabled state for components’ warning variants. | bg-orange-200 #fdcdb7 | bg-orange-800 #7e360c |
background.danger.default bg-danger-default Default solid background color for components’ danger variants. | bg-red-500 #e82025 | bg-red-500 #e82025 |
background.danger.hover bg-danger-hover Hover solid background color for hover state for components’ danger variants. | bg-red-600 #c71a1e | bg-red-600 #c71a1e |
background.danger.active bg-danger-active Active solid background color for active state for components’ danger variants. | bg-red-700 #9b1115 | bg-red-700 #9b1115 |
background.danger.secondary.default bg-danger-secondary-default Secondary background color for components’ danger variants. | bg-red-50 #ffebe8 | bg-red-1000 #3f0606 |
background.danger.secondary.hover bg-danger-secondary-hover Secondary hover solid background color for hover state for components’ danger variants. | bg-red-100 #feded9 | bg-red-900 #5b090a |
background.danger.secondary.active bg-danger-secondary-active Secondary active solid background color for active state for components’ danger variants. | bg-red-200 #fecbc4 | bg-red-800 #790e10 |
background.danger.disabled bg-danger-disabled Disabled solid background color for disabled state for components’ danger variants. | bg-red-200 #fecbc4 | bg-red-800 #790e10 |
background.avatar.default bg-avatar-default | bg-blue-900 #062e5c | bg-blue-900 #062e5c |
background.avatar.counter bg-avatar-counter | bg-blue-200 #c1dcfe | bg-blue-800 #083f7a |
text.highlight.default text-highlight-default Default text color for components’ highlight variants where text needs to be more readable like badges. | text-blue-600 #1063bb | text-blue-400 #92bef6 |
text.highlight.strong text-highlight-strong More important text color used in components’ highlight variants, can be used for interactive states like hover, active, etc. | text-blue-700 #0b519c | text-blue-300 #a8cefe |
text.highlight.button text-highlight-button Default text color for button highlight variants. | text-blue-600 #1063bb | text-blue-400 #92bef6 |
text.highlight.disabled text-highlight-disabled Default text color for disabled state for components’ highlight variants. | text-blue-300 #a8cefe | text-blue-700 #0b519c |
text.highlight.weak text-highlight-weak More subtle text color used in components’ highlight variants. | text-blue-800 #083f7a | text-blue-200 #c1dcfe |
text.success.default text-success-default Default text color for components’ success variants where text needs to be more readable like badges. | text-green-600 #127147 | text-green-400 #7ad0a0 |
text.success.strong text-success-strong More important text color used in components’ success variants, can be used for interactive states like hover, active, etc. | text-green-700 #0e623d | text-green-300 #9edbb7 |
text.success.button text-success-button Default text color for button success variants. | text-green-600 #127147 | text-green-400 #7ad0a0 |
text.success.disabled text-success-disabled Default text color for disabled state for components’ success variants. | text-green-300 #9edbb7 | text-green-700 #0e623d |
text.success.weak text-success-weak More subtle text color used in components’ success variants. | text-green-800 #0b4c2f | text-green-200 #b8e6ca |
text.warning.default text-warning-default Default text color for components’ warning variants where text needs to be more readable like badges. | text-orange-600 #ad4c12 | text-orange-400 #f5a47e |
text.warning.strong text-warning-strong More important text color used in components’ warning variants, can be used for interactive states like hover, active, etc. | text-orange-700 #98420e | text-orange-300 #f7bb9f |
text.warning.button text-warning-button Default text color for button warning variants. | text-orange-600 #ad4c12 | text-orange-400 #f5a47e |
text.warning.disabled text-warning-disabled Default text color for disabled state for components’ warning variants. | text-orange-300 #f7bb9f | text-orange-700 #98420e |
text.warning.weak text-warning-weak More subtle text color used in components’ warning variants. | text-orange-800 #7e360c | text-orange-200 #fdcdb7 |
text.danger.default text-danger-default Default text color for components’ danger variants where text needs to be more readable like badges. | text-red-600 #c71a1e | text-red-400 #f6a096 |
text.danger.strong text-danger-strong More important text color used in components’ danger variants, can be used for interactive states like hover, active, etc. | text-red-700 #9b1115 | text-red-300 #fbb7af |
text.danger.button text-danger-button Default text color for button danger variants. | text-red-600 #c71a1e | text-red-400 #f6a096 |
text.danger.disabled text-danger-disabled Default text color for disabled state for components’ danger variants. | text-red-300 #fbb7af | text-red-700 #9b1115 |
text.danger.weak text-danger-weak More subtle text color used in components’ danger variants | text-red-800 #790e10 | text-red-200 #fecbc4 |
text.adhoc.default text-adhoc-default Default text color for components’ adhoc variants where text needs to be more readable like badges. | text-purple-600 #8a1de8 | text-purple-400 #c6aaf6 |
text.adhoc.strong text-adhoc-strong More important text color used in components’ adhoc variants, can be used for interactive states like hover, active, etc. | text-purple-700 #6b14b5 | text-purple-300 #d3bff7 |
text.adhoc.button text-adhoc-button Default text color for button adhoc variants. | text-purple-600 #8a1de8 | text-purple-400 #c6aaf6 |
text.adhoc.disabled text-adhoc-disabled Default text color for disabled state for components’ adhoc variants. | text-purple-300 #d3bff7 | text-purple-700 #6b14b5 |
text.adhoc.weak text-adhoc-weak More subtle text color used in components’ adhoc variants. | text-purple-800 #53108e | text-purple-200 #e0d0fc |
text.default text-default Default text color across apps and components like main body text, components’ label. | text-gray-800 #27282b | text-gray-100 #f4f5f9 |
text.strong text-strong More important text like headings, titles. | text-gray-900 #1d1e21 | text-gray-50 #fafcff |
text.weak text-weak Supporting text like description, paragraph text. | text-gray-700 #35373a | text-gray-200 #eeeff3 |
text.helper text-helper More subtle text but still readable like helper text. | text-gray-600 #45464a | text-gray-300 #dddee1 |
text.disabled text-disabled Default color for disabled text like disabled input fields, dropdowns, and buttons. | text-gray-400 #a3a4a8 | text-gray-500 #77797c |
text.link.default text-link-default Link text. | text-blue-600 #1063bb | text-blue-400 #92bef6 |
text.link.hover text-link-hover Link text hover state. | text-blue-700 #0b519c | text-blue-300 #a8cefe |
text.link.active text-link-active Link text active state. | text-blue-800 #083f7a | text-blue-200 #c1dcfe |
text.placeholder text-placeholder Components’ placeholder text like input field, select placeholders. | text-gray-500 #77797c | text-gray-400 #a3a4a8 |
text.white text-white Text that is always white like text in primary buttons. | text-white #ffffff | text-white #ffffff |
border.default border-default Default border color for all components, section, divider and separator. | border-gray-300 #dddee1 | border-gray-600 #45464a |
border.highlight.default border-highlight-default Default border color for all components’ highlight variants. | border-blue-300 #a8cefe | border-blue-700 #0b519c |
border.highlight.strong border-highlight-strong Border color used for interactive components’ highlight variants like buttons. | border-blue-600 #1063bb | border-blue-400 #92bef6 |
border.success.default border-success-default Default border color for all components’ success variants. | border-green-300 #9edbb7 | border-green-700 #0e623d |
border.success.strong border-success-strong Border color used for interactive components’ success variants like buttons. | border-green-600 #127147 | border-green-400 #7ad0a0 |
border.adhoc.default border-adhoc-default Default border color for all components’ adhoc variants. | border-purple-300 #d3bff7 | border-purple-700 #6b14b5 |
border.adhoc.strong border-adhoc-strong Border color used for interactive components’ adhoc variants like buttons. | border-purple-600 #8a1de8 | border-purple-400 #c6aaf6 |
border.warning.default border-warning-default Default border color for all components’ warning variants. | border-orange-300 #f7bb9f | border-orange-700 #98420e |
border.warning.strong border-warning-strong Border color used for interactive components’ warning variants like buttons. | border-orange-600 #ad4c12 | border-orange-400 #f5a47e |
border.danger.default border-danger-default Default border color for all components’ danger variants. | border-red-300 #fbb7af | border-red-700 #9b1115 |
border.danger.strong border-danger-strong Border color used for interactive components’ danger variants like buttons. | border-red-600 #c71a1e | border-red-400 #f6a096 |
border.strong border-strong Border color used where needs more contrast like interactive components | border-gray-400 #a3a4a8 | border-gray-500 #77797c |
border.avatar.group border-avatar-group | border-white #ffffff | border-gray-1000 #151619 |
border.transparent border-transparent | #ffffff00 | #ffffff00 |
icon.default icon-default Default color for icons across apps and components. | icon-gray-700 #35373a | icon-gray-200 #eeeff3 |
icon.highlight.default icon-highlight-default Default icon color for components’ highlight variants. | icon-blue-600 #1063bb | icon-blue-400 #92bef6 |
icon.highlight.disabled icon-highlight-disabled Disabled icon color for disabled state for components’ highlight variants. | icon-blue-300 #a8cefe | icon-blue-700 #0b519c |
icon.highlight.hover icon-highlight-hover Hover icon color for hover state for components’ highlight variants. | icon-blue-700 #0b519c | icon-blue-300 #a8cefe |
icon.highlight.active icon-highlight-active Active icon color for active state for components’ highlight variants. | icon-blue-800 #083f7a | icon-blue-200 #c1dcfe |
icon.success.default icon-success-default Default icon color for components’ success variants. | icon-green-600 #127147 | icon-green-400 #7ad0a0 |
icon.success.disabled icon-success-disabled Disabled icon color for disabled state for components’ success variants. | icon-green-300 #9edbb7 | icon-green-700 #0e623d |
icon.success.hover icon-success-hover Hover icon color for hover state for components’ success variants. | icon-green-700 #0e623d | icon-green-300 #9edbb7 |
icon.success.active icon-success-active Active icon color for active state for components’ success variants. | icon-green-800 #0b4c2f | icon-green-200 #b8e6ca |
icon.warning.default icon-warning-default Default icon color for components’ warning variants. | icon-orange-600 #ad4c12 | icon-orange-400 #f5a47e |
icon.warning.disabled icon-warning-disabled Disabled icon color for disabled state for components’ warning variants. | icon-orange-300 #f7bb9f | icon-orange-700 #98420e |
icon.warning.hover icon-warning-hover Hover icon color for hover state for components’ warning variants. | icon-orange-700 #98420e | icon-orange-300 #f7bb9f |
icon.warning.active icon-warning-active Active icon color for active state for components’ warning variants. | icon-orange-800 #7e360c | icon-orange-200 #fdcdb7 |
icon.danger.default icon-danger-default Default icon color for components’ danger variants. | icon-red-600 #c71a1e | icon-red-400 #f6a096 |
icon.danger.disabled icon-danger-disabled Disabled icon color for disabled state for components’ danger variants. | icon-red-300 #fbb7af | icon-red-700 #9b1115 |
icon.danger.hover icon-danger-hover Hover icon color for hover state for components’ danger variants. | icon-red-700 #9b1115 | icon-red-300 #fbb7af |
icon.danger.active icon-danger-active Active icon color for active state for components’ danger variants. | icon-red-800 #790e10 | icon-red-200 #fecbc4 |
icon.adhoc.default icon-adhoc-default Default icon color for components’ adhoc variants. | icon-purple-600 #8a1de8 | icon-purple-400 #c6aaf6 |
icon.adhoc.disabled icon-adhoc-disabled Disabled icon color for disabled state for components’ adhoc variants. | icon-purple-300 #d3bff7 | icon-purple-700 #6b14b5 |
icon.adhoc.active icon-adhoc-active Active icon color for active state for components’ adhoc variants. | icon-purple-800 #53108e | icon-purple-200 #e0d0fc |
icon.adhoc.hover icon-adhoc-hover Hover icon color for hover state for components’ adhoc variants. | icon-purple-700 #6b14b5 | icon-purple-300 #d3bff7 |
icon.hover icon-hover Hover color for icon hover state like standalone icons with no background or icon in button clear/default variant. | icon-gray-800 #27282b | icon-gray-100 #f4f5f9 |
icon.active icon-active Active color for icon hover state like standalone icons with no background, icon in button clear/default variant, or selected Select trigger. | icon-gray-900 #1d1e21 | icon-gray-50 #fafcff |
icon.disabled icon-disabled Disabled color for icon disabled state. | icon-gray-400 #a3a4a8 | icon-gray-500 #77797c |
icon.white icon-white Icon that is always white like icons in primary buttons. | icon-white #ffffff | icon-white #ffffff |
icon.weak icon-weak | icon-gray-600 #45464a | icon-gray-300 #dddee1 |
focus-ring.default.inner ring-default-inner | bg-gray-800 #27282b | bg-gray-100 #f4f5f9 |
focus-ring.default.outer ring-default-outer | bg-gray-300 #dddee1 | bg-gray-600 #45464a |
focus-ring.danger.inner ring-danger-inner | bg-red-800 #790e10 | bg-red-200 #fecbc4 |
focus-ring.danger.outer ring-danger-outer | bg-red-300 #fbb7af | bg-red-700 #9b1115 |
focus-ring.warning.inner ring-warning-inner | bg-orange-800 #7e360c | bg-orange-200 #fdcdb7 |
focus-ring.warning.outer ring-warning-outer | bg-orange-300 #f7bb9f | bg-orange-700 #98420e |
focus-ring.success.inner ring-success-inner | bg-green-800 #0b4c2f | bg-green-200 #b8e6ca |
focus-ring.success.outer ring-success-outer | bg-green-300 #9edbb7 | bg-green-700 #0e623d |
focus-ring.highlight.inner ring-highlight-inner | bg-blue-800 #083f7a | bg-blue-200 #c1dcfe |
focus-ring.highlight.outer ring-highlight-outer | bg-blue-300 #a8cefe | bg-blue-700 #0b519c |
focus-ring.adhoc.inner ring-adhoc-inner | bg-purple-800 #53108e | bg-purple-200 #e0d0fc |
focus-ring.adhoc.outer ring-adhoc-outer | bg-purple-300 #d3bff7 | bg-purple-700 #6b14b5 |
logo.green | bg-brand-green #2cb67f | bg-brand-green #2cb67f |
logo.navy | bg-brand-blue #05264c | bg-blue-100 #d7e8ff |
logo.white | bg-white #ffffff | bg-white #ffffff |
logo.green (strong) | bg-green-600 #127147 | bg-green-600 #127147 |