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. Netus pellentesque malesuada et habitant et senectus morbi tristique ac turpis fames egestas.

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

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

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).