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
      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
    • direct
      direct
    • dropdown
      dropdown
    • el_star
      el_star
    • facebook
    • facebook_new
    • gift-icon
      gift-icon
    • heart--empty
      heart--empty
    • heart--filled
      heart--filled
    • icon-greater
      icon-greater
    • icon-info
      icon-info
    • icon-tick
      icon-tick
    • icon-tmo-info
      icon-tmo-info
    • info-error
      info-error
    • 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-estee-v2
      logo-estee-v2
    • logo-renutriv
      logo-renutriv
    • maestro
      maestro
    • mail
      mail
    • mail-solid
      mail-solid
    • mastercard
      mastercard
    • menu
      menu
    • microphone
      microphone
    • minus
      minus
    • notepad
      notepad
    • package_spirit
      package_spirit
    • paypal
      paypal
    • pdp-link
      pdp-link
    • phone
      phone
    • pinterest
      pinterest
    • pinterest_new
      pinterest_new
    • play
      play
    • play-rounded
      play-rounded
    • 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
    • sofort
      sofort
    • technical
      technical
    • technical_chat
      technical_chat
    • text
      text
    • tiktok
      tiktok
    • train
      train
    • twitter
    • twitter_new
    • visa
      visa
    • walk
      walk
    • weibo
      weibo
    • x
      x
    • 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

Toggle
Code
Top