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:
- Allows everyone to easily understand decisions made (including non-designers and developers), while having to make less of them as they can refer to a single source of truth for how to do things
- Improves workflow, not having to reinvent the wheel each time by reusing components, keeping writing focused on defined messaging principles, and following best practices
- Maintains consistency with on-brand visuals and messaging voice and tone
- Fixes design and code debt with a reusable framework for increased efficiency and speed
- Communicates expectations clearly to team members with guidelines to refer to when questions come up, reducing the potential for specs and tasks to be misunderstood or misinterpreted
- As a backup for when teams change (as people come in, or leave), there’s a shared repository of gathered knowledge
What to include in your design system
This 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.
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.
Increase volume and speed of content
Improve accuracy accessibility and compliance
Provide greater collaboration between teams
Ensure brand and messaging governance
Align your team
- Align brand values and define principles of those values to refer to
- Define a purpose to follow: how will the design system help, and who is it for
- Educate on value of using a design system for your emails based on problems it solves
- Talk to people who will be using the system to find out what they need
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
- 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 used in their proper context
To keep in mind
- How well do components express your brand?
- How do they compare to current brand guidelines?
- Are design elements consistent?
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
- Mission statement with values and principles
- Colors and fonts to stick to including a color palette of common colors to use
- Logo usage guidelines
- Guidelines for using visuals — photos, illustrations, icons
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.
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
More about Expressive Design Systems by Yesenia Perez-Cruz →
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
- Good subject line examples
- Preheader text best practices
- Sender name formatting
Basics of voice and tone
Use these general tips to develop the rules around your organization's writing approach:
- Using a conversational tone as that is usually what's expected from an email
- Considering the type of message you're sending and whether to add more personality to it, or to get straight to the point
- Writing in your own voice at first and tuning to your brand in the revision
- Being creative in email mechanics (subject line, preheader, headlines, call-to-action buttons)
- Reading out loud for flow and catching errors
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.
Creating a new component
- Define a component as a functional unit that has a purpose and is not part of the library already
- Give it a descriptive name that everyone using the system can understand and agree on
- Be sure to test accessibility — color contrast ratio, content voice-over, etc
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
- Account for variation - utilize how content is placed, a component's size and structure, and style changes to offer components that have more than a single format
- Responsive for mobile - be sure to have mobile versions of each component
- Design tokens - use as a semantic, standard language of naming across design and code
Guide on designing and coding a modular email template →
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
- Purpose of each component and the user experience thinking behind it
- When to use a component, when not to use it, and any content limitations
- Make it easy to read with bullet points instead of paragraphs of text
- List as ✅ do's, ❌ dont's, and ℹ️ info worth noting
- Keep it simple and flexible (especially at the beginning) by not making too many rules
- Use visual examples and screenshots where needed
- Include a changelog/release notes of regular updates made
- Use a git repo for version control for making updates
Making it accessible for your team
- 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