General Layout

Email is an important and cost-effective way to build relationships and maintain regular contact with users. It’s an easy-to-manage, reliable and very accessible form of push communication. ACS uses two types of email communications: newsletters and system emails.

Newsletters
Newsletters are publications that are regularly developed and distributed by divisions within ACS. They should include the ACS logo, heading title, body content, a call-to-action button and footer.

Newsletters also allow for some design flexibility. For example, you can add a hero banner and an additional logo if the newsletter is co-branded.


System Emails
System emails are used whenever the site visitor has to perform a system-related action (resetting a password, making a transaction, etc.). They should include the ACS logo, heading title, body content, a call-to-action button and footer. Unlike newsletters, designs aren’t customizable.

General Design Specifications

Color Palette

 
#0275D8
 
#FBD333
 
#47464B
 
#FFFFFF
Typeface & Font Sizes
  • Font Family: Arial
  • Header Title: 22px bold is standard, but varies depending on length
  • Body Title: 20px bold
  • Body Text: 14px (12px minimum)
  • Body Text Spacing: 1.5 (1.15 minimum)
  • Footer Text: 10px
Logo & Brand

In both email templates, the ACS logo should appear in the top left corner. The newsletter allows for a customizable hero image and another logo if it’s co-branded. Headline sizes should be equal to or smaller than the ACS logo, and headlines should always be on a white background.

Dimensions

Both newsletters and system emails should be at a maximum 600px wide. Anything larger than that won’t display properly to the user.

File Sizes

Email content (not images) should not exceed 102k. Gmail displays the first 102k, and clips off the remainder across devices.

Links & Buttons

In addition to text links, there are three types of email button styles: default, large and small. Here are their specs and guidance on how and when to use them.

Text Link
Text Link Color: #0275D8

 

Large Buttons: 50px in height
Use large buttons for main call-to-action because it carries a stronger visual weight.

 

Small Buttons: 30px in height
Use this button for a secondary call-to-action.

 

Newsletter Specifications

 

Place the ACS logo in the top left corner and position the application header text in the right top corner. Header text should be on a white background and cannot be larger than the ACS logo.

Place the ACS logo in the top left corner and position the application header text beneath it. Header text should be on a white background and cannot be larger than the ACS logo.

Position content on the left side of the page , vertically below the logo and header text.

The footer should include the American Chemical Society spelled out, along with the Society’s address, copyright and links to unsubscribe and manage emails.

System Email Specifications

 

Place the ACS logo in the top left corner and position the application header text in the right top corner. Header text should be on a white background and cannot be larger than the ACS logo.

Place the ACS logo in the top left corner and position the application header text beneath it. Header text should be on a white background and cannot be larger than the ACS logo.

Position content on the left side of the page , vertically below the logo and header text.

The footer should include the American Chemical Society spelled out, along with the Society’s address, copyright and links to unsubscribe and manage emails.