Grammarly's Email Design System

Grammarly is a writing assistant to proofread and edit your documents.

Email design system

Template

Aesthetics

Bold

Submitted by

Mailmodo
Grammarly's Email Design System
Color
Typeface
Email Width
Buttons
Blocks/modules used
Header block/module
Footer block/module
Templates

Download grammarly and 20+ top brands' EDS to build your own

leftCTA

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.

#66CC99

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..

#000000
#0000EE

Typeface

Typography plays a crucial role in presenting design and content in a clear manner.

Font family

Times New Roman, Helvetica, Arial, sans-serif

Primary font

Times New Roman
Download font:Whyte

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.

Example Size Line height Weight Letter spacing
H1 40 px 1.5 em Medium 0 px
H2 32 px 1.5 em Regular 0 px
H3 24 px 1.5 em Regular 0 px
H4 1.5 em Regular 0 px
Paragraph 18 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

Blocks/ Modules used

Stick to a consistent layout throughout the email to make it easier for recipients to follow the content.

Email width

300 px

Button Type 1

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

Header  block 12.png

Templates

Before designing your email template, identify the purpose of the email and the brand messaging.

template
template

Get 3X email conversion
with Mailmodo

Check.svg

Create & send interactive emails without coding

Check.svg

Put revenue on auto-pilot with pre-built journeys

Check.svg

Save time with AI-powered email content creation

Experience world’s only interactive email marketing platform

Trusted by 10000+ brands

Group_1110166020_1_6fb9f2bd9a
Group_1110165532_1_bf39ce18b3
Ellipse_Gradientbottom_Bg
Ellipse_GradientLeft_Top
gradient_Right