Skip to main content

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

  • Single Image Text: 720px × 435px
  • Home Hero Background: 1920px × 1200px
  • Interior Hero Background (+Stats): 1920px × 1200px
  • Interior Hero Background: 1920px × 800px
  • Icons: 65px × 65px
  • Center Interruptor CTA: 1220px × 500px
  • Left Interruptor CTA/Testimonial: 1500px × 700px
  • Double Text Image (Large Image): 445px × 650px
  • Double Text Image (Small Image): 250px × 500px
  • Blog Featured Image: 1220px × 638px
  • Column Card Background Image: 470px × Any Height
  • Column Card Focused Image: 430px × 225px
  • Full-Width Testimonial Background: 1920px × 800px
  • Bio Image: 100px × 100px

Font Specifics

  • H1 Mobile – Roboto Serif, 400 • 40px/45px • Color: #102058 • Margin: 0 0 20px; Padding: 0;
  • H1 Tablet – • 55px/60px
  • H2 Desktop – • 72px/75px
  • H2 Mobile – Roboto Serif, 400 • 30px/35px • Color: #102058 • Margin: 0 0 20px; Padding: 0;
  • H2 Tablet – • 40px/45px
  • H2 Desktop – • 40px/48px
  • H3 Mobile – Roboto, 700 • 26px/34px • Color: #000000 • Margin: 0 0 20px; Padding: 0;
  • H3 Desktop – • 28px/38px
  • H4 Mobile – Roboto, 700 • 22px/32px • Color: #000000 • Margin: 0 0 20px; Padding: 0;
  • H4 Desktop – • 24px/34px
  • Block Quote Mobile – Roboto Serif, 400 • 20px/30px • Color: #102058 • Margin: 0 0 20px; Padding: 0;
  • Block Quote Tablet – • 22px/32px
  • Block Quote Desktop – • 26px/36px
  • H5 – Roboto, 700, ALL CAPS • 19px/24px • Color: #000000 • Letter-Spacing: 2px • Margin: 0 0 20px; Padding: 0;
  • H6 – Roboto, 700 • 19px/24px • Color: #000000 • Margin: 0 0 20px; Padding: 0;
  • Pre-Title – Roboto, 500, ALL CAPS • 15px/20px • Color: hsla(0,0%,0%,.85) • Letter-Spacing: 1.5px • Margin: 0 0 10px; Padding: 0;
  • Paragraph Mobile – Roboto, 400 • 16px/28px • Color: hsla(0,0%,0%,.85) • Margin: 0 0 20px; Padding: 0;
  • Paragraph Desktop – • 18px/30px
  • Intro Paragraph Mobile – Roboto, 500 • 18px/30px • Color: hsla(0,0%,0%,.85) • Margin: 0 0 20px; Padding: 0;
  • Intro Paragraph Desktop – • 20px/30px
  • UL, OL Mobile – Roboto, 400 • 16px/28px • Color: hsla(0,0%,0%,.85) • Margin: 0 0 10px; Padding: 0 0 0 10px;
  • UL, OL Desktop – • 18px/30px
  • H3 Card Titles & Links – Roboto, 500 • 21px/30px • Color: #000000 • Margin: 0 0 10px; Padding: 0;

Site Color Values

 

#000000
 

#102058
 

#04451B
 

#045466
 

#42528C
 

#4D6122
 

#457461
 

#00DA81
 

#82F2C4
 

#E0EAD6
 

#D6EAE2
 

#D5F0F5
 

#FAF4E9
 

#fff