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