Style Guide

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 Large (SVG): 750 × 750
• Hero Image Small (SVG): 500 × 500
• Icon (SVG or Transparent PNG): 80 × 80
• Transition CTA Image (3:2): 600 × 400
• Image + Text Image (1:1): 650 × 650
• Video Thumbnail Image (16:9): 960 × 540
• Footer CTA Image (Behaves like a Background Image): 500 × 500
• Testimonial Background Image: 1600 × 600
• Logo Image (3:2): 300 × 200
• Profile Image (for testimonials and bios, 1:1): 300 × 300
• Post Featured Image (for Resources and Blog Posts): 1010 × 570

Font Specifics

• SM/XS Screens (<767px) – • /
• H1 – Sofia Pro, 900 • 36px/43px • Color: #222 • Letter-Spacing: -0.6px • Margin: 0 0 20px
• H2 – Sofia Pro, 900 • 32px/40px • Color: #222 • Letter-Spacing: -0.5px • Margin: 0 0 20px
• H2.Large – Sofia Pro, 900 • 36px/43px • Color: #222 • Letter-Spacing: -0.4px • Margin: 0 0 20px
• Stats – Sofia Pro, 900 • 48px/48px • Color: #222 • Letter-Spacing: -0.8px
• H3 – Sofia Pro, 900 • 30px/32px • Color: #222 • Letter-Spacing: -0.3px • Margin: 0 0 10px
• H3.CardStyle – Sofia Pro, 700 • 24px/32px • Color: #222 • Letter-Spacing: -0.3px • Margin: 0 0 10px
• H4 / p.pre-title text – Sofia Pro, 500, ALL CAPS • 16px/22px • Color: #222 • Letter-Spacing: 4px • Margin: 0 0 15px
• H5 – Sofia Pro, 700 • 24px/32px • Color: #222 • Letter-Spacing: -0.3px • Margin: 0 0 10px
• H6 – Sofia Pro, 600 • 22px/30px • Color: #222 • Margin: 0 0 10px
• Paragraph Text – Sofia Pro, 300 • 18px/30px • Color: #222 • Margin: 0 0 20px
• Paragraph p.CardStyle Text – Sofia Pro, 300 • 18px/30px • Color: #222 • Margin: 0 0 10px
• Paragraph Intro Text – Sofia Pro, 500 • 22px/32px • Color: #222 • Letter-Spacing: -0.5px • Margin: 0 0 10px
• Paragraph Blockquote Text – Sofia Pro, 500, Italic • 22px/32px • Color: #222 • Letter-Spacing: -0.5px • Margin: Padding: 30px
• Link Text – , 700 • / • Color: #975CA5
• Button Text – Sofia Pro, 700 • 20px/20px • Letter-Spacing: -0.5px
• CTA Emphasized Link – , 700 • 20px/28px
• LG/MED Screens (768px – 1199px) – • /
• H1 – • 42px/54px • Letter-Spacing: -0.5px
• H2 – • 36px/48px • Letter-Spacing: -0.4px
• H2.Large – • 36px/48px • Letter-Spacing: -0.4px
• XL Screens (> 1200px) – • /
• H1 – • 54px/64px • Letter-Spacing: -1px
• H2 – • 42px/54px
• H2.Large – • 72px/80px • Letter-Spacing: -1.25px
• Stats – • 72px/80px • Letter-Spacing: -1.25px
• H3.CardStyle – • 26px/
• H4 / p.pre-title Text – • 18px/25px
• H5 – • 26px/
• Paragraph Text – • 20px/32px
• Paragraph Intro Text – • 24px/36px
• Paragraph Blockquote Text – • 24px/36px

Site Color Values