Colors and Icons

Back to Demo Landing

Jump to:ColorsIcons

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);

Icons

For a reason unknown to me, we have 2 files that hold our SVGs and both are in use. One is icons.liquid and the other is svg.liquid.

    account
    arrow
    bag
    trash
    caret
    checkbox
    checkbox-checkmark
    checkmark
    close
    facebook
Rated 5 stars out of 5 by over 100,000 customers     five-star
    footer-logo
    hamburger
    inbox
    inbox-notification
    info
    instagram
    logo
    marlow-logo
    minus
    pinterest
    plus
    search
    slider-arrow
    twitter
    union
    video-pause
    video-play

Icons that aren't working without extra css

  • pagination

SVGs

    icon--close
    icon--close-small
    icon--faq-toggle
    icon--email-submit
    icon--arrow-dropdown
    icon--checkmark
    icon--search
    icon--map--mobile
    icon--map--desktop
    brand
    icon--b-logo
    icon--info
    icon--back-arrow
    icon--marlow
    size-guide-croqui
    pagination-arrow
    icon--rewards
    icon--arrow-up
    icon--sparkle
    icon--clipboard

svgs that aren't working without extra css

  • icon--play-pause
  • icon--facebook
  • icon--twitter
  • icon--pinterest
  • icon--ig
  • icon--arrow-circle
  • icon--arrow-carousel

Parallax SVGs

  dorm-essentials-bottom
  dorm-essentials-right
  dorm-essentials-left
  dorm-essentials-top
  small-space-decor-right
  small-space-decor-top