Style Guide
Logo
Black Logo:
As an img tag:
As an inline SVG included as a snippet
White Logo:
As an img tag:
As an inline SVG included as a snippet
Grid and Layout Rules
Breakpoints
| Mobile | Tablet | Desktop | Full Width |
|---|---|---|---|
| less than 650px | 650px to 991px | greater than 992px | 2560px |
Global Spacing Unit and Layout Tools
The sizing and spacing for elements in this theme should always be based on the global spacing unit of 4 pixels. Ensure adherance to this rule by using the $spacing-unit variable wherever possible. This theme includes a BEM component called .page-layout as well as set of grid classes to help achieve layouts that conform to the global spacing guidelines.
Colors
Typography
Fonts
Heading Font - Saol
The quick brown fox jumps over the lazy dog.
Body Font - Founders Grotesk
The quick brown fox jumps over the lazy dog.
Accent Font - Bahnschrift
The quick brown fox jumps over the lazy dog.
Headings
Heading styles are available as native HTML elements as well as classes that follow the pattern of .heading--{level}.
Heading Level 1 (.heading--1)
Heading Level 2 (.heading--2)
Heading Level 3 (.heading--3)
Heading Level 4 (.heading--4)
Heading Level 5 (.heading--5)
Heading Level 6 (.heading--6)
Preheader (.heading--preheader)
Paragraphs
Paragraph (.paragraph)
The quick brown fox jumps over the lazy dog.
Paragraph Small (.paragraph--small)
The quick brown fox jumps over the lazy dog.
Paragraph Large (.paragraph--large)
The quick brown fox jumps over the lazy dog.
Buttons
Primary
With Blue Modifier
With Green Modifier
Secondary
Tertiary
With Blue Modifier
With Green Modifier
Icon Buttons
Icon only with the .button--icon class
Play
Play
Buttons with icons included
.button--icon-left and .button--icon-right
Button Element
Disabled Button Element
Button Element
Disabled Button Element
Full Width Button Element
Link Element
Disabled Link Element
Link Element
Disabled Link Element
Full Width Link Element