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.