Holistics Design System

Color ​

Search:
ColorLightDark
background.default
The primary background color used across all layouts and components.
white
#ffffff
dark.gray.75
#212327
background.hover
Hover background color for hover state for components with default or transparent background like secondary buttons or dropdown options.
light.gray.100
#f5f8fa
dark.gray.100
#292b2e
background.active
Active background color for active state for components with default or transparent background like secondary buttons or dropdown options.
light.gray.200
#edf1f5
dark.gray.200
#2e3033
background.disabled
Disabled background color for components with default background.
light.gray.200
#edf1f5
dark.gray.200
#2e3033
background.secondary.default
The secondary background color used to create contrast against default backgrounds, such as panel, section backgrounds.
light.gray.50
#f9fbfc
dark.gray.50
#191b1f
background.secondary.hover
Hover background color for hover state for components on secondary background.
light.gray.200
#edf1f5
dark.gray.200
#2e3033
background.secondary.active
Active background color for active state for components on secondary background.
light.gray.200
#edf1f5
dark.gray.200
#2e3033
background.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.
light.gray.100
#f5f8fa
dark.gray.00
#13151a
background.interactive.switch
Background color for toggle switches and similar binary control elements in their default or "disabled" state.
light.gray.400
#cbd0d7
dark.gray.400
#505157
background.interactive.inverted
Background color for interactive elements that need inverted appearance.
light.gray.800
#212327
light.gray.800
#212327
background.interactive.scrollbar
Background color for scrollbar tracks and handles.
light.gray.300
#e3e7ed
dark.gray.300
#424347
background.interactive.default
Default background color for interactive elements like badge or clickable components.
light.gray.200
#edf1f5
dark.gray.200
#2e3033
background.interactive.hover
Hover background color for interactive elements when users move their cursor over them.
light.gray.300
#e3e7ed
dark.gray.300
#424347
background.interactive.active
Active/pressed background color for interactive elements when clicked or tapped, indicating the element is currently being activated.
light.gray.400
#cbd0d7
dark.gray.400
#505157
background.interactive.overlay
Background color for overlay element.
black-alpha-40
#00000066
black-alpha-40
#00000066
background.interactive.highlight.default
Background color for informative/highlight interactive elements like badge or clickable components.
light.blue.100
#d1e5fa
dark.blue.100
#253547
background.interactive.highlight.hover
Hover background color for informative/highlight interactive elements when users move their cursor over them.
light.blue.200
#bbd7f7
dark.blue.200
#314052
background.interactive.highlight.active
Active/pressed background color for informative/highlight interactive elements when clicked or tapped, indicating the element is currently being activated.
light.blue.300
#8dbef2
dark.blue.300
#485970
background.interactive.danger.default
Background color for danger interactive elements like badge or clickable components.
light.red.100
#fde8e8
dark.red.100
#472e2e
background.interactive.danger.hover
Hover background color for danger interactive elements when users move their cursor over them.
light.red.200
#fad2d1
dark.red.200
#523738
background.interactive.danger.active
Active/pressed background color for danger interactive elements when clicked or tapped, indicating the element is currently being activated.
light.red.300
#f6a5a2
dark.red.300
#705556
background.interactive.warning.default
Background color for warning interactive elements like badge or clickable components.
light.orange.100
#fff4d8
dark.orange.100
#473827
background.interactive.warning.hover
Hover background color for warning interactive elements when users move their cursor over them.
light.orange.200
#ffe7af
dark.orange.200
#52412e
background.interactive.warning.active
Active/pressed background color for warning interactive elements when clicked or tapped, indicating the element is currently being activated.
light.orange.300
#fecf7f
dark.orange.300
#6b5d4d
background.interactive.success.default
Background color for success interactive elements like badge or clickable components.
light.green.100
#ccede0
dark.green.100
#2a3d35
background.interactive.success.hover
Hover background color for success interactive elements when users move their cursor over them.
light.green.200
#a4e0c8
dark.green.200
#3b5248
background.interactive.success.active
Active/pressed background color for success interactive elements when clicked or tapped, indicating the element is currently being activated.
light.green.300
#7ad1ae
dark.green.300
#49665b
background.interactive.adhoc.default
Background color for adhoc interactive elements like badge or clickable components.
light.purple.100
#e9dcfa
dark.purple.100
#3b344d
background.interactive.adhoc.hover
Hover background color for adhoc interactive elements when users move their cursor over them.
light.purple.200
#decbf7
dark.purple.200
#403952
background.interactive.adhoc.active
Active/pressed background color for adhoc interactive elements when clicked or tapped, indicating the element is currently being activated.
light.purple.300
#d0b5f4
dark.purple.300
#534966
background.highlight.default
Default solid background color for components’ highlight variants.
light.blue.600
#1b7ce4
light.blue.600
#1b7ce4
background.highlight.hover
Hover solid background color for hover state for components’ highlight variants.
light.blue.700
#1663b6
light.blue.700
#1663b6
background.highlight.active
Active solid background color for active state for components’ highlight variants.
light.blue.800
#104a89
light.blue.800
#104a89
background.highlight.secondary.default
Secondary background color for components’ highlight variants.
light.blue.50
#e8f2fd
dark.blue.50
#252e47
background.highlight.secondary.hover
Secondary hover solid background color for hover state for components’ highlight variants.
light.blue.100
#d1e5fa
dark.blue.100
#253547
background.highlight.secondary.active
Secondary active solid background color for active state for components’ highlight variants.
light.blue.200
#bbd7f7
dark.blue.200
#314052
background.highlight.disabled
Disabled solid background color for disabled state for components’ highlight variants.
light.blue.200
#bbd7f7
dark.blue.200
#314052
background.success.default
Default solid background color for components’ success variants.
light.green.600
#259b6c
light.green.600
#259b6c
background.success.hover
Hover solid background color for hover state for components’ success variants.
light.green.700
#1f815a
light.green.700
#1f815a
background.success.active
Active solid background color for active state for components’ success variants.
light.green.800
#196848
light.green.800
#196848
background.success.secondary.default
Secondary background color for components’ success variants.
light.green.50
#eaf8f2
dark.green.50
#243830
background.success.secondary.hover
Secondary hover solid background color for hover state for components’ success variants.
light.green.100
#ccede0
dark.green.100
#2a3d35
background.success.secondary.active
Secondary active solid background color for active state for components’ success variants.
light.green.200
#a4e0c8
dark.green.200
#3b5248
background.success.disabled
Disabled solid background color for disabled state for components’ success variants.
light.green.200
#a4e0c8
dark.green.200
#3b5248
background.adhoc.default
Default solid background color for components’ adhoc variants.
light.purple.600
#9250e5
light.purple.600
#9250e5
background.adhoc.hover
Hover solid background color for hover state for components’ adhoc variants.
light.purple.700
#7c2ce0
light.purple.700
#7c2ce0
background.adhoc.active
Active solid background color for active state for components’ adhoc variants.
light.purple.800
#5f1bb4
light.purple.800
#5f1bb4
background.adhoc.secondary.default
Secondary background color for components’ adhoc variants.
light.purple.50
#f4eefd
dark.purple.50
#322b47
background.adhoc.secondary.hover
Secondary hover solid background color for hover state for components’ adhoc variants.
light.purple.100
#e9dcfa
dark.purple.100
#3b344d
background.adhoc.secondary.active
Secondary active solid background color for active state for components’ adhoc variants.
light.purple.200
#decbf7
dark.purple.200
#403952
background.adhoc.disabled
Disabled solid background color for disabled state for components’ adhoc variants.
light.purple.200
#decbf7
dark.purple.200
#403952
background.warning.default
Default solid background color for components’ warning variants.
light.orange.600
#e36a01
light.orange.600
#e36a01
background.warning.hover
Hover solid background color for hover state for components’ warning variants.
light.orange.700
#b04a00
light.orange.700
#b04a00
background.warning.active
Active solid background color for active state for components’ warning variants.
light.orange.800
#913d00
light.orange.800
#913d00
background.warning.secondary.default
Secondary background color for components’ warning variants.
light.orange.50
#fff7ea
dark.orange.50
#3b2d26
background.warning.secondary.hover
Secondary hover solid background color for hover state for components’ warning variants.
light.orange.100
#fff4d8
dark.orange.100
#473827
background.warning.secondary.active
Secondary active solid background color for active state for components’ warning variants.
light.orange.200
#ffe7af
dark.orange.200
#52412e
background.warning.disabled
Disabled solid background color for disabled state for components’ warning variants.
light.orange.200
#ffe7af
dark.orange.200
#52412e
background.danger.default
Default solid background color for components’ danger variants.
light.red.600
#e71f18
light.red.600
#e71f18
background.danger.hover
Hover solid background color for hover state for components’ danger variants.
light.red.700
#d01c16
light.red.700
#d01c16
background.danger.active
Active solid background color for active state for components’ danger variants.
light.red.800
#bf0e08
light.red.800
#bf0e08
background.danger.secondary.default
Secondary background color for components’ danger variants.
light.red.50
#fff5f5
dark.red.50
#3d2527
background.danger.secondary.hover
Secondary hover solid background color for hover state for components’ danger variants.
light.red.100
#fde8e8
dark.red.100
#472e2e
background.danger.secondary.active
Secondary active solid background color for active state for components’ danger variants.
light.red.200
#fad2d1
dark.red.200
#523738
background.danger.disabled
Disabled solid background color for disabled state for components’ danger variants.
light.red.200
#fad2d1
dark.red.200
#523738
background.avatar.default
light.blue.900
#05264c
light.blue.900
#05264c
background.avatar.counter
light.blue.200
#bbd7f7
light.blue.200
#bbd7f7
background.inverted.default
Default inverted background color for large section like Help Center panel, header navigation.
dark.gray.75
#212327
white
#ffffff
background.inverted.hover
Hover background color for hover state for components on inverted background.
dark.gray.100
#292b2e
light.gray.100
#f5f8fa
background.inverted.active
Active background color for active state for components on inverted background.
dark.gray.200
#2e3033
light.gray.200
#edf1f5
background.inverted.secondary
Secondary inverted background color used to created contrast against default inverted backgrounds.
dark.gray.50
#191b1f
light.gray.50
#f9fbfc
background.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.
dark.gray.00
#13151a
light.gray.100
#f5f8fa
border.default
Default border color for all components, section, divider and separator.
light.gray.300
#e3e7ed
dark.gray.300
#424347
border.highlight.default
Default border color for all components’ highlight variants.
light.blue.300
#8dbef2
dark.blue.300
#485970
border.highlight.strong
Border color used for interactive components’ highlight variants like buttons.
light.blue.600
#1b7ce4
dark.blue.600
#6eb1f5
border.success.default
Default border color for all components’ success variants.
light.green.300
#7ad1ae
dark.green.300
#49665b
border.success.strong
Border color used for interactive components’ success variants like buttons.
light.green.600
#259b6c
dark.green.600
#47cc97
border.adhoc.default
Default border color for all components’ adhoc variants.
light.purple.300
#d0b5f4
dark.purple.300
#534966
border.adhoc.strong
Border color used for interactive components’ adhoc variants like buttons.
light.purple.600
#9250e5
dark.purple.600
#b899f7
border.warning.default
Default border color for all components’ warning variants.
light.orange.300
#fecf7f
dark.orange.300
#6b5d4d
border.warning.strong
Border color used for interactive components’ warning variants like buttons.
light.orange.600
#e36a01
dark.orange.600
#f2b96d
border.danger.default
Default border color for all components’ danger variants.
light.red.300
#f6a5a2
dark.red.300
#705556
border.danger.strong
Border color used for interactive components’ danger variants like buttons.
light.red.600
#e71f18
dark.red.600
#f5837f
border.strong
Border color used where needs more contrast like interactive components
light.gray.400
#cbd0d7
dark.gray.400
#505157
border.avatar.group
white
#ffffff
dark.gray.00
#13151a
border.transparent
border.inverted.default
Default border color with inverted background.
dark.gray.300
#424347
light.gray.300
#e3e7ed
border.inverted.strong
Border color used where needs more contrast like interactive components on inverted background.
dark.gray.400
#505157
light.gray.400
#cbd0d7
icon.default
Default color for icons across apps and components.
light.gray.700
#505157
dark.gray.700
#d2d4d9
icon.highlight.default
Default icon color for components’ highlight variants.
light.blue.600
#1b7ce4
dark.blue.600
#6eb1f5
icon.highlight.disabled
Disabled icon color for disabled state for components’ highlight variants.
light.blue.300
#8dbef2
dark.blue.300
#485970
icon.highlight.hover
Hover icon color for hover state for components’ highlight variants.
light.blue.700
#1663b6
dark.blue.700
#94c6f7
icon.highlight.active
Active icon color for active state for components’ highlight variants.
light.blue.800
#104a89
dark.blue.800
#a7d2fc
icon.success.default
Default icon color for components’ success variants.
light.green.600
#259b6c
dark.green.600
#47cc97
icon.success.disabled
Disabled icon color for disabled state for components’ success variants.
light.green.300
#7ad1ae
dark.green.300
#49665b
icon.success.hover
Hover icon color for hover state for components’ success variants.
light.green.700
#1f815a
dark.green.700
#77d9b2
icon.success.active
Active icon color for active state for components’ success variants.
light.green.800
#196848
dark.green.800
#8ae5c1
icon.warning.default
Default icon color for components’ warning variants.
light.orange.600
#e36a01
dark.orange.600
#f2b96d
icon.warning.disabled
Disabled icon color for disabled state for components’ warning variants.
light.orange.300
#fecf7f
dark.orange.300
#6b5d4d
icon.warning.hover
Hover icon color for hover state for components’ warning variants.
light.orange.700
#b04a00
dark.orange.700
#f5ba87
icon.warning.active
Active icon color for active state for components’ warning variants.
light.orange.800
#913d00
dark.orange.800
#facba2
icon.danger.default
Default icon color for components’ danger variants.
light.red.600
#e71f18
dark.red.600
#f5837f
icon.danger.disabled
Disabled icon color for disabled state for components’ danger variants.
light.red.300
#f6a5a2
dark.red.300
#705556
icon.danger.hover
Hover icon color for hover state for components’ danger variants.
light.red.700
#d01c16
dark.red.700
#f7a3a1
icon.danger.active
Active icon color for active state for components’ danger variants.
light.red.800
#bf0e08
dark.red.800
#fab1af
icon.adhoc.default
Default icon color for components’ adhoc variants.
light.purple.600
#9250e5
dark.purple.600
#b899f7
icon.adhoc.disabled
Disabled icon color for disabled state for components’ adhoc variants.
light.purple.300
#d0b5f4
dark.purple.300
#534966
icon.adhoc.active
Active icon color for active state for components’ adhoc variants.
light.purple.800
#5f1bb4
dark.purple.800
#d7c5fc
icon.adhoc.hover
Hover icon color for hover state for components’ adhoc variants.
light.purple.700
#7c2ce0
dark.purple.700
#cbb4fa
icon.hover
Hover color for icon hover state like standalone icons with no background or icon in button clear/default variant.
light.gray.800
#212327
dark.gray.800
#e8eaed
icon.active
Active color for icon hover state like standalone icons with no background, icon in button clear/default variant, or selected Select trigger.
light.gray.900
#13151a
dark.gray.900
#ffffff
icon.disabled
Disabled color for icon disabled state.
light.gray.500
#989ca6
dark.gray.500
#666970
icon.white
Icon that is always white like icons in primary buttons.
white
#ffffff
white
#ffffff
icon.inverted.default
Default icon color used with inverted background like in Help Center, Header navigation.
dark.gray.700
#d2d4d9
light.gray.700
#505157
icon.inverted.hover
Hover icon color for hover state on inverted background.
dark.gray.800
#e8eaed
light.gray.800
#212327
icon.inverted.active
Active icon color for icon active state on inverted background.
dark.gray.900
#ffffff
light.gray.900
#13151a
icon.inverted.weak
Disabled icon color for icon disabled state on inverted background.
dark.gray.600
#989ca6
light.gray.600
#666970
icon.inverted.disabled
Disabled icon color for icon disabled state on inverted background.
dark.gray.500
#666970
light.gray.500
#989ca6
icon.weak
light.gray.600
#666970
dark.gray.600
#989ca6
text.highlight.default
Default text color for components’ highlight variants where text needs to be more readable like badges.
light.blue.800
#104a89
dark.blue.800
#a7d2fc
text.highlight.strong
More important text color used in components’ highlight variants, can be used for interactive states like hover, active, etc.
light.blue.900
#05264c
dark.blue.900
#b2d9ff
text.highlight.weak
More subtle text color used in components’ highlight variants.
light.blue.700
#1663b6
dark.blue.700
#94c6f7
text.highlight.button
Default text color for button highlight variants.
light.blue.600
#1b7ce4
dark.blue.600
#6eb1f5
text.highlight.disabled
Default text color for disabled state for components’ highlight variants.
light.blue.300
#8dbef2
dark.blue.300
#485970
text.success.default
Default text color for components’ success variants where text needs to be more readable like badges.
light.green.800
#196848
dark.green.800
#8ae5c1
text.success.strong
More important text color used in components’ success variants, can be used for interactive states like hover, active, etc.
light.green.900
#145239
dark.green.900
#a6edd1
text.success.weak
More subtle text color used in components’ success variants.
light.green.700
#1f815a
dark.green.700
#77d9b2
text.success.button
Default text color for button success variants.
light.green.600
#259b6c
dark.green.600
#47cc97
text.success.disabled
Default text color for disabled state for components’ success variants.
light.green.300
#7ad1ae
dark.green.300
#49665b
text.warning.default
Default text color for components’ warning variants where text needs to be more readable like badges.
light.orange.800
#913d00
dark.orange.800
#facba2
text.warning.strong
More important text color used in components’ warning variants, can be used for interactive states like hover, active, etc.
light.orange.900
#662900
dark.orange.900
#ffd9b8
text.warning.weak
More subtle text color used in components’ warning variants.
light.orange.700
#b04a00
dark.orange.700
#f5ba87
text.warning.button
Default text color for button warning variants.
light.orange.600
#e36a01
dark.orange.600
#f2b96d
text.warning.disabled
Default text color for disabled state for components’ warning variants.
light.orange.300
#fecf7f
dark.orange.300
#6b5d4d
text.danger.default
Default text color for components’ danger variants where text needs to be more readable like badges.
light.red.800
#bf0e08
dark.red.800
#fab1af
text.danger.strong
More important text color used in components’ danger variants, can be used for interactive states like hover, active, etc.
light.red.900
#8b120e
dark.red.900
#ffc1bf
text.danger.weak
More subtle text color used in components’ danger variants
light.red.700
#d01c16
dark.red.700
#f7a3a1
text.danger.button
Default text color for button danger variants.
light.red.600
#e71f18
dark.red.600
#f5837f
text.danger.disabled
Default text color for disabled state for components’ danger variants.
light.red.300
#f6a5a2
dark.red.300
#705556
text.adhoc.default
Default text color for components’ adhoc variants where text needs to be more readable like badges.
light.purple.800
#5f1bb4
dark.purple.800
#d7c5fc
text.adhoc.strong
More important text color used in components’ adhoc variants, can be used for interactive states like hover, active, etc.
light.purple.900
#38097a
dark.purple.900
#e4d6ff
text.adhoc.weak
More subtle text color used in components’ adhoc variants.
light.purple.700
#7c2ce0
dark.purple.700
#cbb4fa
text.adhoc.button
Default text color for button adhoc variants.
light.purple.600
#9250e5
dark.purple.600
#b899f7
text.adhoc.disabled
Default text color for disabled state for components’ adhoc variants.
light.purple.300
#d0b5f4
dark.purple.300
#534966
text.default
Default text color across apps and components like main body text, components’ label.
light.gray.800
#212327
dark.gray.800
#e8eaed
text.strong
More important text like headings, titles.
light.gray.900
#13151a
dark.gray.900
#ffffff
text.weak
Supporting text like description, paragraph text.
light.gray.700
#505157
dark.gray.700
#d2d4d9
text.helper
More subtle text but still readable like helper text.
light.gray.600
#666970
dark.gray.600
#989ca6
text.disabled
Default color for disabled text like disabled input fields, dropdowns, and buttons.
light.gray.500
#989ca6
dark.gray.500
#666970
text.inverted.default
Default text color used with inverted background like in Help Center, Header navigation.
dark.gray.800
#e8eaed
light.gray.800
#212327
text.inverted.strong
More important text color used with inverted background, like headings, titles or hover state.
dark.gray.900
#ffffff
light.gray.900
#13151a
text.inverted.weak
Supporting text used with inverted background like description, paragraph text.d background, like description.
dark.gray.700
#d2d4d9
light.gray.700
#505157
text.inverted.helper
More subtle text color used with inverted background, like helper text.
dark.gray.600
#989ca6
light.gray.600
#666970
text.inverted.placeholder
Components’ placeholder text used with inverted background like input field, select placeholders.
dark.gray.600
#989ca6
light.gray.600
#666970
text.inverted.disabled
Default color for disabled text used with inverted background like disabled input fields, dropdowns, and buttons.
dark.gray.500
#666970
light.gray.500
#989ca6
text.link.default
Link text.
light.blue.600
#1b7ce4
dark.blue.600
#6eb1f5
text.link.hover
Link text hover state.
light.blue.700
#1663b6
dark.blue.700
#94c6f7
text.link.active
Link text active state.
light.blue.800
#104a89
dark.blue.800
#a7d2fc
text.placeholder
Components’ placeholder text like input field, select placeholders.
light.gray.600
#666970
dark.gray.600
#989ca6
text.white
Text that is always white like text in primary buttons.
white
#ffffff
white
#ffffff
text.link-inverted.default
Link text on inverted background.
dark.blue.600
#6eb1f5
light.blue.600
#1b7ce4
text.link-inverted.hover
Link text on inverted background.
dark.blue.700
#94c6f7
light.blue.700
#1663b6
text.link-inverted.active
Link text active state inverted background.
dark.blue.800
#a7d2fc
light.blue.800
#104a89
logo.green
light.green.500
#2cb67f
light.green.500
#2cb67f
logo.navy
light.blue.900
#05264c
light.blue.900
#05264c
logo.white
white
#ffffff
white
#ffffff
logo.green (strong)
light.green.600
#259b6c
light.green.600
#259b6c
focus-ring.default.inner
light.gray.800
#212327
dark.gray.800
#e8eaed
focus-ring.default.outer
light.gray.300
#e3e7ed
dark.gray.300
#424347
focus-ring.danger.inner
light.red.800
#bf0e08
dark.red.800
#fab1af
focus-ring.danger.outer
light.red.300
#f6a5a2
dark.red.300
#705556
focus-ring.warning.inner
light.orange.800
#913d00
dark.orange.800
#facba2
focus-ring.warning.outer
light.orange.300
#fecf7f
dark.orange.300
#6b5d4d
focus-ring.success.inner
light.green.800
#196848
dark.green.800
#8ae5c1
focus-ring.success.outer
light.green.300
#7ad1ae
dark.green.300
#49665b
focus-ring.highlight.inner
light.blue.800
#104a89
dark.blue.800
#a7d2fc
focus-ring.highlight.outer
light.blue.300
#8dbef2
dark.blue.300
#485970