Style Guide

accent-1: Accent_Left_BrownGrayTeal.svg
accent-1d: Accent_Left_BrownGrayTeal_Dark.svg
accent-2: Accent_Left_GrayRedTan.svg
accent-2d: Accent_Left_GrayRedTan_Dark.svg
accent-3: Accent_Left_TealGrayRed.svg
accent-3d: Accent_Left_TealGrayRed_Dark.svg
accent-4: Accent_Left_TanBlueGray.svg
accent-4d: Accent_Left_TanBlueGray_Dark.svg

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

Hero Image (3:2): 1200 × 800
Image + Text Image (1:1): 900 × 900
Columns Image (3:2): 900×600
Icon – Transparent White PNG or SVG (1:1): 100 × 100
Logo – Transparent PNG or SVG: 250×150
Testimonial Profile Image – Headshot or Logo (1:1): 300 × 300
Bio Detail Profile Image -Headshot (3:2): 300 × 200
Featured Post Image (3:2): 900 × 600
CTA Background Image – Black and White (2:1): 1600 × 800
Optional CTA Image – Transparent PNG (2:3): 400 × 600

“d” indicates that the logomark is black and good for images with light backgrounds

H1 – Work Sans, 600 • 60/65 • Margin: 20px
H2 – Work Sans, 600 • 45px/50px • Color: #000 • Margin: 0 0 15px
H3 – Work Sans, 600 • 24px/30px • Color: #000 • Margin: 0 0 10px
H4 – Work Sans, 600, ALL CAPS • 18px/22px • Color: #000 • Letter-Spacing: 1 • Margin: 0 0 15px
H5 – Work Sans, 600 • 18px/26px • Color: #000 • Margin: 0 0 15px
H6 – Work Sans, 600 • 16px/22px • Color: #000 • Margin: 0 0 15px
Paragraph Text – Work Sans, 400 • 18px/30px • Color: #000 • Margin: 0 0 15px
Paragraph Intro Text – Work Sans, 400 • 22px/32px • Margin: 0 0 15px
Span Pre-Title Text – Work Sans, ALL CAPS • 13px/15px • Color: #000 • Letter-Spacing: 1px • Margin: 0 0 25px
Paragraph Small Text – Work Sans, 400 • 14px/24px
Link Text – , 600 • / • Color: #0D4DA8