Styleguide

Re-Nutriv Fonts

• Bauer Bodoni Std 1
  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--bb-roman
  OR
  font-family: $bb-roman
• 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​
  &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
  

  .font--akzidenzregular
  OR
  font-family: $akzidenzregular
• Helvetica Neue
  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--helvetica-neue
  OR
  font-family: $roboto-condensed
• Optima Light
  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--optimalight
  OR
  font-family: $optimalight

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

Re-Nutriv Colors

• Brand Colors
  Black
  #000
  $color-black

  White
  #fff
  $color-white

  Gold
  #ebd79a
  $color-gold--renutriv-v2

  Red
  #f00
  $color-red

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
  • check_mark
  • checkbox
  • checkbox-checked
  • close
  • direct
  • dropdown
  • el_star
  • facebook
  • facebook_new
  • gift-icon
  • heart--empty
  • heart--filled
  • icon-greater
  • icon-info
  • icon-tick
  • icon-tmo-info
  • info-error
  • information
  • instagram
  • left_arrow
  • left_arrow_2
  • letter-a
  • letter-b
  • location
  • logo-aerin
  • logo-estee
  • logo-estee-v2
  • logo-renutriv
  • maestro
  • mail
  • mail-solid
  • mastercard
  • menu
  • microphone
  • minus
  • notepad
  • package_spirit
  • paypal
  • pdp-link
  • phone
  • pinterest
  • pinterest_new
  • play
  • play-rounded
  • play-small
  • plus
  • radio-off
  • radio-on
  • review-star
  • right_arrow
  • right_arrow_2
  • search
  • sofort
  • technical
  • technical_chat
  • text
  • tiktok
  • train
  • twitter
  • twitter_new
  • visa
  • walk
  • weibo
  • x
  • 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