Styleguide

Fonts

CliniqueHelveticaNeueRegular
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.clhn-regular
$helvetica-regular-font-family
CliniqueHelveticaNeueLight
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.clhn-light
$helvetica-light-font-family
CliniqueHelveticaNeueBold
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.clhn-bold
$helvetica-bold-font-family
CliniqueHelveticaNeueItalic
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.clhn-italic
$helvetica-italic-font-family
NittiRegular
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.nitti-regular
$nitti-regular-font-family
NittiMedium
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.nitti-medium
$nitti-medium-font-family
NittiBold
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.nitti-bold
$nitti-bold-font-family
NeuzeitOffice-Regular
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.font--neuzeit-office
$wink-font-family-1
NeuzeitOffice-Bold
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.font--neuzeit-office-bold
$wink-font-family-2
Georgia
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.font--georgia
$wink-font-family-3
Deprecated font - HelveticaNeueLTStd55Roman - Instead this font, use CliniqueHelveticaNeueRegular
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.hn-lt-std-55-roman
$base-font-family-roman
Deprecated font - HelveticaNeueLTStd65Medium - Instead this font, use
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.hn-lt-std-65-medium
$base-bold-font-family
Deprecated font - HelveticaNeueLTStd75Bold - Bold Font - Instead this font, use CliniqueHelveticaNeueBold
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.hn-lt-std-75-bold
$base-bolder-font-family
Deprecated font - HelveticaNeueLTStd45Light - Instead this font, use CliniqueHelveticaNeueLight
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.hn-lt-std-45-light
$base-font-family
Deprecated font - HelveticaNeueLTStd-UltLt - Instead this font, use CliniqueHelveticaNeueLight
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.hn-lt-std-ultralight
$base-light-font-family
Deprecated font - HelveticaNeueLTStd35Thin - Instead this font, use CliniqueHelveticaNeueLight
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.hn-lt-std-thin
$base-thin-font-family

Typography - Generic and ELC

Title - XX-Large
Skincare
.title--xxl
Title - X-Large
Now, give your skin
.title--xl
Title - Large
Lorem ipsum dolor sit
.title--large
Title - Medium
Lorem ipsum dolor sit amet, consectetur
.title--med
Title - Small
Lorem ipsum dolor sit amet, consectetur
.title--small
Body - Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.body-text--large
Body Bold - Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.body-bold-text--large
Body - Normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
.body-text
Body Bold - Normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
.body-bold-text
Special 1 - Normal
Callout
.special-text--callout
Special 1 - Bold
Callout
.special-bold-text--callout
Special 2 Normal - Large
Clinique Smart Clinical Repair™ $00
.special-text--large
Special 2 Bold - Large
New. Clinique Smart Clinical Repair™ $00
.special-bold-text--large
Special Body
Clinique Smart Clinical Repair™ $00
.special-text--body
Special Body - Bold
Clinique Smart Clinical Repair™ $00
.special-bold-text--body
Fine Print
*Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.body-text--fine
Fine Print - Bold
*Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.body-bold-text--fine

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
Dark Grey
#666666
$color-cl-dark-grey
Clinique Light Gray
#cccccc
$color-light-gray
Rules 40
#e6e6e6
$cr19-border-light
Background / Light 98
#FAFAFA
$cr19-bg-light
Error / Red
#DD0000
$cr19-error
Clinique green
#adddb7
$color-cl-green
White
#fff
$color-white
Transparent 1
rgba(255, 255, 255, 0.75)
$color-white-75opacity
Transparent 2
rgba(255, 255, 255, 0.60)
$color-white-6opacity
Transparent 3
rgba(255, 255, 255, 0.40)
$color-white-4opacity
Transparent 4
rgba(255, 255, 255, 0.20)
$color-white-2opacity
Transparent 6
rgba(255, 255, 255, 0.17)
$color-white-17opacity
Transparent 5
rgba(255, 255, 255, 0.10)
$color-white-1opacity

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
I am link
.text-link--style-1
Link - Style 2 - Dark, underline on hover

I am link
.text-link--style-2
Link - Style 2 Bold - Dark, underline on hover

I am link
.text-link--style-2-bold
Link - Style 3 - Grey, underline on hover

I am link
.text-link--style-3
Link - Style 4 - Grey with underline

I am link
.text-link--style-4
Link - Style 5 - White with underline (for use on dark background)

I am link
.text-link--style-5
Link - Style 6 - White, underline on hover (for use on dark background)

I am link
.text-link--style-6
Link - Style 7 - Helvetica with underline
I am link
.text-link--style-7
Link - Style 8 - Helvetica with underline (for use on dark background)

I am link
.text-link--style-8

Icons

- account
- account-v2
- amex
- arrow-12
- arrow-16
- arrow-8
- arrows-horizontal
- bag
- bag-active
- bag-with-plus
- bottle
- burger
- call
- camera
- chat
- chat-v2
- check
- checkbox-selected
- checkbox-unselected
- clearpay
- clock
- consultations
- copy
- filter
- filter-on
- full-screen
- gift-icon
- grid
- heart
- home
- icon-close
- icon-edit
- information
- list
- location
- logo-clinique
- logo-clinique_old
- map
- mc
- menu-vertical
- mic-fill
- minus-12
- minus-16
- new-play-icon
- orders
- pause
- plus--dark
- plus--light
- plus-12
- plus-16
- plus-elclosed
- plus-enclosed-close
- plus-enclosed-hover
- print
- quicklook
- quickview
- radio-selected
- radio-unselected
- reward
- search-icon
- settings
- share
- share-v2
- shipping-and-billing
- shuffle
- sign-out
- social-facebook
- social-instagram
- social-pinterest
- social-twitter
- sound-off
- sound-on
- star
- star-v2
- subscription
- switch-off
- switch-on
- twitter
- video-fill
- visa
- x-10
- 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

Name

<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
Name
.error
Input - Success
Name
.success

Textarea

Name

<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
Name
.error
Textarea - Success
Name
.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

Layout

Layout Helpers

Container Maximum Widths - Plus horizontal padding rules

Vertical Container Spacing / Block margin rules

Did you know?