Creating a Design System

This guide walks you through building your first design system, from initial setup through adding components, layouts, and base styles.

Getting Started

Step 1: Navigate to Design Systems

1. In the Email Template Builder, go to Settings

2. Click Design Systems

Step 2: Create a New Design System

1. Click the Create Design System button

2. You'll be prompted to enter:

   • Name: A clear name for your design system (e.g., "Acme Corp Marketing", "SaaS Onboarding")

   • Description: Optional details about when and how to use this design system

   • Body Width: The default email width in pixels (standard is 600px)

3. Click Create to proceed

Adding Components

Components are the reusable building blocks of your design system. They're organized by category to keep everything organized and easy to find.

To Add a Component:

1. Click Add Component in your design system

2. Choose a Category: Select which category your component belongs to (see categories below)

3. Paste MJML Code: Enter the MJML code for your component

4. Name the Component: Give it a descriptive name (e.g., "Hero Image with Text", "Primary CTA Button")

5. Click Save

A thumbnail is automatically generated from your component, making it easy to visually identify components in the editor.

Component Categories

Organizing components by category makes them easy to find when building emails. Here's what each category is for:

Header

• Top banners and hero sections

• Logo placements

• Navigation elements

• Announcement bars

Content

• Text blocks and paragraphs

• Image plus text combinations

• Feature lists and bullet points

• Product showcases

CTA (Call-to-Action)

• Standalone buttons

• Button sections

• Action-oriented containers

Footer

• Unsubscribe links and preferences centers

• Social media links

• Legal and compliance text

• Company contact information

Container

• Structural wrappers

• Layout dividers

• Section containers

Styles

• Decorative elements

• Dividers and spacers

• Borders and lines

Adding Layouts

Layouts are complete email templates that serve as starting points for new emails. Rather than dragging individual components together, use a layout to get a fully-structured template.

To Add a Layout:

1. Click Add Layout in your design system

2. Paste Full MJML Template: Paste a complete, working MJML email template

3. Name the Layout: Give it a descriptive name (e.g., "Newsletter Template", "Product Announcement")

4. Add Description: Optional notes about when to use this layout

5. Click Save

Layouts appear as starting point options when team members create new emails from your design system.

Setting Base Styles

Base styles are global styling rules that automatically apply to all emails using your design system. They're defined as mj-head attributes in MJML and control:

• Fonts: Default typeface, sizes, and weights

• Colors: Primary brand colors, text colors, backgrounds

• Spacing: Default padding, margins, and gaps

• Line Heights: Default text spacing

To Add Base Styles:

1. Go to the Base Styles section

2. Enter your styling attributes in the provided editor (these become your mj-head configuration)

3. Click Save

All templates created from this design system will inherit these styles, ensuring brand consistency without requiring designers to set styling on individual elements.

Importing Components from MJML

Have an existing email template you'd like to break down into components? You can import a full MJML email and automatically extract sections into individual components.

To Import Components:

1. Click Import from MJML in your design system

2. Paste your complete MJML email template

3. The system automatically detects major sections (mj-section tags) and extracts them as individual components

4. Review the extracted components and assign them to appropriate categories

5. Click Finish Import

This is a fast way to populate your design system with components from existing successful email campaigns.

Tips for Success

• Keep Components Focused: Make each component do one thing well (e.g., a header component, not header + footer)

• Use Descriptive Names: Name components based on their purpose, not their appearance

• Start with One Layout: Begin with a single, flexible layout template and add more as you identify patterns

• Test Base Styles: Verify that your base styles render correctly across email clients before finalizing

• Document Usage: Use component descriptions to guide your team on when and how to use each piece

What's Next?

Once your design system is set up, learn how to use it by checking out Using a Design System.