Chamaileon's Email Builder is powered by a flexible, extensible Email Design System. It helps teams create consistent, on-brand, and visually appealing emails across use cases—while maintaining scalability, dynamic templating, and ease of creation.
The Design System is built around:
Brand Elements (design variables)
Reusable Components
Blocks (email modules)
Templates
This structure supports fast content assembly, programmatic theme changes, and centralized control over brand assets.
Click there to access the design system(s).
What is a Design System?
A Design System is a centralized library of rules, styles, variables, and reusable elements that ensures visual and functional consistency across all designs.
In Chamaileon, we tailor this to emails specifically.
Think of it like LEGO:
Variables = the basic pieces (e.g. colors, fonts, icons)
Components = design atoms (e.g. buttons, dividers, headlines)
Blocks = compound modules (e.g. product lists, hero banners)
Templates = final compositions
Brand Elements (colors, fonts, etc.) --> Components (paragraph, button, etc.) --> Blocks (modules) --> Templates
Design System Structure in Chamaileon
Chamaileon's Email Design System operates through deeply structured and reusable building blocks. Key design system elements:
Brand Elements (Variables)
Variables make designs adaptable, brand-agnostic, and easily updatable. Each variable has a generic name and a helpful description to guide usage and support theme swaps.
Supported variable types:
Colors (primary, secondary, neutral, accent, semantic, etc)
Fonts (font-primary, font-secondary)
Images (logo-square-light, logo-wide-dark)
Links (social-x, website-contact, unsub-merge-tag)
Text (alt-logo, view-in-browser, legal-footer)
Updating Brand Elements updates all the occurrences within the current email design system everywhere (all Components, Blocks, Templates, Emails) - that's inevitable.
Components
Components are the design atoms that can be reused and updated centrally. They include:
Text elements (e.g.
h1-title-dark,p-paragraph-neutral-lighter)Images (e.g.
portrait-fullwidth,badge-right)Videos (e.g.
video-fullwidth-primary)Buttons (e.g.
primary-light,text-warning)Dividers (e.g.
divider-neutral,divider-transparent)
Components behave like in Figma—update one, and all instances reflect that change across emails (unless manually detached).
When a Component is edited and saved the changes take effect on all the instances of that Component within the current email design system (and all of its templates, emails, etc) all of a sudden.
This "Update all" trick doesn't work with Blocks - those are too complicated and flexible to update without seeing them in the actual designs - it is better this way for peace of mind.
Blocks (Modules)
Blocks work like they worked kind of always in Chamaileon editor.
These modules are the rows of the email design and make the structure of the overall design.
In Chamaileon, blocks are categorized using layout categories (like Header, Hero, Section, Footer, etc.) to help users find the right building block for any part of their email quickly and intuitively.
Block categories are not pre-defined, you can build them based on your needs.
Blocks can be saved, re-used, moved to another block category, even in bulk, and can be locked down from the editor, to ensure safety and design continuity.
Templates
Templates are composed of blocks and act as the locked-down versions of your email designs.
Use templates to:
Create ready-to-use campaigns fast
Onboard new teammates
When you switch to a design system for a project, you'll be able to add new email based on the Design System Templates, imported code, and – of course – from complete scratch.
What is the best workflow to create our own Email Design System?
As mentioned above the Design System is really flexible and kinda set together from various elements in Chamaileon right now. Nevertheless, we recommend the following workflow to set it up for your brand.
How to Start Building Your Email Design System
There are two ways to begin—but both paths lead to setting up your design system:
Import an existing HTML email (like a master template) and convert it into a design system
Create a new design system from scratch, following your brand’s guidelines
Once you're in, follow these steps:
1. Set Up Brand Elements
Start by identifying key design variables from your brand guidelines or source email. Add the following as Brand Elements:
Colors: Pick the distinct ones only—if two HEX codes are nearly identical, merge them.
Fonts: Use your main font pair.
Images: Logos, icons, or recurring brand visuals. Stick to 1–2 aspect ratios.
Text Snippets: Reusable copy like legal notes, greetings, or footers.
Links: Define links that are repeated across emails (e.g., social media profiles, unsubscribe, view-in-browser).
➡️ Keep it clean and simple—less is more when setting up for reusability.
2. Define Reusable Components
Build components from recurring design elements:
Buttons, paragraphs, headlines, dividers, etc.
Reuse brand elements (colors, fonts, etc.) in every component.
Stick to what’s visible in the original design—no need to overthink.
➡️ Don’t aim for perfection right away. You’ll refine as you go.
3. Assemble Blocks (Modules)
Now, group your components into Blocks that represent meaningful layout sections:
Hero sections, product lists, content sections, etc.
Use as many Components and Brand Elements as possible.
If you’re missing a reusable element, go back and create or update it.
➡️ Use placeholder content (images, text) when needed—it’s about structure and logic first.
4. Create Your Templates
Use your Blocks to build out complete Templates for your most common email types:
Newsletters, promos, onboarding sequences, internal messages, transactional emails, and more.
➡️ Once your design system is in place, creating new emails becomes a fast, flexible, and consistent process.
Can I have multiple design systems for my different projects?
Yes, you can. Chamaileon supports multiple brand design systems.
On each project you can choose the design system the project uses.
Be aware that you cannot delete a design system while it is in use in a project.