Getting started with Email Design Systems

This article introduces Email Design Systems and maps out the articles that cover each part of building one.

An Email Design System (EDS) is the set of components your team builds emails from. It controls what people can drag into an email in the editor, which parts of each component they can change, and the HTML each component produces when the email is exported. Every email uses one EDS.

AI agents build emails from the same EDS. When an agent builds or edits an email for you, it works within the same components, fields and rules as your team, so it can’t produce anything your EDS doesn’t allow.

Because the HTML lives in the EDS, people and agents building emails don’t need to touch code, and every email stays on brand. When you change a component, every email that uses it picks up the change.

What an EDS is made of

• Components are the content blocks people add to emails, such as a header, a hero image or a product grid.
• Fields are the parts of a component people can change in the email editor, such as a headline, an image or a background color.
• Templates are the HTML and Liquid code each component outputs.
• AI intent metadata tells AI agents what each component is for and when and how to use it, so they pick the right component and put it in the right place. You add it in each component’s Description setting.
• The container component is the outer shell of every email, with the <html>, <head> and <body> tags and the area other components go into.
• Design tokens are shared values, such as brand colors, that any component can use.
• Custom styles are extra formatting options for rich text fields.
• Brand profiles adapt the EDS for different brands, clients or types of email.

Build your first EDS

1. Create an Email Design System.
2. Open it in Component Builder.
3. Set up the container component.
4. Add your components and write their templates.
5. Add fields so people can edit each component.
6. Apply your changes so they can be used in emails.

All Email Design System articles

Setting up and building

• Managing Email Design Systems: create, edit, clone, archive and share an EDS.
• Component Builder: find your way around, preview, and apply or discard changes.
• Components: add, edit, reorder, restore, deprecate and delete components.
• Fields: add fields, group them, show them conditionally and validate them.
• Rich text formatting and custom styles: control the formatting in rich text fields.
• Design tokens: define shared values once and use them everywhere.
• Brand profiles: run several brands from one EDS.

Writing templates

• Component templates: how templates work, step by step.
• Template examples: ready-made solutions for common needs, such as adding the preheader or a theme setting.

Reference

• Field type reference: every field type, its options and its validation rules.
• Template reference: all of EmailShepherd’s template syntax and the render context.

Working in your own code editor

• The EDS SDK: edit your EDS locally, in Git, or with an AI coding agent.