Style Guide

Image, Color, and Font Specifics

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

  • Homepage Hero Video: 1920px × 1080px
  • Interior Page Hero Video: 1920px × 1080px
  • Hero with Image: 900px × 900px
  • Image with Text – Geometric Graphics Variation: 900px × 900px
  • Image with Text – Simple Rectilinear Variation: 900px × 900px
  • Call-To-Action Page Block Image: 1200px × 800px
  • Testimonial Headshot: Use the Photoshop template × Use the Photoshop template
  • Featured Content Image: 750px × 500px
  • Columns Block – Image Variation: 750px × 500px
  • Columns Block – Icon Variation: 75px × 75px
  • Blog Post Featured Image: 900px × 600px
  • Logo Block Image (.svg file format is ideal, otherwise transparent bg .png): 150px × 100px

Font Specifics

  • body, p, ol, ul – lato, sans-serif, 400 • 17px/1.6 • Color: #474747 • Letter-Spacing: .25px • Margin: 0 0 25px
  • p.intro – • 23px/1.5
  • Pre-Title – • 16px/1.5 • Color: #DE3F18 • Letter-Spacing: 1px • Margin: 0 0 15px
  • H1 – lato, sans-serif, 700 • 80px/1.1 • Color: #15585E • Margin: 0 0 20px
  • H2 – lato, sans-serif, 700 • 38px/1.1 • Color: #15585E • Margin: 0 0 20px
  • H3 – lato, sans-serif, 700 • 26px/1.3 • Color: #15585E • Margin: 0 0 10px
  • H4 – lato, sans-serif, 700 • 20px/1.4 • Color: #15585E • Margin: 0 0 10px
  • H5 – lato, sans-serif, 700, ALL CAPS • 16px/1.4 • Color: #15585E • Letter-Spacing: .5px • Margin: 0 0 10px
  • H6 – lato, sans-serif, 700 • 16px/1.4 • Color: #15585E • Letter-Spacing: .5px • Margin: 0 0 10px

Site Color Values

 

#15585e
 

#36939b
 

#67a783
 

#f0b11d
 

#de3f18
 

#fd6120
 

#474747
 

#868686