Design styleguide: colors and shadows
| name | technical name | old name | html code |
|---|---|---|---|
| White | $white |
$color-1 |
#ffffff
|
| Green (Key Lime Pie) | $green |
$color-2 |
#9fc820
|
| Teal (Allports) | $teal |
$color-3 |
#008397
|
| Sherpa Blue | $dark-blue |
$color-4 |
#004E5B
|
| Red/Orange (Mojo) | $red |
$color-5 |
#c85136
|
| Yellow (Pizazz) | $yellow |
$color-6 |
#ff9300
|
| Light grey (Porcelain) | $light-grey |
$color-7 |
#EFF1F2
|
| Near-black (Shark) | $near-black |
$color-8 |
#191C1D
|
| Dark grey (Outer Space) | $dark-grey |
$color-9 |
#2E3132
|
| Orient | $orient |
#006878
|
|
| Mystic | $mystic |
#D9E8EB
|
|
| Silver Sand | $silver-sand |
#BABDBE
|
|
| Athens Grey | $athens-grey |
#F8F9FA
|
|
| Fair Pink | $fair-pink |
#FFEFEB
|
|
| Roof Terracotta | $roof-terracotta |
#B83B1F
|
|
| Totem Pole | $totem-pole |
#9A260C
|
These colors follow the same palette, just different tone
| Name | Should be primarily used for | |
|---|---|---|
| Sherpa Blue | Visited links, table headers | |
| Orient | Primary button hover | |
| Allports | Buttons, links | |
| Mystic | Secondary button hover |
| Name | Should be primarily used for | |
|---|---|---|
| Totem Pole | Disruptive buttons | |
| Roof Terracotta | Disruptive buttons | |
| Mojo | Menu, Navigation, Disruptive buttons | |
| Fair Pink | Disruptive buttons |
| Name | Should be primarily used for | |
|---|---|---|
| Shark | Body text, Headers, any text that's not interactive | |
| Outer Space | Primary and secondary nav | |
| Silver Sand | Placeholder text | |
| Porcelain | Table backgrounds, dividers (see secondary nav bottom line, dividers between condensed rows in tables | |
| Athens Grey | Primary text fields/dropdowns (search on a page) | |
| White | Body background, colored button labels |
| Name | Primarily used for | Baseline color | Code snippet |
|---|---|---|---|
| Main menu shadow | Main menu | Shark | box-shadow: 0px 1px 0px rgba(25, 28, 29, 0.05), 0px 2px 2px rgba(25, 28, 29, 0.07); |
| Table relaxed row shadow | Underline for rows (relaxed - 56px height) of a table | Shark | box-shadow: 0px 1px 0px rgba(25, 28, 29, 0.05); |
| Dropdown list shadow | For when a dropdown is open | Shark | box-shadow: 0px 0px 8px 0px rgba(25, 28, 29, 0.25); |