- Stores / Spas
- Account
Welcome Back
ORBy clicking “Continue with Facebook”, By creating an account, you agree to be bound by the La Mer Terms and Conditions and Privacy Policy
I'm a new customer
Create an accountRegister
ORBy clicking “Continue with Facebook”, By creating an account, you agree to be bound by the La Mer Terms and Conditions and Privacy Policy
Already have an account?
Sign In
.jpg)
.jpg)
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
PERFECT
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
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;
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. 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
titleandaria-labelto your input fields
Components
selectBox
Slick Carousel
Colorbox Overlay
Product Tout
Toggle
Code
Code