What’s a Design System?
Bespoke email doesn’t scale. And at the same time, standard templates can feel very “2009.” The solution is to create a Design System that standardizes sizes, margins, buttons, header and footer layout, but leaves ample room for custom brand colors, typography and brand personality.
We build and use color, component and code snippet libraries to build email at scale across multiple brands with a team of 5 people. Our design system aided these Johnson & Johnson premium brands to be become more nimble and more responsive in their loyalty and CRM efforts:
Lactaid®, Band-Aid Brand, Johnson’s Baby, Tylenol®, Pepcid, Motrin and Aveeno®.
B. HTML and CSS for Email Basics
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lactaid®
Band-Aid Brand
Johnson’s Baby
Tylenol®
Pepcid
Motrin
Aveeno®.
Code Snippets
Here in mid 2021, designing, coding and rendering custom email is still not about pixel perfection. With over 100 device and browser combinations to test for Litmus.com, it’s a wonder that brand messages ever reach their intended targets.
