> ## Documentation Index
> Fetch the complete documentation index at: https://help.emaillove.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Creating a Design System

> Build your first design system: components, layouts, and base styles.

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

## Getting Started

<Steps>
  <Step title="Navigate to Design Systems">
    1. In Email Love Builder, go to **Settings**
    2. Click **Design Systems**
  </Step>

  <Step title="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
  </Step>
</Steps>

## 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](/builder/design-systems/use).