UPDATED 4/3/18

The design and code of all email modules have been refreshed. Read the release notes for details.

These visual specifications are critical to building the ideal QuickBooks email.

Logos in headers


QuickBooks logo only

  • The logo should always be a retina image
  • Placement dimensions: 150 x 29 (300 x 58 export for retina displays)
  • Left-aligned when using the QuickBooks logo alone

Osas - specs

 

QuickBooks logo with product name

Product name is live text with the following specs:

  • Font color: #000000
  • Font size: 19px
  • Font family: Avenir, Arial, sans-serif;
  • Logo placement dimensions remain 150 x 29
  • Product name is left-aligned
  • QuickBooks logo is right-aligned

Osas specs

Primary color palette


#FFFFFF – White

  • Acceptable primary or secondary module background color
  • Font color for header 1 on dark gray background

#ECEEF1 – Light Gray

  • Body background color
  • Divider color between modules

#393A3D – Dark Gray

  • Font color for header 2, header 3, and paragraph styles
  • Acceptable primary module background color
  • Secondary button color

#2CA01C – QuickBooks Green

  • Font color for header 1 on a white background
  • Primary button color

 

#0077C5 – Intuit Blue

  • Font color for text links in the email body
  • Font color for phone numbers in the email body

#6B6C72 – Legal Gray

  • Font color for legal paragraph styles
  • Font color remains the same for legal links, but
    with an underline

Text guidelines


Header 1

  • Font-size: 32px
  • Line-height: 36px
  • Font-family: Avenir, Arial, sans-serif
  • Color: #2CA01C or #FFFFFF, depending on background color
  • Font-weight: Normal

Header 2

  • Font-size: 19px
  • Line-height: 24px
  • Font-family: Avenir, Arial, sans-serif
  • Color: #393A3D
  • Font-weight: Normal

Header 3

  • Font-size: 15px
  • Line-height: 20px
  • Font-family: Avenir, Arial, sans-serif
  • Color: #393A3D
  • Font-weight: Bold

Paragraph

  • Font-size: 15px
  • Line-height: 20px
  • Font-family: Avenir, Arial, sans-serif
  • Color: #393A3D
  • Font-weight: Normal

Text Links

  • Font-size: 15px
  • Line-height: 20px
  • Font-family: Avenir, Arial, sans-serif
  • Color: #0077C5
  • Font-weight: Normal
  • Text-decoration: Underline

Legal

  • Font-size: 12px
  • Line-height: 16px
  • Font-family: Avenir, Arial, sans-serif
  • Color: #6B6C72
  • Font-weight: Normal
  • Text-decoration: None (underline if hyperlinked)

Buttons


Primary buttons
For most emails, there should be a single button in the primary module.

  • Background color: #2CA01C
  • Left and right padding: 20px
  • Height: 32px
  • Border radius: 3px
  • Font: Avenir, Arial, sans-serif; 15px; #FFFFFF; bold

Secondary buttons
Secondary modules will often contain their own buttons.

  • Background color: #393a3d, or #FFFFFF with a 1px #393a3d border
  • Left and right padding: 20px
  • Height: 32px
  • Border radius: 3px
  • Font: Avenir, Arial, sans-serif; 15px; #FFFFFF (or #393a3d when using the white button), bold

 

Spacing


All elements in the email fall into one of three spacing guides: 40px, 20px, or 8px. The spacing is measured from the descender of the line above.

40 Pixel spacing

  • Use at the top and bottom of both primary and secondary modules

20 Pixel spacing

  • Use in between blocks of copy
  • Use between copy, buttons, and RTBs

8 Pixel spacing

  • Use in between header 3s and paragraph copy

emailspecs-03-2x

 

  • Was this Helpful?
  •