Style Guide

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

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

  • Home Page Hero with Large Image (16:9): 1600 x 900 or 900 x 506
  • Hero Block with Large Image (4:3): 1000 × 750
  • Hero Block with Small Image (4:3): 1000 × 750
  • Image + Text Block (3:2): 900 × 600
  • Image + Text Block with Small (3:2): 600 × 400 (or Any Height)
  • Text + Image Stacked with Line (1:1): 600 x 600
  • Column or Card Block with Images (3:2): 900 × 600
  • Icons on any Icon Blocks (Blurb or Column Card) (SVG or Transparent PNG) (1:1): 70 × 70
  • Featured Post Image (for ALL Resources) (3:2): 900 × 600
  • Hero Image in Post Detail (3:2): 900 × 600
  • Logo Block Images (3:2): 600 × 400
  • CTA Blocks with Squre Image (1:1): 600 × 600
  • Leadership Bio Detail Image (1:1): 600 × 600
  • Custom Tab Image (SVG or Transparent PNG) (1:1): 900 × 900

Font Specifics

  • H1 – Open Sans, 600 • 36px/46px • Color: #252E2E • Letter-Spacing: -0.5px • Margin: 0 0 20px
  • H1 Medium – • 42px/50px • Letter-Spacing: -0.6px
  • H1 Large – • 54px/64px • Letter-Spacing: -0.8px
  • H1 XXL – • 64px/78px • Letter-Spacing: -1px
  • H2 – Open Sans, 600 • 30px/42px • Color: #2A3D3D • Letter-Spacing: -0.6px • Margin: 0 0 20px
  • H2 Medium – • 36px/48px • Letter-Spacing: -0.7px
  • H2 Large – • 42px/57px • Letter-Spacing: -0.8px
  • H2 XXL – • 54px/74px • Letter-Spacing: -1px
  • H3 – Open Sans, 600 • 24px/36px • Color: #2A3D3D • Letter-Spacing: -0.2px • Margin: 0 0 10px
  • H3 Medium – • 30px/42px
  • H4, Paragraph Pre-Title Text – Open Sans, 600, ALL CAPS • 16px/22px • Color: #2A3D3D • Letter-Spacing: 1px • Margin: 0 0 10px
  • H5 – Open Sans, 600 • 20px/30px • Color: #2A3D3D • Letter-Spacing: -0.15px • Margin: 0 0 10px
  • H5 Medium – • 26px/38px • Letter-Spacing: -0.2px
  • H5 XXL – • 30px/42px • Letter-Spacing: -0.2px
  • H6 – Open Sans, 600 • 18px/30px • Color: #2A3D3D • Margin: 0 0 10px
  • H6 Medium – • 22px/38px • Letter-Spacing: -0.17px
  • Paragraph Text, OL Text, UL Text – Open Sans, 400 • 18px/32px • Color: #5E6868 • Margin: 0 0 16px
  • Paragraph Text Large – • 20px/36px
  • Paragraph Tex XXL – • /36px
  • Paragraph Intro Text – Open Sans, 400 • 20px/32px • Color: #404040 • Margin: 0 0 10px
  • Paragraph Intro Text Large – • 24px/40px
  • Paragraph Blockquote Text – Open Sans, 300, Italic • 24px/36px • Color: #2A3D3D • Margin: 10px 0 30px
  • Paragraph Blockquote Text Large – • 32px/46px
  • Button Text – Open Sans, 600 • 20px/25px • Color: #fff • Margin: 10px 0 0

Site Color Values

 

#45A18A
 

#007E5F
 

#5E6868
 

#2A3D3D
 

#252E2E
 

rgba(216,216,216,0.20)
 

#F6F7F8
 

#FFF