Here is a pattern we see constantly: a brand invests heavily in its website - the type, the photography, the spacing all considered - and then its email looks like it came from a different company. Stock template, default font, an image-only layout that breaks in half the inboxes it lands in. The fix is not "a nicer template". It is a small design system you reuse on every send.
A system, not a template
A template is one fixed layout. A design system is a kit of parts - rules and reusable blocks - that lets you build many different emails that all look like you. That distinction matters: a sale email, a welcome flow and an editorial newsletter need different layouts, but they should feel like siblings. The system is what makes them siblings.
The building blocks
Type
Pick a small, legible type scale - a heading style, a body style, a caption, and a button label - with sizes that hold up on a phone. Use a web-safe stack with your brand font as the enhancement, because custom fonts do not render everywhere.
Colour
Define your core palette and, crucially, the roles: background, text, the one accent you use for links and buttons. Check every text-on-background pair for contrast so it stays readable for everyone.
Modular blocks
This is the heart of it. Build a set of reusable blocks - hero, product row, single feature, two-up, quote, footer - that snap together. Once you have the blocks, building a new email is assembly, not design from a blank page, which is why a system makes every future send faster.
Spacing and buttons
Agree consistent spacing and one button style. Make buttons real, tappable elements with generous padding - not tiny text links - so they work under a thumb.
Design for the inbox, not the artboard
Email is not the web. A few rules keep your sends working everywhere:
- Use real text, not images of text. Image-only emails break when images are blocked, hurt accessibility, and are more likely to trip spam filters.
- Lead with a clear hierarchy. One main message, one main action, and a layout that reads top to bottom on a narrow screen.
- Plan for dark mode. Many subscribers read in dark mode, which can invert your colours and make a logo disappear. Test it and set rules so your brand survives the switch.
Write it down
A system only saves time if the rules live somewhere - a short, shared document with the type scale, palette, blocks and a few do/don't examples. That is what lets a new send go out looking right without a designer rebuilding it from scratch every time. Start small, ship it, and grow the kit as you find blocks you reach for again and again.