Color distinguishes our brand and helps us create consistent experiences across products.
Primary Color Palette
| Name | Brand Blue |
|---|---|
| Type | Primary |
| HEX | #6677FB |
| CSS Variable | var(--) |
| Usage |
| Name | Midnight |
|---|---|
| Type | Primary |
| HEX | #202A44 |
| CSS Variable | var(--) |
| Usage |
| Name | Whisper |
|---|---|
| Type | Primary |
| HEX | #FBFBFD |
| CSS Variable | var(--) |
| Usage |
Accent Color Palette
| Name | Red |
|---|---|
| Type | Secondary |
| HEX | #F77779 |
| CSS Variable | var(--) |
| Usage |
| Name | Red Light |
|---|---|
| Type | Secondary |
| HEX | #FEE8E8 |
| CSS Variable | var(--) |
| Usage |
| Name | Red Medium |
|---|---|
| Type | Tertiary |
| HEX | #E23D3D |
| CSS Variable | var(--) |
| Usage |
| Name | Red Dark |
|---|---|
| Type | Tertiary |
| HEX | #6E4151 |
| CSS Variable | var(--) |
| Usage |
| Name | Gold |
|---|---|
| Type | Secondary |
| HEX | #FDB22B |
| CSS Variable | var(--) |
| Usage |
| Name | Gold Light |
|---|---|
| Type | Secondary |
| HEX | #FFF3D3 |
| CSS Variable | var(--) |
| Usage |
| Name | Gold Medium |
|---|---|
| Type | Tertiary |
| HEX | #FEEAA7 |
| CSS Variable | var(--) |
| Usage |
| Name | Gold Dark |
|---|---|
| Type | Tertiary |
| HEX | #93733C |
| CSS Variable | var(--) |
| Usage |
| Name | Teal |
|---|---|
| Type | Secondary |
| HEX | #29DDCC |
| CSS Variable | var(--) |
| Usage |
| Name | Teal Light |
|---|---|
| Type | Secondary |
| HEX | #DCF5EF |
| CSS Variable | var(--) |
| Usage |
| Name | Teal Dark |
|---|---|
| Type | Tertiary |
| HEX | #24C5B6 |
| CSS Variable | var(--) |
| Usage |
| Name | Blue |
|---|---|
| Type | Secondary |
| HEX | #496EB1 |
| CSS Variable | var(--) |
| Usage |
| Name | Blue Light |
|---|---|
| Type | Secondary |
| HEX | #EAF8FF |
| CSS Variable | var(--) |
| Usage |
| Name | Link Blue |
|---|---|
| Type | Tertiary |
| HEX | #2E39B3 |
| CSS Variable | var(--) |
| Usage |
| Name | Magenta |
|---|---|
| Type | Tertiary |
| HEX | #D21067 |
| CSS Variable | var(--) |
| Usage |
| Name | Purple |
|---|---|
| Type | Tertiary |
| HEX | #BA6FD7 |
| CSS Variable | var(--) |
| Usage |
| Name | Purple Light |
|---|---|
| Type | Tertiary |
| HEX | #F9EAFE |
| CSS Variable | var(--) |
| Usage |
Extended Color Palette
| Name | Brand Blue Light |
|---|---|
| Type | Brand Blue Shades |
| HEX | #A7B1FC |
| CSS Variable | var(--) |
| Usage |
| Name | Brand Blue Lightest |
|---|---|
| Type | Brand Blue Shades |
| HEX | #F7F7FF |
| CSS Variable | var(--) |
| Usage |
| Name | Brand Blue Alt Dark |
|---|---|
| Type | Brand Blue Shades |
| HEX | #2B3860 |
| CSS Variable | var(--) |
| Usage |
| Name | Brand Blue Alt |
|---|---|
| Type | Brand Blue Shades |
| HEX | #384775 |
| CSS Variable | var(--) |
| Usage |
| Name | Brand Blue Alt Light |
|---|---|
| Type | Brand Blue Shades |
| HEX | #3F5187 |
| CSS Variable | var(--) |
| Usage |
| Name | Midnight Alt |
|---|---|
| Type | Midnight Shades |
| HEX | #3B435B |
| CSS Variable | var(--) |
| Usage |
| Name | Midnight Medium |
|---|---|
| Type | Midnight Shades |
| HEX | #7F869E |
| CSS Variable | var(--) |
| Usage |
| Name | Midnight Light |
|---|---|
| Type | Midnight Shades |
| HEX | #C3C8DA |
| CSS Variable | var(--) |
| Usage |
| Name | Whisper Light |
|---|---|
| Type | Whisper Shades |
| HEX | #FFFFFF |
| CSS Variable | var(--) |
| Usage |
| Name | Whisper Medium |
|---|---|
| Type | Whisper Shades |
| HEX | #F2F3FF |
| CSS Variable | var(--) |
| Usage |
| Name | Whisper Dark |
|---|---|
| Type | Whisper Shades |
| HEX | #EBECF7 |
| CSS Variable | var(--) |
| Usage |
| Name | Black 1 NEW |
|---|---|
| Type | Blacks |
| HEX | #0C0D0F |
| CSS Variable | var(--) |
| Usage |
| Name | Black 2 |
|---|---|
| Type | Blacks |
| HEX | #171B25 |
| CSS Variable | var(--) |
| Usage |
| Name | Black 3 NEW |
|---|---|
| Type | Blacks |
| HEX | #1E222D |
| CSS Variable | var(--) |
| Usage |
| Name | Black 4 NEW |
|---|---|
| Type | ShadeBlacks |
| HEX | #2E3443 |
| CSS Variable | var(--) |
| Usage |
Color Crimes
Don't
Use unapproved colors.