Colors
Semantic color palette
Primary is used for actions (buttons, links), Danger is used for error states / alerts, Warning is used for warning states / alerts, Success is used for success alerts / toasts, and Info is used for new feature announcements. These semantic names map to the colors in the design-system.
primary
Blue-50
Formerly Blue 1
#2952EF
danger
Red-50
Formerly Red 1
#DB073D
warning
Yellow-50
Formerly Yellow 1
#F39237
success
Green-50
Formerly Green 1
#36814A
info
Purple-50
Formerly Purple 1
#633680
Text/Neutral color palette
Default, Muted and Muted-x2 are used for primary typography.
default
Black-50
Formerly Black 1
#031838
muted
Gray-80
Formerly Gray 1
#676B7C
muted-x2
Gray-30
Formerly Gray 2
#B7B9C3
Extended color palette
Semantic light colors
primary-light
Blue-10
Formerly Blue 4
#E5EAFD
danger-light
Red-10
Formerly Red 4
#FEDEE6
warning-light
Yellow-10
Formerly Yellow 4
#FEF2E7
success-light
Green-10
Formerly Green 4
#E3F3E8
info-light
Purple-10
Formerly Purple 4
#F1E7F5
Semantic dark colors
primary-dark
Blue-10
Formerly Blue 4
#E5EAFD
danger-dark
Red-10
Formerly Red 4
#FEDEE6
warning-dark
Yellow-10
Formerly Yellow 4
#FEF2E7
success-dark
Green-10
Formerly Green 4
#E3F3E8
info-dark
Purple-10
Formerly Purple 4
#F1E7F5
Additional theme colors
light
White
Formerly White 1
#FFFFFF
dark
Black-50
Formerly White 1
#031838
Extended Semantic Colors
These are not exposed directly for usage in the UI. They may be used for specific purposes, such as the border color of an input box on hover, but are not intended for general use.
Blue-30
Formerly Blue 3
#6D89F4
Red-30
Formerly Red 3
#F94472
Yellow-30
Formerly Yellow 3
#F7B577
Green-30
Formerly Green 3
#62BD7E
Purple-30
Formerly Purple 3
#9962BD