Design
Email marketing design: templates, dark mode, accessibility
Email is a narrow HTML document. Templates, dark-mode inversion, alt text, and contrast. Pretty Figma files are not the deliverable.
Design for a 600-pixel document that Outlook will mangle
Email design is still table-based HTML for reliability, hybrid or fluid-hybrid patterns for mobile, and a live-text hierarchy that works if images are blocked. Width commonly sits around 600 pixels because that is the tradition clients expect. Fancy CSS grid is a good way to send a broken letter to desktop Outlook. If the design only exists as a Figma frame, it is not email yet.
Templates are a design system: header, one-column article, two-column product, footer with address and unsub. Fewer modules, used often, beat a unique art piece every week. Beefree and ESP editors encode that system. Custom HTML is for teams who will maintain it.
Light
Dark
Transparent PNGs and pale grey text fail here.
Dark mode
Apple Mail, Outlook.com, and others invert or recolor backgrounds. A logo that is black-on-transparent becomes a black mark on a black background. Transparent PNGs and hard-coded dark text on a light module both fail in different ways. Test. Litmus dark-mode previews catch a lot. A light-colored outline on logos, and avoiding giant full-bleed black hero images, saves you.
You cannot fully control inversion. Design so the email is readable after a bad inversion, not only in the art-directed light version.
Accessibility is production, not a badge
Alt text on every meaningful image, empty alt on decorative spacers, real heading markup where the ESP allows it, link text that is not 'click here,' and color contrast that survives dark mode. WCAG is the reference. Email cannot meet every web criterion. That is not permission to ship gray text on gray.
Font size: 16px-ish body on mobile. Tap targets that a thumb can hit. Language attribute on the HTML. Prefers-reduced-motion: GIFs that strobe will make people ill. None of this is aesthetic icing. It is whether a portion of the list can read you.
Common questions
Should emails be image-only?
No. Image-only mail fails when images are blocked, fails accessibility, and looks like a blast from 2008. Live text plus a few images. If legal requires a pixel-perfect banner, still repeat the offer in text.
Do I need a designer on staff?
Not for a simple newsletter template. Yes if you have a catalog and a module system. A good template plus a specialist who knows Outlook will beat a brand designer who has never opened Litmus.
Related
Prefer markdown? Email marketing design: templates, dark mode, accessibility.md