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
  • aerin_star
  • arrow-left
  • arrow-left-bold
  • arrow-right
  • arrow-right-bold
  • arrow-up
  • beauty_advisor
  • beauty_chat
  • bike
  • car
  • caret
  • cart
  • chat
  • checkbox
  • checkbox-checked
  • close
  • dropdown
  • el_star
  • facebook
  • facebook_new
  • gift-icon
  • heart--filled
  • information
  • instagram
  • left_arrow
  • left_arrow_2
  • letter-a
  • letter-b
  • location
  • logo-aerin
  • logo-estee
  • logo-renutriv
  • mail
  • mail-solid
  • menu
  • microphone
  • minus
  • notepad
  • package_spirit
  • phone
  • pinterest
  • pinterest_new
  • play
  • play-small
  • plus
  • radio-off
  • radio-on
  • review-star
  • right_arrow
  • right_arrow_2
  • search
  • technical
  • technical_chat
  • text
  • tiktok
  • train
  • twitter
  • twitter_new
  • walk
  • weibo
  • 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

• Link
  I am link
  .link
• Link - Bold
  I am a bold link
  .link--bold