How To /

Style Guide

A quick reference for the image sizes, fonts and colors used across the site.

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.

Images are using an automatically resized version to keep load times down. 

Image Sizes

  • Landscape Images 3:2: 1800 x 1200 (jpg)
  • Portrait Images 2:3: 1200 × 1800 (jpg)
  • Square Images 1:1: 1800 x 1800 (jpg)
  • Icons Images: 75 x 75 (png or svg)
  • Logos: 250 x 130 (png or svg)

Font Specifics

  • H1 – Brother1816 Printed, 500 • 45px/1.07 • Color: White • Letter Spacing: .25px • Margin: 0 0 20px
  • H1 Desktop – 75px
  • H2 – Brother1816 Printed, 500 • 30px/1.1 • Color: White • Letter Spacing: .25px • Margin: 0 0 20px
  • H2 Desktop – 44px
  • H3 – Brother1816 Printed, 700 • 20px/1.27 • Color: White • Letter Spacing: .25px • Margin: 0 0 10px
  • H3 Desktop – 26px
  • H4 – Brother1816 Printed, 700 • 17px/1.32 • Color: White • Letter Spacing: .25px • Margin: 0 0 10px
  • H4 Desktop – 22px
  • H5 – Brother1816 Printed, 700, ALL CAPS • 15px/1.44 • Color: White • Letter Spacing: 2px • Margin: 0 0 10px
  • H5 Desktop – 18px
  • H6 – Brother1816 Printed, 700 • 15px/1.44 • Color: White • Letter Spacing: .5px • Margin: 0 0 10px
  • H6 Desktop – 18px
  • Paragraph Text – Mokoko, 400 • 15px/1.67 • Color: White • Letter Spacing: .25px • Margin: 0 0 25px
  • Paragraph Text Desktop – 18px
  • Intro Text – 19px/1.3
  • Intro Text Desktop – 23px
  • Pre-Title – Brother1816 Printed, 500, ALL CAPS • 12px/1 • Color: Yellow • Letter Spacing: 3px • Margin: 0 0 20px
  • Pre-Title Desktop – 13px

Site Color Values

Dark Charcoal – #202020
Charcoal – #282828
Dark Gray – #655C5C
Dark Blue – #28205E
Blue – #4F6F9F
Light Blue – #86B6CF
Red – #B54055
Orange – #DD7A3A
Yellow – #FFCD37
Cream – #EFD7C0
Light Cream – #FCF5EF
White – #ffffff