Brand Colors

Primary Blues

Midnight | #0F1528
Night Sky - Dark | #283455
Night Sky | #293C70
Daybreak | #DDE3EC
Daybreak - Light | #F2F5F8

Golden Hour

Magic Hour - Dark | #C87F3B
Magic Hour | #E3AD7C
Magic Hour - Medium | #F0D7B7
Magic Hour - Light | #F9F3ED
Magic Hour - Extra Light | #FDFAF8

Afternoon Delight

Afternoon Delight | #344329
Afternoon Delight - Medium | #5D6E50
Afternoon Delight - Light | #AEB6A7
Afternoon Delight - Extra Light | #EFF0ED

Utility Colors

Night Sky - Bright | #04247D
Magic Hour - Error | #AA3F00

Tertiary | Grays

Gray | #979797
Gray - Medium | #DDDDDD
Gray - Light | #F2F2F2
Gray - Extra Light | #F8F8F8
White | #FFFFFF

How implement color

Data Attributes

Adding colors using the data attributes

Background Color


data-bg-color="midnight"
  

Text Color


data-color="midnight"
  

1px Border Color


data-border-color="midnight"
  

Map Mixin

Adding colors using the mixin


background: color(magic-hour-extralight);
color: color(midnight);
  

Iconography

facebook
twitter
pinterest
instagram

caret
pagination
plus
close
minus
checkmark
checkbox-checkmark
checkbox
info

arrow
plus
close
search
account
bag
hamburger
inbox

slider-arrow
close
arrow