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

​
Getting Started

1

Navigate to Design Systems

  1. In Email Love Builder, go to Settings
  2. Click Design Systems
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.