Typography


Header Level 1

50px / 62.5px


Header Level 2

35px / 43.75px


Header Level 3

30px / 37.5px


Header Level 4

23px / 32.2px


Header Level 5

18px / 25.2px


Header Level 6

16px / 22.4px


This is a paragraph. You can use one of these with a <p> element. Do you like this paragraph? It's a pretty neat paragraph. I can write so many interesting things in this paragraph! Maybe another day..


This is a link!

You can use one of these with an <a> tag.




Fonts


Avenir Black

The quick brown fox jumped over the lazy dog. Implement this by adding the .font-avenir-black class on your element.


Avenir Roman

The quick brown fox jumped over the lazy dog. Implement this by adding the .font-avenir-roman class on your element.


Avenir Heavy

The quick brown fox jumped over the lazy dog. Implement this by adding the .font-avenir-heavy class on your element.


Perpetua

The quick brown fox jumped over the lazy dog. Implement this by adding the .font-perpetua class on your element.




Colors


Primary Colors - Black/Gold Theme

Global Primary

$color-global-primary

#ce9e6b

Global Secondary

$color-global-link-hover

#4e4e4e

Global Body Copy

$color-global-body

#4e4e4e

Awning Color One

$color-global-awning-stripes-one

#000000

Awning Color Two

$color-global-awning-stripes-two

#4e4e4e


Primary Colors - Gray/Light Gray Theme

Global Primary

$color-global-primary

#00325a

Global Secondary

$color-global-link-hover

#e6e7e8

Global Body Copy

$color-global-body

#4e4e4e

Awning Color One

$color-global-awning-stripes-one

#e6e7e8

Awning Color Two

$color-global-awning-stripes-two

#c7c8ca


Primary Colors - Signature Blue Theme

Global Primary

$color-global-primary

#00325a

Global Secondary

$color-global-link-hover

#ce9e6b

Global Body Copy

$color-global-body

#4e4e4e

Awning Color One

$color-global-awning-stripes-one

#00325a

Awning Color Two

$color-global-awning-stripes-two

#125688


Primary Colors - Signature Pink Theme

Global Primary

$color-global-primary

#ee2b74

Global Secondary

$color-global-link-hover

#ce9e6b

Global Body Copy

$color-global-body

#4e4e4e

Awning Color One

$color-global-awning-stripes-one

#ee2b74

Awning Color Two

$color-global-awning-stripes-two

#dd75ae


Universal Colors

Warning

$color-global-alert-warning

#8a6d3b

Error

$color-global-alert-error

#a94442

Success

$color-global-alert-success

#00e600

Warning Background

$color-global-alert-warning

#fcf8e3

Error Background

$color-global-alert-error

#f2dede




Buttons


By adding the .button class to a link or a button, the button will be styled depending on the theme of the site.

To make the button either a small or a large button, add the .small-button or .large-button classes, respectively, in addition to the .button class.







Forms


Basic form inputs, with text input and textarea, as well as a disabled input area.

Below are a checkbox example, radio button example, and a dropdown selector example.



Grid

Garrett is built using a 12 column grid system. Below is an example of it in action.

On a small screen, one column is displayed because we give the elements the .small-12 class, which says each column will be 12/12 columns wide, and take up 100% of the row.

On a medium-sized screen, there will be 3 columns because we give the elements the .medium-4 class, which says each column will be 4/12 columns wide, and take up 33.3% of the row.

On a large screen, there will be six columns because we give the elements the .large-2 class, which says each column will be 2/12 columns wide, and take up 16.6% of the row.