Essential transactional email templates

Essential transactional email templates

Responsive email templates for your SaaS business.

3

Welcome email templates

1

Order email template

3

Product email templates

2

Engagement email templates

3

Marketing email templates

Full preview

Welcome email

Subject: Nice to have you on board, [username]

Ready-madeemail templates

Behavioral email

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.

LabelLabelLabelLabelLabel

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 2013
  • Outlook 2016
  • Outlook 2019
  • Thunderbird
All Outlooks are tested in 120 DPI, too.

Webmail


  • Gmail
  • Office 365
  • Outlook.com
  • Yahoo!
  • AOL

Want to learn more?

View documentation

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 get an invoice?

Yes, you will receive an email with a receipt right after purchase.

Can I pay with PayPal?

Yes, at checkout you can pay with any major credit card or PayPal.

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.

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 and CSS
Design system
Essential
Compatibility
Mobile and desktop
Source code
Maizzle and Tailwind CSS
License
Use in unlimited projects
Updates
Free
OR

$199/y for all email templates

Unlimited downloads

Get the Sketch file now for free, buy the coded package later. Download ↗