Building our Email Design System: lessons, wins, and challenges 

At Customer.io, we help businesses send powerful, personalized messages across multiple channels. So you might assume we've always had a well-structured approach to designing our own emails. The reality? For far too long, we lacked clear guidelines on how our emails should look or a defined process for building them.

Without a structured system, our marketers had to navigate email design on their own. This led to inconsistencies, inefficiencies, and a lot of time spent reinventing the wheel for each new email.

That changed in late 2023. As part of our rebrand, we saw an opportunity—not just to refresh the look and feel of our emails but to fundamentally improve how we create them. The solution? Our first Email Design System (EDS).

An EDS is a set of guidelines, templates, and visual components that enable teams to build consistent, high-quality emails at scale—without needing to start from scratch each time.

We framed our goal as a challenge:

Can we create a system that allows marketers to build 90% of our emails without requiring a designer or developer?

Now, nearly a year and a half later, the results have exceeded our expectations.

Our marketers can now build emails for various campaigns independently, with minimal training. Developers are no longer needed in the process, and the Brand Studio team spends just 3–5 minutes on QA before an email is ready to send. And despite streamlining our workflow, we've maintained (and even improved) the quality and consistency of our email designs.

In this post, I’ll walk you through the steps we took to create our first EDS, share insights from our iterations (we're now on version 3), and highlight how our new Design Studio email editor has made maintaining and expanding our EDS even easier.

Before we could design a scalable system, we needed to fully understand what we were working with. That meant taking a step back and evaluating our existing emails. Without this step, we would risk building an EDS that didn’t actually solve our biggest challenges.

So, we started with three fundamental questions:

1. What do our emails currently look like?
2. What design elements do we need to build 90% of our emails?
3. How do we want to improve our email designs?

By answering these questions, we could create an EDS that was both practical and effective—one that streamlined our email creation process while ensuring our messages looked polished and on-brand every time.

To establish a baseline, we conducted a full audit of our emails—everything from newsletters and product announcements to transactional messages like password resets.

We captured screenshots of each email, categorized them in Figma, and grouped them by type:

With all our emails laid out side by side, patterns (and inconsistencies) became immediately obvious—such as displaying our logo in many different ways.

Key Insight: For our first version, we only captured desktop versions of our emails. We later realized this gave us an incomplete picture, as many customers read emails on mobile. Now, we always include mobile versions in our audits.

With just one click you can take a screenshot of your entire email

Next, we analyzed our emails to identify components and templates that would allow marketers to construct emails quickly and consistently.

At the most basic level, components are the core elements that make up every email—headings, paragraphs, buttons, and images. Some components are single elements, like a text block, while others bundle multiple elements together for consistency and efficiency. A good example is the footer, which includes social media links, our logo, legal disclaimers, and an unsubscribe option:

A footer is one of the most common use cases for a component.

We knew that standardizing these components would save time and ensure uniformity across our emails. But rather than trying to document and redesign everything all at once, we took a more strategic approach. We resisted the urge to recreate every pattern we had used in the past. Instead, we started small, focusing on a limited set of essential components that would cover the majority of use cases. Only after launching and gathering real-world feedback did we expand our library.

Besides all the basic components for paragraphs, headings and images we have components for testimonials, job listings and callouts which already have all the elements in place for marketers to edit or replace using a pre-determined library of assets.

Key Insight: By starting with a streamlined set of components, we avoided overcomplicating the system and made adoption easier for our team. Instead of overwhelming marketers with too many options, we provided just enough structure to make email creation faster while still allowing for flexibility.

It is a known medical fact that 99.98% of marketers do not start an email from scratch but rather use a template as a stating point.

While building components ensure consistency at the individual level, templates provide a structured starting point for entire emails. We designed six core templates that covered our most common use cases—allowing marketers to quickly adapt pre-built layouts instead of reinventing them each time. Our goal was to strike a balance between structure and flexibility. Templates needed to be rigid enough to maintain consistency while still being adaptable enough for marketers to customize as needed.

All of our templates on version 3 of our EDS.

Key insight: Creating a template for every possible scenario wasn’t necessary—marketers would always need to customize emails to some degree. Instead, by ensuring our templates were flexible and easy to adapt, we gave our team a strong starting point without restricting their ability to personalize content.

With our core components and templates defined, the next step was to refine our designs and ensure they not only aligned with our brand but also stood out in crowded inboxes. To do this, we looked outward—gathering inspiration from a variety of sources to inform our approach.

We dedicated a significant amount of time to researching great email designs and exploring platforms like Emails, Dribbble, and Pinterest. Just as we had done with our own email audit, we compiled these references in Figma, creating a visual library of effective layouts, typography, and design elements.

Rather than limiting ourselves to competitors or our own industry, we looked across a wide range of brands. By looking at what other industries are doing, we discovered novel solutions that could help our emails stand out in the inbox.

For the latest version of our EDS, we drew inspiration from brands known for their clean, well-structured emails, including Linear, Doist, Retool, Kit Wise, and Leaf. Each of these companies had elements we admired—whether it was their use of whitespace, typography, or visual hierarchy—which helped inform our own approach.

Key insight: When saving reference emails, we made notes on what we liked about each one. Specific observations helped us translate those ideas into our own design system.

Pro tip: Collecting emails that you like for inspiration as images is nice, but you know what’s even better? Saving emails you like as code. With Design Studio you can forward any email you like to your Customer.io workspace. Once inside Design Studio you can see it rendered live in all of its glory (no more blurry screenshots) and fully inspect its code.

We keep a folder of emails we like and use its ‘import email address’ to send references to it from any inbox

Now, this might sound like a hot-take but at Customer.io we made the deliberate decision to skip Figma entirely when designing our EDS.

Designing for email is fundamentally different from designing for the web. Unlike a webpage, where you have near-total control over layout and typography, emails are subject to strict technical limitations, accessibility concerns, and the unpredictable quirks of different email clients.

• That beautiful custom font from your brand guidelines? Gone.
• Pixel-perfect spacing? Every email client renders things slightly differently.
• Your lovingly crafted color combination? Destroyed by iOS dark mode.

Designing for email is a never-ending game of tradeoffs.

So, instead of designing in an environment that wouldn’t translate well to email, we went straight to Customer.io's Design Studio. This ensured that everything we created was immediately functional and fully optimized for real-world constraints.

[ IMAGE ]

Key insight: By designing directly in our email editor, we eliminated the frustrating back-and-forth of trying to convert pixel-perfect mockups into functional emails. Instead, we designed within the actual constraints of email, making the process faster and more efficient.

We can design, iterate on, preview and send test emails of our component and templates in a single place.

Once the EDS was deployed, we knew that making system-wide changes later would be time-consuming—and potentially confusing for the people using it. To prevent unnecessary rework, we carved out dedicated time to test every building block and template in real-world scenarios, ensuring everything functioned as intended before rolling it out to the team.

For this testing phase, we focused on three key strategies:

While filler text can be useful in early design stages, it doesn’t reflect actual email structure, readability, or how real content will flow. Instead of creating new text just for testing, we pulled content from previous emails and applied it to our templates. This allowed us to check for proper spacing, line breaks, and overall legibility with realistic content.

If you want to spice things up, you can always use the lyrics of 1984 hit ‘Careless Whisper’ by George Michael like we did in version 1 of our EDS.

While Design Studio’s preview mode is a great way to quickly check how an email renders, nothing beats seeing it in a real inbox—the way our customers would experience it. Every email client renders HTML slightly differently, and tiny variations in spacing, fonts, or responsiveness can become noticeable once an email is actually sent.

If we tweaked a pixel, we would send ourselves a test email to preview it and now assume it would work because it looked good in the preview.

Preview options galore!

After weeks of refining our EDS, we knew tunnel vision was a real risk. At this stage, it’s easy to overlook small errors because you’ve been staring at the same designs for too long.

To counter this, we brought in people who hadn’t been involved in the project to review our emails with fresh eyes. Their feedback helped us catch inconsistencies, unclear formatting, and usability concerns we had become blind to.

Key insight: The best way to test an EDS isn’t in theory—it’s in action. By using real content, sending real test emails, and gathering real feedback, we ensured our EDS worked in actual marketing workflows rather than just looking good in a preview.

Pro tip: Asking multiple people to review test emails in their inboxes can be overwhelming and inefficient. Instead, we used Design Studio’s built-in feedback feature to generate a shareable link, allowing anyone to comment directly on the design and seamlessly switch between mobile and desktop views—all without cluttered email threads or scattered feedback.

The feedback link can be shared with anyone, even people without a Customer.io account.

In this post, we covered how we audited our emails, identified core patterns, and built a functional EDS from scratch.

But having a system in place is only half the battle. How do you roll it out to your team, ensure adoption, and iterate effectively?

That’s exactly what we’ll cover in Part 2—stay tuned!

• Ready to start creating your own Email Design System with Customer.io (http://Customer.io)? Start a 14-day free trial today!