Style Guide

Colors

The color scheme aims to be simple without too many variations.

 Preview Hex Variable

 

 

#3D3D3D
$color-style-guide-dark-gray

 

 

#8b8b8b $color-style-guide-gray

 

 

#eceeed $color-style-guide-light-gray

 

 

#FFFFFF $color-style-guide-white

 

 

#f3f0eb $color-style-guide-beige

 

 

#7e8c88 $color-style-guide-gunsmoke

 

 

#758386 $color-style-guide-slate

 

 

#6394be $color-style-guide-blue

 

 

#37464f $color-style-guide-dark-blue

Typography

We use Libre Baskerville as a primary typeface and GothamBook as the secondary typeface. Listed below are all default styles for headings.

Preview Font Size / Line Height
 

Heading 1

42px / 48px
 

Heading 2

28px / 34px
 

Heading 3

12px / 24px
 

Heading 4

22px / 26px
 
Heading 5
22px / 32px
 
Heading 6
16px / 26px

 

Paragraph

 Preview Font Size / Line Height

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

14px / 25px

 

Text Links

Primary Text Link 

Secondary Text Link 

 

Buttons

btn new

btn with icon before

btn with icon after

btn new gunsmoke

btn new blue