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

• Home Hero BG: 1600px × 800px
• Hero BG: 1600px × 600px
• 5050 Image (contained): 900px × 760px
• 5050 Image (transparent): 900px × Any Height
• Video Thumbnail: 1245 × 700
• Off-canvas 5050 Transparent Image: 1200px × 600px
• Full-Width CTA BG: 1400px × 600px
• Transition CTA BG: 1200px × 600px
• Icons: 120px × 120px
• 3-Across Thumbnails: 600px × 300px
• Testimonial Headshots: 200px × 200px
• T-Code Pressure Gauge: 200px × 124px

Font Specifics

• H1 – Akzidenz-Grotesk, 700 • 46px/50px • Color: #181E23
• H2 / Large Title – Akzidenz-Grotesk, 700 • 46px/50px • Color: #181E23
• H3 / Medium Title – Akzidenz-Grotesk, 700 • 36px/42px • Color: #181E23
• H4 – Small Title – Akzidenz-Grotesk, 700 • 28px/34px • Color: #181E23
• H5 – Akzidenz-Grotesk, 700 • 24px/32px • Color: #181E23
• H6 – Akzidenz-Grotesk, 700 • 14px/20px • Color: #181E23
• Intro Paragragh – Akzidenz-Grotesk, 400 • 22px/28px • Color: #181E23
• Paragrah – Akzidenz-Grotesk, 400 • 18px/28px • Color: #54595E
• Reversed Heading / Titles – • / • Color: #FFFFFF
• – – – – – – Responsive Size / Line-height – – – – – – – H1 – Mobile • 36px/40px
• H1 – Mobile – • 36px/40px
• H2 / Large Title – Mobile – • 32px/36px
• H3 / Medium Title – Mobile – • 28px/32px
• H4 / Small Title – Mobile – • 24px/28px
• H5 – Mobile – • 20px/24px

Site Color Values