Styleguide
Fonts
  • HelveticaNeueLTStd55Roman - 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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .hn-lt-std-55-roman
    $base-font-family-roman
  • HelveticaNeueLTStd75Bold - Bold Font - Used in headlines
    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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .hn-lt-std-75-bold
    $base-bolder-font-family
  • NeuzeitOffice-Regular
    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--neuzeit-office
    $wink-font-family-1
  • NeuzeitOffice-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--neuzeit-office-bold
    $wink-font-family-2
  • Georgia
    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--georgia
    $wink-font-family-3
  • HelveticaNeueLTStd45Light
    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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .hn-lt-std-45-light
    $base-font-family
  • HelveticaNeueLTStd65Medium
    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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .hn-lt-std-65-medium
    $base-bold-font-family
  • HelveticaNeueLTStd-UltLt
    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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .hn-lt-std-ultralight
    $base-light-font-family
  • HelveticaNeueLTStd35Thin
    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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .hn-lt-std-thin
    $base-thin-font-family
    Typography - Generic and ELC
  • Title - X-Large
    Skin Care
    .title--xl
  • Title - Large
    Now, give your skin the power to rehydrate itself.
    .title--large
  • Title - Medium
    Selected for you
    .title--med
  • Title - Small
    Take our quick Skin Diagnostic.
    .title--small
  • Body - Large
    New. Stay plump and dewy for 72 hours— even after washing your face.
    .body-text--large
  • Body - Normal
    Our revolutionary 3-Step Skin Care System was created by a celebrated dermatologist. It’s simple, customized and takes just three minutes,twice a day: cleanse with Facial Soap, exfoliate with Clarifying Lotion, moisturize with Dramatically Different Moisturizing Lotion+, oil-free Gelor lightweight Jelly.
    .body-text
  • Fine Print
    *Ongoing offers on clinique.com are subject to change without notice. Samples shown above may not be available at checkout. Offer good while supplies last. One to a client please. We reserve the right to substitute any free item offered with an item of equal or greater value.
    .body-text--fine
  • Tags
    how to
    .body-text--tags
Colors
  • Brand Colors
    Black
    #000
    $color-black
    Text 10
    #1A1A1A
    $cr19-text
    Background / Dark 15
    #262626
    $cr19-bg-dark
    Rules / Dark 25
    #3F3F3F
    $cr19-bg-med
    Text / Grey 60
    #999999
    $cr19-text-grey
    Rules 40
    #e6e6e6
    $cr19-border-light
    Background / Light 98
    #FAFAFA
    $cr19-bg-light
    White
    #fff
    $color-white
    Error / Red
    #DD0000
    $cr19-error
Buttons
  • Light Button
    Button
    .elc-button .button--light
  • Light Button - Disabled
    Disabled
    .elc-button .button--light .elc-button--disabled
  • Dark Button
    Button
    .elc-button .button--dark
  • Dark Button - Disabled
    Disabled
    .elc-button .button--dark .elc-button--disabled
  • Inverted Button
    Button
    .elc-button .button--inverted
  • Inverted Button - Disabled
    Disabled
    .elc-button .button--inverted .elc-button--disabled
Text Links
  • Link - Style 1 - Dark with underline
    .text-link--style-1
  • Link - Style 2 - Dark, underline on hover
    .text-link--style-2
  • Link - Style 3 - Grey, underline on hover
    .text-link--style-3
  • Link - Style 4 - Grey with underline
    .text-link--style-4
  • Link - Style 5 - White with underline (for use on dark background)
    .text-link--style-5
  • Link - Style 6 - White, underline on hover (for use on dark background)
    .text-link--style-6
Icons
    • account
    • arrow-12
      arrow-12
    • arrow-16
      arrow-16
    • arrow-8
      arrow-8
    • arrows-horizontal
      arrows-horizontal
    • bag
      bag
    • bottle
      bottle
    • burger
      burger
    • call
      call
    • chat
      chat
    • check
      check
    • checkbox-selected
      checkbox-selected
    • checkbox-unselected
      checkbox-unselected
    • clock
      clock
    • filter
      filter
    • gift-icon
      gift-icon
    • information
      information
    • list
      list
    • location
      location
    • logo-clinique
      logo-clinique
    • logo-clinique_old
      logo-clinique_old
    • map
      map
    • mic-fill
      mic-fill
    • minus-12
      minus-12
    • minus-16
      minus-16
    • new-play-icon
      new-play-icon
    • plus--dark
      plus--dark
    • plus--light
      plus--light
    • plus-12
      plus-12
    • plus-16
      plus-16
    • plus-elclosed
      plus-elclosed
    • plus-enclosed-close
      plus-enclosed-close
    • plus-enclosed-hover
      plus-enclosed-hover
    • quicklook
      quicklook
    • quickview
      quickview
    • radio-selected
      radio-selected
    • radio-unselected
      radio-unselected
    • search-icon
      search-icon
    • share
    • shuffle
      shuffle
    • social-facebook
    • social-instagram
    • social-pinterest
    • social-twitter
    • star
      star
    • switch-off
      switch-off
    • switch-on
      switch-on
    • twitter
    • video-fill
      video-fill
    • x-10
      x-10
    • x-16
      x-16
    <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 (standard)
  • Input
    <label for="my-unique-id" class="label"><span class="label-content">Name</span></label>
    <input id="my-unique-id" class="no-adpl" type="text" placeholder="Name*" />
    
  • Input - Error
    .error
  • Input - Success
    .success
  • Textarea
    <label for="my-unique-id" class="label"><span class="label-content">Name</span></label>
    <textarea id="my-unique-id" type="text" placeholder="Name"><textarea/>
    
  • Textarea - Error
    .error
  • Textarea - Success
    .success

