Image, Color, & Font Specs

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

  • Hero Background Images: 1800px × 1200px
  • 2-Column Photo: 900px × 600px
  • 3-Col Photo Blurb Images: 900px × 600px
  • Blog Post Featured Image: 900px × 600px

Font Specifics

  • body, p, ol, ul (Desktop) – Lato, 400 • 17px/1.8 • Color: #666666 • Letter-Spacing: .25px • Margin: 0 0 25px
  • body, p, ol, ul (Tablet) – • 16px/
  • body, p, ol, ul (Mobile) – • 15px/1.65
  • p.intro (Desktop) – • 23px/1.6
  • p.intro (Tablet) – • 20px/
  • p.intro (Mobile) – • 17px/
  • Blockquote p (Desktop) – • 20px/1.6
  • Blockquote p (Tablet) – • 20px/
  • Blockquote p (Mobile) – • 17px/
  • H1 (Desktop) – Lato, 400, ALL CAPS • 75px/1.2 • Color: #272b33 • Margin: 0 0 15px
  • H1 (Tablet) – • 38px/
  • H1 (Mobile) – • 28px/
  • H2 (Desktop) – Lato, 400 • 35px/1.2 • Color: #272B33 • Margin: 0 0 25px
  • H2 (Tablet) – • 28px/
  • H2 (Mobile) – • 23px/
  • H3 (Desktop) – Lato, 400 • 26px/1.3 • Color: #272B33 • Margin: 0 0 15px
  • H3 (Tablet) – • 21px/
  • H3 (Mobile) – • 19px/
  • H4 (Desktop) – Lato, 400 • 20px/1.3 • Color: #272B33 • Margin: 0 0 15px
  • H4 (Tablet) – • 18px/
  • H4 (Mobile) – • 17px/
  • H5 (Desktop) – Lato, 400, ALL CAPS • 17px/1.4 • Color: #272B33 • Letter-Spacing: .5px • Margin: 0 0 10px
  • H5 (Tablet) – • 16px/
  • H5 (Mobile) – • 15px/
  • H6 (Desktop) – Lato, 400 • 17px/1.4 • Color: #272B33 • Letter-Spacing: .5px • Margin: 0 0 10px
  • H6 (Tablet) – • 16px/
  • H6 (Mobile) – • 15px/
  • Pre-Title (Desktop) – , ALL CAPS • 12px/1 • Color: #213459 • Letter-Spacing: 2px • Margin: 0 0 15px
  • Pre-Title (Tablet) – • 12px/
  • Pre-Title (Mobile) – • 10px/

Site Color Values

 

#272b33

 

#4da6ff

 

#333333

 

#f2f2f2

 

#213459

 

#3d60a6

 

#000000