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 Collage PNG: 800px × 650px
• Large Header Image (Full Width BG Image) – JPG: 1200px × 600px
• Small Header Image (full width) – JPG: 1200px × 300px
• Footer CTA Collage – PNG transparent bg: 800px × 500px
• 2 Column Block Image – PNG or JPG: 800px × 600px (or any height)
• Featured Image for Blog, Portfolio, Case Study .JPG: 500px × 350px
• Icons on Page in Header or Mid-page PNG or SVG: 60px × 60px
• Small Blue Checkmarks – .PNG or .SVG: 20px × 20px
• Video Play Button .PNG: 85px × 85px
• 1 column (large centered image or gallery of images) JPG: 1200px × 600px (or taller)
• Big Blue Checkmarks PNG or SVG: 25px × 25px
• Testimonial Bio Photo JPG: 80px × 80px
• Logos with Star Rating JPG or PNG: 225px × 100px
• Circular Images with Border and Shadows PNG: 325px × 325px
• Full Screen Map (Paralax Image) JPG: 1200px × 600px (or taller)

Font Specifics

• H1 – Desktop – RobotoCondensed-Bold, 700 • 53px/60px • Color: #313D48 • Letter-Spacing: -.5
• H1 – Mobile – • 45px/50px • Letter-Spacing: -.75
• H2 – Desktop – RobotoCondensed-Regular, 400, ALL CAPS • 40px/55px • Color: #636C73 • Letter-Spacing: 5px
• H2 – Mobile – , ALL CAPS • 27px/35px • Letter-Spacing: 3px
• H3 – Desktop – RobotoCondensed-Bold, 700 • 50px/55px • Color: #313D48 • Letter-Spacing: -.5 • Margin: bottom-padding 20px
• H3 – Mobile – • 35px/40px • Margin: bottom-padding 10px
• H4 – Desktop – RobotoCondensed-Bold, 700 • 40px/45px • Color: #313D48 • Letter-Spacing: -.67
• H4 – Mobile – • 30px/35px
• H5 – Desktop and Mobile – RobotoCondensed-Bold, 700 • 30px/35px • Color: #313D48 • Letter-Spacing: -.5
• H6 – Desktop – RobotoCondensed-Bold, 700, ALL CAPS • 24px/28px • Color: #98002E • Letter-Spacing: 2.77
• H6 – Mobile – , ALL CAPS • 21px/26px • Letter-Spacing: 2
• Header Checkmark Style – Desktop and Mobile – RobotoCondensed-Bold, 600 • 18px/22px • Color: #313D48
• On-Page Checkmark Style – Desktop + Mobile – RobotoCondensed-Bold, 700 • 24px/28px • Color: #313D48
• paragraph – desktop – Roboto-Regular, 400 • 19px/32px • Color: #666 • Margin: bottom-padding 20px
• smaller paragraph style – blurbs and other smaller areas – Desktop – • 17px/28px
• paragraph – mobile – • 16px/26px • Margin: bottom-padding 15px
• smaller paragraph style – blurbs and other smaller areas – Mobile – • 15px/24px
• paragraph links – desktop – Roboto-Medium, 500 • / • Color: #0066B2
• paragraph links – hover – Desktop – • / • Color: #0066B2
• paragraph links – mobile – • 16px/26px
• Gray Pretitle with Graphic on Left – Desktop – RobotoCondensed-Bold, 700, ALL CAPS • 20px/28px • Color: #B6B9BB • Letter-Spacing: 3px
• Gray Pretitle with Graphic on Left – Mobile – , ALL CAPS • 18px/28px • Letter-Spacing: 2px
• Intro Style – Desktop – Roboto-Regular, 400 • 24px/38px • Color: #636C73 • Margin: bottom-padding 20px
• Intro Style – Mobile – • 19px/28px
• Testimonial on Gray BG – Desktop – RobotoCondensed-Light, 300 • 34px/36px • Color: #FFFFFF
• Testimonial on Gray BG – Mobile – • 24px/32px

Site Color Values