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

  • Home Hero Image (3): 730 × 548px JPG
  • Interior Hero Image: 400 × 400px JPG
  • 2-Column Image/ Text Page Block Image (4:3): 730 × 548px JPG
  • Video Thumbnail: 863 × 485px
  • Testimonial Page Block Headshot: 80 × 80px JPG
  • 2-Column FAQ/ Text Page Block Image: 80 × 80px JPG
  • Image Cards (4:3): 300 × 225px , PNG for Device Images
  • Blurb Cards (4:3): 300 × 225px JPG
  • Tabs Block Image (1:1): 643 × 643px JPG; PNG for Device Mock Images
  • Logos: 225 × 150px SVG preferred
  • Icons – SVG preferred (PNG is ok too): 80 × 80px
  • Blog Featured Image & Cards (3:2): 735 × 490px JPG
  • Team Headshot: Team Landing & Bio Detail: 300 × 300px JPG
  • Mega Menu – Promotion Area / Image (3rd column): 730 x 548px JPG
  • Mega Menu Device Insert (2nd column): 400 x 400px PNG

Hero Style Rules

Home Hero

  • The 3-Image Ken Burns Hero Layout is reserved solely for the Homepage. Do not use this anywhere else on site.

Interior Hero

  • For the primary navigation items, please use the dark interior hero option. The hero can be with or without an image. If you choose to utilize the hero with no image, the content within the hero should be center-aligned, if not already set up that way.
  • For the secondary navigation items, please use the light interior hero options white or light gray. The hero can be with or without an image. If you choose to utilize the hero with no image, the content within the hero should be center-aligned, if not already set up that way
    • Exception: Please do not change the hero area for your resource library page.
  • In general, please do not upload device images on any hero areas. Instead, you may upload them in the megamenu, the image-text block, the column cards block, or the tabs block. Kindly review the Image Sizes prior to uploading.

Font Specifics

  • Headers (On Dark BG) – • / • Color: #FFFFFF
  • H1: Mobile & Tablet – Inter, 700 • 32px/40px • Color: #150B4E, Blue 1 • Letter-Spacing: 1px • Margin: 0 0 15px; Padding: 0;
  • H1: Desktop – • 50px/60px
  • H2: Mobile & Tablet – Inter, 700 • 28px/35px • Color: #150B4E, Blue 1 • Margin: 0 0 15px; Padding: 0;
  • H2: Desktop – • 44px/55pc
  • H3: Mobile & Tablet – Inter, 700 • 18px/22px • Color: #150B4E, Blue 1 • Margin: 0 0 15px; Padding: 0;
  • H3: Desktop – • 30px/36px
  • H4: Tablet & Desktop – Inter, Bold • 17px/20px • Color: #150B4E, Blue 1 • Margin: 0 0 15px; Padding: 0;
  • H4: Desktop – • 24px/28px
  • H5: General Headers – Inter, 700 • 16px/20px • Color: #150B4E, Blue 1 • Margin: 0 0 15px; Padding: 0;
  • H6: Button Style, Red & Dark Blue – Inter, Bold • 18.5px/24px • Color: #FFFFFF
  • H6: General Headers/ Button Style, Green – • / • Color: #150B4E, Blue 1
  • H6: Link Style – • / • Color: #150B4E, Blue 1
  • Par Intro Text: Desktop – • 23px/34px
  • Par Intro Text: Mobile & Tablet – Inter, 400 • 20px/30px • Color: #1F1F1F, Gray 1 • Margin: 0 0 15px; Padding: 0;
  • Body Copy: Desktop – • 20px/30px
  • Body Copy: Mobile & Tablet – Inter, 400 • 16px/24px • Color: #444444, Gray 2 • Margin: 0 0 15px; Padding: 0;
  • UL & OL – • / • Margin: 0; Padding: 10px 0 0 15 px
  • LI’s – • 16px/24px • Margin: 0 0 10px 0; Padding: 0;

Site Color Values

#EE3B59, Brand Red
#CD2B47, New Dark Red
#FFFFFF
#000000
#5BBA99, Green 1
#B6E5C2, Green 2
#150B4E, Blue 1
#4798F7, Blue 2
#1F1F1F, Gray 1
#444444, Gray 2
#6D6D6D, Gray 3
#999999, Gray 4
#E0E0E0, Gray 5
#F0F0F0, Gray 6
#F6F7F9, Gray 7 (BG)