Design and Workflow Blog

Modular design technique: utilizing color for tone

How Headspace uses different color palettes for their email content while keeping layout and formatting consistent.

Three email examples from Headspace, each having different illustrations and colors that match them.

Headspace emails use live text and buttons to accompany intro illustrations, changing their colors to match.

The Headspace app offers a variety of simple meditation exercises to help you find peace and calm throughout your day. Keeping with its theme of simplicity, it uses minimally stylized illustrations to accompany their different bite-sized courses.

Their emails are an extension of this format, using the same style of illustrations and themed colors, for an on-brand reading experience that very closely matches the app.

Extending illustrations with color

For an email’s intro/feature, a large illustration is used to introduce the message of the email. It’s accompanied by live title text and in some cases, a call-to-action button.

To bring it all together, the title text and the button match the illustration’s color scheme. The illustration’s background color is used to extend to the area of the text and button. And the Headspace logo is also added to the mix to make it look like the illustration extends all the way to the email header.

Color for theme and tone

Some emails take the key illustration color scheme even further by using its colors for the entire email. This is usually specific to a series of courses that are part of a theme, like a dark tone for their sleep series.

The email’s layout, and components are consistent to all of their other emails, with only their colors changing. This allows for the reuse of design elements as well as their code. And offers the same easy-to-read experience each time a customer gets an email from them.

Use the color tones modular design technique in your own template and build your email's content visually using Blocks Edit. Learn about how it works and start building for free.

Photo of Ovi Demetrian Jr Ovi Demetrian Jr