Technical specifications

Logo size

110 px wide on white

Typography

H1 (Headline large)
42 px/48 px Arial Regular/Bold
H2 (Headline small)
34 px/38 px Arial Regular/Bold
H3 (Subhead/Section head)
26 px/30 px Arial Regular/Bold
H4 (Content header)
18 px/22 px Arial Regular/Bold
P
16 px/20 px Arial Regular/Bold
Legal text
8 px/10 px Arial Regular/Bold
Footer background color
#797A7C  
Gray background/sectional background
#F4F6F7  


Grid

2 columns with 40 px gutter

Margin 

  • 600 px, with 40 px margin on left and right
  • Mobile: 20 px margin
     

Call to action (CTA)

Style
  • Use preset for CTA buttons.
  • Active state is optional for desktop because hover state is not available on mobile devices; the active state is required on mobile.
  • Primary, #D8292F
  • Hover/rollover, #A61E22
  • 240 px width (max 280) x 44 px height
  • 18 point Arial Bold
  • Text centered horizontally/vertically
  • 4 px corner radius
  • Box-shadow 3 px #97999B
     
CTA Language
  • CTA should include the name of the offer, even in short form (e.g., “Get the guide”).
  • Try to avoid generic terms like “Submit” or “Download.”
  • Word count: 5 maximum; character count: 25 maximum.
     
Icons
  • Small instructional icons: use Font Awesome. Use for social icons, small arrow indicators, and other smaller related iconography within body copy.
  • Use provided video play button.
     
Link color

#D8292F

Single message (conversion focused)

Best used for announcements about new products, special offers, or other singular news items that feature a single call to action (CTA).

This email has a modular design, so you can add and subtract modules as needed. The top featured module has to stay on top; then you can use any number of modules in any order you wish.

Best practices
  • Write short, active subject lines that convey a benefit or incentive to your audience (60 characters).
  • Include pre-header text, with a focus on the first 5–8 words for mobile readability.
  • Communicate 1 single message, with 1 CTA.
  • No more than 300 words; be concise and focus on the value proposition to the reader.
  • Include social media links.
     
Modules

Depending on your content needs, choose the appropriate design to use.
 

Mobile/tablet
  • Content should be stacked from left to right.
  • CTA should be featured without scrolling.
  • Only hide content on mobile if the scrolling takes away from the experience.
  • Multiple containers may be featured on a horizontal side swipe.