An email design system can produce a weekly newsletter, a product launch, a transactional receipt and a seasonal promotion, all on brand, all fully tested, and all without a developer building anything new. That sounds like a lot to ask of one system. The secret is in how it's put together: small, well-defined components, combined into flexible modules, which are combined into emails.
Here's how each layer works, and why a few dozen modules are enough to build almost any email you'll ever need.
Components: the smallest building blocks
Components are the basic elements that everything else is made from. In an email design system they usually include:
- Typography styles: headings at each level, body copy, captions, links and lists, each with a defined font, size, weight, line height and colour.
- Button styles: primary, secondary and text-link buttons, all built as live code so they render everywhere.
- Colour palette: brand colours, background colours and accessible text colours, including how they adapt in dark mode.
- Spacing: a consistent scale of padding and margins, so every email has the same rhythm.
- Images: standard sizes and aspect ratios on a shared grid.
The best place to find your components is usually your website. If you already have a well-designed site, most of the work is done: its typography, buttons and layout patterns can be adapted directly for email, so recipients get the same experience in both channels.
Modules: components arranged into layouts
A module is a pre-defined layout made from components: a hero, a single-column text block, a two-column product feature, a quote, a list of articles, a footer. Modules are the building blocks your team actually works with when creating an email.
Good modules are flexible. Within a single module there are many possible combinations:
- Images can be added or removed.
- Headings, copy and buttons can be shown or hidden.
- Buttons can switch between pre-defined styles.
- Background colours can change to suit the campaign.
This flexibility means the content dictates the design, not the other way round. Form follows function. Instead of forcing copy to fit a fixed template, the module adapts to the message.
Crucially, every module shares the same underlying components. The code for your primary button is written once and used in every module of every email, so if it ever changes, it changes everywhere at once.
Combining modules into any email
Emails are built by stacking modules: a header, a hero, a couple of content modules, a call-to-action and a footer. With a library of a few dozen well-designed modules, the number of possible combinations runs into the millions. That's enough to cover almost any campaign, and new modules can be added when a genuinely new need comes up.
For the team, building an email becomes a matter of composition: choose the modules that suit the message, add the copy and images, set the options, and preview. No code, and no waiting for development.
One system to rule them all
When every email is built from the same system, something powerful happens: every email stays linked to the system's source code. That has big benefits:
- Consistency is automatic. Every email uses the same tested components, so nothing drifts.
- Fixes happen once. If an email client update breaks a layout, it's fixed in the module, and every email that uses it is fixed too.
- Rebrands are painless. Change your typography or button style in the system and every email built with it follows, rather than hundreds of templates being updated by hand.
- New markets and languages are easy. They use the same modules, so there's no extra code to maintain.
Compare that with copy-and-paste production, where every email is a slightly different copy of the last one. We explain why that approach breaks down in Why copy-and-paste email production breaks.
Design systems as working tools
A design system is most powerful when it lives inside the tools your team uses every day. Modern email builders and marketing platforms can host a design system as a library of editable modules, turning it from a document into a working tool.
In practice, that changes everyone's role:
- Designers can build emails themselves, without ever touching code.
- Marketers and content creators collaborate directly in the tool, focusing on strategy and messaging.
- Developers stop building single emails and instead build and maintain the design system's source code, making sure everyone has the functionality they need while every email stays on brand.
Whichever platform you use, the principle is the same: build the system once, properly, and let everyone build on it.
Build your email design system
We design and build modular email design systems for the platforms teams already use, including Stripo, Chamaileon and Taxi for Email, and custom modular templates for HubSpot, MailChimp, Marketo and Adestra. Each one starts with your brand's components and ends with a library of modules your whole team can use. Book a free consultation to talk about yours.