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