Color distinguishes our brand and helps us create consistent experiences across products.
Primary Color Palette
| Name | Light Blue |
|---|---|
| Type | Primary |
| HEX | #2aadf1 |
| CSS Variable | var(--primary) |
| Usage |
Accent Color Palette
| Name | Orange |
|---|---|
| Type | Accent |
| HEX | #f38d05 |
| CSS Variable | var(--accent-1) |
| Usage |
| Name | Green |
|---|---|
| Type | Accent |
| HEX | #45d599 |
| CSS Variable | var(--accent-2) |
| Usage |
| Name | Dark Blue |
|---|---|
| Type | Accent |
| HEX | #012130 |
| CSS Variable | var(--accent-3) |
| Usage |
Extended Color Palette
| Name | Dark Gray 1 |
|---|---|
| Type | Shade |
| HEX | #848484 |
| CSS Variable | var(--dark-gray-1) |
| Usage |
| Name | Dark Gray 2 |
|---|---|
| Type | Shade |
| HEX | #414e55 |
| CSS Variable | var(--light-gray-2) |
| Usage |
| Name | Light Gray 1 |
|---|---|
| Type | Shade |
| HEX | #ddd |
| CSS Variable | var(--light-gray-1) |
| Usage |
| Name | Light Gray 2 |
|---|---|
| Type | Shade |
| HEX | #ededed |
| CSS Variable | var(--light-gray-2) |
| Usage |
| Name | Light Gray 3 |
|---|---|
| Type | Shade |
| HEX | #c9c9c9; |
| CSS Variable | var(--light-gray-3) |
| Usage |
| Name | Black |
|---|---|
| Type | Shade |
| HEX | #3f3b3a |
| CSS Variable | var(--black) |
| Usage |
Color Crimes
Don't
Use unapproved colors.