The St. James Email Design System
The St. James team came to Ansira with a basic request, a sleek design system for their fitness center. After some research on their user base, we found that the majority of their users viewed the emails on mobile. To keep the design system light, we decided to do a mobile only design at 440 px wide. This is narrow enough to be comfortably viewed on many mobile devices, but also not too narrow as to look odd on desktop. We also did a dark mode first because the data pointed towards most users check their email in dark mode.
I also had the flexibility to change their brand colors to adjust properly to light and dark mode. Because they had a relatively limited pallet, and we wanted to keep it lite, I named each of the color token by their use. This way, if the brand changes, it makes the process much easier to update in the future.
Documentation
When the pattern library is finished, I generate the documentation in ZeroHeight. This platform makes it easy to dictate how the items are used, and to display the items as well. If you would like to view the documentation more in depth, please feel free to view it here.