Design System Components are 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.
What is a Design System?
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.
Variables (colors, fonts, etc.) --> Components (paragraph, button, etc.) --> Blocks (modules) --> Templates (kind of final design)
The structure of the Email Design System in Chamaileon.io
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.
Watch the setup video for Brand Variables and Components:
Variables
Default brand values, aka. Variables can be used in email design Elements and Components for values at the element settings:
Colors
Fonts
Images (logo, icons, etc.)
Links (URL-s)
Texts (text snippets)
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.
For example, when adding the same email icon to many places, defining it as a variable might be easier than always seek for it in the library.
Components
The components are the LEGO bricks for our Design System. The following elements can be defined as Components:
Text (headlines, paragraphs, lists, etc.)
Images
Videos
Buttons
Dividers
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 (Modules)
Blocks work like they worked kind of always in Chamaileon editor.
Defining blocks, saving them into the design system video:
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.
Templates
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.
Managing the Email Design System - Through Templates, Template Modules (Blocks), and Template Components
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.
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.
Import and existing email HTML OR create a new email design based on the brand design guidelines.
While creating the design, always define new Blocks (Modules) for the contextual sections.
While editing the sections, save Components always when possible, and always re-use them.
When defining a Components or other Element, make sure Variables are used for the color, font, etc. values.
Be aware to use variables while editing for all the colors and fonts.
Try to define variables for the most commonly used images, like logos.
For links/URLs that are occurring through a set of emails, like social media platform account URLs, define a Variable.
If there are any texts important and re-used in many emails, like footer notes, the greeting from the CEO, etc. define a Variable.
When the email is ready, with all the possible Components and Variables used save this email as a template (it will lock it down) and duplicate it when a new email instance (aka, campaign, or newsletter) needs to be created.