Color distinguishes our brand and helps us create consistent experiences across products.
Primary Color Palette
Name | Primary |
---|---|
Type | Primary |
HEX | #E63748 |
CSS Variable | var(--) |
Usage | Our 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. |
Name | Primary - Dark |
---|---|
Type | Primary |
HEX | #C42B34 |
CSS Variable | var(--) |
Usage | Our 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
Name | Accent |
---|---|
Type | Accent |
HEX | #0BC86D |
CSS Variable | var(--) |
Usage |
Name | Accent - Dark |
---|---|
Type | Accent |
HEX | #0CB061 |
CSS Variable | var(--) |
Usage |
Extended Color Palette
Name | Black |
---|---|
Type | Shade |
HEX | #1D2023 |
CSS Variable | var(--) |
Usage |
Name | Gray |
---|---|
Type | Shade |
HEX | #5A636D |
CSS Variable | var(--) |
Usage |
Name | Dark Gray |
---|---|
Type | Shade |
HEX | #2C3035 |
CSS Variable | var(--) |
Usage |
Name | Dark Gray 2 |
---|---|
Type | Shade |
HEX | #979797 |
CSS Variable | var(--) |
Usage |
Name | Light Pink |
---|---|
Type | Shade |
HEX | #FFEBEB |
CSS Variable | var(--) |
Usage |
Name | Light Gray 1 |
---|---|
Type | Shade |
HEX | #DEDEDE |
CSS Variable | var(--) |
Usage |
Name | Light Gray 2 |
---|---|
Type | Shade |
HEX | #F6F6F6 |
CSS Variable | var(--) |
Usage |
Name | Light Green |
---|---|
Type | Shade |
HEX | #EAF6EF |
CSS Variable | var(--) |
Usage |
Name | White |
---|---|
Type | Shade |
HEX | #FFF |
CSS Variable | var(--white) |
Usage |
Color Crimes
Don't
Use unapproved colors.