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 Image: 1800 × 850
• 1/3 Column Circle Image (displays at 300×300): 500 × 500
  • Use this for team bios as well
• Three Column Card Image: 900 × 400 or any height
• Full Width Background Image (max-height: 400px; background-size:cover): 1800 × 500
• 50/50 Image: 900 × 600
• Testimonial Image (displays at 180×180): 500 × 500
• Logo/Affiliation Image (displays at 200×120): 500 × 300
• Video Thumbnail Image (16:9): 900 × 500
• Before & After Image (displays at 1370×650): 1800 × 850
• Interior Page Full-Width Header Image: 1800 × 300
• Product Image: 500 × 500

Font Specifics

• H1 – Abril Text, 400, Lowercase, Italic • 64/1.1em • Color: #FFFFFF • Letter-Spacing: 8px • Margin: 0 0 20px
• H2 – Abril Text, 400, Italic • 36px/1.3em • Color: #83766F • Letter-Spacing: 2.5px • Margin: 0 0 20px
• H3 – Abril Text, 400, Italic • 30/1.3em • Color: #83766F • Margin: 0 0 20px
• H4 – Roboto, 900, ALL CAPS • 20px/1.5em • Color: #5F89C5 • Letter-Spacing: 6px
• H5 – Abril Text, 400 • 24px/1.4em • Color: #83766F • Margin: 0 0 10px
• H6 – Abril Text, 400 • 20px/1.5em • Color: #83766F • Margin: 0 0 10px
• Paragraph Intro Text – Roboto Condensed, 400 • 22px/1.3em • Color: #6594D9 • Letter-Spacing: 0.5px • Margin: 0 0 20px
• Paragraph Text – Roboto, 400 • 18px/1.5em • Color: #737373 • Margin: 0 0 10px
• Paragraph Link Text – Roboto, 700 • / • Color: #F8A25E
• Emphasized Link (with FontAwesome caret) – Abril Text, 400 • 20px/1em • Color: #F8A25E • Letter-Spacing: 0.5px • Margin: 20px 0
• Caret – ‘f105’ – FontAwesome • /
• Button Text – Roboto Condensed, 700, ALL CAPS • 17px/1em • Color: #fff • Letter-Spacing: 0.5px

Site Color Values