Using a Design System

This guide explains how to create and edit emails using a design system, and how to make the most of your design system's components, layouts, and base styles.

Creating an Email from a Design System

Step 1: Start a New Email

1. Click Create New Email in the Email Template Builder

2. You'll be presented with two options:

   • Start from Scratch: Create a blank email

   • Start from Design System: Select this option to use one of your design systems

Step 2: Choose Your Design System

1. Select Start from Design System

2. Choose the design system you want to use from the dropdown

3. Select whether you want to:

   • Start with a Layout: Begin with a pre-structured template (recommended for most users)

   • Start with Components: Begin with a blank canvas and build from individual components

Step 3: Start Building

Once you've selected your design system and starting point, you're ready to begin editing your email.

The Design System Components Panel

When editing an email created from a design system, the left panel displays all components from that design system organized by category.

Component Organization

Components are grouped by category for easy discovery:

• Header - Top sections and navigation

• Content - Body text and imagery

• CTA - Buttons and call-to-action sections

• Footer - Legal, social, and unsubscribe content

• Container - Structural elements

• Styles - Decorative elements

Click a category to expand and view all components in that category.

Adding Components to Your Email

Drag and Drop

1. Click and hold a component from the left panel

2. Drag it onto your email canvas to the position you want

3. Release to place the component

Replace Existing Sections

1. Hover over any section on your canvas

2. Click the component icon that appears

3. Select a new component from the dropdown to swap it in

This allows you to quickly try different variations without deleting and re-adding content.

Base Styles

Base styles from your design system are automatically applied to your email. You don't need to do anything special to activate them.

What Base Styles Control

• Typography: Default fonts, sizes, and weights

• Colors: Text colors, backgrounds, and accent colors

• Spacing: Padding, margins, and gaps between elements

• Line Heights: Default text line spacing

Overriding Base Styles

While base styles provide consistency, you can override them on individual elements when needed:

1. Select an element on your canvas

2. Modify its styling in the properties panel

3. Your custom styling takes precedence over base styles

Use overrides sparingly to maintain brand consistency.

Using Layouts

Layouts are complete email templates that serve as starting points.

Applying a Layout

1. When creating a new email, choose Start with a Layout

2. Select the layout from the available options

3. Your email canvas populates with the complete template

Customizing a Layout

Layouts are fully customizable. After applying a layout:

1. Edit any text, images, or content

2. Swap components by hovering over sections

3. Add or remove sections as needed

4. Adjust colors and spacing for your specific campaign

Layouts provide a foundation, but you have complete flexibility to customize them for each email.

Section Locking

If you're a workspace owner, you can lock specific sections to control how editors use templates.

Why Lock Sections?

Locking sections allows you to create structured templates where:

• Certain branding elements (headers, footers) remain unchanged

• Editors can only customize designated content areas

• Compliance and legal sections are protected from accidental modifications

Locking a Section

1. Select a section on your canvas

2. Click the lock icon in the section toolbar

3. Choose your lock level:

   • Locked: Editors cannot modify this section at all

   • Content Only: Editors can change content but not styling

   • Unlocked: Editors have full modification access

Locked sections appear with a lock icon badge on the canvas.

Switching Design Systems

If you need to change which design system a template uses:

1. Click Template Settings in the top menu

2. Go to the Design System section

3. Select a different design system from the dropdown

4. Click Apply

Your email will update to use components and base styles from the new design system. Note that existing customizations may be affected if the new design system has different base styles.

Removing a Design System

To remove the design system from a template and work with standalone components:

1. Click Template Settings

2. Go to the Design System section

3. Click Remove Design System

4. Confirm your action

Your email will retain its current structure and content, but will no longer be connected to the design system. You'll lose access to automatic base style updates if the design system is updated in the future.

Tips for Success

• Start with Layouts: Using a layout as your foundation is faster than building component-by-component

• Use Consistent Components: Stick to your design system's components to maintain brand consistency

• Leverage Base Styles: Trust the global styling to handle brand guidelines; focus on content

• Preview Across Clients: Always preview your email in multiple email clients before sending

• Document Custom Changes: If you override base styles, document why to help your team understand your choices

Need Help?

• Review component descriptions in the left panel for guidance on component usage

• Check the design system overview for details on available components and layouts

• Ask your workspace owner about design system updates or new components

Happy designing!