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

albescent-white #f6e8da
albescent-white-70 #f8eee5
albescent-white-40 #fbf6f0
albescent-white-20 #fdfaf8
albescent-white-10 #fffdfc
thunder #333133
thunder-70 #706e70
thunder-40 #adadad
thunder-20 #d6d6d6
thunder-10 #eaeaea
finlandia-green #506e57
finlandia-green-70 #849989
finlandia-green-40 #b9c5bc
finlandia-green-10 #dce2dd
primrose-green #D4F19F
primrose-green-70 #e0f5bb
primrose-green-40 #eef9d9
primrose-green-10 #f6fcec
jonquil-yellow #f3fc99
jonquil-yellow-70 #f6fcb7
jonquil-yellow-40 #fafed6
jonquil-yellow-10 #fdfeeb
el-salva-red #89392f
el-salva-red-70 #ac746d
el-salva-red-40 #d0b0ac
el-salva-red-10 #e7d7d5
fuzzy-warm-brown #bd664b
fuzzy-warm-brown-70 #d09381
fuzzy-warm-brown-40 #e5c2b7
fuzzy-warm-brown-10 #f2e0db
tumbleweed-orange #e2af7f
tumbleweed-orange-70 #eac7a5
tumbleweed-orange-40 #f3dfcc
tumbleweed-orange-10 #f9efe5
rhino-blue #2b445f
rhino-blue-70 #6a7c8f
rhino-blue-40 #aab4bf
rhino-blue-10 #d5dadf
kashmir-blue #4a7299
kashmir-blue-70 #809cb7
kashmir-blue-40 #b7c7d6
kashmir-blue-10 #dbe3eb
pigeon-post-blue #9fb8da
pigeon-post-blue-70 #bbcde5
pigeon-post-blue-40 #d9e3f0
pigeon-post-blue-10 #ecf1f8
Error Red #c53e2d
Success Green #3f804f
Warning Yellow #d5ae1f
Focus Purple #706e70

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

Button Element Disabled Button Element Full Width Button Element Disabled Full Width Button Element
Link Element Disabled Link Element Full Width Link Element Disabled Full Width Link Element

With Blue Modifier

Button Element Disabled Button Element
Link Element Disabled Link Element

With Green Modifier

Button Element Disabled Button Element
Link Element Disabled Link Element

Secondary

Button Element Disabled Button Element Full Width Button Element Disabled Full Width Button Element
Link Element Disabled Link Element Full Width Link Element Disabled Full Width Link Element

Tertiary

Button Element Disabled Button Element Full Width Button Element Disabled Full Width Button Element
Link Element Disabled Link Element Full Width Link Element Disabled Full Width Link Element

With Blue Modifier

Button Element Disabled Button Element
Link Element Disabled Link Element

With Green Modifier

Button Element Disabled Button Element
Link Element Disabled Link Element

Icon Buttons

Icon only with the .button--icon class

Close Play Play Cart
Close Play Play Cart

Buttons with icons included

Button Element Button Element Disabled Button Element Full Width Button Element

.button--icon-left and .button--icon-right

Play Button Element Play Disabled Button Element Play Button Element Play Disabled Button Element Play Full Width Button Element
Play Link Element Play Disabled Link Element Play Link Element Play Disabled Link Element Play Full Width Link Element

Form Elements

Text Inputs

Checkboxes

Radio Input

Option Set 1

Option Set 2 (Full Width, Disabled and Selected)

Select Inputs

Icons

Utility Icons

Form Icons

Social Icons

Brand Icons