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: 1470px × 580px
  • Interio Hero Image: 700px × 450px
  • Image/Text Photo: 600px × 525px
  • Midpage CTA Image: 470px × Any Height
  • Icon & Testimonial Image: 65px × 65px
  • Gallery Images (3): 640px × 700px
  • Gallery Image (1): 1920px × 800px
  • Blog Featured Image & Card Image: 470px × 205px
  • Logos: 162px × 108px
  • Team Profile Image: 345px × 520px
  • Location Image: 1100px × 460px

Font Specifics

  • Pre-Title – Novecento Sans Wide, 400, ALL CAPS • 14px/20px • Color: #383A39 • Letter-Spacing: 2px • Margin: 0 0 15px; Padding: 0;
  • H1 Mobile – Klinic Slab, 500, Italic • 35px/42px • Color: #383A39 • Margin: 0 0 15px; Padding: 0;
  • H1 Desktop & Tablet – • 60px/65px
  • H2 Mobile – Novecento Sans Wide, 300, ALL CAPS • 30px/36px • Color: #383A39 • Margin: 0 0 15px; Padding: 0;
  • H2 Desktop & Tablet – • 45px/55px
  • H2 XL Mobile – Novecento Sans Wide, 300, ALL CAPS • 35px/42px • Color: #FFFFFF • Margin: 0 0 15px; Padding: 0;
  • H2 XL Desktop – • 60px/65px
  • H3 Mobile – Acumin Pro, 400 • 26px/36px • Color: #383A39 • Margin: 0 0 15px; Padding: 0;
  • H3 Desktop & Tablet – • 28px/36px
  • H4 Mobile – Acumin Pro, 500 • 22px/32px • Color: #383A39 • Margin: 0 0 15px; Padding: 0;
  • H4 Desktop & Tablet – • 24px/32px
  • H5 Mobile – Acumin Pro, 500, ALL CAPS • 18px/30px • Color: #383A39 • Letter-Spacing: 2px • Margin: 0 0 15px; Padding: 0;
  • H5 Desktop & Tablet – • 20px/30px
  • H6 – Acumin Pro, 500 • 18px/30px • Color: #383A39 • Margin: 0 0 15px; Padding: 0;
  • Block Quote Mobile – Klinic Slab, 400, Italic • 24px/32px • Color: #383A39 • Margin: 0 0 15px; Padding: 0;
  • Block Quote Desktop & Tablet – • 26px/32px
  • Paragraph Mobile – Acumin Pro, 300 • 18px/30px • Color: #383A39 • Margin: 0 0 15px; Padding: 0;
  • Paragraph Desktop & Tablet – • 16px/30px
  • Lists: Mobile – Acumin Pro, 300 • 18px/30px • Color: #383A39 • Margin: 0 0 10px; Padding: 0 0 0 10px;
  • Lists: Desktop & Tablet – • 16px/30px
  • Intro Paragraph Mobile – Acumin Pro, 300, Italic • 22px/30px • Color: #383A39 • Margin: 0 0 15px; Padding: 0;
  • Intro Paragraph Desktop & Tablet – • 20px/30px
  • Stats Mobile – Acumin Pro, 100, ALL CAPS • 50px/50px • Color: #026241 • Margin: 0px; Padding: 0;
  • Stats Desktop & Tablet – , ALL CAPS • 100px/ • Color: #026241
  • Testimonial H2 Mobile – Klinic Slab, 400, Italic • 30px/36px • Color: #383A39 • Margin: 0 0 15px; Padding: 0;
  • Testimonial H2 Desktop & Tablet – , Italic • 45px/55px
  • Label – Acumin Pro, 700, ALL CAPS • 12px/12px • Color: #383A39 • Letter-Spacing: 1px

Site Color Values

 

#383A39

 

#1B3D2B

 

#026241

 

#07AB51

 

#BBD77D

 

#D2DCD4

 

#FAFBFB

 

#FFFFFF