Styleguide

Fonts

Futura Book is the default font.

Futura Book
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-family: 'Futura Book';
font-family: $font--futura-book;
Futura Demi
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-family: 'Futura Demi';
font-family: $font--futura-demi;
Futura Medium
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-family: 'Futura Medium';
font-family: $font--futura-medium;

Text Styles

Large Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@include text-style--large-title
Large Title w/ Drop Shadow
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@include text-style--large-title--shadow
Tout Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@include text-style--tout-title
Section Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@include text-style--section-title
Storytelling Body Copy
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@include text-style--storytelling-body
Body Copy
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@include text-style--body
Eyebrow
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@include text-style--eyebrow
Sub/sup (trademark, disclaimer copy)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@include text-style--subcopy
Text Style #1
Born This Way
@extend %t1;
// or
@include t1;
Text Style #2
Peach of a Deal
@extend %t2;
// or
@include t2;
Text Style #3
Eye Shadow X 9: Age Ain’t Nothing
@extend %t3;
// or
@include t3;
Text Style #4
Full Description
@extend %t4;
// or
@include t4;
Text Style #5
Estimated Delivery Date
@extend %t5;
// or
@include t5;
Text Style #6
Customer Service
@extend %t6;
// or
@include t6;
Text Style #7
HOW TO / DETAILS
@extend %t7;
// or
@include t7;
Text Style #8
Color & Sparkle
@extend %t8;
// or
@include t8;
Text Style #9
Best Sellers
@extend %t9;
// or
@include t9;
Text Style #10
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@extend %t10;
// or
@include t10;

Buttons

Primary CTA
@include cr18-btn-primary;
Secondary CTA
@include cr18-btn-secondary;
Inactive CTA
@include cr18-btn-size--outstock;
Eyebrow CTA
cta-tout__eyebrow
Text CTA
cta-tout__text
Text Link
@extend %a1;
// or
@include a1;

Colors

Text and Accent colors

  • #000 $color-cr18-black
  • #333 $color-black
  • #5b626a $color-dark-gray
  • #898989 $color-cr18-gray
  • #7f7f7f $color-grey50
  • #bababa $color-light-gray
  • #e6e6e6 $color-lighter-gray
  • #f0f0f0 $color-lightest-gray
  • #f4fdfc $color-light-white
  • #fff $color-white
  • #005b48 $color-thick-green
  • #006d53 $color-dark-green
  • #7ec891 $color-green
  • #0a9dc7 $color-blue
  • #c00 $color-red
  • #edba1e $color-orange

Icons

  • icon icon--arrow--down
  • icon icon--arrow--right
  • icon icon--arrow
  • icon icon--carat--l
  • icon icon--carat--r
  • icon icon--caret--down
  • icon icon--caret--left
  • icon icon--caret--right
  • icon icon--caret-up
  • icon icon--cart
  • icon icon--checkbox--checked
  • icon icon--checkbox
  • icon icon--circle-arrow--left
  • icon icon--circle-arrow--right
  • icon icon--close
  • icon icon--email
  • icon icon--facebook
  • icon icon--giftbox
  • icon icon--hamburger
  • icon icon--heart--selected
  • icon icon--heart
  • icon icon--instagram
  • icon icon--journey--commitment
  • icon icon--journey--fingerprint
  • icon icon--journey--formulate
  • icon icon--journey--source
  • icon icon--livechat
  • icon icon--location--filled
  • icon icon--location
  • icon icon--logo--solid
  • icon icon--logo
  • icon icon--minus
  • icon icon--my-origins
  • icon icon--pinterest
  • icon icon--play
  • icon icon--plus
  • icon icon--product-attribute--acne
  • icon icon--product-attribute--age-prevention
  • icon icon--product-attribute--ageless-skin
  • icon icon--product-attribute--basic
  • icon icon--product-attribute--dark-spot
  • icon icon--product-attribute--dry
  • icon icon--product-attribute--hydration
  • icon icon--product-attribute--lifting
  • icon icon--product-attribute--normal
  • icon icon--product-attribute--oily
  • icon icon--product-attribute--redness
  • icon icon--product-attribute--renewal
  • icon icon--product-attribute--wrinkle
  • icon icon--radio--checked
  • icon icon--radio
  • icon icon--search
  • icon icon--stores
  • icon icon--twitter
  • icon icon--wechat
  • icon icon--whatsapp
  • icon icon--youtube

Default Typography

Accessibility Requirement

Pages should be structured in a hierarchical manner and referenced sequentially. Example: do not skip from a <h2> to an <h4> reference.

See: https://www.w3.org/WAI/tutorials/page-structure/headings/

This is the H1 text style

This is the H2 text style

This is the H3 text style

This is the H4 text style

This is the H5 text style
This is the H6 text style

This is a paragraph block below a hr tag — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a link style.

This is bold and italic.

This is a quote
  • list item one
  • list item two
  • list item three

Forms

Accessibility Requirement

  • All form fields must have a label. If none is provided please provide a title and aria-label to your input fields

See: https://www.w3.org/WAI/tutorials/forms/

Form with standard background



Components

selectBox New
Toggle
Code