Are you an LLM? You can read better optimized documentation at /base-elements/color.md for this page in Markdown format
Color ​
Search:
| Color | Light | Dark |
|---|---|---|
background.default bg-default The primary background color used across all layouts and components. | bg-white #ffffff | bg-dark-gray-00 #121212 |
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 #f4f6fb | bg-dark-gray-100 #242529 |
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 #edf0f6 | bg-dark-gray-200 #343537 |
background.disabled bg-disabled Disabled background color for components with default background. | bg-gray-200 #edf0f6 | bg-dark-gray-200 #343537 |
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 #fbfcff | bg-dark-gray-50 #1a1b1e |
background.secondary.hover bg-secondary-hover Hover background color for hover state for components on secondary background. | bg-gray-200 #edf0f6 | bg-dark-gray-200 #343537 |
background.secondary.active bg-secondary-active Active background color for active state for components on secondary background. | bg-gray-200 #edf0f6 | bg-dark-gray-200 #343537 |
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-200 #edf0f6 | bg-dark-gray-100 #242529 |
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 #a7aab4 | bg-dark-gray-400 #61646b |
background.interactive.inverted bg-interactive-inverted Background color for interactive elements that need inverted appearance. | bg-gray-800 #212329 | bg-gray-800 #212329 |
background.interactive.scrollbar bg-interactive-scrollbar Background color for scrollbar tracks and handles. | bg-gray-300 #dfe1e7 | bg-dark-gray-300 #464649 |
background.interactive.default bg-interactive-default Default background color for interactive elements like badge or clickable components. | bg-gray-200 #edf0f6 | bg-dark-gray-200 #343537 |
background.interactive.hover bg-interactive-hover Hover background color for interactive elements when users move their cursor over them. | bg-gray-300 #dfe1e7 | bg-dark-gray-300 #464649 |
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 #a7aab4 | bg-dark-gray-400 #61646b |
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 #d6f0ff | bg-dark-blue-100 #002361 |
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 #b3dfff | bg-dark-blue-200 #123985 |
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 #a6dbff | bg-dark-blue-300 #11449c |
background.interactive.danger.default bg-interactive-danger-default Background color for danger interactive elements like badge or clickable components. | bg-red-100 #ffe6e3 | bg-dark-red-100 #562323 |
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 #ffd0ca | bg-dark-red-200 #762e30 |
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 #ffc9c1 | bg-dark-red-300 #97393d |
background.interactive.warning.default bg-interactive-warning-default Background color for warning interactive elements like badge or clickable components. | bg-orange-100 #ffe8c5 | bg-dark-orange-100 #4d3615 |
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 #ffd9b5 | bg-dark-orange-200 #664515 |
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 #ffcc9e | bg-dark-orange-300 #805610 |
background.interactive.success.default bg-interactive-success-default Background color for success interactive elements like badge or clickable components. | bg-green-100 #c3f0d8 | bg-dark-green-100 #12422e |
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 #9bebc1 | bg-dark-green-200 #0f593c |
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 #73ecb1 | bg-dark-green-300 #00714c |
background.interactive.adhoc.default bg-interactive-adhoc-default Background color for adhoc interactive elements like badge or clickable components. | bg-purple-100 #e7d9ff | bg-dark-purple-100 #402c60 |
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 #e7d0ff | bg-dark-purple-200 #4d3474 |
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 #e4c8ff | bg-dark-purple-300 #5b3b87 |
background.highlight.default bg-highlight-default Default solid background color for components’ highlight variants. | bg-blue-500 #2e8eff | bg-blue-500 #2e8eff |
background.highlight.hover bg-highlight-hover Hover solid background color for hover state for components’ highlight variants. | bg-blue-700 #1c4fa8 | bg-blue-700 #1c4fa8 |
background.highlight.active bg-highlight-active Active solid background color for active state for components’ highlight variants. | bg-blue-800 #072d78 | bg-blue-800 #072d78 |
background.highlight.secondary.default bg-highlight-secondary-default Secondary background color for components’ highlight variants. | bg-blue-50 #e6f2ff | bg-dark-blue-50 #072543 |
background.highlight.secondary.hover bg-highlight-secondary-hover Secondary hover solid background color for hover state for components’ highlight variants. | bg-blue-100 #d6f0ff | bg-dark-blue-100 #002361 |
background.highlight.secondary.active bg-highlight-secondary-active Secondary active solid background color for active state for components’ highlight variants. | bg-blue-200 #b3dfff | bg-dark-blue-200 #123985 |
background.highlight.disabled bg-highlight-disabled Disabled solid background color for disabled state for components’ highlight variants. | bg-blue-200 #b3dfff | bg-dark-blue-200 #123985 |
background.success.default bg-success-default Default solid background color for components’ success variants. | bg-green-500 #00af6b | bg-green-500 #00af6b |
background.success.hover bg-success-hover Hover solid background color for hover state for components’ success variants. | bg-green-700 #00653a | bg-green-700 #00653a |
background.success.active bg-success-active Active solid background color for active state for components’ success variants. | bg-green-800 #004222 | bg-green-800 #004222 |
background.success.secondary.default bg-success-secondary-default Secondary background color for components’ success variants. | bg-green-50 #e3fced | bg-dark-green-50 #1e3a2d |
background.success.secondary.hover bg-success-secondary-hover Secondary hover solid background color for hover state for components’ success variants. | bg-green-100 #c3f0d8 | bg-dark-green-100 #12422e |
background.success.secondary.active bg-success-secondary-active Secondary active solid background color for active state for components’ success variants. | bg-green-200 #9bebc1 | bg-dark-green-200 #0f593c |
background.success.disabled bg-success-disabled Disabled solid background color for disabled state for components’ success variants. | bg-green-200 #9bebc1 | bg-dark-green-200 #0f593c |
background.adhoc.default bg-adhoc-default Default solid background color for components’ adhoc variants. | bg-purple-500 #ad6bff | bg-purple-500 #ad6bff |
background.adhoc.hover bg-adhoc-hover Hover solid background color for hover state for components’ adhoc variants. | bg-purple-700 #6439ad | bg-purple-700 #6439ad |
background.adhoc.active bg-adhoc-active Active solid background color for active state for components’ adhoc variants. | bg-purple-800 #33026e | bg-purple-800 #33026e |
background.adhoc.secondary.default bg-adhoc-secondary-default Secondary background color for components’ adhoc variants. | bg-purple-50 #f2edff | bg-dark-purple-50 #36274f |
background.adhoc.secondary.hover bg-adhoc-secondary-hover Secondary hover solid background color for hover state for components’ adhoc variants. | bg-purple-100 #e7d9ff | bg-dark-purple-100 #402c60 |
background.adhoc.secondary.active bg-adhoc-secondary-active Secondary active solid background color for active state for components’ adhoc variants. | bg-purple-200 #e7d0ff | bg-dark-purple-200 #4d3474 |
background.adhoc.disabled bg-adhoc-disabled Disabled solid background color for disabled state for components’ adhoc variants. | bg-purple-200 #e7d0ff | bg-dark-purple-200 #4d3474 |
background.warning.default bg-warning-default Default solid background color for components’ warning variants. | bg-orange-500 #ea6000 | bg-orange-500 #ea6000 |
background.warning.hover bg-warning-hover Hover solid background color for hover state for components’ warning variants. | bg-orange-700 #aa3e12 | bg-orange-700 #aa3e12 |
background.warning.active bg-warning-active Active solid background color for active state for components’ warning variants. | bg-orange-800 #781c00 | bg-orange-800 #781c00 |
background.warning.secondary.default bg-warning-secondary-default Secondary background color for components’ warning variants. | bg-orange-50 #fff1e4 | bg-dark-orange-50 #3d2d1b |
background.warning.secondary.hover bg-warning-secondary-hover Secondary hover solid background color for hover state for components’ warning variants. | bg-orange-100 #ffe8c5 | bg-dark-orange-100 #4d3615 |
background.warning.secondary.active bg-warning-secondary-active Secondary active solid background color for active state for components’ warning variants. | bg-orange-200 #ffd9b5 | bg-dark-orange-200 #664515 |
background.warning.disabled bg-warning-disabled Disabled solid background color for disabled state for components’ warning variants. | bg-orange-200 #ffd9b5 | bg-dark-orange-200 #664515 |
background.danger.default bg-danger-default Default solid background color for components’ danger variants. | bg-red-500 #ff5349 | bg-red-500 #ff5349 |
background.danger.hover bg-danger-hover Hover solid background color for hover state for components’ danger variants. | bg-red-700 #941c14 | bg-red-700 #941c14 |
background.danger.active bg-danger-active Active solid background color for active state for components’ danger variants. | bg-red-800 #540000 | bg-red-800 #540000 |
background.danger.secondary.default bg-danger-secondary-default Secondary background color for components’ danger variants. | bg-red-50 #fff3f2 | bg-dark-red-50 #432122 |
background.danger.secondary.hover bg-danger-secondary-hover Secondary hover solid background color for hover state for components’ danger variants. | bg-red-100 #ffe6e3 | bg-dark-red-100 #562323 |
background.danger.secondary.active bg-danger-secondary-active Secondary active solid background color for active state for components’ danger variants. | bg-red-200 #ffd0ca | bg-dark-red-200 #762e30 |
background.danger.disabled bg-danger-disabled Disabled solid background color for disabled state for components’ danger variants. | bg-red-200 #ffd0ca | bg-dark-red-200 #762e30 |
background.avatar.default bg-avatar-default | bg-blue-900 #002260 | bg-blue-900 #002260 |
background.avatar.counter bg-avatar-counter | bg-blue-200 #b3dfff | bg-blue-200 #b3dfff |
background.inverted.default bg-inverted-default Default inverted background color for large section like Help Center panel, header navigation. | bg-dark-gray-50 #1a1b1e | bg-dark-gray-50 #1a1b1e |
background.inverted.hover bg-inverted-hover Hover background color for hover state for components on inverted background. | bg-dark-gray-100 #242529 | bg-dark-gray-100 #242529 |
background.inverted.active bg-inverted-active Active background color for active state for components on inverted background. | bg-dark-gray-200 #343537 | bg-dark-gray-200 #343537 |
background.inverted.secondary bg-inverted-secondary Secondary inverted background color used to created contrast against default inverted backgrounds. | bg-dark-gray-50 #1a1b1e | bg-dark-gray-50 #1a1b1e |
background.inverted.base bg-inverted-base Inverted 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-dark-gray-00 #121212 | bg-dark-gray-00 #121212 |
text.highlight.default text-highlight-default Default text color for components’ highlight variants where text needs to be more readable like badges. | text-blue-800 #072d78 | text-dark-blue-800 #b3dfff |
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-900 #002260 | text-dark-blue-900 #d5f0ff |
text.highlight.weak text-highlight-weak More subtle text color used in components’ highlight variants. | text-blue-700 #1c4fa8 | text-dark-blue-700 #a6dbff |
text.highlight.button text-highlight-button Default text color for button highlight variants. | text-blue-600 #2c6ed5 | text-dark-blue-600 #78b9ff |
text.highlight.disabled text-highlight-disabled Default text color for disabled state for components’ highlight variants. | text-blue-300 #a6dbff | text-dark-blue-300 #11449c |
text.success.default text-success-default Default text color for components’ success variants where text needs to be more readable like badges. | text-green-800 #004222 | text-dark-green-800 #7deeb7 |
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-900 #001805 | text-dark-green-900 #b8ffe2 |
text.success.weak text-success-weak More subtle text color used in components’ success variants. | text-green-700 #00653a | text-dark-green-700 #64dda7 |
text.success.button text-success-button Default text color for button success variants. | text-green-600 #008a50 | text-dark-green-600 #43c68c |
text.success.disabled text-success-disabled Default text color for disabled state for components’ success variants. | text-green-300 #73ecb1 | text-dark-green-300 #00714c |
text.warning.default text-warning-default Default text color for components’ warning variants where text needs to be more readable like badges. | text-orange-800 #781c00 | text-dark-orange-800 #ffd193 |
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-900 #490000 | text-dark-orange-900 #fff0c2 |
text.warning.weak text-warning-weak More subtle text color used in components’ warning variants. | text-orange-700 #aa3e12 | text-dark-orange-700 #f2ba74 |
text.warning.button text-warning-button Default text color for button warning variants. | text-orange-600 #cb4d1a | text-dark-orange-600 #d59b46 |
text.warning.disabled text-warning-disabled Default text color for disabled state for components’ warning variants. | text-orange-300 #ffcc9e | text-dark-orange-300 #805610 |
text.danger.default text-danger-default Default text color for components’ danger variants where text needs to be more readable like badges. | text-red-800 #540000 | text-dark-red-800 #ffc9c4 |
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-900 #480000 | text-dark-red-900 #ffe9e6 |
text.danger.weak text-danger-weak More subtle text color used in components’ danger variants | text-red-700 #941c14 | text-dark-red-700 #ffa39f |
text.danger.button text-danger-button Default text color for button danger variants. | text-red-600 #cd3d30 | text-dark-red-600 #e97271 |
text.danger.disabled text-danger-disabled Default text color for disabled state for components’ danger variants. | text-red-300 #ffc9c1 | text-dark-red-300 #97393d |
text.adhoc.default text-adhoc-default Default text color for components’ adhoc variants where text needs to be more readable like badges. | text-purple-800 #33026e | text-dark-purple-800 #e5cdff |
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-900 #1c1c1c | text-dark-purple-900 #f9eaff |
text.adhoc.weak text-adhoc-weak More subtle text color used in components’ adhoc variants. | text-purple-700 #6439ad | text-dark-purple-700 #cdaffd |
text.adhoc.button text-adhoc-button Default text color for button adhoc variants. | text-purple-600 #8a51d4 | text-dark-purple-600 #a783df |
text.adhoc.disabled text-adhoc-disabled Default text color for disabled state for components’ adhoc variants. | text-purple-300 #e4c8ff | text-dark-purple-300 #5b3b87 |
text.default text-default Default text color across apps and components like main body text, components’ label. | text-gray-800 #212329 | text-dark-gray-800 #e1e2e5 |
text.strong text-strong More important text like headings, titles. | text-gray-900 #13151c | text-dark-gray-900 #f5f5f5 |
text.weak text-weak Supporting text like description, paragraph text. | text-gray-700 #4e515b | text-dark-gray-700 #c6c8cd |
text.helper text-helper More subtle text but still readable like helper text. | text-gray-600 #717688 | text-dark-gray-600 #9399a4 |
text.disabled text-disabled Default color for disabled text like disabled input fields, dropdowns, and buttons. | text-gray-400 #a7aab4 | text-dark-gray-400 #61646b |
text.inverted.default text-inverted-default Default text color used with inverted background like in Help Center, Header navigation. | text-dark-gray-800 #e1e2e5 | text-gray-800 #212329 |
text.inverted.strong text-inverted-strong More important text color used with inverted background, like headings, titles or hover state. | text-dark-gray-900 #f5f5f5 | text-gray-900 #13151c |
text.inverted.weak text-inverted-weak Supporting text used with inverted background like description, paragraph text.d background, like description. | text-dark-gray-700 #c6c8cd | text-gray-700 #4e515b |
text.inverted.helper text-inverted-helper More subtle text color used with inverted background, like helper text. | text-dark-gray-600 #9399a4 | text-gray-600 #717688 |
text.inverted.placeholder text-inverted-placeholder Components’ placeholder text used with inverted background like input field, select placeholders. | text-dark-gray-600 #9399a4 | text-gray-600 #717688 |
text.inverted.disabled text-inverted-disabled Default color for disabled text used with inverted background like disabled input fields, dropdowns, and buttons. | text-dark-gray-500 #74767c | text-gray-500 #9398a6 |
text.link.default text-link-default Link text. | text-blue-600 #2c6ed5 | text-dark-blue-600 #78b9ff |
text.link.hover text-link-hover Link text hover state. | text-blue-700 #1c4fa8 | text-dark-blue-700 #a6dbff |
text.link.active text-link-active Link text active state. | text-blue-800 #072d78 | text-dark-blue-800 #b3dfff |
text.placeholder text-placeholder Components’ placeholder text like input field, select placeholders. | text-gray-600 #717688 | text-dark-gray-600 #9399a4 |
text.white text-white Text that is always white like text in primary buttons. | text-white #ffffff | text-white #ffffff |
text.link-inverted.default text-link-inverted-default Link text on inverted background. | text-dark-blue-600 #78b9ff | text-blue-600 #2c6ed5 |
text.link-inverted.hover text-link-inverted-hover Link text on inverted background. | text-dark-blue-700 #a6dbff | text-blue-700 #1c4fa8 |
text.link-inverted.active text-link-inverted-active Link text active state inverted background. | text-dark-blue-800 #b3dfff | text-blue-800 #072d78 |
border.default border-default Default border color for all components, section, divider and separator. | border-gray-300 #dfe1e7 | border-dark-gray-300 #464649 |
border.highlight.default border-highlight-default Default border color for all components’ highlight variants. | border-blue-300 #a6dbff | border-dark-blue-300 #11449c |
border.highlight.strong border-highlight-strong Border color used for interactive components’ highlight variants like buttons. | border-blue-400 #4e97f3 | border-dark-blue-400 #3b7ee6 |
border.success.default border-success-default Default border color for all components’ success variants. | border-green-300 #73ecb1 | border-dark-green-300 #00714c |
border.success.strong border-success-strong Border color used for interactive components’ success variants like buttons. | border-green-400 #34b27a | border-dark-green-400 #26986a |
border.adhoc.default border-adhoc-default Default border color for all components’ adhoc variants. | border-purple-300 #e4c8ff | border-dark-purple-300 #5b3b87 |
border.adhoc.strong border-adhoc-strong Border color used for interactive components’ adhoc variants like buttons. | border-purple-400 #aa7ff7 | border-dark-purple-400 #754da9 |
border.warning.default border-warning-default Default border color for all components’ warning variants. | border-orange-300 #ffcc9e | border-dark-orange-300 #805610 |
border.warning.strong border-warning-strong Border color used for interactive components’ warning variants like buttons. | border-orange-400 #e77c32 | border-dark-orange-400 #966300 |
border.danger.default border-danger-default Default border color for all components’ danger variants. | border-red-300 #ffc9c1 | border-dark-red-300 #97393d |
border.danger.strong border-danger-strong Border color used for interactive components’ danger variants like buttons. | border-red-400 #f66d63 | border-dark-red-600 #e97271 |
border.strong border-strong Border color used where needs more contrast like interactive components | border-gray-400 #a7aab4 | border-dark-gray-400 #61646b |
border.avatar.group border-avatar-group | border-white #ffffff | border-dark-gray-00 #121212 |
border.transparent border-transparent | #ffffff00 | #ffffff00 |
border.inverted.default border-inverted-default Default border color with inverted background. | border-dark-gray-300 #464649 | border-gray-300 #dfe1e7 |
border.inverted.strong border-inverted-strong Border color used where needs more contrast like interactive components on inverted background. | border-dark-gray-400 #61646b | border-gray-400 #a7aab4 |
icon.default icon-default Default color for icons across apps and components. | icon-gray-700 #4e515b | icon-dark-gray-700 #c6c8cd |
icon.highlight.default icon-highlight-default Default icon color for components’ highlight variants. | icon-blue-600 #2c6ed5 | icon-dark-blue-600 #78b9ff |
icon.highlight.disabled icon-highlight-disabled Disabled icon color for disabled state for components’ highlight variants. | icon-blue-300 #a6dbff | icon-dark-blue-300 #11449c |
icon.highlight.hover icon-highlight-hover Hover icon color for hover state for components’ highlight variants. | icon-blue-700 #1c4fa8 | icon-dark-blue-700 #a6dbff |
icon.highlight.active icon-highlight-active Active icon color for active state for components’ highlight variants. | icon-blue-800 #072d78 | icon-dark-blue-800 #b3dfff |
icon.success.default icon-success-default Default icon color for components’ success variants. | icon-green-600 #008a50 | icon-dark-green-600 #43c68c |
icon.success.disabled icon-success-disabled Disabled icon color for disabled state for components’ success variants. | icon-green-300 #73ecb1 | icon-dark-green-300 #00714c |
icon.success.hover icon-success-hover Hover icon color for hover state for components’ success variants. | icon-green-700 #00653a | icon-dark-green-700 #64dda7 |
icon.success.active icon-success-active Active icon color for active state for components’ success variants. | icon-green-800 #004222 | icon-dark-green-800 #7deeb7 |
icon.warning.default icon-warning-default Default icon color for components’ warning variants. | icon-orange-600 #cb4d1a | icon-dark-orange-600 #d59b46 |
icon.warning.disabled icon-warning-disabled Disabled icon color for disabled state for components’ warning variants. | icon-orange-300 #ffcc9e | icon-dark-orange-300 #805610 |
icon.warning.hover icon-warning-hover Hover icon color for hover state for components’ warning variants. | icon-orange-700 #aa3e12 | icon-dark-orange-700 #f2ba74 |
icon.warning.active icon-warning-active Active icon color for active state for components’ warning variants. | icon-orange-800 #781c00 | icon-dark-orange-800 #ffd193 |
icon.danger.default icon-danger-default Default icon color for components’ danger variants. | icon-red-600 #cd3d30 | icon-dark-red-600 #e97271 |
icon.danger.disabled icon-danger-disabled Disabled icon color for disabled state for components’ danger variants. | icon-red-300 #ffc9c1 | icon-dark-red-300 #97393d |
icon.danger.hover icon-danger-hover Hover icon color for hover state for components’ danger variants. | icon-red-700 #941c14 | icon-dark-red-700 #ffa39f |
icon.danger.active icon-danger-active Active icon color for active state for components’ danger variants. | icon-red-800 #540000 | icon-dark-red-800 #ffc9c4 |
icon.adhoc.default icon-adhoc-default Default icon color for components’ adhoc variants. | icon-purple-600 #8a51d4 | icon-dark-purple-600 #a783df |
icon.adhoc.disabled icon-adhoc-disabled Disabled icon color for disabled state for components’ adhoc variants. | icon-purple-300 #e4c8ff | icon-dark-purple-300 #5b3b87 |
icon.adhoc.active icon-adhoc-active Active icon color for active state for components’ adhoc variants. | icon-purple-800 #33026e | icon-dark-purple-800 #e5cdff |
icon.adhoc.hover icon-adhoc-hover Hover icon color for hover state for components’ adhoc variants. | icon-purple-700 #6439ad | icon-dark-purple-700 #cdaffd |
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 #212329 | icon-dark-gray-800 #e1e2e5 |
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 #13151c | icon-dark-gray-900 #f5f5f5 |
icon.disabled icon-disabled Disabled color for icon disabled state. | icon-gray-400 #a7aab4 | icon-dark-gray-400 #61646b |
icon.white icon-white Icon that is always white like icons in primary buttons. | icon-white #ffffff | icon-white #ffffff |
icon.inverted.default icon-inverted-default Default icon color used with inverted background like in Help Center, Header navigation. | icon-dark-gray-700 #c6c8cd | icon-gray-700 #4e515b |
icon.inverted.hover icon-inverted-hover Hover icon color for hover state on inverted background. | icon-dark-gray-800 #e1e2e5 | icon-gray-800 #212329 |
icon.inverted.active icon-inverted-active Active icon color for icon active state on inverted background. | icon-dark-gray-900 #f5f5f5 | icon-gray-900 #13151c |
icon.inverted.weak icon-inverted-weak Disabled icon color for icon disabled state on inverted background. | icon-dark-gray-600 #9399a4 | icon-gray-600 #717688 |
icon.inverted.disabled icon-inverted-disabled Disabled icon color for icon disabled state on inverted background. | icon-dark-gray-500 #74767c | icon-gray-500 #9398a6 |
icon.weak icon-weak | icon-gray-600 #717688 | icon-dark-gray-600 #9399a4 |
focus-ring.default.inner ring-default-inner | bg-gray-800 #212329 | bg-dark-gray-800 #e1e2e5 |
focus-ring.default.outer ring-default-outer | bg-gray-300 #dfe1e7 | bg-dark-gray-300 #464649 |
focus-ring.danger.inner ring-danger-inner | bg-red-800 #540000 | bg-dark-red-800 #ffc9c4 |
focus-ring.danger.outer ring-danger-outer | bg-red-300 #ffc9c1 | bg-dark-red-300 #97393d |
focus-ring.warning.inner ring-warning-inner | bg-orange-800 #781c00 | bg-dark-orange-800 #ffd193 |
focus-ring.warning.outer ring-warning-outer | bg-orange-300 #ffcc9e | bg-dark-orange-300 #805610 |
focus-ring.success.inner ring-success-inner | bg-green-800 #004222 | bg-dark-green-800 #7deeb7 |
focus-ring.success.outer ring-success-outer | bg-green-300 #73ecb1 | bg-dark-green-300 #00714c |
focus-ring.highlight.inner ring-highlight-inner | bg-blue-800 #072d78 | bg-dark-blue-800 #b3dfff |
focus-ring.highlight.outer ring-highlight-outer | bg-blue-300 #a6dbff | bg-dark-blue-300 #11449c |
logo.green | bg-green-500 #00af6b | bg-green-500 #00af6b |
logo.navy | bg-blue-900 #002260 | bg-blue-900 #002260 |
logo.white | bg-white #ffffff | bg-white #ffffff |
logo.green (strong) | bg-green-600 #008a50 | bg-green-600 #008a50 |