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
- Numbered List Item 1
- Numbered List Item 2
- Numbered List Item 3
- Numbered List Item 4
Center
- Bulleted List Item 1
- Bulleted List Item 2
- Bulleted List Item 3
- Bulleted List Item 4
- Numbered List Item 1
- Numbered List Item 2
- Numbered List Item 3
- Numbered List Item 4
Right
- Bulleted List Item 1
- Bulleted List Item 2
- Bulleted List Item 3
- Bulleted List Item 4
- Numbered List Item 1
- Numbered List Item 2
- Numbered List Item 3
- 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
- Numbered List Item 1
- Numbered List Item 2
- Numbered List Item 3
- Numbered List Item 4
Center
- Bulleted List Item 1
- Bulleted List Item 2
- Bulleted List Item 3
- Bulleted List Item 4
- Numbered List Item 1
- Numbered List Item 2
- Numbered List Item 3
- Numbered List Item 4
Right
- Bulleted List Item 1
- Bulleted List Item 2
- Bulleted List Item 3
- Bulleted List Item 4
- Numbered List Item 1
- Numbered List Item 2
- Numbered List Item 3
- Numbered List Item 4
Links
Feature Link
Used as a feature link for elements such as Log In, Sign Up, etc.
LinkLink - Hover
Link - Pressed
Secondary Feature Link
Used as a secondary feature link for elements such as Log In, Sign Up, etc.
LinkLink - Hover
Link - Pressed
Form Elements
Input Form Fields
Form field used as an input for common text elements
Select Form Fields
Form field used as a select form element for selecting a single option from a list
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.