Starter Email Design System

Documentation, tools, and resources to help create consistency for branded emails. The Starter Email Template is used as an example reference template.

Branding

Refer to current brand guidelines: a styleguide, logo requirements, etc. Any related design documentation that may be available. And any design patterns that are used outside email campaigns for other marketing efforts.

#Colors and type

Color palette

•  

  Black

  #333333

•  

  Light grey

  #eeeeee

•  

  White

  #ffffff

•  

  Blue

  #1467ac

• ℹ️ Black value is used for text and button backgrounds
• ℹ️ Light grey value is used as a background highlight
• ℹ️ White value is used for button text
• ℹ️ Blue value is used for text links

Fonts

• Heading titles:

  font-family: Georgia, Times New Roman, serif; font-weight: 400;

  

  font-size: 28px; line-height: 32px;

  

  font-size: 22px; line-height: 28px;

  Content text:

  font-family: Helvetica Neue, Arial, sans-serif; font-weight: 300;

  

  font-size: 18px; line-height: 24px;

#Logo usage

How to use company logo within content and as part of visual elements. This might also be found in a brand styleguide.

• ❌ Don't make the logo bigger
• ✅ Always centered at the top, with white space on the left and right
• ℹ️ Lack of accompanying text focuses on central email message

#Photos and visuals

The types of photos, illustrations and icons to use and where to find them, or examples of them to refer to.

• ℹ️ Meditation series of photos used in the Email Mindfulness example template
• ℹ️ Photos from Unsplash

• ℹ️ Mindfulness series of illustrations used in the Email Mindfulness example template
• ℹ️ Illustrations from The Noun Project

#Voice and tone

• ✅ Be clear, and concise
• ✅ Use plain, straightforward language
• ✅ Be positive and light in tone

Template

#Components

View editable preview of template components in Blocks Edit →

#Examples

Examples of using the template for different email types.

• Basic

  

• Welcome

  

• Marketing

  

• Newsletter

  

#Blocks Edit

Using Blocks Edit to build emails from the template. Salesforce Marketing Cloud is used for exporting.

Dashboard

• To sign in or sign up you can go to blocksedit.com, or directly at app.blocksedit.com.
• Your account will include your own organization by default. You will find other organizations you're part of as tabs at the top.
• The organization dashboard shows templates that you have access to and all the emails created from each.
• You will also see other team members that are on a template. You can invite team members to edit emails for a particular template by clicking Invite/remove editors in the template header.
• Emails are shown in descending order based on the last edit date and time. You can see the time stamp next to the email along with who made the update.
• To add a new, blank email, click the New Email button in the template header. Next to it is an icon to add a folder to help keep emails organized. To edit a current email, click on the email/campaign name.

Editor

• Starting a new email or clicking to edit a current one brings up a preview of the email. Here you can view the current state of the email and test out its links.
• Next to the Edit button in the top bar, there is a Share option to send a preview of the email. And an Export option to save out the final version to Salesforce Marketing Cloud.
• To make changes, click the Edit. The button turns into a Save button for saving changes.
• On the left sidebar you can view your email in mobile view, access components to use, saved template layouts, and email settings.
• Components can be dragged and dropped to add stackable sections for content as well as individual elements that might be available, like a button.
• Layouts are for reusing certain email designs, acting as sub-templates that you can start an email with.
• Email settings allow you to set a subject line and preview text for the email.
• Once there are components in an email, to make content updates, just mouse over and click on content areas. Text can be edited inline with additional options shown when clicked on. And clicking on a placeholder image brings up its options, including the option to upload a new one in its place.

Exporting

• Once your email is ready to go, if you haven't already done so, click Save to save your final updates. Then click Export for the process to getting your email ready to send in Salesforce Marketing Cloud.
• You will first have the option to transfer any new images you added. Click the Set image URLs from source option and Browse for the SFMC folder to save your images to. And click Export Images.
• You then have the option for exporting the email's code. Click Browse to choose where it gets saved on SFMC and then Transfer. Your email is added as a campaign in SFMC with correct image URLs, subject line, and preview text.
• If you make any further updates, repeat the export process for updates to be made on SFMC.

For additional help, click the ? in the upper right, next to your profile for Blocks Edit's help docs.

Additional tips

Content

#Meta

• ℹ️ Subject Line - the first impression of what the message is about, enticing the reader to open the message
• ℹ️ Preview text - short summary following the subject line when viewing an email in an inbox
• ❌ Avoid all caps and punctuation in subject lines, except for dashes and colons
• ✅ Keep the preview text short and simple; use to tell readers what the email is about, why it’s relevant, and to support your subject line

#Copy

• ✅ Keep concise; Newsletters may be longer, but use links to share further details
• ✅ Ensure the central message's focus reinforces the subject line
• ✅ Allow for content to be scannable — use different sections, titles, images, and bullet points to break it up
• ✅ Titles and buttons should use sentence case, with just the first letter of the first word capitalized
• ✅ Use a Call to Action to persuade readers to click on your content; make it specific, avoid being too vague
• ✅ Build contextual content around your CTA

#Link tracking

All links should be tagged using the standard UTM parameters, including linked images. Here's an example:

https://blocksedit.com/email-design-system/?utm_medium=email&utm_campaign=newsletter-july-2021&utm_content=feature-banner

And here's how it breaks down:

• Website URL
• utm_medium - marketing channel; in this case always "email"
• utm_campaign - name for current email campaign
• utm_content - content piece link came from; optional

When building your links, make sure everything is in lowercase with hyphens instead of spaces.

#Alt text

Images should include alt text for accessibility.

• ℹ️ Text is visible when mousing over image
• ℹ️ If an email client doesn't load images, the alt text is shown in their place
• ℹ️ Any text within an image should be used in the alt text
• ℹ️ Photos should be briefly described

#Animated GIFs

• ℹ️ Try to keep under 500kb
• ℹ️ The best way to cut down on file size is to reduce the number of frames/frame rate
• ℹ️ For video previews, include play button in image

#Content Checklist

• ✅ Subject and preview text
• ✅ Spelling and grammar
• ✅ Check for placeholder text/images not replaced
• ✅ Make sure links are all in and going where they’re supposed to
• ✅ Make sure images include links where appropriate
• ✅ Add tracking parameters to links
• ✅ Add alt text on images
• ✅ Review mobile version

Other

#Changelog