Style Guide

Image, Color, and Font Specs. This is more of a resource for developers, but we like to make this info available to all admins.

How To | Style Guide | Content Styles | Accessibility Tips | Page Blocks | Tutorial Videos | Page & Post Type Templates

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 – Interior Page, Inline Image (3:2 aspect ratio): 1800px × 1200px
  • Hero – Interior Page, Large Background Image (3:2 aspect ratio): 1800px × 1200px
  • Image & Text Page Block Image: 1800px × 1800px (1:1 aspect ratio is ideal, but 3:2 works, too)
  • Call-To-Action Page Block Image (3:2 aspect ratio): 1800px × 1800px
  • Imagery Page Block – 1 Image (3:2 aspect ratio): 1800px × 1200px
  • Imagery Page Block – Triptych 3 Images – Vertical Images (2:3 aspect ratio): 1200px × 1800px
  • Imagery Page Block – Triptych 3 Images – Horizontal Image (3:2 aspect ratio): 1800px × 1200px
  • Columns Page Block – “Standard” Card Style Photo (3:2 aspect ratio): 1800px × 1200px
  • Columns Page Block – “Image Card” Card Style Photo (1:1 aspect ratio): 1800px × 1800px
  • Columns Page Block – “Standard” Card Style Icon (1:1 aspect ratio): 75px × 75px
  • Testimonial Page Block – Headshot Image (1:1 aspect ratio): 1800px × 1800px
  • “More” Overlay – Quick Links Images (1:1 aspect ratio): 1800px × 1800px
  • Visit / Apply / Give Navigation Images (1:1 aspect ratio): 1800px × 1800px
  • Directory (Faculty & Staff) Headshot (aka "featured image"): 1800px × 1800px
  • News (Blog) Featured Image: 1800px × 1200px

Font Specifics

  • H1 (Desktop) – proxima-nova, sans-serif;, 700 • 135px/1 • Color: #28282A • Margin: 0 0 20px
  • H2 (Desktop) – proxima-nova, sans-serif;, 700 • 52px/1.1 • Color: #28282A • Margin: 0 0 20px
  • H3 (Desktop) – proxima-nova, sans-serif;, 700 • 28px/1.22 • Color: #28282A • Margin: 0 0 10px
  • H4 (Desktop) – proxima-nova, sans-serif;, 700 • 23px/1.3 • Color: #28282A • Margin: 0 0 10px
  • H5 (Desktop) – proxima-nova, sans-serif;, 700, ALL CAPS • 19px/1.4 • Color: #28282A • Letter-Spacing: 2px • Margin: 0 0 10px
  • H6 (Desktop) – proxima-nova, sans-serif;, 700 • 19px/1.4 • Color: #28282A • Margin: 0 0 10px
  • body, p, ol, ul (Desktop) – proxima-nova, sans-serif;, 400 • 19px/1.77 • Color: #70707B • Letter-Spacing: .25px • Margin: 0 0 25px

More specific styling can be found here.

Site Color Values

 

#48206E
 

#28282A
 

#FDB913
 

#70707B
 

#BA4E37
 

#31194D