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.