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.
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-heading |
|
Legal |
.legal |
Caption |
caption, .caption |
| Block styles | Spec |
|---|---|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. |
blockquote, .blockquote |
|
ol, .ol, .list, .list--ordered, .list--nested, .list__item |
|
ol, .ol, .list, .list--unordered, .list--nested, .list__item |
| Inline styles | Spec |
|---|---|
|
You can use the mark tag to highlight text. |
mark |
|
|
del |
|
|
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 |
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.
A re-usable notification which dynamically updates based on items in the cart.
Add £50.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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
Product galleries provide users with key information of a product using only images.