CALENDARIO DELL’AVVENTO
CALENDARIO DELL’AVVENTO
NATALE
NATALE
I NOSTRI PREFERITI
I NOSTRI PREFERITI
SCOPRI I FORMATI
SCOPRI I FORMATI
LIME BASIL & MANDARIN
LIME BASIL & MANDARIN
WOOD SAGE & SEA SALT
WOOD SAGE & SEA SALT
ENGLISH PEAR & FREESIA
ENGLISH PEAR & FREESIA
MYRRH & TONKA
MYRRH & TONKA
Wish List Wishlist
Il mio carrello My Bag

Ciao!

Come può esserti d'aiuto oggi il nostro team JO MALONE LONDON ?

Consigli sulle fragranze Servizio clienti
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
    Note coriacee e sensuali racchiuse in un mix di legni.
    .title--h1
  • Title H2
    Un profumo affumicato e caldo, riscaldato dagli ultimi raggi di sole.
    .title--h2
  • Title H3
    Rallegrato dal vivace ginepro e dal fresco pompelmo.
    .title--h3
  • Title H4
    Un tocco misterioso di vetiver, che permane nell’aria.
    .title--h4
  • Title H4 Secondary
    Un tocco misterioso di vetiver, che permane nell’aria.
    .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
    Note coriacee e sensuali racchiuse in un mix di legni. Un profumo affumicato e caldo, riscaldato dagli ultimi raggi di sole. Rallegrato dal vivace ginepro e dal fresco pompelmo. Un tocco misterioso di vetiver, che permane nell’aria.
    .body-text
  • Body Text 2
    Note coriacee e sensuali racchiuse in un mix di legni. Un profumo affumicato e caldo, riscaldato dagli ultimi raggi di sole. Rallegrato dal vivace ginepro e dal fresco pompelmo. Un tocco misterioso di vetiver, che permane nell’aria.
    .body-text2
  • Body Text 3
    Note coriacee e sensuali racchiuse in un mix di legni. Un profumo affumicato e caldo, riscaldato dagli ultimi raggi di sole. Rallegrato dal vivace ginepro e dal fresco pompelmo. Un tocco misterioso di vetiver, che permane nell’aria.
    .body-text3

Colors

  • Brand Colors
    Black
    #1c1c1c
    $color-black
    Gray
    #707070
    $color-gray
    Crema
    #fcf9ee
    $color-cream
    Cream Stroke
    #e2e1d7
    $color-cream-stroke
    Cream Disabled
    #e1e2d7
    $color-cream-disabled
  • System Colors
    Active
    #cc0000
    $color-invalid
    Inattivo
    #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-left-new
      arrow-left-new
    • arrow-right
      arrow-right
    • arrow-right-new
      arrow-right-new
    • back_to_top
      back_to_top
    • bag
      carrello
    • bird-bottle
      bird-bottle
    • bottle-label
      bottle-label
    • cc_maestro
      cc_maestro
    • 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
      chiudi
    • close_small
      close_small
    • dot_circle
      dot_circle
    • e-mail
    • facebook
    • gift_close
      gift_close
    • hamburger
      hamburger
    • hover-arrows-left-dark
      hover-arrows-left-dark
    • hover-arrows-left-light
      hover-arrows-left-light
    • hover-arrows-right-dark
      hover-arrows-right-dark
    • hover-arrows-right-light
      hover-arrows-right-light
    • 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
    • mc
      mc
    • microphone
      microphone
    • minus
      minus
    • minus-v2
      minus-v2
    • pause
      pause
    • paypal
      paypal
    • pinterest
      pinterest
    • play
      esplora
    • 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
      ricerca
    • sofort
      sofort
    • speaker_button
      speaker_button
    • speaker_mute
      speaker_mute
    • speech-bubble-tail-inner
      speech-bubble-tail-inner
    • speech-bubble-tail-outer
      speech-bubble-tail-outer
    • star_filled
      star_filled
    • star_outline
      star_outline
    • tick
      tick
    • tick_box
      tick_box
    • tick_box_checked
      tick_box_checked
    • twitter
    • visa
      visa
    • 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
    Acquista i regali
    .link .link--min
  • Link - Lowercase & Underlined on hover
    Indicazioni per arrivare
    .link .link-small
  • Link - Uppercase & Underlined
    Shop the family
    .link .link--caps
  • Button - Large with dark background and light text
    Aggiungi al carrello
    .button .button--dark .button--large
  • Button - Large Button Disabled
    Aggiungi al carrello
    .button .button--large-disabled
  • Button - Dark background with light text
    See all [20]
    .button .button--dark
  • Button - Disabled
    Aggiungi al carrello
    .button .button--disabled
  • Button - No background with dark border & Underlined on hover
    Facebook
    .button .button--light .button--large
  • Button - No background with dark border
    Floreali
    .button .button--secondary
  • Button - Text
    Annulli e ricominci
    .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
    close_small
    Body 2
    close_small
    Lars Malone Pro
    close_small
    Body 2
    .remove-filter-text
Controls / Tabs
  • Tabs - Deselected
    Per lui
    Header Four
    Header Four
    .control-tab-deselected
  • Tabs - Active / Selected
    Per lui
    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
    note di testa
    .justify-start
    center
    .justify-center
    bottom
    .justify-end
Container Maximum Widths - Plus padding rules

NOTA: 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