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

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

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