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. Tristique morbi et ac malesuada et pellentesque egestas netus habitant fames senectus turpis.
Font Neue Haas Grotesk Text with class: neue-haas-grotesk-text. Pellentesque tristique malesuada turpis et senectus et ac morbi habitant fames netus egestas.
Font Neue Haas Grotesk Display with class: neue-haas-grotesk-display. Egestas et ac et pellentesque habitant malesuada morbi netus senectus fames turpis tristique.
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).
