Style Guide

How To | Style Guide | Content Styles | Page Blocks

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

Header Images (for circles & squares): 600 × 600px JPG
Card Icons: 75 × 75px SVG or PNG
Cards Block Background Photos: 1000x × 1000px JPGs on White (or smaller if desired, but uniform per block)
Cards Block Headshots: 500 × 500px JPG
Promo Block Images: 1000x × 600px JPG
Featured Testimonial Person: 120 × 120px JPG
Blog Thumbnail: 1200 × 450px JPG
Video Thumbnail: 900 × 505px JPG
Bio Headshot: 500 × 500px JPG
Footer CTA Background Images: 1920px × 600px JPGs
Blurb Icons: 120px × 120px
Logos: 150px × 150px
OLD DESIGN: News Thumbnail: 450 × 225px JPG
OLD DESIGN: Big Feature Block (solo, tile, & bkgd images): 800 × 800px JPG
OLD DESIGN: Text & Media Block Graphics Used for Circles: 800 × 800px JPG
OLD DESIGN: Text & Media Block Graphics: 800 × 800px PNG or JPG

Font Specifics

Font Uses: Inter Regular, Bold, Italic, Bold Italic – • /
Headers on White/Tan BKGDs – • / • Color: #403D3A
Headers on Orange/Charcoal BKGDs – • / • Color: #FFF
Text on White/Tan – • / • Color: rgba(64,61,58,0.7)
Text on Orange/Charcaol BKGDs – • / • Color: rgba(255,255,255,0.85)
Links – • / • Color: #FB4F14
H1: Mobile – , 700 • 36/42px • Letter-Spacing: -1.5px • Margin: 0 0 15px
H1: Tablet – • 60/66px • Letter-Spacing: -3px
H1: Desktop – • 70/70px
H2: Mobile – , 700 • 26/34px • Letter-Spacing: -1px • Margin: 0 0 10px; padding: 10px 0 0;
H2: Tablet & Desktop – • 40/50px • Letter-Spacing: -1.25px • Margin: 0 0 15px; padding: 20px 0 0;
H3: Mobile – , 700 • 22/28px • Letter-Spacing: -0.25 • Margin: 0 0 10px; padding: 10px 0 0;
H3: Tablet & Desktop – • 32/28px • Letter-Spacing: -1px • Margin: 10px 0 15px
H4: Mobile – , 700 • 18px/24px • Letter-Spacing: -0.25px • Margin: 0 0 10px; padding: 10px 0 0;
H4: Tablet & Desktop – • 24/32px • Letter-Spacing: -0.5px
H5 – , 700, ALL CAPS • 17/20px • Letter-Spacing: -0.25px • Margin: 0 0 10px;
H6 – , 700 • 18/24px • Letter-Spacing: -0.25px • Margin: 0 0 10px
Paragraph Text: Mobile – , 400 • 14/20px • Letter-Spacing: -0.25px • Margin: 0 0 20px
Paragraph Text: Tablet & Desktop – • 18/28px • Letter-Spacing: -0.5px
Intro Class: Mobile – • 18/26px
Intro Class: Tablet & Desktop – • 24px/34px
UL & OL – • / • Margin: 0; Padding: 5px 0 10px;
LI’s: Mobile – • 14/22px • Letter-Spacing: -0.25px • Margin: 0 0 15px
LI’s: Tablet & Desktop – • 17/25px • Letter-Spacing: -0.5px
Pre-Title P Class: Mobile – , 700 • 15/18px • Color: rgba(64,61,58,0.7) dark, rgba(255, 255, 255, 0.85) light • Letter-Spacing: -0.25 • Margin: 0 0 10px
Pre-Title P Class: Tablet & Desktop – • 18px/24px
Breadcrumbs: Mobile – • 12/15px • Letter-Spacing: -0.25 • Margin: 0 0 8px
Breadcrumbs: Tablet & Desktop – • 15/20px • Margin: 0 0 10px

Site Color Values

	#FFF
	#F6F5F3
	#FB4F14
	#000
	#675c53
	#72C7E7