Email design system guide

Document your email design workflow for consistency, scalability, and collaboration

An email design system is a set of documentation, tools, and resources to help your team scale design-related processes. Using a shared workflow and assets allows your team to be more efficient and ensures your emails follow brand guidelines.

A design system helps solve the following problems:

What to include in your email design system

The guide is broken down by each of the key aspects your design system should include, along with how to get started using your current assets and how to effectively share your design system with your organization.

Depending on what you have to work with, you can refer to your organization’s styleguides, composition guidelines, design elements, etc. Every organization is different, with different needs, so you should pick and choose what makes sense for your team. Your email design system should be developed according to what your team members will be using regularly.

How to Start

Your email design system can be big or small depending on the size of your organization. Only build and document aspects that you need for your organization. Start small and build up. Focus on not only building tools, but creating a shared language.

Define the goals of your design system

Design systems usually solve these four basic problems. You can pick one, two, three, or all four as your goals, but be specific on how they would apply to your organization and email marketing.

Align your team

Audit your current email assets

There are two ways to rollout a design system. Incrementally, or with a large-scale redesign. Unless there's a need to redesign your emails, you should go with an incremental rollout.

Release small pieces of the design system at a time by first documenting design patterns from your current emails. This allows you to test your components in a real context. You can then start with common problems, like defining consistent headline options.

Find patterns in the current things you’re doing. Start building and using an initial version of your system early as you continue to find patterns.

  • Organize a team that could help with gathering assets - this also helps develop a shared understanding of how to measure quality components
  • Choose the right tool to keep assets in - it should allow for visuals, adding metadata and notes, and commenting
  • Start categorizing components - this will happen as you begin to find patterns of component types and helps define a language around your system
  • Take screenshots - besides individual assets, screenshots are a way to show examples of components in context

To keep in mind

  • How well do components express your brand?
  • How do they compare to current brand guidelines?
  • Are design elements consistent (fonts, colors, etc)?

Branding

Refer to your organization's 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.

Brand elements to include in design system

Make your system expressive

In the book, Expressive Design Systems, Yesenia Perez-Cruz talks about how to keep from making your design system too generic and keep your design components as stylistically unique as your organization's brand.

Along with achieving unity and cohesion, your design system should also embody a harmony by combining all of your design system elements to produce pleasing layouts. "...brand expression is more than your visual language — it's how all of your elements come together to communicate your brand voice." she writes.

Opposite layout examples

To do this successfully, your design system should include the following:

  • A component hierarchy and with thoughtfulness on how our brand gets expressed at each level
  • Focus on the most essential elements of design: typography, color, and space
  • Measure elements based on size: affecting how fast content is consumed; scale: the size of elements relative to each other; density: should the layout feel airy or compact; and weight: should it feel heavy or light
Measurement of elements

More about Expressive Design Systems by Yesenia Perez-Cruz →

Writing

The most important part of an email is the message it's communicating, the text itself. Your design system should include some guidelines around how copy is written. From the mechanics of the email, to the voice and tone of the content.

Email composition guidelines

Basics of voice and tone

Use these general tips to develop the rules around your organization's writing approach:

Components

A design system shouldn’t feel like something that stifles creativity. Don't make it too rigid, a certain level of hand-crafting is important. It should allow for greater creativity within a set of guidelines. The long-term benefit is that a designer can take greater care and give better thought to solving each solution that becomes part of the system instead of rushing to put together something that comes along.

Design system components example

Breaking components down

Keep this hierarchy in mind and introduce it to your team as you design and build your templates.

Creating a new component

A good component is...

  • Purposeful - all components solve a specific problem
  • Reusable - components work for multiple use cases
  • Flexible - they work in many different contexts

Guide on designing and coding a modular email template →

Guidelines

Static components answer the how. Guidelines provide answers to: why, when, and where. "Can we?", "should we?", and "what if..." They should educate on constraints: workflows, habits, and best practices. Having this information leads to a reduced need for everyday problem-solving and decision-making.

What to include in your notes

Additional considerations

Sharing

Your design system is only as strong as your relationships with the teams who use it. You need to develop trust and allow for it to evolve by encouraging participation in its development.

Making it accessible for your team

Starter design system preview

Example documentation

  • Keep it centralized - make updates dynamic without creating too many versions that need to be passed around
  • Provide in a format that anyone can access - documentation as a web page allows sending a URL where updates are dynamic for everyone; either by building a custom HTML-based doc, or using a shareable online writing tool or wiki
  • Make it easy to maintain - develop a workflow for other designers, developers, and organizers to make updates to
  • Allow for getting feedback - a point of contact, support ticketing system, discussion forum, etc
  • Include a link to in other processes - new team member on-boarding, company-wide demos and emails, etc
  • Make people feel like they’re part of the process - if something is unclear, talk through and get feedback on how to improve
  • Show examples of how to be creative with structure - encourage “off-roading” to evolve system; consider examples from other organizations to help show ways to utilize a system without feeling boxed into a boring design

Maintaining your design system: As your system gets adapted, you'll have to go from designing and developing components to getting feedback on them and tracking usage. You'll have to be prepared to maintain updates as your email marketing evolves, along with your organization.

Email design system examples

This guide has been put together 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.

Share this guide

Tweet | LinkedIn post | Facebook post | Email a team member

Other tools and resources from Blocks Edit