Design

ACLU emails should have a uniform, clearly identifiable style and format across all types and teams. The logo should be displayed prominently and the look should be clean, professional, and compatible with all devices. Colors, fonts, and overall layout should reflect ACLU branding and template structure. Refer to the ACLU Design Handbook for more details on color, logos, and design.

🎨 COLORS

• RSVP and donation buttons should use ACLU Blue #0055aa.

• Action buttons should use ACLU Red #ef404d.

• Always keep in mind that members of our audience might need certain accommodations to engage with our emails, from physical presentation and readability to content.

​​

Refer to p. 96 in the ACLU Design Handbook for more information on accessibility in design.

💡Visit Color.review to see if colors pass the accessibility test.

🖼 IMAGES

• The image name should not include spaces as they will not appear on Gmail clients.

  • ✅ Good: ny-summer-advocacy.jpg

  • ❌ Bad: summer advocacy.jpg

• Images for the email should be kept under 500kb.

• Which image file type should I use?

  • JPG

    • should be used with raster graphics like pictures.

    • JPG provide higher color spectrum which works best for photographs.

    • File sized can be bigger because of all the information in the image.

  • PNG

    • Should be used for vector graphics made like text.

    • Has a lower color spectrum which keeps the file size smaller.
      
      

Logos

• You can find the logos on the Hub.

  • The national logo should have a width of 130px.

  • The affiliate logo should have a width of 150px.

• Affiliate can use their anniversary logos. In order to to so, you'll need to use the code snippet below.

National Logo

<tr>	<td align="left" style="padding:15px 0;" class="logo-spacing">		<!-- START LOGO IMAGE -->		<a href="https://www.aclu.org/action"><img alt="ACLU" src="https://media.sailthru.com/64p/1k3/9/f/5d7ec2cd22763.png" border="0" width="130" style="display:block;"/></a>		<!-- END LOGO IMAGE -->	</td></tr>

Affiliate logo

<tr>	<td align="left" style="padding:15px 0;" class="logo-spacing">		<!-- START LOGO IMAGE -->		<a href="{affiliate_website}"><img alt="{affiliate_name} logo" src="{affiliate_logo_src}" border="0" width="150" style="display:block;"/></a>		<!-- END LOGO IMAGE -->	</td></tr>

Anniversary Logos

• The image src should be replaced with the logo image you want to use.

• The width of these logos are wider than the standard logos. For anniversary, the width changes to 220.

<tr>	<td align="left" style="padding:10px 0;" class="logo-spacing">		<a href="{affiliate_website}"><img alt="{affiliate_name} logo" src="https://media.sailthru.com/64d/1k5/7/l/60f89466cefc9.png" border="0" width="220" style="display:block;"></a>	</td></tr>

When to Use

• ACLU Foundation logo (please provide a high res version of each graphic) - For all cultivation and c3 solicitation emails going out to the Mid-level and/or Major Gifts audience​

• Red ACLU logo - For all c4 solicitation emails going out to the Mid-level and/or Major Gifts audience​

• Blue ACLU logo - Usage in action emails is okay
  ​

• Red vs. Blue button - depends on the email usually, but most of the time we have been using the red button for donate

Alt Text

• ✅ Do:

  • Tells people what information the image provides

  • Describes the content and function of the image

  • Is specific, meaningful and concise

  • Use normal punctuation, like commas and full stops, so the text is easy to read and understand.

• ❌ Do not :

  • Include the name of the photographer or person who created the image

  • Start with ‘Image of’, ‘Graphic of’ or ‘Photo of’

  • Repeat information from the page

  • Include extra information not on the page

Image Dimensions

Our templates are create to have full width images. While our email width is only 600px,we set want to have the images be double that width for high resolution devices like phones and tables.

• Hero: 1200 x 600px

• Inline image (e.g. video thumbnail with play button): 1200 x ~500px

• Sidebox: 460 x 260px

• Signature headshot: 190 x ~286px

• GIF: 1200 x 500px

• The height adjusts to the image but should not be taller than 300px.

Templates.zip

💡‎‎Gmail clips messages over 102kb. Images heavy or uncompressed images will cause Gmail to only show a portion of the message.