Styleguide

Fonts
Headings
Buttons
Colors
Icons
Default Typography
Forms
Components

Fonts

We primarily use La Mer Headline Black for larger headings for its condensed style while La Mer Text is used occassionally for smaller headings. Make sure to review your design specs on when to use which as they look very similar. Neue Haas Unica Pro is the default font and gets used for everything else.

Neue Haas Unica Pro
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: 'Neue Haas Unica Pro';
@include font--text;
La Mer Headline Black
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: 'La Mer Headline';
@include font--heading;
La Mer Text
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: 'La Mer Text';
@include font--subheading;

Headings

For flexibility, letter case is never explicity set in CSS. This must be done on the editorial side.

Heading #1
PERFECT
POLISH
@extend %heading--1;
Heading #2
THE GLOWING BODY
@extend %heading--2;
Heading #3
“A luxurious lift from La Mer.
With our new interlaced
Stretch Matrix Complex.”
@extend %heading--3;
Heading #4
Lorem ipsum dolor sit amet
@extend %heading--4;
Body Copy - Regular
La Mer’s most focused treatments train, target and transform. Our serums travel high-speed to deliver potent benefits deep within skin’s surface. Hydrate, brighten and tighten your way to radiant, thriving skin.
@extend %text--1;
Body Copy - Small
@CREMEDELAMER
@extend %text--2;

Buttons

Primary CTA
SHOP NOW
@extend %button;
// or
@include button;
button
Secondary CTA
SHOP NOW
@extend %button--secondary;
// or
@include button--secondary;
button button--secondary
Green CTA
SHOP NOW
@extend %button--green;
// or
@include button--green;
button button--green
Inactive
SOLD OUT
button button--disabled
Transparent CTA - with gray border
SHOP NOW
@extend %button--transparent;
// or
@include button--transparent;
button button--transparent
Transparent CTA - with black border
SHOP NOW
button button--transparent button--transparent--black
Transparent CTA - with white border
SHOP NOW
button button--transparent button--transparent--white
Example of sku size buttons
1oz / $170 3oz / $310 3.4oz / $465
Text CTA
READ ALL REVIEWS
@extend %link;
// or
@include link;
link
Secondary Text CTA
READ ALL REVIEWS
@extend %link--secondary;
// or
@include link--secondary;
link link--secondary

Colors

  • #000000 $color-black
  • #ffffff $color-white
  • green $color-valid
  • red $color-error
  • Headings, body copy #1B1B1B $color-dark-gray
  • #7D7D7D $color-gray
  • #b0b0b0 $color-light-gray
  • Borders #c2c2c2 $color-lighter-gray
  • #fffaf7 $color-light-sand
  • #EDDECD $color-sand
  • #f5faf5 $color-light-green
  • #005C3E $color-green
  • #001711 $color-darkest-green
  • #ffd3ad $color-salmon
  • #f0fafc $color-light-blue

Icons

Accessibility Requirement

Modern versions of assistive technology, like screen readers, will read CSS generated content (how our icons are rendered), as well as specific Unicode characters. If an icon is used purely for decoration then you can make sure it is not read by adding aria-hidden="true".

Also available as a mixin:
@include icon("plus");

  • icon icon--arrow--right--small
  • icon icon--arrow--right
  • icon icon--bag
  • icon icon--caret--down
  • icon icon--caret--left
  • icon icon--caret--right
  • icon icon--caret--up
  • icon icon--check
  • icon icon--checkbox--checked
  • icon icon--checkbox
  • icon icon--circle-caret--down--filled
  • icon icon--circle-caret--down
  • icon icon--circle-caret--left--filled
  • icon icon--circle-caret--left
  • icon icon--circle-caret--right--filled
  • icon icon--circle-caret--right
  • icon icon--circle-caret--up--filled
  • icon icon--circle-caret--up
  • icon icon--close
  • icon icon--email
  • icon icon--expert_tips
  • icon icon--facebook
  • icon icon--hamburger
  • icon icon--heart--filled
  • icon icon--heart
  • icon icon--instagram
  • icon icon--livechat
  • icon icon--location--filled
  • icon icon--location
  • icon icon--logo
  • icon icon--map-marker
  • icon icon--minus
  • icon icon--pinterest--square--filled
  • icon icon--pinterest--square
  • icon icon--pinterest
  • icon icon--play
  • icon icon--plus
  • icon icon--question--circle
  • icon icon--radio--checked
  • icon icon--radio
  • icon icon--search
  • icon icon--twitter
  • icon icon--youtube

Default Typography

Accessibility Requirement

Pages should be structured in a hierarchical manner and references 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

✘ Are we using adaptive placeholders for account/checkout still?

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/


Components

selectBox
Slick Carousel
Slide One
Slide Two
Slide Three
Slide Four
Colorbox Overlay
Launch overlay
Toggle
Code