What is an email design system?

An email design system is the single source of truth for how your brand looks and works in email. It replaces your templates. Every campaign your team builds, promotional or lifecycle, is made from it, and a change to the design system reaches every campaign built on it.

Templates and design systems

A template is a fixed piece of HTML. Some templates have editable areas, but the layout is set, and when a campaign needs something the template doesn't do, someone copies it and changes the copy. After a few years, a large team has dozens of versions of the same template, and nobody knows which one is current.

A design system is built differently. It has:

• A base layout that wraps every campaign: the header, the footer, and settings that apply to the whole campaign.
• Approved modules built for the brand, such as a hero, a product grid, or an article with an image. Each module has settings that control how it looks and behaves: switch a feature on or off, pick a variant, or change how the content is displayed. Inputs take the content itself: text, images, links, colours from the brand palette.
• Brand tokens that every module reuses: colours, font stacks, icon sets, spacing.
• Rules on every input, so the design holds up whatever goes into it. A headline has to stay within a set number of characters, an image has to be at least a certain size, alt text is required, and colours can only come from the brand palette.
• Variations for languages, markets and brands. Two similar brands can share one design system and still have their own header, footer and fonts.

Building a design system means designing the editing experience. You decide which modules a marketer can choose from, which settings they see, and what stays fixed. Everything they build from it is on brand because the design system only offers on-brand choices.

What about our Figma design system?

A design system in Figma defines what emails should look like. It does not define how they work, and you cannot build a campaign from it. An email design system is what you get when you turn the Figma design into HTML and Liquid: modules with settings, rules and tokens that a campaign can be built from.

When a team needs one

These are the signs we hear most often from large email teams:

• The same template exists in many copies, each changed a little for one campaign or one market.
• Every change is a ticket. Changing a button colour or adding a field needs a developer, or the one ESP specialist who knows the setup, and that person becomes the bottleneck.
• The design drifts. A designer makes a strong email design, it is rebuilt in the ESP's builder, and the builder lets anyone change anything. One day the call to action is red instead of green, and nothing in the setup could have stopped it.
• More teams build campaigns. More markets, more brands, an agency, and now AI agents all need to produce campaigns that look like the same company sent them.

The common thread is control. When campaign production has to scale across teams without the brand drifting, templates stop working.

What makes a good one

Fewer, more flexible modules. It is easy to end up with too many modules. Take an image next to some text: rather than one module with the image on the left and another with the image on the right, build one module with a setting that switches the side. Marketers find the right module faster, and there is less code to maintain.

Lock down enough, but not everything. Marketers should be free to focus on the content, and have enough options to get their message across. Each organisation has to decide where that line is, because every option you add is also something that can go wrong. Our advice is to start more locked down and open up when requests come in. Adding a setting later is easy. Taking one away from a team that uses it is not.

Built to grow. A good design system is easy to extend with a new module and easy to support across brands and languages without copying code.

Who owns it

Someone has to own the design system. In large organisations that is usually an email developer, a designer with coding experience, or an ESP specialist, and some companies have their agency own it instead.

More and more, we also see people without that technical background take ownership. They work on the design system together with Betty, our AI agent, who builds new modules and updates existing ones with them. Because every change can be previewed in real email clients before it goes live, someone who is not an email specialist can still make changes safely.

The design system keeps changing: new modules, requests from markets, new languages. Because a change reaches every campaign, the owner needs to see and test it before it goes live. In Better Email, a new version can be tested in real campaigns before it is published.

Why it matters more with AI

Ask a general AI tool for an email, and it will write some HTML. The result may not follow your brand or your rules, and it will often break in email clients, because the AI doesn't know the fixes each client needs. Someone then has to check everything it produced, which moves the bottleneck from building the campaign to checking it.

A design system gives the AI a structure to work within. It shows what is possible, what is not, and what a good campaign looks like for your brand. An AI agent that builds from approved modules and brand tokens produces campaigns your team doesn't have to check line by line.

The structure goes beyond the existing modules. Because a design system has brand tokens and modules that follow the same patterns, an AI agent can build a new module for one campaign that still matches the rest. That is how AI Blocks in Better Email work.

What it looks like in practice

Fritz Hansen went from 1 person building campaigns to more than 16, and from 50 to 750 campaigns a year across 8 countries. Sixteen people can build on-brand campaigns because they all build from the same design system.

Co-op came from Taxi for Email with five design systems and merged them into one when they moved to Better Email. We wrote about how that migration works in How to migrate from Taxi for Email.

To see how design systems work in Better Email, with modules, rules and Liquid, read about the design system, or how to go from a static template to a design system.