How To /

Style Guide

A quick reference for the image sizes, fonts and colors used across the site.

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 Image: 1920px × 850px
  • Card Image: 345px × 175px
  • Interruptor Gallery 1 & 2: 400px × 500px
  • Interruptor Gallery 3: 650px × 500px
  • Text/Image Back: 600px × 375px
  • Text/Image Front: 275px × 350px
  • Full Width CTA: 1920px × 800px
  • Interior Hero Image: 750px × 450px
  • Logo: 350px × 100px
  • Interruptor CTA Portrait Image: 430px × 530px
  • Full Width CTA Portrait Image: 470px × 550px
  • Interior Hero Background: 1920px × 650px
  • Icons: 65px × 65px
  • Blurb Image: 100px × Any Height

Font Specifics

  • All Levels – Proxima Nova • /
  • Mobile H1 – , 700 • 45px/50px • Color: #005565 • Margin: 0 0 20px; Padding: 0;
  • Mobile H2 – , 700 • 35px/40px • Color: #005565 • Margin: 0 0 20px; Padding: 0;
  • Mobile H3 – , 700 • 30px/40px • Color: #000000 • Margin: 0 0 20px; Padding: 0;
  • Mobile H4 – , 700 • 26px/30px • Color: #000000 • Margin: 0 0 20px; Padding: 0;
  • H5 – , 700, ALL CAPS • 18px/30px • Color: #000000 • Margin: 0 0 20px; Padding: 0;
  • H6 – , 700 • 18px/30px • Color: #000000 • Margin: 0 0 20px; Padding: 0;
  • Mobile Block Quote – , 700 • 22px/30px • Color: #005565 • Margin: 0 0 20px; Padding: 0;
  • Desktop Block Quote – , 700 • 30px/40px • Color: #005565 • Margin: 0 0 20px; Padding: 0;
  • Mobile Intro Paragraph – , 300 • 20px/30px • Color: #252525 • Margin: 0 0 20px; Padding: 0;
  • Mobile Paragraph – , 300 • 18px/30px • Color: #252525 • Margin: 0 0 20px; Padding: 0;
  • Pre-Title – , 700, ALL CAPS • 16px/26px • Color: #5a5a5a • Letter-Spacing: 2.5px • Margin: 0 0 20px; Padding: 0;
  • Desktop H1 – • 55px/60px
  • Desktop H2 – • 40px/45px
  • Desktop H3 – • 26px/32px
  • Desktop H4 – • 22px/32px
  • Desktop Intro Paragraph – • 22px/32px
  • Desktop Paragraph – • 16px/30px
  • Lists – • / • Margin: 0 0 10px; Padding: 0 0 0 10px;
  • Blurb Label – , 700, ALL CAPS • 15px/25px • Color: #000000 • Letter-Spacing: 2px • Margin: 0 0 20px; Padding: 0;
  • Stat Number – • /
  • Stat Qualifier – • /
  • Mobile Testimonial H2 – • /
  • Desktop Testimonial H2 – • /

Site Color Values

 

#FFFFFF
 

#000000
 

#252525
 

#5A5A5A
 

#54565B
 

#005565
 

#0E6225
 

#1F71B5
 

#3FA936
 

#007831
 

#005565
 

#BCCF05
 

#DADA00