Colors
Here are some handful of color utility classes.
How It Works
The helper classes apply background-color or text-color to an element ranging for the following colors.
u-bg-{value}
- appliesbackground color
u-fg-{value}
- appliestext color
u-bc-{value}
- appliesborder color
Brand Colors
support#00a656
message#37b8af
explore#30aabc
gather#f6c8be
guide#ff6224
chat#f79a3e
talk#efc93d
sell#c38f00
Primary Colors
Green
green-100#edf8f4
green-200#d1e8df
green-300#aecfc2
green-400#5eae91
green-500#228f67
green-600#038153
green-700#186146
green-800#0b3b29
Kale
kale-100#f5fcfc
kale-200#daeded
kale-300#bdd9d7
kale-400#90bbbb
kale-500#467b7c
kale-600#17494d
kale-700#03363d
kale-800#012b30
Blue
blue-100#edf7ff
blue-200#cee2f2
blue-300#adcce4
blue-400#5293c7
blue-500#337fbd
blue-600#1f73b7
blue-700#144a75
blue-800#0f3554
Red
red-100#fff0f1
red-200#f5d5d8
red-300#f5b5ba
red-400#e35b66
red-500#d93f4c
red-600#cc3340
red-700#8c232c
red-800#681219
Yellow
yellow-100#fff7ed
yellow-200#ffeedb
yellow-300#fed6a8
yellow-400#ffb057
yellow-500#f79a3e
yellow-600#ed8f1c
yellow-700#ad5918
yellow-800#703815
Grey
grey-100#f8f9f9
grey-200#e9ebed
grey-300#d8dcde
grey-400#c2c8cc
grey-500#87929d
grey-600#68737d
grey-700#49545c
grey-800#2f3941
Secondary Colors
Purple
purple-400#b552e2
purple-600#6a27b8
purple-m400#b072cc
purple-m400#9358b0
Royal
royal-400#5d7df5
royal-600#3353e2
royal-m400#7986d8
royal-m400#4b61c3
Fuschia
fuschia-400#d653c2
fuschia-600#a81897
fuschia-m400#cf62a8
fuschia-m400#a8458c
Azure
azure-400#3091ec
azure-600#1371d6
azure-m400#5f8dcf
azure-m400#3a70b2
Pink
pink-400#ec4d63
pink-600#d42054
pink-m400#d57287
pink-m400#b23a5d
Teal
teal-400#02a191
teal-600#028079
teal-m400#2d9e8f
teal-m400#3c7873
Crimson
crimson-400#e34f32
crimson-600#c72a1c
crimson-m400#cc6c5b
crimson-m400#b24a3c
Mint
mint-400#00a656
mint-600#058541
mint-m400#299c66
mint-m400#2e8057
Orange
orange-400#de701d
orange-600#bf5000
orange-m400#d4772c
orange-m400#b35827
Lime
lime-400#43b324
lime-600#2e8200
lime-m400#519e2d
lime-m400#47782c
Lemon
lemon-400#ffd424
lemon-600#ffbb10
lemon-m400#e7a500
lemon-m400#c38f00