Style Guide
Pallette
Primary Brand Colors
Primary Color
${ variables.global['$primary-color'].value.hex }
Secondary Color
${ variables.global['$secondary-color'].value.hex }
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(/-/g, ' ') }
${ sassVar.value.hex }
Shadow
Typography
Primary Font
${ variables.global['$primary-font'].value[0].value.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.global['$secondary-font'].value[0].value.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
Header 7
Center
Hero
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Header 7
Right
Hero
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Header 7
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.
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
Links
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.
