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, graphics and icons to use and where to find them, or examples of them to refer to.

Writing

#Mechanics

#Content

#UTM parameters

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

https://blocksedit.com/starter-email-design-system/?utm_source=email-newsletter&utm_medium=email&utm_campaign=04-2020&utm_content=logo

Build your own:


- referrer; all lowercase with hyphens, no spaces

- marketing campaign type, always "email" in this case; all lowercase with hyphens, no spaces

- name for current email campaign; all lowercase with hyphens, no spaces

- content piece it came from, optional; all lowercase with hyphens, no spaces

Be sure to test all links by copying and pasting them in your browser.

Twitter

Example:

https://twitter.com/intent/tweet?text=Use%20a%20design%20system%20for%20your%20emails&url=https%3A%2F%2Fblocksedit.com%2Femail-design-system%2F&hashtags=emailgeeks,email%20design

Build your own:

- tweet text; limit to 280 characters

- website URL

- optional hashtags; use a comma to separate

LinkedIn

Example:

https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fblocksedit.com%2Femail-design-system%2F&title=Email%20Design%20System&summary=Use%20a%20design%20system%20for%20your%20emails

Build your own:

- website URL

- article title/headline

- short blurb

Facebook

https://www.facebook.com/sharer.php?s=100&p[title]=Email%20Design%20System&p[summary]=Use%20a%20design%20system%20for%20your%20emails&p[images][0]=https%3A%2F%2Fblocksedit.com%2Fimg%2Fappicon.png&p[url]=https%3A%2F%2Fblocksedit.com%2Femail-design-system%2F

- article title/headline

- short blurb

- optional preview image URL

- website URL

Email

mailto:?subject=Email%20Design%20System&body=Use%20a%20design%20system%20for%20your%20emails:%20https%3A%2F%2Fblocksedit.com%2Femail-design-system%2F

- subject line

- short blurb; you can include a URL

Template

#Layouts

Examples of template layouts to use as a starting point.

Header

Get Code

Navigation

Get Code

Footer

Get Code

Sections

Banner

Get Code

Hero

Get Code

Intro

Get Code

#Two columns

Image left

Get Code

Image right

Get Code

Two-column

Get Code

#Three columns

Three-column

Get Code

#Rows

Row

Get Code

Components

#Titles

Title text

Get Code

#Buttons

Call to action button

Get Code

Other

#Special characters

Click "Copy" to copy 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

#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.