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

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
Account
account
Cart
cart
Account white
account-white
Cart white
cart-white
Search
search
Search blue
search-blue
Close
close
Close blue
close-blue
Hamburger
hamburger
Minus
minus
Plus
plus
Minus white
minus-white
Plus white
plus-white
Play
play
Warning
warning
Direction
Arrow up
arrow-up
Arrow right
arrow-right
Arrow down
arrow-down
Arrow left
arrow-left
Arrow up white
arrow-up-white
Arrow right white
arrow-right-white
Arrow down white
arrow-down-white
Arrow left white
arrow-left-white
Arrow up circle
arrow-up-circle
Arrow right circle
arrow-right-circle
Arrow down circle
arrow-down-circle
Arrow left circle
arrow-left-circle
Caret up
caret-up
Caret right
caret-right
Caret down
caret-down
Caret left
arrow-left
Chevron up
chevron-up
Chevron right
chevron-right
Chevron down
chevron-down
Chevron left
chevron-left
Chevron up white
chevron-up-white
Chevron right white
chevron-right-white
Chevron down white
chevron-down-white
Chevron left white
chevron-left-white
Chevron left circle
chevron-left-circle
Chevron right circle
chevron-right-circle
Social media
Facebook
facebook
Instagram
instagram
Twitter
twitter
Youtube
youtube
Facebook white
facebook-white
Instagram white
instagram-white
Twitter white
twitter-white
Youtube white
youtube-white

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.

Basic headers Spec

Mega-heading

.megaheading

Heading 1

h1, .h1

Heading 2

h2, .h2

Heading 3

h3, .h3

Heading 4

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

Subheading

.subheading
Body styles Spec

Lead

.lead

Paragraph

p

Meta

.meta

Meta Heading

.meta-heading
.legal

Caption

caption, .caption
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 .button--secondary
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
Block .button.button--block
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.

A re-usable notification which dynamically updates based on items in the cart.

Add £40.00 more for free Delivery

Premium member? Checkout using your email for Free Shipping

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.

A newsletter callout is a flexible component used primarily to highlight and focus on newsletter sign ups.