How To

Style Guide

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

https://fonts.adobe.com/fonts/open-sans

Image Sizes

  • Hero (Ken Burns Images) (5:4 ratio): 1000 × 800px
  • 2-Column Image/ Text Page Block Image (3:2 ratio): 1200 × 800px
  • 2-Column Image/ Text Page Block Image; “Interrupter” variation: 900 × 600px
  • Video Thumbnail Image (16:9 ratio): 960 × 540px
  • Testimonial Headshot: 75 × 75px
  • Logos (25:17 ratio): 250 × 170px
  • Blurb Page Block Image (these are icons, .svg is the preffered file format): 75 × 75px
  • Column/Card Images (7:5 ratio): 700 x 500px
  • Blog & News Featured Image (7:5 ratio): 910 × 650px
  • Team Headshot Featured Image (5:6 ratio): 700 × 840px
  • History timeline plugin images: 500px X Any Height

Font Specifics

  • H1: Mobile & Tablet – Open Sans, 600 • 40px/46px • Color: #FFFFFF • Margin: 0 0 15px; Padding: 0;
  • H2: Mobile & Tablet – Open Sans, 600 • 30px/36px • Color: #333333 • Margin: 0 0 15px; Padding: 0;
  • H2 (On Dark BG): Mobile & Tablet – • / • Color: #FFFFFF
  • H3: General Headers – Open Sans, 600 • 24px/28px • Color: #333333 • Margin: 0 0 15px; Padding: 0;
  • H3: Blue text for Card Titles & Footer Header – • / • Color: #003082
  • H3: Teal Titles for Card on Hover – • / • Color: #2C7F87
  • H4: Pre-Title – Open Sans, 600, ALL CAPS • 15px/20px • Color: #406E8E • Letter-Spacing: 3px • Margin: 0 0 15px; Padding: 0;
  • H6: Button Style/ Footer Link Style – Open Sans, 600, ALL CAPS • 16px/20px • Color: #333333
  • H6: Link Style CTA – • / • Color: #003082
  • Par Intro Text: Mobile & Tablet – Open Sans, 400 • 18px/30px • Color: #555555 • Margin: 0 0 20px; Padding: 0;
  • Par Intro Text (On Dark BG): Mobile & Tablet – • / • Color: #FFFFFF
  • Body Copy – Open Sans, 400 • 16px/24px • Color: #555555 • Margin: 0 0 20px; Padding: 0;
  • Body Copy (On Dark BG) : Mobile & Tablet – • / • Color: #FFFFFF
  • UL & OL – • / • Margin: 0; Padding: 10px 0 0 20 px
  • LI’s – • 16px/24px • Margin: 0 0 10px 0; Padding: 0;
  • Quote Styles – Open Sans, 600 • 30px/40px • Color: #041D4A
  • Quote Styles (On Dark BG) – • / • Color: #FFFFFF
  • H1: Desktop – • 50px/60px
  • H2: Desktop – • 34px/44px
  • Par Intro Text: Desktop – • 22px/35px

Site Color Values

#003082
#031B47
#325A76
#FFB806
#2C7F87
#FFFFFF
#000000