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
Welcome email
Subject: Nice to have you on board, [username]
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.
Want to learn more?
View documentation →
Can I pay with PayPal?
Yes, at checkout you can pay with any major credit card or PayPal.
Can I get an invoice?
Yes, you will receive an email with a receipt right after purchase.
What does "Use in unlimited projects“ mean?
You don’t have to repurchase the product every time you want to use the Templates in a new project. As long as what you’re building with the Product will be owned by the license holder, you can use the Product in as many projects as you want, without ever having to buy an additional license.
Can I use the Templates for client projects?
Yes! You can use them for almost anything — the only thing we do not allow is using them to create derivative/competing products. For more information, read our license.
Can I use the Templates for my own commercial projects?
Of course! Your license gives you permission to use the Templates in as many of your own projects as you like. For more information, read our license.
Can I sell templates/themes I build with the Templates?
No, you cannot use the Templates to create derivative products like email templates, email kits, email builders or editors, or anything else where you would be repackaging or redistributing our Templates. For more information, read our license.
Can I use the templates with Mailchimp?
You can copy & paste the HTML into Mailchimp’s code editor. You will need to add your own Mailchimp merge tags ↗. and to use the visual editor you can extend craftingemails templates source code to include Mailchimp template language ↗.
Can I use the templates with email services such as Klaviyo, SendGrid, HubSpot ...?
You can copy & paste the HTML into your emailing service’s code editor if the service offers it. Depending on your emailing service, you might need to add your template tags. for example: Klaviyo template tags ↗.
Can you customize the template for me?
Yes, check out our coding service.
Do you offer any special pricing for students or registered nonprofits?
Yes, contact us using your organization or student email address, and we will send you a coupon for 50% off.
How do I test the email templates I downloaded?
Use a tool like useparcel.com ↗ to send yourself a test email. Make sure you use the inlined version of the template.
Transactional email templates
Templates
12 emails
Files
Sketch & HTML
Design system
Essential
Devices
Mobile & desktop
Source code
Maizzle & Tailwind CSS
License
Use in unlimited projects
Updates
Free
OR