Styleguide

Fonts

  • Optima
    AaBb

    A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
    a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
    1​2​3​4​5​6​7​8​9​0​
    &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .font--optima-regular
  • Akzidenz Grotesk
    AaBb

    A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
    a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
    1​2​3​4​5​6​7​8​9​0​
    &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    TODO add helper class

Typography

  • Headline - Large (Primary)
    I am a Primary Headline
    .headline--large OR .headline--primary
  • Headline - Medium (Secondary)
    I am a Secondary Headline
    .headline--medium OR .headline--secondary
  • Headline - tertiary
    I am a Tertiary Headline
    .headline--tertiary

Colors

  • Brand Colors
    White
    #fff
    $color-white
    Navy
    #040a2b
    $color-navy

Icons

    • accessible
      accessible
    • aerin_star
      aerin_star
    • arrow-left
      arrow-left
    • arrow-left-bold
      arrow-left-bold
    • arrow-right
      arrow-right
    • arrow-right-bold
      arrow-right-bold
    • arrow-up
      arrow-up
    • beauty_advisor
      beauty_advisor
    • beauty_chat
      beauty_chat
    • bike
      bike
    • car
      car
    • caret
      caret
    • cart
      cart
    • chat
      chat
    • checkbox
      checkbox
    • checkbox-checked
      checkbox-checked
    • close
      close
    • dropdown
      dropdown
    • el_star
      el_star
    • facebook
    • facebook_new
    • gift-icon
      gift-icon
    • heart--filled
      heart--filled
    • information
      information
    • instagram
      instagram
    • left_arrow
      left_arrow
    • left_arrow_2
      left_arrow_2
    • letter-a
      letter-a
    • letter-b
      letter-b
    • location
      location
    • logo-aerin
      logo-aerin
    • logo-estee
      logo-estee
    • logo-renutriv
      logo-renutriv
    • mail
      mail
    • mail-solid
      mail-solid
    • menu
      menu
    • microphone
      microphone
    • minus
      minus
    • notepad
      notepad
    • package_spirit
      package_spirit
    • phone
      phone
    • pinterest
      pinterest
    • pinterest_new
      pinterest_new
    • play
      play
    • play-small
      play-small
    • plus
      plus
    • radio-off
      radio-off
    • radio-on
      radio-on
    • review-star
      review-star
    • right_arrow
      right_arrow
    • right_arrow_2
      right_arrow_2
    • search
      search
    • technical
      technical
    • technical_chat
      technical_chat
    • text
      text
    • tiktok
      tiktok
    • train
      train
    • twitter
    • twitter_new
    • walk
      walk
    • weibo
      weibo
    • youtube
      youtube
    <svg role="img" aria-labelledby="my-unique-id" class="icon icon--twitter">
      <title id="my-unique-id">ADA title goes here</title>
      <use xlink:href="#twitter"></use>
    </svg>
    

Buttons

  • Button
    Button
    .button
  • Button - Dark background
    Button
    .button .button--dark
  • Button - Secondary
    Button
    .button .button--secondary
  • Button - Light background
    Button
    .button .button--light

Text Links

Prodcat Service

  • Quantity Selector
    .elc-quantity-selector
  • Product Brief Wrapper
    .elc-product-brief
  • Product Cross Sell
    .elc-product-cross-sell
  • Image Navigation Menu
    .elc-image-nav-menu-item
  • Shade Picker
    .elc-shade-picker
  • Shade Picker Button
    .elc-shade-picker-button
  • Size Picker
    .elc-size-picker
Toggle
Code
Top