Colors
Add color to your applications in a meaningful way.
Background
Global background colors
$color-background-danger#f5e9e8
$color-background-primary#ffffff
$color-background-secondary#f4f4f5
$color-background-side-nav#021c6b
$color-background-success#ddefe6
$color-background-surface#ffffff
$color-background-tertiary#e4e6e7
$color-background-top-nav#1f3987
$color-background-warning#fbede7
$color-background-backdrop#091521
Border
Global border colors
$color-border-danger#b4362f
$color-border-disabled#f4f4f5
$color-border-primary#e4e6e7
$color-border-success#0b6b3d
$color-border-warning#f45e1e
Primary
The primary application color
$color-primary-default#3142c8
$color-primary-active#16158d
$color-primary-hover#2e39ad
Text
Global text colors
$color-text-contrast#ffffff
$color-text-danger#b4362f
$color-text-disabled#a9adb1
$color-text-primary#091521
$color-text-secondary#49515a
$color-text-success#0b6b3d
$color-text-tertiary#898e94
$color-text-warning#f45e1e
Palette
These color palettes are designed to work together harmoniously, and can be used to develop your applications palette.
BLUE500
50#ecf4fe
100#c9e1fb
200#95c5f8
300#62a9f4
400#308df1
500#0072ec
600#005cbe
700#00458e
800#003772
900#002956
GREY500
50#fafafb
100#f4f4f5
200#e4e6e7
300#d1d3d6
400#a9adb1
500#898e94
600#697078
700#49515a
800#2a343f
900#091521
INDIGO500
50#e9eafa
100#c7ccf0
200#a5aee8
300#7785db
400#5c6cd6
500#3142c8
600#3442bc
700#2e39ad
800#232b9c
900#16158d
RED500
50#f5e9e8
100#f4cfcd
200#eca9a5
300#e3837d
400#da5d55
500#d44037
600#b4362f
700#942d27
800#75231e
900#551a16
GREEN500
50#ddefe6
100#c3e1d2
200#93c9ae
300#62b08b
400#329867
500#0e864c
600#0b6b3d
700#095731
800#074326
900#06361e
ORANGE500
50#fbede7
100#ffd0bc
200#ffb291
300#ff9365
400#ff7b43
500#ff6422
600#f45e1e
700#e65719
800#d85015
900#bf420c
YELLOW500
50#fefae7
100#fbf1c4
200#f8e99f
300#f4e07b
400#f0d961
500#ecd348
600#dcc243
700#c8ac3d
800#b39638
900#90722f
PINK500
50#fbe5ee
100#f6bed6
200#f194ba
300#ed6a9f
400#ea4c89
500#e83274
600#d72f70
700#c02c69
800#aa2964
900#852259
PURPLE500
50#f2e7fc
100#ddd0f3
200#c79bf2
300#b16fed
400#9e4ae8
500#8c18e2
600#8110dc
700#7300d3
800#6500ce
900#4e00c6
BROWN500
50#faf0e7
100#ead9ce
200#d8c1b2
300#c4a794
400#b3917b
500#a27c62
600#95715a
700#84634f
800#755646
900#64473a