Email Design System For Sketch

One Sketch file, 10 templates, desktop and mobile, reusable components and styles, ready for you to customize.

Download .Sketch File

Sketch email design system

Sketch logo

Why use an email design system?

Consistency across email is hard

Working across design files with different Designers often introduces inconsistencies.

Using a system ensures every Designer uses the same components, colors, font styles and layout, ensuring consistency and professional looking emails.

Your time is valuable

Recreating design assets and artifacts over and over again is a waste of your time.

This system includes a reusable grid, Sketch symbols, modules, font styles, colors and layer styles. You set this stuff up once and don’t have to think about it again.

Seamless pixels to code

Hand-off to Developers can be tricky. Often the outcome is not what you expected. Especially in email where email client support is crazy.

Our Sketch design system aligns 1:1 with our HTML templates helping to bridge the gap between design and code.

Nathan Curtis

“A design system offers a library of visual style and components documented and released as reusable code for Developers and/or tool(s) for Designers.”

Nathan Curtis
Sketch color palette

Consistency with a design system

Your brand and emails deserve to look professional. Your transactional emails should look like your promotional emails. The emails you send from your marketing platform should look like the emails you send from your codebase. That starts with a system.

Enable your team to move fast

Creating a system means you can spend more time on creativity or optimizing numbers. Not recreating components over and over again. Not chasing down team members telling them they’re using the wrong hex code or typeface.

Sketch type styles
Sketch spacing rules

Jump start design QA with Developers

Creating a system means Developers are more likely to get it right first time. Developers are happy as they're not rebuilding components over and over again. Designers are happy as their designs are rendered as intended. Marketing & Product are happy as their projects are shipped and in production faster.

Establish a set of reusable styles & components

Colors, type, spacing, buttons, alerts, tables, footer, articles… define them with Sketch styles and symbols so you can reuse them throughout your email templates. Use Sketch symbol overrides to customize text and color.

Sketch components and symbols
Sketch email grid

Responsive grid for desktop and mobile

With 50% of emails opened on mobile devices it’s important to design for both desktop experience and mobile. These templates stick to a 6 column grid and collapse on mobile.

Brad Frost

“Your sketch library is not a design system.”

Brad Frost

A Sketch library is just the beginning

These Sketch templates are tools for Designers that help make up your larger design system. To truly enable your team you need good code and living breathing documentation. Take a look at our HTML templates when you're ready to convert your designs to code.

Design system with code

Sketch

Download a .sketch file with pages, layers, symbols and styles ready to go.

10 Templates

Notifications, newsletter, receipt, e-commerce, welcome email and more.

Layer, Color & Font Styles

Customize the styles to suit your brand and color palette.

6 Column Grid

Templates are aligned to 6-column grid and 8 pixel spacing units.

Reusable Components

Make use of symbol overrides to customize buttons and components.

Desktop & Responsive Mobile

Templates include both desktop 600px and responsive mobile examples.

Download the Sketch email design system for free

Download .Sketch File

Email templates

Frequently Asked Questions About Email Design System For Sketch

Why are these free, what's the catch?

This Sketch design system is a free resource for Designers. Arguably the most complicated part of HTML email is coding the designs so that they don't fall apart across email clients and devices. That's where we offer these templates as HTML/CSS.

I've just downloaded the Sketch files, what do I do next?

Read the README which has instructions on how the Sketch file is set up. First thing you'll want to do is adjust the colors, layer styles and font styles to suit your brand and design system. Once you do this you should notice the changes automatically take effect.

Are these templates available for Photoshop/Figma?

Not yet. If you'd like to see these for another design tool please create an issue on GitHub (or upvote an existing request).

I may have found a bug, how do I report it?

We're tracking bugs in this GitHub repo. Please create a new issue and we'll respond within 24 hours. If you don't use GitHub please email us.

About Designer & Developer
Lee Munroe

Lee Munroe, email designer and developer

Lee Munroe is an Email Designer and Developer based in San Francisco, California.

Lee was Design Lead & Developer Evangelist at Mailgun by Rackspace, an email service for Developers, where he open-sourced several email related tools for Developers including an automated workflow. His GitHub stars for email related developer tools amount to over 15,000.

As well as open-sourcing software, Lee has spoke at several leading industry conferences about email development including Litmus Email Design Conference (Boston), WebU (Toronto), Future of Web Design (San Francisco), O'Reilly Fluent Conference (San Francisco).

Over 1,000 Happy Customers Using These Email Templates in Production

#1 on Product Hunt

Top voted product on launch day with 2,000 votes & ranked #1 in developer tools.

Product Hunt logo

Whoa there email maestro!

Subscribe to our HTML Email newsletter and we'll send you a free simple responsive HTML email that you can download and use today.

Free email

No thanks