Styleguide


1. Typography

Class: .h0

Heading 0 (Display Title)

Font-size: 40px (Responsive) | Line-height: 1.2

Class: .h1 (or <h1>)

Heading 1 Title

Font-size: 18px | Line-height: 1.2

Class: .h2 (or <h2>)

Heading 2 Title

Font-size: 30px (Responsive) | Line-height: 1.23

Class: .h3 (or <h3>)

Heading 3 Title

Font-size: 26px (Responsive) | Line-height: 1.23

Class: .h4 (or <h4>)

Heading 4 Title

Font-size: 20px (Responsive) | Line-height: 1.2

Class: .subtitle
Subtitle Text Sample
Font-size: 18px | Line-height: 1.22

Class: .leadin-b
Lead-in text B for introductions.
Font-size: 18px | Line-height: 22px

Class: .body-r
Standard body paragraph text. Lorem ipsum dolor sit amet.
Font-size: 16px | Line-height: 1.5

Class: .remark
Small remark or caption text.
Font-size: ~15px | Line-height: 1.46

2. Buttons

.button.primary

Primary Button

Standard button with arrow icon and line animation.

.button.secondary

Secondary Button

Transparent background, rounded, hovers to semi-white.

.button.dark.primary

Dark Button

Use this on light backgrounds. Icons change to dark version.

3. Javascript Effects

A. Scroll Reveal Animation

Add Class: .js-scrollin

Any element with this class will fade in and float upwards when it enters the viewport.

I animate when reached!

B. Auto Numbering

Add Class: .section-number

Automatically fills the element with “01”, “02”, etc., based on DOM order.

Step A:
Step B:
Step C: