In November 2023 the new Design System Components will be available to all Chamaileon.io customers. This is a minor leap toward the open-to-all Email Design System, a hassle-free email campaign creation, and fully-fledged brand consistency.

A design system is a structured collection of guidelines, assets, and tools that help design and development teams create consistent and cohesive user experiences across various digital products and platforms. It serves as a central resource that establishes and maintains visual and functional consistency in design, making it easier to create and maintain products with a unified look and feel.

Most design systems are based on the concept of atomic design, which is the easiest to translate as "LEGO for digital design."

It is built from atomic elements, merely variables, like colors or base images, such as a logo, or fonts. From those variables, components are formed that are still tiny design elements, defining one visual element at a time. Then, from components, designers create modules (in Chamaileon, we call them blocks) that represent larger sets of visual elements, meant to represent one logical section.

From these modules (sections, or blocks), anyone can put together a good-looking final design. In terms of emails, we recommend creating some templates based on the modules - with the flexibility of adding new ones or deleting unnecessary ones.

The actual version of Email Design System in Chamaileon is based on brand variables (default values for colors, fonts, etc.) and Components, which can be used to build email Modules, called Blocks. Components are smaller building bricks in an email design, that can be changed for all its instances at once.

Go to Components

Default brand values, aka. Variables can be used in email design Elements and Components for values at the element settings:

The brand variables can be set up for the brand design system independently in each email design. That's useful for teams working with multiple brands or experimenting with new looks.

The components are the LEGO bricks for our Design System. The following elements can be defined as Components:

Components can be defined in any email, by saving an element as a Component. The Components work just like in Figma or any other design tool: when we change something on the component, all the other instances will be changed - in other email designs as well. (tricky!!) Well, Components can also be detached from the original instance, so they can be different.

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.

Blocks can be saved, re-used, moved to another email/template, and can be locked down, to ensure safety and design continuity.

There aren't any changes or tricks considering templates - those are still working as locked-down email designs, that are easy to duplicate and create new emails from.

There are multiple ways to operate with templates as an email design system and to add Variables, Components, and Modules (Blocks) to them.

When a Component is edited and saved the changes take effect on all the instances of that Component within the current email.

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.

Updating brand Variables updates all the occurrences within the current email as well - that's inevitable.

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.