- Product
Template Builder
Build AMP and HTML templates with a drag-and-drop builder
Email Automation
Engage users across the lifecycle with email automation
AMP Emails
Leverage interactive AMP emails for higher in-mail conversions
Shopify Email Marketing
Drive sales with interactive emails at all stages of the buyer journey
Send Transactional Email
Trigger HTML and AMP emails with API and integrations
Contact Management
Target emails better with advanced contact management
Campaign Manager
Manage campaigns with a full-stack, intuitive manager
AI Email Marketing
Save 3X time on writing and template creation
- Solutions
Send Quizzes
Boost quiz responses with interactive, smart quizzes
Conduct Survey
Razorpay gets 257% higher survey reponses
Get Reviews
Interviewvector gets 45% higher reviews
Collect Feedback
AllRound gets 28% higher feedback responses
Book Meeting
HobSpace gets 20% higher demo signups
Event Registration
Mudrex gets 280% more webinar signups
Gamify Emails
Drive engagement with games inside email
Recover Carts
Traya gets 15% cart recovery rate
- Resources
Templates
- API & Integrations
Sync Contact from
Apps inside Email
Figma's Email Design System
Figma is a browser-based, collaborative UI design tool that lets users create prototypes.
Email design system
TemplateAesthetics
QuirkySubmitted by
Mailmodo
Color
Create impactful experiences and convey brand identity through color.
Primary color
By using a consistent set of primary colors in email design, the brand can be easily recognized and remembered by the recipient. All secondary colors used should be derived from this gradient.
Secondary colors
Secondary colors can be used to add depth and dimension to the email design by creating contrast and highlighting certain elements. A different secondary color should be used for the header, footer, and main body of the email to differentiate the sections..
Typeface
Typography plays a crucial role in presenting design and content in a clear manner.
Headlines & Paragraph
Secondary colors can be used to add depth and dimension to the email design by creating contrast and highlighting certain elements. A different secondary color should be used.
| Text format | Size | Line height | Weight | Letter spacing |
|---|---|---|---|---|
| H1 | 28 px | 1.5 em | Medium | 0 px |
| H2 | 20 px | 1.5 em | Regular | 0 px |
| H3 | 18 px | 1.5 em | Regular | 0 px |
| H4 | 1.5 em | Regular | 0 px | |
| Paragraph | 12 px | 1.5 em | Regular | 0 px |
💡 Use different font sizes and weights to create a visual hierarchy that guides the reader.
⚡️ Use a regular or light weight font for the body text to ensure that it's not too heavy and doesn't create visual clutter. Don’t forget to have appropriate letter spacing to ensure that the text is easy to read.
Buttons
Test the placement, color, and text of your buttons to encourage recipients to take action.
Button Type 1
Button Type 2
Blocks/ Modules used
Stick to a consistent layout throughout the email to make it easier for recipients to follow the content.
Email width
649 px
Button Type 1
Button Type 2
Button Type 3
Header block/module
Use a clear and legible font for the logo and navigation links in the header block and keep it uncluttered.
Header Block
Footer block/module
Include physical address, email address, and social links to make it easy for recipients to contact you.
Footer Block
Templates
Before designing your email template, identify the purpose of the email and the brand messaging.
