Styleguide

Fonts

Malone Serif
AaBbCc
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 &.,?!@()#$%*+-=:;
.font--malone
Lars Malone
AaBbCc
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 &.,?!@()#$%*+-=:;
.font--lars
Lars Malone Bold
AaBbCc
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 &.,?!@()#$%*+-=:;
.font--lars with font-weight: 700; declared
OR helper class: .font--lars-bold
Bernhard Modern Bold
AaBbCc
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 &.,?!@()#$%*+-=:;
.font--bernhard-bold
Kuenstler Script
AaBbCc
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 &.,?!@()#$%*+-=:;
.font--kuenstler

Typography

Title H1
Sultry leather encased in a medley of woods.
.title--h1
Title H2
At once smoky and warm, bronzed by the sun’s evening rays.
.title--h2
Title H3
Enlivened with vibrant juniper and fresh grapefruit.
.title--h3
Title H4
A mysterious twist of vetiver, left lingering in the air.
.title--h4
Title H4 Secondary
A mysterious twist of vetiver, left lingering in the air.
.title--h4-secondary
Title H5
Hello, tiny header.
.title--h5
Title H5 Secondary
Hello, tiny header.
.title--h5-secondary
Title H6
Hey, not so bold tiny header.
.title--h6
Body Text
Sultry leather encased in a medley of woods. At once smoky and warm, bronzed by the sun’s evening rays. Enlivened with vibrant juniper and fresh grapefruit. A mysterious twist of vetiver, left lingering in the air.
.body-text
Body Text 2
Sultry leather encased in a medley of woods. At once smoky and warm, bronzed by the sun’s evening rays. Enlivened with vibrant juniper and fresh grapefruit. A mysterious twist of vetiver, left lingering in the air.
.body-text2
Body Text 3
Sultry leather encased in a medley of woods. At once smoky and warm, bronzed by the sun’s evening rays. Enlivened with vibrant juniper and fresh grapefruit. A mysterious twist of vetiver, left lingering in the air.
.body-text3

Colors

Brand Colors
Black
#1c1c1c
$color-black
Gray
#707070
$color-gray
Cream
#fcf9ee
$color-cream
Cream Stroke
#e2e1d7
$color-cream-stroke
Cream Disabled
#e1e2d7
$color-cream-disabled
System Colors
Active
#cc0000
$color-invalid
Inactive
#0cc42f
$color-valid
Disabled
#ebbb00
$color-warning

Icons

- 2_column_grid
- 4_column_grid
- account
- arrow-left
- arrow-right
- back_to_top
- bag
- bird-bottle
- bottle-label
- cheveron_small
- cheveron_small--down
- cheveron_small--left
- chevron
- chevron--left
- chevron--left-v2
- chevron-v2
- circle
- close
- close_small
- dot_circle
- email
- facebook
- gift_close
- hamburger
- hover-arrows-left-dark
- hover-arrows-left-light
- hover-arrows-right-dark
- hover-arrows-right-light
- information
- instagram
- large_circle
- large_left_arrow
- large_right_arrow
- left_arrow
- livechat
- logo
- map-maker
- map-maker_filled
- microphone
- minus
- minus-v2
- pause
- pinterest
- play
- plus
- plus-v2
- radio_button
- radio_button_clicked
- reviews_tick
- right_arrow
- search
- speaker_button
- speaker_mute
- speech-bubble-tail-inner
- speech-bubble-tail-outer
- tick
- tick_box
- tick_box_checked
- twitter
- weibo
- weixin
- wishlist
- wishlist_filled
- youtube
- zoom

<svg role="img" aria-labelledby="my-unique-id" class="icon icon--twitter">
  <title id="my-unique-id">ADA title goes here</title>
  <use xlink:href="#twitter"></use>
</svg>

Buttons & Links

Link - Lowercase & Underlined
Shop Gifts
.link .link--min
Link - Lowercase & Underlined on hover
Get directions
.link .link-small
Link - Uppercase & Underlined
Shop the family
.link .link--caps
Button - Large with dark background and light text
Add to bag
.button .button--dark .button--large
Button - Large Button Disabled
Add to bag
.button .button--large-disabled
Button - Dark background with light text
See all [20]
.button .button--dark
Button - Disabled
Add to bag
.button .button--disabled
Button - No background with dark border & Underlined on hover
Facebook
.button .button--light .button--large
Button - No background with dark border
Floral
.button .button--secondary
Button - Text
Cancel and start over
.button .button--text
Button - Secondary Dark Button with light text
Dark Button Secondary
.button--dark-secondary
Button - CTA Pill Storke
CTA Pill Storke
.cta-pill-stroke
Button - CTA Pill Storke - Dark background with light text
CTA Pill Storke Black
.cta-pill-stroke--dark
Button - CTA Pill Storke - white background black text
CTA Pill Storke White
.cta-pill-stroke--white

Controls / Filters

Filter - Standard de-selected
Body 2
Lars Malone Pro
Body 2
.cta-pill-stroke--deselected
Filter - Active / Selected
Body 2
Lars Malone Pro
Body 2
.cta-pill-stroke--selected
Selected Filters / Remove

Body 2

Lars Malone Pro

Body 2
.remove-filter-text

Controls / Tabs

Tabs - Deselected
For Him
Header Four
Header Four
.control-tab-deselected
Tabs - Active / Selected
For Him
Header Four
Header Four
.cta-pill-stroke

Layout Helpers

This section lists layout helpers, common block widths, and padding rules.

Horizontal Alignment
left
.horizontal-align-left
right
.horizontal-align-right
center
.horizontal-align-center
Vertical Alignment
top
.justify-start
center
.justify-center
bottom
.justify-end

Container Maximum Widths - Plus padding rules

NOTE: padding amount changes depending on screen or device width. Larger screens have more left / right padding.

Full width: 100%
.container-max-width-full
Full width: 100% with padding
.container-max-width-full .container-max-width--padded
Large: 1440px
.container-max-width-large
Large: 1440px with padding
.container-max-width-large .container-max-width--padded
Large indented: 1342px
.container-max-width-large-indented
Large indented: 1342px width padding
.container-max-width-large-indented .container-max-width--padded

Content Service

Stardust Content Block

MPP grid example

Full Width example

.elc-content-block

Prodcat Service

Quantity Selector
.elc-quantity-selector
Product Brief Wrapper
.elc-product-brief
Product Cross Sell
.elc-product-cross-sell
Image Navigation Menu
.elc-image-nav-menu-item
Shade Picker
.elc-shade-picker
Shade Picker Button
.elc-shade-picker-button
Size Picker
.elc-size-picker