Skip navigation and go to main content
Styleguide
Fonts
  • Proxima Nova - Primary Font
    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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    Default Font
  • Proxima Nova 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-weight-light
  • Proxima Nova Semibold
    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-weight-semibold
  • Proxima Nova Bold
    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-weight-bold
  • Bauer Bodoni Bold - Secondary Font
    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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    Default Font
  • Bauer Bodoni Bold Italic
    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--secondary font-style-italic

Typography

  • Header (Large)
    Face
    .header-large //or for SASS @include header-large
  • Header (Medium)
    Bronzers
    .header-medium //or for SASS @include header-medium
  • Header (Small)
    NEW
    .header-small //or for SASS @include header-small
  • Title (Large)
    Don't Miss Out
    .title-large //or for SASS @include title-large
  • Title (Small)
    Best Sellers
    .title-small //or for SASS @include title-small
  • Eyebrow (Large)
    Color & Sparkle
    .eyebrow-large //or for SASS @include eyebrow-large
  • Eyebrow (Small)
    Juicy Lips
    .eyebrow-small //or for SASS @include eyebrow-small
  • Body (Large)
    Tutti Frutti Collection
    .body-large //or for SASS @include body-large
  • Body (Medium)
    Juicy Lips
    .body-medium //or for SASS @include body-medium
  • Body (Small)
    Shop Now
    .body-small //or for SASS @include body-small
  • Body (X-Small)
    Face > Foundation > Born This Way
    .body-x-small //or for SASS @include body-x-small
  • Fine Print
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    .fine-print //or for SASS @include fine-print
Buttons
  • Standard Button
    Button
    .button //or for SASS @include button
  • Black Button
    Disabled
    .button--black //or for SASS @include button--black
  • Pink Accent Button
    Button
    .button--pink-accent //or for SASS @include button--pink-accent
  • Pink Button
    Button
    .button--pink //or for SASS @include button--pink
  • Gold Button
    Button
    .button--gold //or for SASS @include button--gold
  • Disabled Button
    Button
    .button--disabled //or for SASS @include button--disabled
Text Links
Colors
  • Primary Brand Colors
    Pink
    #FDC2CB
    $color-pink
    Pink 2
    #FFF5F5
    $color-pink-2
    Pink Accent
    #DB008B
    $color-pink-accent
    Black
    #000000
    $color-black
    Gray
    #E6E6E6
    $color-grey
  • Secondary Brand Colors
    Gold
    #BF9B5F
    $color-gold
    Teal
    #C6E8EA
    $color-teal
    Yellow
    #F4ECCA
    $color-yellow
    Mint
    #E3ECCD
    $color-mint

Icons

    • account
    • arrow--down
      arrow--down
    • arrow--left
      arrow--left
    • arrow--right
      arrow--right
    • arrow--up
      arrow--up
    • bag
      bag
    • camera
      camera
    • caret--right
      caret--right
    • checkmark
      checkmark
    • close
      close
    • collapse
      collapse
    • email
    • expand
      expand
    • facebook
    • facebook--circle
    • hamburger
      hamburger
    • heart--filled
      heart--filled
    • instagram--circle
      instagram--circle
    • location
      location
    • minus
      minus
    • pinterest
      pinterest
    • pinterest--circle
      pinterest--circle
    • play
      play
    • plus
      plus
    • search
      search
    • tiktok--circle
      tiktok--circle
    • twitter--circle
    • youtube--circle
      youtube--circle
    <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>
    

Form Elements

  • Input
    input
  • Input - Error
    .error
  • Input - Success
    .success
  • Textarea
    textarea
  • Textarea - Error
    .error
  • Textarea - Success
    .success
  • Dropdown - Native select
    select > option
  • Radio
    input type="radio"
  • Checkbox
    input type="checkbox"
Components
  • selectBox
              <select class="selectBox" name="select-name">
                <option value="value"></option>
              </select>
            
  • selectBox
  • selectBox - Small
Styleguide Tools
TOP