New email templates available

The page you are viewing contains obsolete templates. Please use the new Email 2.0 Toolkit.

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

 

 

 

 

 

 

 

 

 

 

 

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 right-aligned
  • QuickBooks logo is left-aligned

 

 

 

 

 

 

 

 

 

 

 

Text guidelines

Header 1

  • Font-size: 36px
  • Line-height: 40px
  • Font-weight: Bold
  • Font-family: Avenir, Arial, sans-serif
  • Color: #393a3d

Subhead

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

Header 2

  • Font-size: 24px
  • Line-height: 28px
  • Font-family: Avenir, Arial, sans-serif
  • Color: #393a3d
  • Font-weight: Demi

Header 3

  • Font-size: 16px
  • Line-height: 20px
  • Font-family: Avenir, Arial, sans-serif
  • Color: #393a3d
  • Font-weight: Demi

Paragraph

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

Text Links

  • Font-size: 16px
  • 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

Buttons

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

  • Background color: #2ca01c
  • Left and right padding: 24px
  • Height: 36px
  • Border radius: 18px
  • Font: Avenir, Arial, sans-serif; 16px; #FFFFFF; demi

Secondary buttons
Secondary modules will often contain their own buttons.

  • Background color: #393a3d
  • Left and right padding: 24px
  • Height: 36px
  • Border radius: 18px
  • Font: Avenir, Arial, sans-serif; 16px; #FFFFFF, demi

Tertiary buttons
Secondary modules will often contain their own buttons.

  • Background color: #FFFFFF
  • Border color: 2px solid #393a3d,
  • Left and right padding: 24px
  • Height: 36px
  • Border radius: 18px
  • Font: Avenir, Arial, sans-serif; 16px; #FFFFFF, demi

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?
  •