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

• Image Block (default size): 1000 × 1000px JPG
• Image Block (tall image): 666 × 1000px JPG
• Image Block (wide image): 1000 × 666px JPG
• Logos Block Logo: 400 × 200px PNG or JPG
• Columns Block Icon: 200 × 200px SVG (JPG and PNG also work)
• Columns Block Image Card (background image): 1000 × 1000px JPG
• Blurbs Block Custom Icon: 80 × 80px SVG (JPG and PNG also work)
• CTA Block Side Image: 1000 × 1000px JPG
• CTA Block Icon: 400px Max-Width × 125px SVG (JPG and PNG also work)
• Calculator Block Side Image: 1000 × 1000px JPG
• Header Block Image: 1000 × 666px JPG
• Home Hero (wide images): 1000 × 666px JPG
• Home Hero (square images): 1000 × 1000px
• Home Hero Illustration: 400 × 400px SVG

Font Specifics

• Fonts Used: Adelle Sans Regular and Bold, Source Sans Pro Regular, Semibold, Bold (italics for all if kit weight allows) – • /
• H1 & H2 on white, gray, light blue bkgds – • / • Color: #151D8E
• H1 & H2 on blue bkgds – • / • Color: #FFF
• Text over white, gray, light blue bkgds – • / • Color: #1B1D1F
• Text over blue bkgds – • / • Color: rgba(255,255,255,0.8)
• Accent light blue over white bkgds – • / • Color: #0099FD
• Accent light blue over gray and light blue bkgds – • / • Color: #008FEC
• Accent green over blue bkgds – • / • Color: #2FE2A9
• H1: Mobile – Adelle Sans, 700 • 32/42px • Margin: 0 0 20px; Padding: 0;
• H1: Tablet & Desktop – • 48/60px
• H2: Mobile – Adelle Sans, Bold • 29/40px • Margin: 0 0 20px; Padding: 0;
• H2: Tablet & Desktop – • 44/54px
• H3: Mobile – Adelle Sans, Bold • 26/40px • Margin: 0 0 10px; Padding: 10px 0 0;
• H3: Tablet & Desktop – • 30/40px
• H4 – Adelle Sans, Bold • 22/32px • Margin: 0 0 10px; Padding: 10px 0 0;
• Paragraph Text – Source Sans Prod, 400 • 19/32px • Margin: 0 0 20px; Padding: 0;
• Intro Paragraph Class: Mobile – • 22/34px
• Intro Paragraph Class: Tablet & Desktop – • 25/38px
• Pre-Title Class – Source Sans Pro, 600 • 15/20px • Margin: 0 0 10px; Padding: 0;
• Small Text Class — TBD if necessary – • /
• Legal Text Class – • 12/16px • Margin: 0 0 12px;
• UL & OL – • / • Margin: See Design – Padding: 10px 0;
• LI’s – Same as P text – See designs for spacing • /

Site Color Values