Style Guide

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 Background Images: 1800px × 1200px
• Icons (for multi-column blurbs, and other page blocks that use icons; export as .svg file format; physical size won’t matter because .svg will scale without sacrificing sharpness): 50px × 50px
• 2-Column Photo: 900px × 600px
• 3-Column Clickable Image Cards: 900px × 600px
• 4-Column Clickable Image Cards: 900px × 600px
• Testimonial Background Image: 1800px × 1200px
• CTA Page Block Background Image: 1800px × 1200px
• CTA Page Block Headshot: 200px × 200px
• Faux 50/50 Background Image (this page block has the large image that spans nearly the fullwidth of the browser, and an enclosed text box is positioned on top of the image): 1800px × 1200px
• Loan Officers Featured Image Headshot (this image also gets pulled into the Landing Page): 600px × 600px
• Loan Officers Operations Team Headshot: 200px × 200px
• Testimonial Page Block Headshots: 75px × 75px
• Market President Photo (for example, seen on Community Page; can we make this a background image, so that we can alter the aspect ration of this image to be horizontal on mobile?): 900px × 600px
• Photo Grid, Smaller Horizontal Image (for example, seen on Loan Officers Detail): 900px × 600px
• Photo Grid, Larger Square Image (for example, seen on Loan Officers Detail): 900px × 900px
• Photo Grid, Larger Vertical Image (for example, seen on Loan Officers Detail): 900px × 1521px
• Video Embed Overlay Image: 1200px × 675px

Font Specifics

• body, p, ol, ul (Desktop) – Proxima Nova, 400 • 16px/1.75 • Color: #58595B • Letter-Spacing: 0.25px • Margin: 0 0 25px
• body, p, ol, ul (Tablet & Mobile) – • 15px/
• p.intro (Desktop) – Proxima Nova, 400 • 22px/1.63 • Color: #58595B • Margin: 0 0 25px
• p.intro (Tablet & Mobile) – • 18px/
• Blockquote p (Desktop) – Proxima Nova, 400, Italic • 22px/1.6 • Color: #58595B • Letter-Spacing: 0.25px • Margin: 0 0 25px
• Blockquote p (Tablet & Mobile) – • 18px/
• Pre-Title (Desktop) – Proxima Nova, 700 • 16px/1.18 • Color: #833136 • Letter-Spacing: 1px • Margin: 0 0 20px
• Pre-Title (Tablet) – • 14px/
• Pre-Title (Mobile) – • 13px/
• H1 (Desktop) – Proxima Nova, 700 • 60px/1.03 • Color: #000 • Margin: 0 0 25px
• H1 (Tablet) – • 40px/
• H1 (Mobile) – • 27px/ • Margin: 0 0 20px
• H2 – Proxima Nova, 700 • 35px/1.14 • Color: #000 • Margin: 0 0 25px
• H2 (Tablet) – • 30px/
• H2 (Mobile) – • 22px/ • Margin: 0 0 20px
• H3 (Desktop) – Proxima Nova, 700 • 25px/1.28 • Color: #000 • Margin: 0 0 10px
• H3 (Tablet) – • 22px/
• H3 (Mobile) – • 19px/
• H4 (Desktop) – Proxima Nova, 700 • 20px/1.35 • Color: #000 • Margin: 0 0 10px
• H4 (Tablet) – • 17px/
• H4 (Mobile) – • 17px/
• H5 (Desktop) – Proxima Nova, 700, ALL CAPS • 17px/1.3 • Color: #000 • Letter-Spacing: .5px • Margin: 0 0 10px
• H5 (Tablet) – • 16px/
• H5 (Mobile) – • 15px/
• H6 (Desktop) – Proxima Nova, 700 • 17px/1.3 • Color: #000 • Letter-Spacing: .5px • Margin: 0 0 10px
• H6 (Tablet) – • 16px/
• H6 (Mobile) – • 15px/

Site Color Values