Welcome

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.