The New Yorker's Email Design System

The New Yorker is the oldest weekly US magazine, offering commentary, criticism, and essays.

https://www.newyorker.com/

Email design system

Modular

Aesthetics

Sophisticated

Submitted by

Mailmodo

Color

Typeface

Email Width

Buttons

Blocks/modules used

Header block/module

Footer block/module

Templates

Download the-new-yorker and 20+ top brands' EDS to build your own

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.

#222222

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

#FF0000

#DF3331

Typeface

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

Font family

Georgia, Helvetica Neue, Arial, Times, sans-serif

Primary font

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.

Text format	Size	Line height	Weight
H1	32 px	1.5 em	Medium
H2	16 px	1.5 em	Regular
H3		1.5 em	Regular
H4		1.5 em	Regular
Paragraph	12 px	1.5 em	Regular

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