Style Guide

How To  |  Style Guide  |  Content Styles  |  Accessibility Tips  |  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

  • Image Block Photo: 1200 × 800px
  • Image Block Illustration, Chart, Lottie Animation: 1200 × 900px (kept from 2020 design)
  • Column Cards Inline or Flush Image: 1200 × 800px
  • Column Cards Icons: Currently not using, image size TBD if needed
  • Logos for Logo Block and Testimonials: 350 × 200px
  • Headshot Testimonial: 150 × 150px at least in size, always square
  • Headshot Orbiteer: 1200 × 1050px
  • Blurbs Illustration: 400 × 150px
  • Blog Thumbnails: 800 × 400px

Font Specifics

  • Headers – Proxima Nova Condensed • /
  • Body Copy – Proxima Nova • /
  • Headers & Body Copy – • / • Color: #1A1A1A
  • Headers & Body Copy over dark BKGDs – • / • Color: #FFF
  • H1: Mobile – , 800 • 40/44px • Letter-Spacing: -1px • Margin: 0 0 15px; Padding: 0;
  • H1: Tablet – • 56/60px
  • H1: Desktop – • 65/65px
  • H2: Mobile – , 800 • 35/40px • Letter-Spacing: -0.5px • Margin: 0 0 16px; Padding: 0 0 20px;
  • H2: Tablet – • 46/50px • Letter-Spacing: -1px • Margin: 0 0 24px; Padding: 0 0 24px;
  • H2: Desktop – • 56/60px
  • H3: Mobile – , 800 • 28/36 • Letter-Spacing: -0.5px • Margin: 0 0 15px; Padding: 0;
  • H3: Tablet & Desktop – • 38/46px
  • H4: Mobile – , 800 • 22/28px • Margin: 0 0 15px; Padding: 0;
  • H4: Tablet & Destkop – • 26/32px • Letter-Spacing: -0.5px
  • H5: Mobile – , 600 • 22/28px • Margin: 0 0 15px; Padding: 0;
  • H5: Tablet & Desktop – • 26/32px • Letter-Spacing: -0,25px
  • H6 – , 600 • 20/26px • Margin: 0 0 10px; Padding: 0;
  • Body Copy – , 300 • 18/28px • Margin: 0 0 20px; Padding: 0;
  • Intro: Mobile – • 22/32px
  • Intro: Tablet & Desktop – • 25/38px
  • UL & OL – • / • Margin: 0 0 13px; Padding: 10px 0 0;
  • LI’s – • 17/26px • Margin: 0 0 17px;
  • Pre-Title: Mobile – Proxima Nova Condensed, 600 • 16/22px • Margin: 0 0 10px; Padding: 0;
  • Pre-Title: Tablet & Desktop – • 22/26px
  • Text Links – , 700 • / • Color: #BF472D
  • Links over dark BKGDs – • / • Color: #D85B41
  • Bold and Strong – , 700 • /
  • Small Class – • 14/20px • Margin: 0 0 14px;

Site Color Values

#FFF White
#F2F2F3 Light Gray
#1A1A1A Charcoal
#BF472D Standard Red
#D85B41 Reversed over Charcoal Red