Skip to main content

Creating your first design system

This guide walks through the fastest path to a working design system. You do not need a perfect design system on day one. The goal is to understand the core model: template base, modules, settings, and preview.

Before you begin​

You should have:

  • a rough HTML email layout to work from
  • a sense of which parts should stay global
  • a sense of which parts marketers should be able to edit

Step 1: Create the design system​

Create a new design system and open it in the Design System Editor.

Start with the template base (the design system's base layout), not the modules. Paste in the outer wrapper for the email and make sure it contains {{ content }} where the modules should render.

<html>
  <head></head>
  <body>
    <table>
      <tr>
        <td>Header</td>
      </tr>
    </table>

    {{ content }}

    <table>
      <tr>
        <td>Footer</td>
      </tr>
    </table>
  </body>
</html>

Step 2: Turn content areas into modules​

Look at the parts of the email that marketers should be able to add, remove, or repeat. Those should become modules.

Common first modules:

  • hero
  • article card
  • image-and-text section
  • CTA banner
  • footer variation

Give each module a clear name. If the module list is hard to scan, the Campaign Editor will be hard to use later.

Step 3: Add settings and inputs​

Once the code structure exists, decide what should be editable.

Start with one simple setting group. For example:

  • Content setting
    • headline input
    • body input
    • CTA text input
    • CTA link input

The Name is what users see in the editor. The Key is what you reference in Liquid.

Step 4: Connect the inputs to Liquid​

After you create the setting and inputs, use those values in the module code.

For example:

<h2>{{ content.headline }}</h2>
<p>{{ content.body }}</p>
<a href="{{ content.cta_link.url }}">{{ content.cta_text }}</a>

The exact structure depends on your setting and input keys, but the idea is the same: define the field in settings, then render it in Liquid.

Step 5: Preview the marketer experience​

Open preview and test the module the way a marketer would use it:

  • change the content
  • check desktop and mobile behavior
  • confirm the defaults look good
  • make sure labels are easy to understand

If the preview feels awkward, fix the design system now. Design system ergonomics matter just as much as the HTML.

Step 6: Save and create a revision​

Once the first version works, save it and create a named revision. This gives you a clean milestone before you continue building the module library.

What to do next​

After the first design system works, the next improvements are usually:

  • better setting grouping
  • stronger defaults
  • cleaner naming
  • repeatable settings for list-like content
  • feed-backed settings for structured external data