Color distinguishes our brand and helps us create consistent experiences across products.
Primary Color Palette
| Name | Green |
|---|---|
| Type | Primary |
| HEX | #7CAA24 |
| CSS Variable | var(--primary) |
| Usage |
Accent Color Palette
| Name | Teal |
|---|---|
| Type | Accent |
| HEX | #007D80 |
| CSS Variable | var(--accent-1) |
| Usage |
| Name | Blue |
|---|---|
| Type | Accent |
| HEX | #00B7F1 |
| CSS Variable | var(--accent-2) |
| Usage |
| Name | Yellow |
|---|---|
| Type | Accent |
| HEX | #ffc524 |
| CSS Variable | var(--accent-3) |
| Usage |
Extended Color Palette
| Name | Pastel Blue |
|---|---|
| Type | Pastel |
| HEX | #F4F7FB |
| CSS Variable | var(--pastel-1) |
| Usage |
| Name | Pastel Green |
|---|---|
| Type | Pastel |
| HEX | #E7F4EE |
| CSS Variable | var(--pastel-2) |
| Usage |
| Name | Pastel Brown |
|---|---|
| Type | Pastel |
| HEX | #F4F1ED |
| CSS Variable | var(--pastel-3) |
| Usage |
| Name | Dark Gray 1 |
|---|---|
| Type | Shade |
| HEX | #757575 |
| CSS Variable | var(--dark-gray-1) |
| Usage |
| Name | Dark Gray 2 |
|---|---|
| Type | Shade |
| HEX | #808080 |
| CSS Variable | var(--dark-gray-2) |
| Usage |
| Name | Dark Gray 3 |
|---|---|
| Type | Shade |
| HEX | #B7B7B7 |
| CSS Variable | var(--dark-gray-3) |
| Usage |
| Name | Light Gray 1 |
|---|---|
| Type | Shade |
| HEX | #E3E3E3 |
| CSS Variable | var(--light-gray-1) |
| Usage |
| Name | Light Gray 2 |
|---|---|
| Type | Shade |
| HEX | #EDEDED |
| CSS Variable | var(--light-gray-2) |
| Usage |
| Name | Black |
|---|---|
| Type | Black |
| HEX | #2F2F2F |
| CSS Variable | var(--black) |
| Usage |
Color Crimes
Don't
Use unapproved colors.