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.
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
- ℹ️ 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
font-family: Georgia, Times New Roman, serif; font-weight: 400;
font-size: 28px; line-height: 32px;
font-size: 22px; line-height: 28px;
font-family: Helvetica Neue, Arial, sans-serif; font-weight: 300;
font-size: 18px; line-height: 24px;
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.
#Voice and tone
- ✅ Be clear, and concise
- ✅ Use plain, straightforward language
- ✅ Be positive and light in tone
Examples of using the template for different email types.
Using Blocks Edit to build emails from the template. Salesforce Marketing Cloud is used for exporting.
- 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.
- 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.
- 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.
- ℹ️ You don't need to scale images to exact dimensions, they are scaled automatically
- ℹ️ Images will bring up a cropping option; Skip button allows automatically adjusting the image's height
- ℹ️ Blue bars indicate Salesforce Marketing Cloud AMPscript code
- ℹ️ Tokens (ex: %%emailaddr%%) are dynamically updated in Salesforce Marketing Cloud
- ℹ️ 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
- ✅ 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
All links should be tagged using the standard UTM parameters, including linked images. Here's an example:
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.
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
- ℹ️ 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
- ✅ 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
- 9/7/2021: Adds content checklist, voice and tone example
- 9/1/2021: Cleans up functionality and examples
- 6/16/2020: Adds link generators for UTM links, Twitter, LinkedIn, Facebook, and Email prefill
- 5/6/2020: Initial version
The initial version of this design system template was made by the Blocks Edit team. While a design system doc works as a reference point for your organization to use, Blocks Edit is a visual editor for your components. So your team can build emails on their own while still following your design system's guidelines.