Style Guide

A quick reference for the image sizes, fonts and colors used across the site.

Image Sizes

Image + Text Image (1:1) – JPG or Transparent PNG or SVG: 900 × 900
Full-Width Image + Text Block (1:1) – JPG: 900 × 900
Hero Image – JPG or Transparent PNG or SVG: 1920×650
Image + Text Block (4:3) – JPG, Transparent PNG or SVG: 900 × 675
Featured Post Image (4:3): 900 × 675
Testimonial Profile Image (1:1) – JPG: 500 × 500
Logo Block (5:3) – Transparent PNG or SVG: 250 × 150
Blurb Icon (1:1) – Transparent PNG or SVG: 200 × 200
CTA block (3:4) – JPG: 675 × 900

MEDIUM (< 991px) – • /
Paragraph Text – Titillium Web, 400 • 18px/32px • Color: #222 • Margin: 0 0 20px
Paragraph Intro Text – Titillium Web, 400 • 20px/30px • Color: #222
List Text – Titillium Web, 400 • 18px/32px • Color: #222 • Margin: 0 0 10px
Blockquote Text – Titillium Web, 400 • 20px/30px • Color: #000
Button Text – Titillium Web, 700 • 20px/20px
Link Text – , 600 • / • Color: #3A68FD
H1 – Frank Ruhl Libre, 400 • 36px/42px • Color: #000 • Letter-Spacing: -0.7px • Margin: 0 0 20px
H2 – Frank Ruhl Libre, 400 • 32px/42px • Color: #000 • Letter-Spacing: -0.7px • Margin: 0 0 20px
H2 Messaging Text – Not Serif, 400 • 36px/42px • Color: See Teal Gradient • Letter-Spacing: -0.7px • Margin: 0 0 20px
H3 – Titillium Web, 600 • 26px/34px • Color: #000 • Margin: 0 0 10px
H4 – Titillium Web, 600 • 24px/32px • Color: #000 • Margin: 0 0 10px
H5 – Titillium Web, 600, ALL CAPS • 18px/26px • Color: #000 • Letter-Spacing: 1px • Margin: 0 0 10px
H6 – Titillium Web, 600 • 22px/30px • Color: #000 • Margin: 0 0 10px
LARGE (> 992px) – • /
Paragraph Intro Text – • 24px/38px
Blockquote Text – • 24px/36px
H1 – • 54px/68px • Letter-Spacing: -1px
H2 – • 48px/64px • Letter-Spacing: -1px
H2 Messaging Text – • 64px/78px • Letter-Spacing: -2px
H3 – • 30px/36px