Using your design system for email

A design system is essentially an organized way to produce campaigns more consistently. This could be as simple as a brand style guide, or it can get more complex, like a collection of design patterns and assets.

Abstract design system elements

Different types of design systems

A design system can take different forms: a brand guide with a design language of colors, spacing, typography, etc; design software with a library of patterns and components; documentation of processes and workflows for design and content; team communication and collaboration around creatives. Or any combination of the above!

A library of design patterns and documentation around their use in your emails acts as a tool that can be shared among your team members for better collaboration, building consistent, high quality campaigns. This modular approach works well for maintaining updates to your design system, allowing it to evolve.

Making your design system interactive

The Blocks Edit visual editor follows the modular method for you to be able to make your design system editable. Setting editable options around components act as rules for how they can be used, with guardrails in place to ensure following brand guidelines and avoid deviating away from the design's theme. This also reduces the need for documentation around your design since guidelines are inherent in the setup.

Because the editable options are added as tags among your HTML, your code remains intact and flexible to work with. The editor is designed to work in the same way you would manually put together pieces of code and update text and images in it. But it's all done visually, so anyone can easily put together an email. And updates to the design can be easily made as needed.

A collaborative design system

Blocks Edit screenshot of the visual editor with the team comments in the activity panel

With Blocks Edit, your team can now join in on putting together emails in a way that’s intuitive to them and lets them collaborate on the review process. The visual editor interface allows for focusing on the content of emails, knowing that you have a solid design foundation to work from.

"With Blocks Edit, we can import our own HTML templates and turn them into drag-and-drop templates that are always on brand. We can also limit the ability to change copy and styling options, so that anyone can use the tool and expect an on-brand result."

— Ralph van den Broeck, Marketing Automation Manager, Fisher & Paykel Appliances

Ready to use your design system?

Use Blocks Edit for free