Typography

H1

Description:

font-family is "ProximaCond-B", font-size is 2.5rem (equal to 40px)

Usage:

<h1>This is a headline</h1> or <div class="h1">This is a headline</div>

This is a headline one

H2

Description:

font-family is "ProximaCond-B", font-size is 2.125rem (equal to 34px)

Usage:

<h2>This is a headline</h2> or <div class="h2">This is a headline</div>

This is a headline two

H3

Description:

font-family is "ProximaCond-B", font-size is 1.8rem (equal to 28px)

Usage:

<h3>This is a headline</h3> or <div class="h3">This is a headline</div>

This is a headline three

H4

Description:

font-family is "ProximaCond-B", font-size is 1.375rem (equal to 22px)

Usage:

<h4>This is a headline</h4> or <div class="h4">This is a headline</div>

This is a headline four

H5

Description:

font-family is "ProximaCond-B", font-size is 1.1rem (equal to 18px)

Usage:

<h5>This is a headline</h5> or <div class="h5">This is a headline</div>
This is a headline five

H6

Description:

font-family is "ProximaCond-B", font-size is 1rem (equal to 16px)

Usage:

<h6>This is a headline</h6> or <div class="h6">This is a headline</div>
This is a headline six

Paragraph

Description:

font-family is "proximanova-regular", font-size is 1rem (equal to 16px)

Usage:

<p>This is paragraph text.</p>

This is paragraph text.

Prepended Title with Break

Description:

Display a Prepended Title

Usage:

<h4 class="prepend-caps prepend-border color-boulder">This is a Prepended Title</h4>

This is a Prepended Title

Globals

Colors

Dark Blue
#003A70
Light Blue
#65A4EF
Magenta
#D9027D
Blue Green
#008a96
Light Green
#77c043
Black
#000000
Default Text Gray
#1B1E21
Gray
#e0dedf
Light Gray
#F4F4F4
White
#FFFFFF

Fonts

$font-proxima-nova: "Proxima Nova", sans-serif;

$font-montserrat: "Montserrat", sans-serif;

$font-sans: "Open Sans", sans-serif

$font-aleo: "Aleo, serif

Buttons

Default Button

Description:

Display the default button.

Usage:

<button type="button" class="button">Click Me</button>

Light Blue Button

Description:

Display the light blue button.

Usage:

<button type="button" class="button button-light-blue">Click Me</button>

Transparent Button

Description:

Display a transparent button with a border.

Usage:

<button type="button" class="button button-transparent">Click Me</button>
Contact