Typography

Our primary font is Montserrat.

Available from google fonts:
https://fonts.google.com/specimen/Montserrat
Used for headlines, subheads and display

Click here for the type scale source.

h1-Montserrat 54px line height: 1.5 em weight: 500

h2-Montserrat 38px line height: 1.5 em weight: 700

h3-Montserrat 28px line height: 1.5 em weight: 500

h4-Montserrat 21px line height: 1.5 em weight: 700

h5-Montserrat 16px line height: 1.5 em weight: 100
h6-Montserrat 12px line height: 1.5 em weight: 700

p-Open sans 16px line height: 24px weight: 100

Colors

The Halo green and Electric yellow are the primary brand colors. They are used mainly for ui elements and typography  as accents on dark neutral backgrounds.

#00ffcc
#00dcaf
#f0f014
#f0f0f5
#50505b
#000000

Spacing

Container

Containers support all content containers. Best practices consist of picking one of three max-width sizes. Then setting your margins to auto. This centers the content containers.

Full Width

Desktop
1200px

Mobile
900px

Content

Content consist of a variety of different elements.
See below for a glossary of various elements

Buttons
Images
Video
Copy

Mobile Content

For reference Mobile follows a specific stacking order:
Img/Video > Copy > Img

Images
Copy
Images

Padding

Standard vertical padding is 56px.
Padding follows the rule of being divisible by 8.
*Only applies to top and bottom

56px

56px

Buttons

Buttons trigger actions and links.

Primary button:

Radius: 3px

Left/Right padding: 32px

Top/Bottom padding: 15px

Font size: 16pt

Font color: #333333

Font weight: 500

Bg color default: #00dcaf

Bg color hover: #00c5a8

Bg color active: #048369

Font color active: #ffffff

Default
Hover
Active

Secondary button:

Radius: 3px

Left/Right padding: 32px

Top/Bottom padding: 15px

Font size: 16pt

Font weight: 500

Bg color: #ffffff

Stroke: 1 px

Stroke color default: #333333

Stroke color hover: #048369

Stroke color active: #50505b

Font color: active: #ffffff

Default
Hover
Active

Snippets Glossary