How To /

Style Guide

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

Image Sizes

  • 1-Column Image : 1000px × Any Height
  • 2-Col Image Text Square (5050 solid): 900px × 900px
  • 2-Col Image Text Rectangular (5050 solid): 900px × 600px
  • 2-Col Image Text transparent PNG: 900px × Any Height
  • Background image CTA and testimonial: 1800 x 900 px
  • Blog Author (for custom author): 100x100px 
  • Blog Image : 900px × 450px
  • Blog inline: 900×450
  • Contained CTA BG (transition): 1000px × 650px
  • Event Image : 900px × 450px
  • Hero (large): 1800px × 900px
  • Hero (small): 1800px x 900px (image will crop out some of top and bottom, but this size is always recommended for mobile considerations)
  • Hike thumb: 900px x 600px
  • Icons (column): 200px × 200px
  • Icons (blurbs): 75px × 75px
  • Logo (transparent PNG): 250px × 150px
  • Multi-Column Image Square/Circle: 900px × 900px
  • Multi-Column Image Rectangular: 900px × 600px
  • Press release thumb: 900px x 600px
  • Pages featured image: 900px x 600px
  • Resource thumb: 900px x 450px
  • Team Member Teaser: 900px × 900px
  • Team Member banner: 1500x400px

Font Specifics

  • H1 – Calluna, 400 • 60px/65px • Color: #251F21
  • H2 – Calluna, 400 • 45px/50px • Color: #251F21
  • H3 – Calluna, 400 • 26px/32px • Color: #251F21
  • H4 – Calluna, 400 • 20px/30px • Color: #251F21
  • H5 – Myriad Pro, 700, ALL CAPS • 20px/30px • Color: #251F21
  • H6 – Myriad Pro, 700, ALL CAPS • 16px/28px • Color: #251F21
  • Pre-title – Myriad Pro, 700, ALL CAPS • 16px/1 • Color: #B03823
  • Intro Paragraph – Myriad Pro, 400 • 24px/1.5 • Color: rgba(37,31,33,.85)
  • Paragraph – Myriad Pro, 400 • 16px/28px • Color: rgba(37,31,33,.85)
  • Caption Text – Myriad Pro, 400 • 14px/1 • Color: rgba(37,31,33,.85)
  • H1-H6 + Paragraph Light/Reverse – • / • Color: #FFFFFF

Site Color Values

 

#B03823

 

#561B11

 

#F7941E

 

#FFFFFF

 

#F6F5F5

 

#251F21

 

rgba(37,31,33,.85)

 

rgba(12,6,12,.5)