Images, Colors, & Font Specs

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 Slideshow/Hero: 1400px (min.) × 635px
  • Interior Hero: 1400px (min.) × 370px
  • Sidebar Image: 785px (rec.) × Any
  • Left/Right Page Block Images: 785px (rec.) × 523px (rec.)
  • Blog Images: 855px (rec.) × 675px (rec.)
  • 3 or 4 Across Page Block Images: 785px (rec.) × 620px (rec.)
  • Product Images: 615px × 615px

Font Specifics

  • H1 – Brandon Grotesque, 400, ALL CAPS • 42px/50px • Color: #000000 • Margin: 0 0 12px
  • H2 – Brandon Grotesque, 400, ALL CAPS • 32px/40px • Color: #000000 • Margin: 10px 0
  • H3 – Brandon Grotesque, 400, ALL CAPS • 24px/30px • Color: #000000 • Margin: 5px 0 10px
  • H4 – Proxima Nova, 400, ALL CAPS • 16px/22px • Color: #939597 • Margin: 0 0 15px
  • H5 – Brandon Grotesque, 500, ALL CAPS • 18px/24px • Color: #000000 • Margin: 15px 0 12px
  • H6 – Brandon Grotesque, 500, ALL CAPS • 16px/22px • Color: #000000 • Margin: 5px 0 15px
  • Paragraph Text – Proxima Nova, 400 • 16px/29px • Color: #000000 • Margin: 0 0 20px
  • Paragraph Link – • / • Color: #699aa1
  • Open Content Title – Brandon Grotesque, 500, ALL CAPS • 16px/22px • Color: #ffffff • Margin: 0 0 25px
  • Open Content Paragraph – Proxima Nova • 14px/26px • Color: #ffffff • Margin: 0 0 10px
  • Photo / Video Captions – Brandon Grotesque, 400 • 15px/20px • Color: #000000
  • Page Block Header – Brandon Grotesque, 400, ALL CAPS • 32px/40px • Color: #ffffff
  • Page Block Paragraph – Proxima Nova, 400 • 16px/29px • Color: #ffffff
  • Block Quote – Proxima Nova, 300, Italic • 18px/36px • Color: #000000 • Margin: 0 0 20px
  • Block Quote Attribution – Brandon Grotesque, 500 • 16px/24px • Color: #000000

Site Color Values

Background text values (CSS Class in Divi and case sensitive) – blue, gray, dkGray and center to do the vertically center-ness.

#699aa1
#93b6bb
#939597
#f6f6f6
#000000
#ffffff