What is an email design system?
An email design system is the set of reusable parts and rules a team builds its emails from: the styles, such as colours, fonts and spacing; the modules, such as a header, hero, product grid and footer; and the rules about what can change in each one. Build from it and every campaign starts on brand, whoever makes it.
The autumn edit is here
Waxed jackets, wool layers and trail boots for the wet months.
The four parts of an email design system
The definition has three parts. The fourth, a single page that records them, is the one most teams skip.
What happens without one
Drift is gradual. Someone needs a sale banner the template doesn't have, so they duplicate last week's HTML and change a colour by eye. Someone else does the same with a slightly different shade. Six months later the sent folder has five brand blues and three footers that don't quite match, and one campaign broke in Outlook because an untested section went out.
None of that is carelessness. People improvise when the system gives them no approved way to do what the brief asks. A design system takes the improvising away: the banner exists as a module, and the sale colour is one of its approved options.
The other cost is time. When every email is a fresh build, every email needs a full round of testing and a full round of feedback on the layout as well as the words. When every email is assembled from modules that have already been tested, the review is about the message.
How to build an email design system
Five steps, in the order most teams take them. The audit matters more than the module count.
- Audit the last six months of sendsPull every campaign you sent and group them by layout. The layouts that recur are your first modules, and the places the brand drifted are the styles you need to pin down.
- Write down the stylesColours, fonts and sizes, spacing, button and link styles, image sizes and the email's width (600px is still the safe default). Start from your brand guidelines if you have them, then adapt them for email: web fonts need fallbacks and body copy has to read on a phone.
- Build the module libraryEight to twelve modules cover most programmes: header, hero, text, image and text, product grid, promo banner, quote, social row, footer. Keep them at section level. A button on its own is part of a module, not a module.
- Decide the rules for each moduleWhich parts are editable, what limits they have and which options are approved. A headline with a 40-character limit stays on two lines, and a button colour chosen from three approved options stays on brand.
- Test once, write one page, roll outCheck each module in Gmail, Outlook and Apple Mail before it joins the library. Write the page that names the modules and states the rules. Then build campaigns from it, and add a module when a brief asks for something the library can't do.
What one looks like, module by module
Northwind Outdoor is the sample brand in our drawings. This is its system laid out module by module: the fields are what changes every campaign, the options are the few decisions a marketer should make, and everything else is fixed. The modules themselves are what people mean by modular email templates.
| Module | Editable fields | Approved options | Fixed |
|---|---|---|---|
| Header | None | None | Logo, links and spacing |
| Hero | Image, headline (up to 40 characters), body, button and link | Layout: Image left, Image right, Full. Button colour: Forest, Clay, Ink | Type, spacing and the button's shape |
| Product grid | Image, name, price and link for each product | Layout: 2-up, 3-up, 4-up | Card spacing and the price style |
| Promo banner | Offer line and code (up to 12 characters) | Colour: Sale red, Forest, Ink | Banner height and type |
| Text | Headline and body | None | Type and spacing |
| Footer | None | None | Address, unsubscribe link and social row |
Where the rules live decides whether they hold
A brand PDF describes the system. Something has to apply it every time someone builds an email, and that something is usually the tool they build in.
| Brand guidelines | ESP template library | Module repository | Email CMS | |
|---|---|---|---|---|
| Who builds with it | Anyone who reads it first | Marketers, inside that ESP | Developers | Marketers build, developers maintain the modules |
| What stops drift | Goodwill | Saved templates, until someone edits one | Code review | Styles in the template, fields with limits, options from a list |
| Custom HTML templates | Described, not applied | Often can't be edited visually | Yes | Yes, with the editable parts marked |
| Tied to one ESP | No | Yes | No | No, it exports HTML to any ESP |
How Modular Mail keeps a design system intact
Modular Mail is an email CMS. Your developer, your agency or our team turns your templates into modules with fields, and your team builds every campaign from them.
Styles, in the template
Colours, fonts and spacing are written into the template's HTML once. Publish a change and the next campaign picks it up.
- Layout and spacing
- Fonts and sizes
- Brand colours
- Button shapes
- Outlook and Gmail fixes
Rules, as fields
Each marked part becomes a field, with a character limit where one is needed. Colour and choice fields offer approved options, and a style preset sets several styles from one choice.
Up to 40 characters, so the hero stays on two lines.
What is an email design system?
An email design system is the set of reusable parts and rules a team builds its emails from: styles such as colours, fonts and spacing; modules such as a header, hero, product grid and footer; and rules about what can change in each module. It exists so that every campaign starts on brand without a designer or developer rebuilding it.
How is an email design system different from brand guidelines?
Brand guidelines describe how emails should look. A design system is the set of coded, tested parts that make them look that way, plus the rules for using them. You need the guidelines to build the system, and the system to make the guidelines hold.
What are design tokens in email?
Design tokens are the named values a design system is built from: a colour called Forest rather than a hex code, a spacing step called large rather than 24px. In email they usually live in the template's CSS or in a build tool, because most email clients ignore CSS variables. The point is that each value is decided once and reused.
How many modules should we start with?
Eight to twelve covers most programmes, and fewer is fine to start. A header, hero, text, product grid and footer will carry a retail programme for weeks, and the first brief that doesn't fit tells you which module to build next.
Can we build an email design system in Figma?
You can design one there, and many teams do. Figma can't stop anyone changing a colour once the email is coded, so the Figma file is the reference and the coded modules, with their rules, are the system.
Where can we see examples of email design systems?
Most are internal, so public examples are rare. Litmus publishes a free email design system template and Figma's community has several kits, which are useful for structure. The worked example on this page shows what one looks like module by module.
What's the difference between an email design system and an email CMS?
The design system is the set of parts and rules. An email CMS is software that holds those parts and applies the rules while people build campaigns. Modular Mail is an email CMS. What is an email CMS?
Who should own the email design system?
Whoever owns the templates, usually the email developer or the agency that built them, with the CRM or email lead deciding which fields and options marketers need. The ongoing work is adding modules as the programme changes.
Does a design system tie us to one ESP?
It shouldn't. The styles and modules are HTML, and finished emails export as HTML to Klaviyo, Braze, Salesforce Marketing Cloud, HubSpot, Marketo or any platform that accepts it.
See your own email in Modular Mail.
Send us a recent campaign. We'll rebuild it before the call, so you can see exactly how your team would work.