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 |
$COLOR_PRIMARY |
| Secondary |
$COLOR_SECONDARY |
| Brand tints | Spec |
|---|---|
| Primary Dark |
$COLOR_PRIMARY_DARK |
| Primary Light |
$COLOR_PRIMARY_LIGHT |
| Shades | Spec |
|---|---|
| Black |
$COLOR_BLACK |
| Grey 1 |
$COLOR_GREY_1 |
| Grey 2 |
$COLOR_BLACK |
| Grey 3 |
$COLOR_GREY_3 |
| White |
$COLOR_WHITE |
| Utilities | Spec |
|---|---|
| Text |
$COLOR_TEXT |
| Text Light |
$COLOR_TEXT_LIGHT |
| Link |
$COLOR_LINK |
| Link Hover |
$COLOR_LINK_HOVER |
| Border |
$COLOR_BORDER |
| Background |
$COLOR_BACKGROUND |
| Background Secondary |
$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
Direction
Social media
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 |
|
Display 2 |
|
Display 3 |
| 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 |
|
|
Medium |
|
| Body styles | Spec |
|---|---|
|
Lead |
|
Paragraph |
|
Paragraph Light |
|
|
|
|
Caption |
|
Legal |
|
Price |
|
Price Large |
|
| Block styles | Spec |
|---|---|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. |
|
|
|
|
| Inline styles | Spec |
|---|---|
|
You can use the mark tag to highlight text. |
|
|
|
|
|
|
|
|
This line of text is meant to be treated as an addition to the document. |
|
|
This line of text will render as underlined |
|
|
This line of text is meant to be treated as fine print. |
|
|
This line rendered as bold text. |
|
|
This line rendered as italicized text. |
|
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 |
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.
Add dialogs to your site for lightboxes, user notifications, or completely custom content.
Modal title
Hello World
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.
- In fermentum leo eu lectus mollis, quis dictum mi aliquet.
- Morbi eu nulla lobortis, lobortis est in, fringilla felis.
- Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
- Ut non enim metus.
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.
