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
- Click Create New Email in the Email Template Builder
- 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
- Select Start from Design System
- Choose the design system you want to use from the dropdown
- 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
- Click and hold a component from the left panel
- Drag it onto your email canvas to the position you want
- Release to place the component
Replace Existing Sections
- Hover over any section on your canvas
- Click the component icon that appears
- 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:
- Select an element on your canvas
- Modify its styling in the properties panel
- 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
- When creating a new email, choose Start with a Layout
- Select the layout from the available options
- Your email canvas populates with the complete template
Customizing a Layout
Layouts are fully customizable. After applying a layout:
- Edit any text, images, or content
- Swap components by hovering over sections
- Add or remove sections as needed
- 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
- Select a section on your canvas
- Click the lock icon in the section toolbar
- 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:
- Click Template Settings in the top menu
- Go to the Design System section
- Select a different design system from the dropdown
- 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:
- Click Template Settings
- Go to the Design System section
- Click Remove Design System
- 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!