Design System

Color Schemes

Color Scheme #1

Color Scheme #2

Color Scheme #3

Color Scheme #4

Color Scheme #5

Color Scheme #6

Color Scheme #7

Color Scheme #8

Color Scheme #9

Color Scheme #10

Color Scheme #11

Color Scheme #12

Color Scheme #13

Color Scheme #14

Color Scheme #15

Color Scheme #16

Color Scheme #17

Typography

Heading 1

Heading 2

Heading 3

Caption

Heading 2 (with dash below)

Special Headline

Heading 2 (with dash above)

Prose

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel eros donec ac odio tempor orci. Consectetur adipiscing elit ut aliquam purus sit. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla.

Dictumst vestibulum rhoncus est pellentesque. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Congue eu consequat ac felis donec et odio pellentesque diam. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Maecenas volutpat blandit aliquam etiam erat velit. Vulputate ut pharetra sit amet aliquam id.

Buttons

The color of buttons is determined by the color scheme that they are placed within.

Forms

Standard Style Input

Underline Style Input

Checkboxes & Radios

Containers

Inset with gutters (max-width: 930px)
Inset (max-width: 930px)
Standard with gutters (max-width: 1400px)
Standard (max-width: 1400px)
Full-Bleed

Ratio Boxes

Standard aspect ratios used for media.

Product Card
Product Card
Product Card
Product Card
Landscape
Strip

Spacing

Standard spacing options used in theme settings

Small Spacing: 1rem

Medium Spacing: 2rem

Large Spacing: 4rem