icon-account icon-glass

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.

Sizes

Full Width

1200px

900px

Content

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

Content Elements

Buttons
Images
Video
Copy

Content Padding

Padding follows the rule of being divisible by 8. *Only applies to top and bottom

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

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