Style Guide

Colors

black
#000

gray 900
#282829

gray 700
#5F6368

gray 500
#979797

gray 200
#F5F5FF

sand
#F7F6F2

lilac
#AF95A6

saffron
#E56A54

cinnamon
#BF9474

background lilac
rgba(175, 149, 166, 0.30)

background green
rgba(0, 76, 69, 0.10)

background blue
#E9EDF2

Headings

Header Level 1

Header Level 2

Header Level 3

Header Level 4

Header Level 5
Header Level 6

The following are p tags with a heading class like h1

Tag with class h1

Tag with class h2

Tag with class h3

Tag with class h4

Tag with class h5

Tag with class h6

Body Copy

Basic body copy sentence. Habitant morbi tristique senectus et netus et malesuada fames ac turpis

Fonts

Font Clarendon with class: clarendon. Et egestas netus ac pellentesque senectus morbi malesuada habitant tristique turpis fames et.

Font Neue Haas Grotesk Text with class: neue-haas-grotesk-text. Netus egestas malesuada et tristique habitant morbi ac pellentesque senectus fames et turpis.

Font Neue Haas Grotesk Display with class: neue-haas-grotesk-display. Et et malesuada senectus morbi turpis fames netus ac habitant egestas tristique pellentesque.

Buttons

Buttons use the btn class plus a contextual class

Primary Buttons btn-primary


Secondary Buttons btn-primary


Underlined link

The underline link class link-underline can be used to do a fancy underline like this (usually used with the clarendon font class).