Color distinguishes our brand and helps us create consistent experiences across products.
Primary Color Palette
| Name | Navy Blue |
|---|---|
| Type | Primary |
| HEX | #0c4060 |
| CSS Variable | var(--primary) |
| Usage |
Accent Color Palette
| Name | Blue 1 |
|---|---|
| Type | Accent |
| HEX | #177eab |
| CSS Variable | var(--accent-1) |
| Usage |
| Name | Blue 2 |
|---|---|
| Type | Accent |
| HEX | #1d87d2 |
| CSS Variable | var(--accent-7) |
| Usage |
| Name | Light Blue 1 |
|---|---|
| Type | Accent |
| HEX | #7ecced |
| CSS Variable | var(--accent-2) |
| Usage |
| Name | Light Blue 2 |
|---|---|
| Type | Accent |
| HEX | #9ed9f2 |
| CSS Variable | var(--accent-5) |
| Usage |
| Name | Light Blue 3 |
|---|---|
| Type | Accent |
| HEX | #5ec0e9 |
| CSS Variable | var(--accent-6) |
| Usage |
| Name | Green |
|---|---|
| Type | Accent |
| HEX | #9fd23b |
| CSS Variable | var(--accent-3) |
| Usage |
| Name | Light Green |
|---|---|
| Type | Accent |
| HEX | #e1f4be |
| CSS Variable | var(--accent-4) |
| Usage |
Extended Color Palette
| Name | Dark Gray |
|---|---|
| Type | Shade |
| HEX | #4d4d4d |
| CSS Variable | var(--dark-gray-1) |
| Usage |
| Name | Light Gray 1 |
|---|---|
| Type | Shade |
| HEX | #f6f6f6 |
| CSS Variable | var(--light-gray-1) |
| Usage |
| Name | Light Gray 2 |
|---|---|
| Type | Shade |
| HEX | #e5e5e5 |
| CSS Variable | var(--light-gray-2) |
| Usage |
| Name | Black |
|---|---|
| Type | Shade |
| HEX | #3e3e3e |
| CSS Variable | var(--black) |
| Usage |
Color Crimes
Don't
Use unapproved colors.