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 BG Image: 1920px × 800px
  • Interior Hero BG Image: 1920px × 400px
  • Hero Image: 435px × 350px
  • Card Image: 475px × 350px
  • Icon: 65px × 65px
  • Logo: 162px × 108px
  • Gallery Images (3): 640px × 700px
  • Gallery Image (1): 1920px × 800px
  • Blog Card Image: 468px × 258px
  • Final CTA Image: 680px × 350px
  • CTA Footer Background: 1920px × 800px
  • CTA Interruptor Image: 1220px × 500px
  • Testimonial Image: 65px × 65px
  • Image/Text Photo: 700px × 475px
  • Team Profile Image: 320px × 330px

Font Specifics

  • All text – Fira Sans • /
  • H1 Mobile – , 300 • 45px/50px • Color: #000000 • Margin: 0 0 15px; Padding: 0;
  • H1 Tablet – • 55px/60px
  • H1 Desktop – • 88px/92px
  • Block Quote Mobile – , 400 • 20px/30px • Color: #000000
  • Block Quote Tablet – • 20px/30px
  • Block Quote Desktop – , 300 • 30px/40px
  • H2 Mobile – , 300 • 35px/40px • Color: #000000 • Margin: 0 0 15px; Padding: 0;
  • H2 Tablet – • 40px/45px
  • H2 Desktop – • 50px/55px
  • H3 Mobile – , 600 • 30px/40px • Color: #000000 • Margin: 0 0 15px; Padding: 0;
  • H3 Tablet & Desktop – • 35px/45px
  • H3 for Cards for Mobile – , 600 • 20px/27px • Color: #000000 • Margin: 0 0 10px; Padding: 0;
  • H3 for Cards Tablet & Desktop – • 25px/35px
  • H4 Mobile – , 700 • 28px/35px • Color: #7694CA • Margin: 0 0 15px; Padding: 0;
  • H4 Tablet & Desktop – • 28px/35px
  • H5 – , 700 • 22px/28px • Color: #7694CA • Letter-Spacing: 1px • Margin: 0 0 15px; Padding: 0;
  • H6 – , 700 • 22px/28px • Color: #7694CA • Margin: 0 0 15px; Padding: 0;
  • Paragraph Mobile – , 400 • 18px/30px • Color: #343433 • Margin: 0 0 15px; Padding: 0;
  • Paragraph Tablet & Desktop – • 16px/30px
  • Intro Paragraph Mobile – , 400 • 22px/32px
  • Intro Paragraph Desktop & Tablet – • 20px/30px
  • Lists: Mobile – • /18px • Color: 30px • Margin: 0 0 10px; Padding: 0 0 0 10px;
  • Lists: Desktop & Tablet – • 16px/30px
  • Pre-Title – , 700, ALL CAPS • 15px/20px • Color: #343433 • Letter-Spacing: 4px • Margin: 0 0 10px; Padding: 0;

Site Color Values

 

#343433
 

#000000
 

#7694CA
 

#9A1C1F
 

#B01C1F
 

#CBCCCB
 

#FFFFFF