Layout

This section lists layout helpers, common block widths, and padding rules.

Layout Helpers

  • Horizontal Alignment
    left
    .horizontal-align-left
    right
    .horizontal-align-right
    center
    .horizontal-align-center
  • Vertical Alignment
    top
    .justify-start
    center
    .justify-center
    bottom
    .justify-end
  • Breakpoints

    Variables

    // 2019 Redesign - new breakpoints
    // XX-Small (380)  0 – 379
    // X-Small (540) 0 – 539
    // Small (768) 540 - 799
    // Medium (1024) 800 – 1039
    // Large (1304) 1040 – 1559
    // X-Large (1796) 1560+
    $cr19-xxsmall: 380px !default;
    $cr19-xsmall: 480px !default;
    $cr19-small: 540px !default;
    $cr19-medium: 768px !default;
    $cr19-large: 1024px !default; // primary switch from mobile
    $cr19-xlarge: 1280px !default;
    

    Media Queries

    // 2019 Redesign - new breakpoints
    // clinique has a pc-first (ouch) mixin for breakpoint
    // XX-Small (380)  0 – 379
    // X-Small (540) 0 – 539
    // Small (768) 540 - 799
    // Medium (1024) 800 – 1039
    // Large (1304) 1040 – 1559
    // X-Large (1796) 1560+
    $cr19-xxsmall-up: "#{$screen} and (min-width: #{$cr19-xxsmall})";
    $cr19-xsmall-up: "#{$screen} and (min-width: #{$cr19-xsmall})";
    $cr19-small-up: "#{$screen} and (min-width: #{$cr19-small})";
    $cr19-medium-up: "#{$screen} and (min-width: #{$cr19-medium})";
    $cr19-large-up: "#{$screen} and (min-width: #{$cr19-large})"; // primary switch from mobile
    $cr19-xlarge-up: "#{$screen} and (min-width: #{$cr19-xlarge})";
    

    Example Code

    .myclass {
      width: 10%;
      @media #{$cr19-large-up} {
        width: 20%;
      }
    }
    

Container Maximum Widths - Plus horizontal padding rules



NOTE: padding amount changes depending on screen or device width. Larger screens have more left / right padding.
In the CMS there are also options to unset padding only for PC or mobile widths, those patterns are NOT displayed here.


  • Full width: 100%
    .container-max-width-full
    Full width: 100% with padding
    .container-max-width-full .container-max-width--padded
    Extra Large: 1290px
    .container-max-width-x-large
    Extra Large: 1920px widh padding
    .container-max-width-x-large .container-max-width--padded
    Large: 1440px
    .container-max-width-large
    Large: 1440px widh padding
    .container-max-width-large .container-max-width--padded
    Medium: 1280px
    .container-max-width-medium
    Medium: 1280px widh padding
    .container-max-width-medium .container-max-width--padded

Vertical Container Spacing / Block margin rules

Top and bottom rules can be selected independently in the CMS, or applied as needed in code.

  • No margin (default)
    .container-vertical-default
    Bottom Border Only (no margins)
    .container-vertical-bottom-border
    Top Border Only (no margins)
    .container-vertical-top-border
    Hybrid: 96px PC / 40px Mobile
    .container-vertical-top-margin .container-vertical-bottom-margin
    Large: 96px PC / 60px Mobile
    .container-vertical-top-margin--large .container-vertical-bottom-margin--large
    X-Small: 24px PC / 20px Mobile
    .container-vertical-top-margin--xsmall .container-vertical-bottom-margin--xsmall
    Small: 48px PC / 40px Mobile
    .container-vertical-top-margin--small .container-vertical-bottom-margin--small
    Hybrid: 96px PC / 40px Mobile - plus border
    .container-vertical-top-margin .container-vertical-top-margin--has-border .container-vertical-bottom-margin .container-vertical-bottom-margin--has-border
    Large: 96px PC / 60px Mobile - plus border
    .container-vertical-top-margin--large .container-vertical-top-margin--has-border .container-vertical-bottom-margin--large .container-vertical-bottom-margin--has-border
    Small: 48px PC / 40px Mobile - plus border
    .container-vertical-top-margin--small .container-vertical-top-margin--has-border .container-vertical-bottom-margin--small .container-vertical-bottom-margin--has-border
Styleguide Tools