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-left-new
- arrow-right
- arrow-right-new
- back_to_top
- bag
- bird-bottle
- bottle-label
- cc_maestro
- 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
- mc
- microphone
- minus
- minus-v2
- pause
- paypal
- pinterest
- play
- plus
- plus-v2
- radio_button
- radio_button_clicked
- reviews_tick
- right_arrow
- search
- sofort
- speaker_button
- speaker_mute
- speech-bubble-tail-inner
- speech-bubble-tail-outer
- star_filled
- star_outline
- tick
- tick_box
- tick_box_checked
- twitter
- visa
- 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 - Auto Width
Button Auto Width
.button .button--auto-width
Button - Auto Width Border Radius
Button Auto Width Border Radius
.button .button--auto-width-border-radius
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
Button - Small
Lorem ipsum dolor
.button-small
Button - Small - border radius
Lorem ipsum dolor
.button-small--border-radius

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

Welcome !

Fonts

Typography

Colors

Content Service

Stardust Content Block

MPP grid example

Full Width example

Prodcat Service

Did you know?

Fonts

Typography

Colors

Content Service

Stardust Content Block

MPP grid example

Full Width example

Prodcat Service

SIGN UP

Did you know?