Color brings a design to life. Color is versatile; it's used to express emotion and tone, as well as place emphasis and create associations.

Brand Spec
Primary rgb(0, 0, 0)
$COLOR_PRIMARY
Secondary rgb(99, 115, 129)
$COLOR_SECONDARY
Brand tints Spec
Primary Dark rgb(0, 0, 0)
$COLOR_PRIMARY_DARK
Primary Light (51, 51, 51)
$COLOR_PRIMARY_LIGHT
Shades Spec
Black rgb(0, 0, 0)
$COLOR_BLACK
Grey 1 rgb(85, 86, 91)
$COLOR_GREY_1
Grey 2 rgb(235, 235, 235)
$COLOR_BLACK
Grey 3 rgb(250, 250, 250)
$COLOR_GREY_3
White rgb(255, 255, 255)
$COLOR_WHITE
Utilities Spec
Text rgb(33, 43, 54)
$COLOR_TEXT
Text Light rgb(235, 235, 235)
$COLOR_TEXT_LIGHT
Link rgb(85, 86, 91)
$COLOR_LINK
Link Hover rgb(0, 0, 0)
$COLOR_LINK_HOVER
Border rgb(196, 205, 213)
$COLOR_BORDER
Background rgb(245, 246, 246)
$COLOR_BACKGROUND
Background Secondary rgb(33, 43, 54)
$COLOR_BACKGROUND_SECONDARY

Icons are designed to be simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, expressing essential characteristics to either replace or accompany labels.

Misc
Settings&Information/Account/24 Copy
Account
account
Cart
cart
Close
close
Delivery
delivery
Email
email
Grid (view)
grid
List (view)
list
Minus
minus
Returns
returns
Plus
plus
Search
search
Tick
tick
Tyre
tyre
Warranty
warranty
Direction
Caret up
caret-up
Caret right
caret-right
Caret down
caret-down
Caret left
caret-left
Chevron up
chevron-up
Chevron right
chevron-right
Chevron down
chevron-down
Chevron left
chevron-left
Social media
Facebook
facebook
Instagram
instagram
Twitter
twitter
Youtube
youtube

Typography is used to create clear hierarchies, useful organizations, and purposeful alignments that guide users through the product and experience. It is the core structure of any well designed interface.

Display sizes Spec

Display 1

 .d1

Display 2

 .d2

Display 3

 .d3
Basic headers Spec

Heading 1

 h1, .h1

Heading 2

 h2, .h2

Heading 3

 h3, .h3

Heading 4

 h4, .h4
Heading 5
 h5, .h5
Heading 6
 h6, .h6
Modifiers Spec

Regular

 .weight--regular

Medium

 .weight--medium
Body styles Spec

Lead

 .lead

Paragraph

 p

Paragraph Light

 .light

Meta

 .meta

Caption

 caption, .caption

Legal

 .legal

Price

 .price

Price Large

 .price.price--large
Block styles Spec
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
 blockquote, .blockquote
  1. Ordered List level 1
    1. Ordered List level 2
    2. Ordered List level 2
  2. Ordered List level 1
  3. Ordered List level 1
 ol, .ol,
.list, .list--ordered,
.list--nested, .list__item
  • Unordered List level 1
    • Unordered List level 2
    • Unordered List level 2
  • Unordered List level 1
  • Unordered List level 1
 ol, .ol,
.list, .list--unordered,
.list--nested, .list__item
Inline styles Spec

You can use the mark tag to highlight text.

 mark

This line of text is meant to be treated as deleted text.

 del

This line of text is meant to be treated as no longer accurate.

 s

This line of text is meant to be treated as an addition to the document.

 ins

This line of text will render as underlined

 u

This line of text is meant to be treated as fine print.

 small

This line rendered as bold text.

 strong

This line rendered as italicized text.

 em

Accordion enables users to expand and collapse sections of content.

  • Apples are a fine fruit often associated with good health, and fewer doctor's appointments.

    Example. An apple a day keeps the doctor away.

  • Apples are a fine fruit often associated with good health, and fewer doctor's appointments.

    Example. An apple a day keeps the doctor away.

  • Kiwis are a fun, under-appreciated fruit.

  • Apples are a fine fruit often associated with good health, and fewer doctor's appointments.

    Example. An apple a day keeps the doctor away.

  • Apples are a fine fruit often associated with good health, and fewer doctor's appointments.

    Example. An apple a day keeps the doctor away.

  • Kiwis are a fun, under-appreciated fruit.

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Styles Spec
Primary Primary .button--primary,
.button--outlined
Secondary Secondary .button--secondary,
.button--outlined
Tertiary .button--tertiary,
(white bg no border)
Success Success .button--success,
.button--outlined
Warning Warning .button--warning,
.button--outlined
Error Error .button--error,
.button--outlined
Light Light .button--light,
.button--outlined
Dark Dark .button--dark,
.button--outlined
Sizes Spec
Small .button.button--small
Normal .button
Large .button.button--large
Full Width .button.button--full-width
State Spec
Active .button.is-active
Disabled .button.is-disabled or .button[disabled]
Active 		.button.is-loading
Toggled .button.is-toggled
Error .button.is-error
Focused .button.is-focused

Cards provide a flexible and extensible content container with multiple variants and options.

A structured flex table to display cart line items.

Covers provide a flexible and extensible content container with background images.

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

We'll never share your email with anyone else.

Add dialogs to your site for lightboxes, user notifications, or completely custom content.

Product galleries provide users with key information of a product using only images.

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Cards provide a flexible and extensible content container with multiple variants and options.
Carrello
Prodotto aggiunto al carrello