Colors

The design system includes a main color palette with 9 color shades.

content colors

content.primary

content.primary.hovered

content.subtle

content.subtle.hovered

content.subtle.light

content.subtle.light.hovered

content.accent

content.accent.hovered

content.inverted

content.inverted.hovered

content.control.primary

content.control.primary.hovered

content.disabled

content.error

content.error.hovered

content.success

content.success.hovered

background colors

background.primary

background.subtle

background.subtle.hovered

background.subtle.light

background.subtle.light.hovered

background.control.primary

background.control.primary.hovered

background.accent

background.accent.hovered

background.accent.light

background.accent.light.hovered

background.inverted

background.inverted.hovered

background.disabled

background.error

background.error.hovered

background.success

background.success.hovered

background.notification

background.notification.hovered

background.panels

background.inputs

background.hero

border colors

border.primary

border.primary.hovered

border.subtle

border.subtle.hovered

border.accent

border.accent.hovered

border.inverted

border.inverted.hovered

border.disabled

border.error

border.error.hovered

border.success

border.success.hovered

border.notification

border.notification.hovered

outline colors

outline.default

tag colors

tag.grey

tag.white

tag.brand-green

tag.blue

tag.orange

tag.yellow

tag.red

tag.teal

tag.green

tag.magenta

avatar colors

avatar.blue

avatar.red

avatar.orange

avatar.yellow

avatar.green

avatar.teal

avatar.magenta

chart colors

chart.green

chart.green-light

chart.grey-dark

chart.orange-dark