skip navigation and go to main content
Styleguide

Fonts

  • Malone Serif
    AaBbCc

    A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​ a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​ 1​2​3​4​5​6​7​8​9​0​ &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .font--malone
  • Lars Malone
    AaBbCc

    A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​ a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​ 1​2​3​4​5​6​7​8​9​0​ &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .font--lars
  • Lars Malone Bold
    AaBbCc

    A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​ a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z 1​2​3​4​5​6​7​8​9​0​ &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .font--lars with font-weight: 700; declared
    OR helper class: .font--lars-bold
  • Bernhard Modern Bold
    AaBbCc

    A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​ a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z 1​2​3​4​5​6​7​8​9​0​ &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .font--bernhard-bold
  • Kuenstler Script
    AaBbCc

    A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​ a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z 1​2​3​4​5​6​7​8​9​0​ &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .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
      2_column_grid
    • 4_column_grid
      4_column_grid
    • account
    • arrow-left
      arrow-left
    • arrow-right
      arrow-right
    • back_to_top
      back_to_top
    • bag
      bag
    • bird-bottle
      bird-bottle
    • bottle-label
      bottle-label
    • cheveron_small
      cheveron_small
    • cheveron_small--down
      cheveron_small--down
    • cheveron_small--left
      cheveron_small--left
    • chevron
      chevron
    • chevron--left
      chevron--left
    • chevron--left-v2
      chevron--left-v2
    • chevron-v2
      chevron-v2
    • circle
      circle
    • close
      close
    • close_small
      close_small
    • dot_circle
      dot_circle
    • email
    • facebook
    • gift_close
      gift_close
    • hamburger
      hamburger
    • information
      information
    • instagram
      instagram
    • large_circle
      large_circle
    • large_left_arrow
      large_left_arrow
    • large_right_arrow
      large_right_arrow
    • left_arrow
      left_arrow
    • livechat
      livechat
    • logo
    • map-maker
      map-maker
    • map-maker_filled
      map-maker_filled
    • microphone
      microphone
    • minus
      minus
    • minus-v2
      minus-v2
    • pause
      pause
    • pinterest
      pinterest
    • play
      play
    • plus
      plus
    • plus-v2
      plus-v2
    • radio_button
      radio_button
    • radio_button_clicked
      radio_button_clicked
    • reviews_tick
      reviews_tick
    • right_arrow
      right_arrow
    • search
      search
    • speaker_button
      speaker_button
    • speaker_mute
      speaker_mute
    • speech-bubble-tail-inner
      speech-bubble-tail-inner
    • speech-bubble-tail-outer
      speech-bubble-tail-outer
    • tick
      tick
    • tick_box
      tick_box
    • tick_box_checked
      tick_box_checked
    • twitter
    • weibo
      weibo
    • weixin
      weixin
    • wishlist
      wishlist
    • wishlist_filled
      wishlist_filled
    • youtube
      youtube
    • zoom
      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
    close_small
    Body 2
    close_small
    Lars Malone Pro
    close_small
    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
Styleguide Tools