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.
Headings
For flexibility, letter case is never explicity set in CSS. This must be done on the editorial side.
POLISH
With our new interlaced
Stretch Matrix Complex.”
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
title
andaria-label
to your input fields
Components
Code