Colors

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.


Primary Colors

Our primary palette is comprised of neutrals, white, and blue. These colors are present across most touch points from marketing to product.

Name
Primary
Hex
#e91e63
Name
Secondary
Hex
#7b809a
Name
Info
Hex
#03a9f4
Name
Success
Hex
#4caf50
Name
danger
Hex
#f44335
Name
Warning
Hex
#fb8c00
Name
Light
Hex
#f0f2f5
Name
Dark
Hex
#344767

Gradient Colors

Our gradient palette is a mixed of two colors for creating beautiful gradient colors.

Name
Primary
Hex
#5e72e4 | #825ee4
Name
Secondary
Hex
#627594 | #a8b8d8
Name
Info
Hex
#1171ef | #11cdef
Name
Success
Hex
#2dce89 | #2dcecc
Name
Warning
Hex
#fb6340 | #fbb140
Name
Error
Hex
#f5365c | #f56036
Name
Light
Hex
#CED4DA | #EBEFF4
Name
Dark
Hex
#212229 | #212529

Light Neutrals

Light neutrals are helpful for offsetting content in a primarily white layout without losing warmth and cleanliness, and are therefore often used as a background color for web components.

100
Hex
#f8f9fa
200
Hex
#e9ecef
300
Hex
#dee2e6
400
Hex
#ced4da
500
Hex
#adb5bd
600
Hex
#6c757d
700
Hex
#495057
800
Hex
#343a40
900
Hex
#212529