Description
The McClatchy Email Design System (EDS) exists to provide visual alignment of our emails with the Saratoga Design System (SDS) and is organized with an atomic design structure. This system serves to streamline our email design workflow and provide consistency across all email products.
This section of the team website serves as both a style guide for the EDS as well as a code library of common elements and layouts.
Structure
The EDS is based upon a framework structure with molecules and atoms that are inserted within the framework. Imagine the framework as the framing and walls of a building and the layouts, atoms and molecules as the contents.
This modular structure means we can quickly and easily generate new complete templates for various needs and have confidence that they both look and function the way they should.
An 8-pixel grid was used in the development of our email design system to facilitate sizing, spacing and establish vertical rhythm. This means that the size of all elements is calculated in multiples of 8, both vertically and horizontally.