Color distinguishes our brand and helps us create consistent experiences across products.
Primary Color Palette
| Name | Red |
|---|---|
| Type | Primary |
| HEX | #e2004f |
| CSS Variable | var(--primary) |
| Usage |
Accent Color Palette
| Name | Pink |
|---|---|
| Type | Secondary |
| HEX | #f0487b |
| CSS Variable | var(--secondary) |
| Usage |
| Name | Light Pink |
|---|---|
| Type | Tertiary |
| HEX | #f6edef |
| CSS Variable | var(--tertiary) |
| Usage |
| Name | Yellow |
|---|---|
| Type | Accent |
| HEX | #f3c028 |
| CSS Variable | var(--accent-1) |
| Usage |
| Name | Violet |
|---|---|
| Type | Accent |
| HEX | #3547ca |
| CSS Variable | var(--accent-2) |
| Usage |
| Name | Green |
|---|---|
| Type | Accent |
| HEX | #a6d470 |
| CSS Variable | var(--accent-3) |
| Usage |
Extended Color Palette
| Name | Light Gray 1 |
|---|---|
| Type | Shade |
| HEX | #f9f9f9 |
| CSS Variable | var(--light-gray-1) |
| Usage |
| Name | Light Gray 2 |
|---|---|
| Type | Shade |
| HEX | #d9d9d9 |
| CSS Variable | var(--light-gray-2) |
| Usage |
| Name | Light Gray 3 |
|---|---|
| Type | Shade |
| HEX | #919191 |
| CSS Variable | var(--light-gray-3) |
| Usage |
| Name | Light Gray 4 |
|---|---|
| Type | Shade |
| HEX | #f6f6f6 |
| CSS Variable | var(--light-gray-4) |
| Usage |
| Name | Dark Gray 1 |
|---|---|
| Type | Shade |
| HEX | #1d1d1d |
| CSS Variable | var(--dark-gray-1) |
| Usage |
| Name | Dark Gray 2 |
|---|---|
| Type | Shade |
| HEX | #212121 |
| CSS Variable | var(--dark-gray-2) |
| Usage |
| Name | Dark Gray 3 |
|---|---|
| Type | Shade |
| HEX | #151515 |
| CSS Variable | var(--dark-gray-3) |
| Usage |
| Name | Dark Gray 4 |
|---|---|
| Type | Shade |
| HEX | #cdcdcd |
| CSS Variable | var(--dark-gray-4) |
| Usage |
| Name | Black |
|---|---|
| Type | Shade |
| HEX | #000 |
| CSS Variable | var(--black) |
| Usage |
Color Crimes
Don't
Use unapproved colors.