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, quick 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 styles (elements) (e.g. h1-title-dark, p-paragraph-neutral-lighter)
Images (we recommend placeholders) (e.g. portrait-fullwidth, badge-right)
Videos (e.g. video-fullwidth-primary)
Buttons (e.g. primary-light, text-warning)
Dividers (e.g. divider-neutral, spacer-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.

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 define 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.

Bulk Design System Module operations in Chamaileon

The "Update all" trick doesn't work with Blocks (yet) - those are too complicated and flexible to update without seeing them in the actual designs - it is better this way for peace of mind.

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.

How to Build Your Email Design System (Guide)

Chamaileon's design system is flexible and modular, allowing you to build from scratch or adapt existing email designs—especially if you're an existing user with templates already in place.

You can start along two paths but both leads to the same process:

Import an existing HTML email (like a master template) and convert it into a design system, going through its elements one-by-one systematically.
Create a new design system from scratch, following your brand’s guidelines.

No matter where you start, structure the process as follows, defining:

Brand Elements (variables) → Components → Blocks (Modules) → Templates

This process ensures your emails stay consistent, on-brand, and scalable across use cases.

Before you start:

General Recommendations & Naming Best Practices

When creating and managing your email design system, following a few key conventions will make your setup scalable, and easy for you (or others) to use.

Use Clear, Consistent Naming
1. We recommend kebab-case (lowercase letters with hyphens, e.g., font-primary, button-warning) for all variables, components, and block names.
2. Avoid using too general terms (e.g., blue, Arial) in variable names. These may change when adapting the brand or theme and in fact useless in schematic design thinking.
3. Instead of generic hierarchy terms beyond primary/secondary, prefer purpose-driven or context-aware names like accent, highlight, neutral-darkest, etc. For God's sake, don't call a rarely used color denary...
Add Descriptions to Variables
1. Every variable should have a clear description. Think of it as internal documentation for your design system.
2. A good description explains both:
  1. How to use it (e.g., “Used for product list headlines”)
  2. Where it appears (e.g., “Background color for newsletter sections”)
Design for Understanding
1. Remember: others (or future you) will need to understand and use your system.
2. Names and descriptions should help choose the right component or variable at a glance — without guessing or trial and error.
3. If there are two close versions of anything, iterate with merging them - simplicity always wins.

By following these conventions, your email design system won’t just be consistent — it will be scalable, adaptable, and easy for any team member to navigate.

Once you're familiarized yourself with the concept, follow these steps:

Email Design System Building Guide

1. Set Up Brand Elements

Start by identifying key design variables from your brand guidelines or source email(s). Define the following as Brand Elements:

Colors 🎨

We strongly recommend for colors to be categorized by purpose rather than exact hue. This helps maintain a scalable and theme-agnostic system.

Use variable names that describe their role, not the color itself - we made sure a color swatch is always displayed next to the color name.

Primary – The dominant brand color. Often used in logos, buttons, highlights.
Secondary – A complementary color that adds depth and supports the primary.
Neutral – For structure and readability: backgrounds, text, dividers. Add white and black as neutral-white and neutral-black. Don't forget about orphan #ffffff-s here and there, define them as variable as well.
Accent – A single highlight color for drawing attention to specific UI elements.
Semantic – Purpose-based colors: info, success, focus, warning, error.

Each role may use shades where applicable:

Use suffixes like -lighter, -darker, -lightest, -darkest to indicate tonal shifts.
Example: primary-darkest, neutral-lighter, accent1.

➡️ Naming Tip: Use primary, not Unicorn blue; use neutral-darkest, not Space gray.

Fonts 🔤

Use your main font pair (e.g., headline and body font) and not too much other fonts.

Keep variable names universal (e.g., font-primary, font-secondary) and avoid naming them after specific typefaces like Roboto. Instead, use the description field to explain usage, such as:

“Used for all headlines (H1–H3) and button text.”
“Body font for paragraphs, captions, and legal footers.”

➡️ This makes it easier to update fonts or switch design theme later without breaking.

Images 🖼️

Add logos, icons, or recurring brand visuals, like backgrounds, icons. Stick to 1–2 aspect ratios if possible. These are not placeholders in a design template - these are the images you want to see in the final emails, that you can update/replace with a flip of a switch when needed.

Use standardized image variable names like:

logo-square-dark, logo-wide-light

This helps ensure contrast:

Dark logos are used on light backgrounds,
Light logos on dark backgrounds.

Avoid naming images by exact pixel sizes or ratios. Focus on orientation instead:

Square (1:1) – e.g., avatars, social icons
Wide (2:1 to 3.5:1) – e.g., horizontal brand logos
Fullwidth - going from side-to-side, but defining content images like a side-to-side hero image might not best place here, that goes to the "Modules" section.

➡️ Image names should describe function and contrast, not size or file name. Size could change with responsiveness, using file/branded names in the design system is inefficient.

Text Snippets ✍️
These are reusable bits of copy, such as:

Legal disclaimers
“View in browser” lines
Alt-text placeholders
Promo tags or slogans

that are used across templates and might need updates all at once.

Examples: alt-logo, legal-footer, promo-intro, unsub-text

➡️ You’ll be surprised how much time this saves. Need to update a legal footer across all templates? Done in seconds. This isn’t placeholder text — it’s content that often requires multi-department approval for even the smallest change.

Links 🔗

Define URLs that are reused across templates to simplify editing.

Example link variables:

website-blog, website-contact
social-x, social-instagram
view-in-browser, unsub-merge-tag

2. Define Reusable Components

Keep it clean and simple—less is more when setting up for reusability.

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. Try to not define too much details within the Component like spacing - that should be controlled on the Module level.

➡️ 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.

Variable/Component Naming Quick Reference Table

Element Type	Naming Format	Examples	Tips
Color Variables	`role[-shade]`	`primary-darkest`, `accent1`, `neutral-white`	Use roles like `primary`, `secondary`, `neutral`, `accent`, `success`. Avoid using color names (e.g., `blue`).
Font Variables	`font-[role]`	`font-primary`, `font-secondary`	Avoid using font family names (e.g., `font-roboto`). Explain usage in description.
Image Variables	`logo-[orientation]-[contrast]`	`logo-wide-dark`, `logo-square-light`	Use `square` or `wide` for aspect ratio and `light`/`dark` for contrast. No pixel values.
Text Variables	`purpose-context`	`alt-logo`, `legal-footer`, `promo-tagline`	Use for alt texts, disclaimers, labels. Group by use, not content.
Link Variables	`type-platform` or `type-purpose`	`website-contact`, `social-x`, `unsub-merge-tag`	Define platform or function; use kebab-case.
Text Components	`tag-type[-color]`	`h1-title-dark`, `p-paragraph-neutral-lightest`, `li-list-bulleted-accent1`	Always include the HTML tag (`h1`, `p`, `li`). Add color variable if relevant.
Buttons	`style-type`	`primary-dark`, `text-warning`	Use contrast or purpose as the suffix. Don't include size or spacing.
Dividers	`divider-[color]`	`divider-transparent`, `divider-neutral`	No need for thickness, spacing, or layout hints.
Image Components	`orientation[-alignment]`	`portrait-fullwidth`, `badge-right`	Add alignment if applicable. Use consistently for layout-critical images.
Video Components	`video-[layout]-[color]`	`video-fullwidth-primary`, `video-thumbnail-neutral`	Indicate aspect/size and color of play icon if needed.
Module (Block) Names	`role-format[-modifier]`	`items-col3`, `narrative-fullwidth`, `article-split-loop`	Avoid layout names like `hero`. Use functional role + structure.