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

Fonts

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

#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

Template

#Examples

Examples of using the template for different email types.

#Blocks Edit

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

Dashboard

Editor

Exporting

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

Additional tips

Content

#Meta

#Copy

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:

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

#Alt text

Images should include alt text for accessibility.

#Animated GIFs

#Special characters

Select a character you need and copy it to your clipboard. Then paste in your email.

Bullet point
Left curly quote marks
Right curly quote marks
En Dash
Em Dash
Copyright symbol
® Registered symbol
Trademark

#Content Checklist

Other

#Changelog

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.