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: $helvetica-neue
  • 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

    • aerin_star
    • checkbox
    • checkbox--checked
    • close
    • dropdown
    • el_star
    • gift-icon
    • information
    • left_arrow
    • left_arrow_2
    • microphone
    • minus
    • package_spirit
    • pinterest
    • plus
    • review_star
    • right_arrow
    • right_arrow_2
    • weibo
    <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