Style Guide

<!-

Images, Colors, & Font Specs

->

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

• Standard Image (6:4) *use for 50/50’s, sidebar images, featured news images: 670 × 450
• Full-Width Background Image (8:3): 1600px × 600px
• Square Image (1:1) *use for footer images, staff headshots, event featured images: 400 × 400
• Card Background Image: 670px × 450px or higher
• Large WYSIWYG Image (6:4): 1000 × 667 or Any Height
• Event Detail Banner Image: 1600 × 200 or Any Height

Font Specifics

• H1 Desktop – Kings Caslon Regular • 52px/54px • Color: #062D49 • Margin: 0 0 10px 0
• H1 Tablet – • 42/50
• H1 Mobile – • 36/50
• H2 Desktop – Kings Caslon Regular, ALL CAPS • 40px/48px • Color: #062D49 • Margin: 0 0 10px 0
• H2 Tablet – • 36/48
• H2 Mobile – • 30/48
• H3 Desktop – Kings Caslon Regular • 32px/39px • Color: #062D49 • Margin: 0 0 10px 0
• H3 Tablet – • 30/37
• H3 Mobile – • 26/32
• H4 / p.pre-title Desktop – Franklin Gothic URW, 400, ALL CAPS • 20px/20px • Color: #49667A • Letter-Spacing: 1px • Margin: 0 0 10px 0
• H4 / p.pretitle Tablet – • 18/18 • Letter-Spacing: 1
• H4 / p.pre-title Mobile – • 18/20 • Letter-Spacing: 1
• H5 Desktop – Kings Caslon, 400 • 24px/30px • Color: #062D49 • Margin: 0 0 10px 0
• H5 Tablet – No Change – • /
• H5 Mobile – • 22/27
• H6 Desktop – Franklin Gothic URW, 500 • 20px/20px • Color: #062D49 • Margin: 0 0 10px 0
• H6 Tablet – No Change – • /
• H6 Mobile – • 20/20
• P – Franklin Gothic URW, 400 • 18px/30px • Color: #27475C • Margin: 0 0 20px 0
• P Tablet – No Change – • /
• P Mobile – • 16/28
• li – Franklin Gothic URW, 400 • 18px/30px • Color: #27475C • Margin: 0 0 20px 0
• li Tablet -No Change – • /
• li Mobile – • 16/28
• p.intro – Franklin Gothic URW, 400 • 22px/32px • Color: #062D49 • Margin: 0 0 10px 0
• p.intro Tablet – • 20/30
• p.intro Mobile – • 18/26
• p.sidebar – • 26px/24px
• .blockquote-line – Franklin Gothic URW, 400 • 22px/32px • Color: #062D49 • Margin: 10px 0 10px 30px
• .blockquote-line Tablet – • 20/30
• .blockquote-line Mobile – • 18/26 • Margin: 10px 0 10px 20px
• .blockquote-italic – King’s Caslon, 400, Italic • 24px/34px • Color: #062D49 • Margin: 20px 0px 20px 34px
• .blockquote-italic Tablet – • 22/32
• .blockquote-italic Mobile – • 20/30 • Margin: 20px 0 20px 28px
• .cta-link – Franklin Gothic URW, 700 • 18px/30px • Color: #0091C6
• .cta-link Tablet – No Change – • /
• .cta-link Mobile – • 16/28
• p.caption – Franklin Gothic URW, 500 • 14px/28px • Color: #062D49 • Margin: 0 0 10px 0
• Link Text – Franklin Gothic URW, 700 • / • Color: #0091C6

Site Color Values

<!- Generated by OMS Style Guide Generator on 08/21/2020 ->