Style Guide
Logo
Pink Logo:
As an img tag:
As an inline SVG included as a snippet
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
Playfair Display
The quick brown fox jumps over the lazy dog.
Sofia Pro
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}.
Display Text
This is Text H1
This is Text H2
This is Text H3
This is Text H4
This is Text H5
This is Text H6
Paragraphs
Paragraph Large (.paragraph--large)
The quick brown fox jumps over the lazy dog.
Paragraph (.paragraph)
The quick brown fox jumps over the lazy dog.
Paragraph Small (.paragraph--small)
The quick brown fox jumps over the lazy dog.