Futura Book is the default font.

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


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


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


  • 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.


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


Accessibility Requirement

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


Form with standard background


selectBox New