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

  • Homepage Hero (Ken Burns Animation): 1920 × 825px
  • Interior Page Header + Footer CTA: 1920 × 650px
  • Bio Headshot: 200px × 200px
  • Image Block (Left or Right): 800px × 600px (or any height)
  • Circle-Centered Icons (FontAwesome Pro): 45px × 45px
  • Resources Featured Images: 500px × 450px

Font Specifics

  • Mobile H1 – ArticulatCF-Bold; • 30px/35px • Color: #515B69 • Letter-Spacing: .5px • Margin: bottom-padding 20px
  • Desktop H1 – • 50px/58px
  • Mobile H2 – ArticulatCF-Bold • 28px/35px • Color: #515B69 • Letter-Spacing: .5px • Margin: bottom-padding 20px
  • Desktop H2 – • 40px/50px
  • Mobile H3 – ArticulatCF-DemiBold • 24px/36px • Color: #515B69 • Letter-Spacing: .5px • Margin: bottom-padding 20px
  • Desktop H3 – • 27px/36px
  • Mobile H4 – ArticulatCF-DemiBold • 23px/32px • Color: #515B69 • Letter-Spacing: .5px • Margin: bottom-padding 20px
  • Mobile H5 – ArticulatCF-DemiBold, ALL CAPS • 19px/30px • Color: #515B69 • Letter-Spacing: 1px • Margin: bottom-padding 20px
  • Mobile H6 – ArticulatCF-Bold • 19px/27px • Color: #515B69 • Letter-Spacing: .5px • Margin: bottom-padding 20px
  • Mobile Pretitle – ArticulatCF-Light, ALL CAPS • 18px/25px • Color: #515B69 • Letter-Spacing: 8px • Margin: bottom-padding 20px
  • Desktop Pretitle – • 20px/30px • Letter-Spacing: 12px • Margin: bottom-padding 20px
  • Mobile Intro Style – ArticulatCF-Normal • 20px/32px • Color: #56565A • Letter-Spacing: .5px • Margin: bottom-padding 20px
  • Desktop Intro Style – • 22px/34px
  • Mobile Paragraph Text – ArticulatCF-Normal • 16px/27px • Color: #56565A • Letter-Spacing: .25 • Margin: bottom-padding 30px
  • Desktop Paragraph Text – • 17px/ • Letter-Spacing: .5px
  • Mobile Paragraph Links – ArticulatCF-Bold • / • Color: #189275
  • Desktop Paragraph Links – • 17px/ • Color: #189275 • Letter-Spacing: .5px
  • Mobile Pull Quote Style – ArticulatCF-LightOblique • 20px/30px • Color: #515B69 • Margin: bottom-padding 30px
  • Desktop Quote Style – • 24px/38px
  • Mobile Bulleted List – ArticulatCF-Normal • 16px/25px • Color: #56565A • Letter-Spacing: .25
  • Desktop Bulleted List – • 17px/27px • Letter-Spacing: .5px
  • White BG HR – • / • Color: #E9E9E9
  • Gray BG HR – • / • Color: #E0E0E0
  • Dark BG HR – • / • Color: #515B69
  • Dark BG H1-H6 – • / • Color: #FFFFFF
  • Dark BG Pretitle, Intro Style, Paragraph Style, Bulleted List – • / • Color: #E9E9E9
  • Dark BG Paragraph Links – • / • Color: #78C9B6
  • Dark BG Quote Style – • / • Color: #56565A • Margin: bg color: #FFF

Site Color Values

 

#323237, darkest gray, gold button text
 

#515B69, headlines
 

#56565A, paragraph text light bg
 

#189275, links on white bg
 

#189275 – links on beige bg
 

#78C9B6, links on dark blue bg
 

#F4D9A2, brighter gold, hover links in footer
 

#D4BC8C, primary button bg
 

#F4F3F3, alt warm gray bg

 

#E9E9E9, paragraph text on dark bg
 

#FFFFFF, white headlines on dark bg