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

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

//font-family: 'Neue Haas Unica Pro';

@include font--text;

La Mer Headline Black

AaBb

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

//font-family: 'La Mer Headline';

@include font--heading;

La Mer Text

AaBb

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

//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

PARFAITE
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

Ces traitements, les plus concentrés de La Mer, conditionnent, ciblent et transforment la peau. Nos sérums pénètrent rapidement et procurent de puissants bienfaits en profondeur. Ils hydratent, ravivent et resserrent, pour une peau éclatante et épanouie.

@extend %text--1;

Body Copy - Small

@CREMEDELAMER

@extend %text--2;

Buttons

Primary CTA

MAGASINER

@extend %button;

// or

@include button;

button

Secondary CTA

MAGASINER

@extend %button--secondary;

// or

@include button--secondary;

button button--secondary

Green CTA

MAGASINER

@extend %button--green;

// or

@include button--green;

button button--green

Inactive

ÉPUISÉ(E)

button button--disabled

Transparent CTA - with gray border

MAGASINER

@extend %button--transparent;

// or

@include button--transparent;

button button--transparent

Transparent CTA - with black border

MAGASINER

button button--transparent button--transparent--black

Transparent CTA - with white border

MAGASINER

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
#FDF4ED $color-light-sand
#EDDECD $color-sand
#EBEDEA $color-light-green
#005C3E $color-green
#ffd3ad $color-salmon
#def2f7 $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. Exemple : do not skip from a <h2> to an <h4> reference.

Voir : 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 et aria-label to your input fields

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

Components

selectBox

Slick Carousel

Slide One

Slide Two

Slide Three

Slide Four

Colorbox Overlay

Launch overlay

Product Tout

MAGASINER

AJOUTER À LA LISTE DE SOUHAITS

Nouveau

NOUVEAUTÉS

Styleguide

Fonts

Headings

Buttons

Colors

Icons

Default Typography

This is the H1 text style