Style Guide

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: 1600px × 750px
  • 2 Column Page Block: 750px × 565px
  • 3 Column Page Block: 750px × 565px
  • Right / Left Page Blocks (Contained): 750px × 685px
  • Full Width Background Page Block: 1600px × 650px (min.)
  • Testimonial Page Block Image: 130px × 130px
  • Right / Left Full-Width Page Blocks: 750px × 750px
  • Interior Page Hero: 1600px × 240px
  • Case Study Thumbnails: 750px × 750px
  • Team Landing / Bio Images: 600px x 715px (client-chosen and it’s a good size!) (750px × 750px original recommended size, but not being used)
  • Blog Article Thumbnail: 750px × 685px
  • Case Study Sidebar Widget Image: 600px × any height

Font Specifics

  • H1 – Brandon Grotesque, 700, ALL CAPS • 48px/60px • Color: #333132 • Margin: 0 0 20px
  • H2 – Brandon Grotesque, 700, ALL CAPS • 38px/52px • Color: #333132 • Margin: 0 0 20px
  • H3 – Brandon Grotesque, 700, ALL CAPS • 32px/46px • Color: #333132 • Margin: 0 0 20px
  • H4 – Brandon Grotesque, 400, ALL CAPS • 24px/38px • Color: #000000 • Letter-Spacing: 3 • Margin: 0 0 20px
  • H5 – Brandon Grotesque, 700, ALL CAPS • 24px/36px • Color: #000000 • Margin: 0 0 20px
  • H6 – Brandon Grotesque, 500, ALL CAPS • 16px/24px • Color: #000000 • Letter-Spacing: 3 • Margin: 0 0 20px
  • Paragraph Text – Proxima Nova, 400 • 17px/38px • Color: #000000 • Margin: 0 0 25px
  • Paragraph Link – Proxima Nova, 700 • / • Color: #61BD5A
  • Open Content Title – Brandon Grotesque, 700, ALL CAPS • 24px/30px • Color: #333132 • Margin: 0 0 25px
  • Open Content Paragraph – Proxima Nova, 400 • 15px/28px • Color: #000000 • Margin: 0 0 20px
  • Sidebar Photo Caption – Proxima Nova, 400 • 17px/28px • Color: #000000
  • Sidebar Video Caption – Proxima Nova, 500 • 17px/26px • Color: #ffffff
  • Inline Testimonial Quote – Brandon Grotesque, 500, ALL CAPS • 24px/48px • Color: #ffffff
  • Inline Testimonial Link – Brandon Grotesque, 500, ALL CAPS • 18px/32px • Color: #61BD5A
  • Homepage Hero Text – Brandon Grotesque, 700, ALL CAPS • 48px/64px • Color: #ffffff
  • 2 Column Page Block Title – Brandon Grotesque, 700, ALL CAPS • 24px/36px • Color: #000000
  • 2 Column Page Block Paragraph – Proxima Nova, 400 • 15px/32px • Color: #000000
  • 3 Column Page Block Title – Brandon Grotesque, 700, ALL CAPS • 24px/36px • Color: #000000
  • 3 Column Page Block Paragraph – Proxima Nova, 400 • 15px/32px • Color: #000000
  • Right / Left Page Blocks Title – Brandon Grotesque, 700, ALL CAPS • 32px/46px • Color: #333132
  • Right / Left Page Blocks Paragraph – Proxima Nova, 400 • 17px/32px • Color: #000000
  • Full-Width Page Block Title – Brandon Grotesque, 700 • 40px/57px • Color: #ffffff
  • Full-Width Page Block Paragraph – Proxima Nova, 400 • 20px/40px • Color: #ffffff
  • Testimonial Page Block Pull Quote – Brandon Grotesque, 500, ALL CAPS • 40px/64px • Color: #ffffff
  • Testimonial Page Block Paragraph – Proxima Nova, 400 • 20px/36px • Color: #ffffff
  • Right / Left Full Width Page Block Title – Brandon Grotesque, 700, ALL CAPS • 38px/52px • Color: #333132

Site Color Values

#61BD5A
#478E41
#000A7C
#000000
#333132
#F7F7F7
#ffffff