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