Style Guide

Pallette

Primary Brand Colors

Primary Color
${ variables['--shop-primary-color'] }

Secondary Color
${ variables['--shop-secondary-color'] }



Colors

Color is used sparingly to draw attention to interface elements and to deliver positive, negative, or warning feedback to the user.

${ key.replace('$', '').replace(/shop-/g, '').replace(/-/g, ' ') }
${ value }


${ key.replace('--', '').replace('-', ' ') }
${ val }

Typography

Primary Font

${ variables['--shop-primary-font'].replace(/-/g, ' ').replace(/\"/g, '') }

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z


Secondary Font

${ variables['--shop-secondary-font'].replace(/-/g, ' ').replace(/\"/g, '') }

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z



Headlines

Left

Hero

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Center

Hero

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Right

Hero

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Headlines On Dark

Left

Hero

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Center

Hero

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Right

Hero

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Paragraph

Left

Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum Euismod.

Center

Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum Euismod.

Right

Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum Euismod.

Paragraph On Dark

Left

Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum Euismod.

Center

Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum Euismod.

Right

Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum Euismod.

List Styles

Left

  • Bulleted List Item 1
  • Bulleted List Item 2
  • Bulleted List Item 3
  • Bulleted List Item 4


  1. Numbered List Item 1
  2. Numbered List Item 2
  3. Numbered List Item 3
  4. Numbered List Item 4

Center

  • Bulleted List Item 1
  • Bulleted List Item 2
  • Bulleted List Item 3
  • Bulleted List Item 4


  1. Numbered List Item 1
  2. Numbered List Item 2
  3. Numbered List Item 3
  4. Numbered List Item 4

Right

  • Bulleted List Item 1
  • Bulleted List Item 2
  • Bulleted List Item 3
  • Bulleted List Item 4


  1. Numbered List Item 1
  2. Numbered List Item 2
  3. Numbered List Item 3
  4. Numbered List Item 4

List Styles On Dark

Left

  • Bulleted List Item 1
  • Bulleted List Item 2
  • Bulleted List Item 3
  • Bulleted List Item 4


  1. Numbered List Item 1
  2. Numbered List Item 2
  3. Numbered List Item 3
  4. Numbered List Item 4

Center

  • Bulleted List Item 1
  • Bulleted List Item 2
  • Bulleted List Item 3
  • Bulleted List Item 4


  1. Numbered List Item 1
  2. Numbered List Item 2
  3. Numbered List Item 3
  4. Numbered List Item 4

Right

  • Bulleted List Item 1
  • Bulleted List Item 2
  • Bulleted List Item 3
  • Bulleted List Item 4


  1. Numbered List Item 1
  2. Numbered List Item 2
  3. Numbered List Item 3
  4. Numbered List Item 4

Buttons

Primary Button

Used as a primary call-to-action on light and dark backgrounds







Secondary Button

Used as a secondary call-to-action on light backgrounds








Primary Button On Dark

Used as a primary call-to-action on dark backgrounds







Secondary Button On Dark

Used as a secondary call-to-action on dark backgrounds







Links

Feature Link

Used as a feature link for elements such as Log In, Sign Up, etc.

Link

Link - Hover

Link - Pressed

Secondary Feature Link

Used as a secondary feature link for elements such as Log In, Sign Up, etc.

Link

Link - Hover

Link - Pressed

Text Link

Used as an in-line text link

Link
Link - Hover
Link - Pressed

Feature Link On Dark

Used as a feature link for elements such as Log In, Sign Up, etc. on dark

Link

Link - Hover

Link - Pressed

Secondary Feature Link On Dark

Used as a secondary feature link for elements such as Log In, Sign Up, etc. on dark

Link

Link - Hover

Link - Pressed

Text Link On Dark

Used as an in-line text link on dark

Link
Link - Hover
Link - Pressed

Form Elements

Input Form Fields

Form field used as an input for common text elements





Error messaging

Select Form Fields

Form field used as a select form element for selecting a single option from a list





Error messaging

Check Box

Radio

Grid

A responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

The grid system supports responsive classes for desktop, tablet, and mobile, vertical and horizontal alignment, directional flow, hiding/showing responsively, as well as offsetting, via classes.