- Magasins / Spas
- Compte
Bon retour
OUEn cliquant sur « Continuer avec Facebook », En créant un compte, vous acceptez d’être lié aux Modalités et à la Politique de confidentialité de La Mer
Je suis un nouveau client
Créer un compteS'inscrire
OUEn cliquant sur « Continuer avec Facebook », En créant un compte, vous acceptez d’être lié aux Modalités et à la Politique de confidentialité de La Mer
Avez-vous déjà un compte?
Se connecter
Styleguide
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
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.”
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;
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
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
etaria-label
to your input fields
Components
selectBox
Slick Carousel
Colorbox Overlay
Product Tout
Toggle
Code
Code