Typographic Scale

Xl-7 80px
Xl-6 60px
Xl-5 52px
Xl-4 44px
Xl-3 36px
Xl-2 32px
Xl 28px
Lg 22px
Base 18px
Sm 16px
Xs 14px
Xs-2 12px

Fonts

Workhorse - Proxima Nova Wide Medium
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789!?&$#
Workhorse - Proxima Nova Wide Extrabold
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789!?&$#
Display - Meta Serif Pro Medium
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789!?&$#
Display - Meta Serif Pro Bold
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789!?&$#

Headings

Heading 1

H1 Heading / Lato Black / 36px / 44px line-height / 0px letter-spacing

Heading 2

H2 Heading / Lato Black / 28px / 34px line-height / 0px letter-spacing

Heading 3

H3 Heading / Lato Black / 22px / 27px line-height / 0px letter-spacing

Heading 4

H4 Heading / Lato Black / 18px / 22px line-height / 0px letter-spacing

Heading 5

H5 Heading / Lato Black / 16px / 19px line-height / 0px letter-spacing

Buttons

Variations
Sizes

Links

Variations

Scorched messiah mates along mantra. The nothing desires the persistent Irulan, before Inline Link even though sadness. The force during naib cannot die the politics, underneath the Muad'Dib slips subtlety. Below native wherever doctor, upon spannungsbogen and the weakness.

Colors

Brand
brand-1
brand-1-light
brand-2
Secondary
secondary-1
secondary-2
secondary-3
secondary-4
secondary-5
Neutral
neutral-1
neutral-2
neutral-3
neutral-4
Brand
mt-brand-1
mt-brand-2
mt-brand-3
Secondary
mt-secondary-1
mt-secondary-2
mt-secondary-3
Gradients
mt-gradient-1
mt-gradient-2
Neutral
mt-neutral-1
mt-neutral-2
mt-neutral-3
mt-neutral-4

Icons

Accent

Add

Arrow-down

Arrow-interactive

Arrow-left

Arrow-right

Arrow-up

Calendar

Caret-down

Caret-up

Check

Clock

Close

Facebook

House

Info

Instagram

List

Location

Menu

Menu-icon

Minus

Mt-accent

Mt-logo-white

Mt-play

Paramount-blade

Play

Question

Search

Settings

Twitter

Video-pause

Video-play

Warning

Wifi

Spacing

Horizontal
Quarter - 4.5px
Half - 9px
Full - 18px
Double - 36px
Vertical
Quarter - 5px
Half - 10px
Full - 20px
Double - 40px

Grid System

.grid__lg-1of12
12
12
12
12
12
12
12
12
12
12
12
12
.grid__lg-half
half
half
.grid__lg-third
third
third
third
.grid__lg-quarter
quarter
quarter
quarter
quarter
.grid__med-1of9
9
9
9
9
9
9
9
9
9
.grid__med-half
half
half
.grid__med-third
third
third
third
.grid__med-quarter
quarter
quarter
quarter
quarter
.grid__sm-1of4
4
4
4
4
.grid__sm-half
half
half
.grid__sm-third
third
third
third
.grid__sm-quarter
quarter
quarter
quarter
quarter

Flex System

Flex grid
.flex
.flex__col
.flex__col
.flex__col
.flex__col
Flex Grid w/Gutters
.flex .flex__gutters
.grid__lg-half .grid__med-half .grid__sm-half
.grid__lg-half .grid__med-half .grid__sm-half