How To /

Style Guide

Image, Color, and Font Specs. This is more of a resource for developers, but we like to make this info available to all admins.

Please reference the list below whenever you’re creating new images for your site. You should find a size for all possible images you’ll need/use.

Image Sizes

  • Full Screen Header Background Image: 1600 × 650
  • Full Width Image (header): 1600 × 300 (height can vary)
  • 1/2, 1/3, or 1/4 Column Images: 600 × Any Height
  • Video Thumbnail: 600 × 400
  • Gallery Images: 600 × Any Height (but always consistent per gallery)

Font Specifics

  • H1 – Roboto, 700 • 30/36px • Color: Charcoal • Letter-Spacing: .25px • Margin: 0 0 20px
  • H1 Desktop – 70/85px
  • H2 – Roboto, 700 • 25/32px • Color: Charcoal • Letter-Spacing: .25px • Margin: 10px 0 20px
  • H2 Desktop – 30/39px
  • H3 – Roboto, 700 • 20/26px • Color: Charcoal • Letter-Spacing: .25px • Margin: 0 0 10px
  • H3 Desktop – 22/28px
  • H4 – Roboto, 700 • 18/25px • Color: Charcoal • Letter-Spacing: .25px • Margin: 0 0 10px
  • H4 Desktop – 20/28px
  • H5 – Roboto, 700, ALL CAPS • 16/24px • Color: Charcoal • Letter-Spacing: 1px • Margin: 0 0 10px
  • H5 Desktop – 18/28px
  • H6 – Roboto, 700 • 16/24px • Color: Charcoal • Letter-Spacing: 1px • Margin: 0 0 10px
  • H6 Desktop – 18/28px
  • Paragraph Text – Roboto, 400 • 15/26px • Color: Gray • Letter-Spacing: .25px • Margin: 0 0 25px
  • Paragraph Text Desktop – 21/30px
  • Intro Text & Blockquote – 19/26px
  • Intro Text & Blockquote Desktop – 21/30px
  • Pre-Title – Roboto, 400 • 13/16px • Color: Charcoal • Letter-Spacing: 1px • Margin: 0 0 20px
  • Pre-Title Desktop – 14/16px

Site Color Values

Light Green
Green
Black
Charcoal
Gray
Light Gray
White