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

• Customer Logos: 300px × 175px
• Product Category Images (PNGS): 300px × 200px
• 2-Tone Icons: 100px × 100px
• Country Icons (Locations Page): 40px × 40px
• Product Images (PNG for product shots, JPG for Lifestyle shots): 700px × 700px
• 50/50 Page Block Image: 800px × any height
• 50/50 Page Block Video (Cover Image): 800px x 450px (16:9)
• Column/Cards Page Block Image: 500 x 300
• Case Study Collage Images (use PSD template): 800px × 700px
• Homepage Hero Image: 1000px × 700px
• Interior Page Header (Rectangle with red overlap): 1000px × 600px
• Header Images for Learning Center Style Headers (Panoramic): 1600px × 350px
• Footer Hero: 1600px × 500px
• Team Bio Photos (circle done with CSS): 300px × 300px
• Post Types Main Images (blog, news, events, training, etc): 900px × 500px

Font Specifics

• H1 – Desktop – Proxima Nova , 500 • 50px/55px • Color: #000 • Letter-Spacing: -1 • Margin: 25px bottom padding
• H1-H5 on black or red bg – • / • Color: #FFF
• H1 – mobile – • 35px/40px • Letter-Spacing: -.75
• Pretitle – Desktop – Proxima Nova, 500, ALL CAPS • 16px/20px • Color: #000 (75% opacity) • Letter-Spacing: +5 • Margin: 28px bottom padding
• pretitle on black – • / • Color: #FFF (75% opacity)
• pretitle on red – • / • Color: #FFF (100% opacity)
• pretitle – mobile – • 14px/18px • Letter-Spacing: -4px
• Intro Style – Desktop – Proxima Nova, 400 • 26px/37px • Color: #000 • Margin: 35px bottom padding
• Intro Style on black or red – • / • Color: #FFF
• H2 – Desktop – Proxima Nova , 500 • 45px/50px • Color: #000 • Margin: 20px bottom padding
• H2 – mobile – • 32px/40px
• H3 – Desktop – Proxima Nova , 500 • 42px/48px • Color: #000 • Margin: 15px bottom padding
• H3 – mobile – • 27px/35px
• H4 – Desktop – Proxima Nova , 400 • 32px/38px • Color: #000 • Margin: 15px bottom padding
• H5 – Desktop – Proxima Nova, 400 • 30px/36px • Color: #000 • Margin: 20px bottom padding
• H6 – Desktop – Proxima Nova , 600 • 23px/30px • Color: #000 • Margin: 20px bottom padding
• H6 – mobile – • 20px/28px
• paragraph style – desktop – Proxima Nova , 400 • 20px/30px • Color: #000 (75% opacity) • Margin: 20px bottom padding
• paragraph style on black – • / • Color: #C8C8C8
• paragraph style on red – • / • Color: #FFF
• paragraph links – desktop – Proxima Nova , 400 • / • Color: #D7172F
• paragraph links on black or red – • / • Color: #FFF
• Testimonial style – Proxima Nova , 300 • 27px/42px • Color: #000 (75% opacity)
• testimonial – mobile – • 22px/33px

Site Color Values