The McClatchy Email Design System is both a style guide and code library I created to provide visual alignment with the Saratoga Design System (McClatchy’s website design system) and to streamline email design workflow and provide consistency across all email products.

The EDS was created using atomic principles, with a base template and various organisms, molecules and atoms. With this modular structure, we can quickly and easily generate new complete templates for various needs and be confident that they both look and function the way they should.

I first created a library file in Sketch, loosely based upon the Saratoga Design System, but optimized for email. I used an 8-pixel grid for the layout to facilitate sizing decisions and establish vertical rhythm. The Sketch library is available for anyone on our team to use to design email mockups.

I then wrote HTML and CSS for the base template, using semantic naming conventions for the CSS, as well as a selection of code snippets for common elements and layouts.

Finally, I wrote a style guide and code library for the EDS, and added that to our Design Team website, so that it can easily be accessed by the team and kept up-to-date.