Essential transactional email templates
Responsive email templates for your SaaS business.
Order email template
Product email templates
Engagement email templates
Marketing email templates
Full preview
Email subject: Nice to have you on board, [username]
PreviewGet the code →
Ready-madeemail templates
Behavioral emails
Designed to be sent to users based on their interactions with your application such as signs up, order confirmation, user invite, etc.
User-centered
Fulfilling user expectations and providing help and help and guidance at each stage.
Action-oriented
Increase click-through rate, encouraging your users to take action and move on to the next step. Each email is action-oriented and includes one CTA.
Trustworthy design
Makes a good first impression with users. The consistency across templates generates a strong feeling of reliability and trust in users.
Responsive templates
Each template is responsive, fully customizable, and works on any screen.
Compatible
The same high-quality look. We tested on all major email clients like Outlook, Gmail, iOS, and more.
UI Colors
Convey meaning through color. Get access to all colors in the Material Design spec from the start.
UI
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
Gray
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
Brand
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
Blue
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
Green
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
Orange
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
Red
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
Typography
We use system fonts with a fall back to sans-serif like Arial.
Font Family
Aa
Arial Bold
Aa
Arial Regular
Font Sizing
Modular scale using perfect fourth base 16px × 1.333
Text size 3xl – 50px
Text size 2xl - 38px
Text size xl - 28px
Text size lg - 21px
Text size base - 16px
Text size sm - 12px
Text size xs - 9px
Leading
12
16
22
28
42
56
Text Colors
Dark
#4F5A68
Primary text used for Headers and Body copy with high emphasis
Dark 02
#8492A6
Secondary text used for Body copy
Bright
#FFFFFF
Primary text used for Headers and Body copy on dark backgrounds
Bright 02
Opacity 60%
Secondary text used for Body copy on dark backgrounds
Interactive Text Colors
Brand
#0052E2
Interactive color and Primary Brand color, used for CTA and Links
Support Text Colors
Blue
#1391CF
Support color used for Information and giving hints
Green
#13CE66
Support color used as indicator for Success and confirmation status.
Orange
#FF9418
Support color used for Warning
Red
#CE131E
Support color used for Errors and Danger Actions
Grid system
Breakpoint:
sm: {max: 640px }
Desktop grid 560px
8 columns with 16px gutter
Mobile grid 320px
4 columns with 16px gutter
Spacing
Vertical rhythm
Multiple of 8px, except 4px, 12px
4
8
12
16
24
32
40
48
56
Buttons
We use a call-to-action as an inline-block button and full-width block for mobile screens.
Rounded corners
Border radius
Default 4px, sm 2px or full
Badges
Convey meaning through each badge color, such as warning or success states.
Email compatibility
All emails are designed for and tested on numerous email clients and devices. Here's the rundown on what type of compatibility to expect.
Mobile Devices
- ✓iPad
- ✓iPhone
- ✓Outlook iOS
- ✓Gmail iOS
- ✓Gmail Android
- ✓Samsung Mail
Desktop clients
- ✓Apple Mail
- ✓Outlook 365
- ✓Outlook 2019
- ✓Outlook 2019 120 DPI
- ✓Thunderbird
Webmail
- ✓Gmail
- ✓Office 365
- ✓Outlook.com
- ✓Yahoo!
- ✓AOL
" Excellent clean and minimal email design, each email is action-oriented with one CTA. I tried the html on HubSpot and added their required token. And it worked! It was much easier than I thought.
SKSayam Kochar Head of Marketing at Techpacker
Want to learn more?
View documentation →
Transactional email templates
Templates
12 emails
Files
Figma & HTML
Design system
Essential
Devices
Mobile & desktop
Source code
Maizzle & Tailwind CSS
License
Use in unlimited projects
Updates
Free
OR