How do I use the guide?

Whether you're a marketer, designer, developer, salesperson, or agency, this guide is a resource for building emails at Treehouse. There are a few routes you can take, depending on your goals, needs, and tool requirements.

Start by checking out the quick start guides

Get Started

Or take a short cut to find what you're looking for

Learn Principles

Learn the Principles

Get a sense for the principles that guide emails at Treehouse

View Principles
Make Emails in ESPs

Make Emails in ESPs

Here you'll find instructions for creating emails in MailChimp, Intercom, Mandrill, and Marketo.

Get Started in ESPs
Write Emails

Write Emails

Learn how to write copy that fits in with Treehouse's voice, tone, and writing style.

Write Copy
Design and Code Emails

Design & Code Emails

Here's where you can find templates. Check out the Atoms and Molecules sections to add content a-la-carte.

Get Templates

Why do we have an email style guide?

Consistency It gives us well defined documentation so everyone who touches emails at Treehouse will be on the same page. A consistent email design language which aligns with our brand allows our users to become immersed in the full Treehouse experience.

Efficiency This guide takes the guesswork out of email design to make it an easier process. With the templates and reusable components, you no longer have to reinvent the wheel as you embark on creating an email. Common patterns are already defined, and all you have to do is replace the content. Also, there's no more fighting with inline styles, as the CSS is contained in a central place. And to top it all off, you're able to start with a stable foundation that has already been thoroughly tested.

How is it organized?

The email style guide provides guidelines for the visual alignment of our emails. The guide is organized with Atomic Design in mind. There are four main sections: Atmosphere, Atoms, Molecules, and Templates.

  • Atmosphere is the intangible logic that orchestrates the design system. It is broken down into three items:
    • Vocabulary: Represents what the element is called. It’s name.
    • Syntax: Speaks to how to use the element, and how it might relate to any other elements
    • Semantics: Addresses why the element is the way it is and what it should communicate to our users
  • Atoms are individual pieces of Molecules.
  • Molecules are groupings of Atoms and are common UI patterns which are repeatable across emails
  • Templates are full examples of common email layouts which can be duplicated and reused.