Skip to main content

Colors

Color distinguishes our brand and helps us create consistent experiences across products.

Primary Color Palette

NamePrimary
TypePrimary
HEX#E63748
CSS Variablevar(--)
UsageOur main Red brand color can be seen in our Shield Icon and forms the basis of our brand along with a darker and lighter shade.
NamePrimary - Dark
TypePrimary
HEX#C42B34
CSS Variablevar(--)
UsageOur main Red brand color can be seen in our Shield Icon and forms the basis of our brand along with a darker and lighter shade.

Accent Color Palette

NameAccent
TypeAccent
HEX#0BC86D
CSS Variablevar(--)
Usage
NameAccent - Dark
TypeAccent
HEX#0CB061
CSS Variablevar(--)
Usage

Extended Color Palette

NameBlack
TypeShade
HEX#1D2023
CSS Variablevar(--)
Usage
NameGray
TypeShade
HEX#5A636D
CSS Variablevar(--)
Usage
NameDark Gray
TypeShade
HEX#2C3035
CSS Variablevar(--)
Usage
NameDark Gray 2
TypeShade
HEX#979797
CSS Variablevar(--)
Usage
NameLight Pink
TypeShade
HEX#FFEBEB
CSS Variablevar(--)
Usage
NameLight Gray 1
TypeShade
HEX#DEDEDE
CSS Variablevar(--)
Usage
NameLight Gray 2
TypeShade
HEX#F6F6F6
CSS Variablevar(--)
Usage
NameLight Green
TypeShade
HEX#EAF6EF
CSS Variablevar(--)
Usage
NameWhite
TypeShade
HEX#FFF
CSS Variablevar(--white)
Usage

Color Crimes

Don't

Use unapproved colors.