email-and-newsletter-design

name	email-and-newsletter-design
description	Use when designing, building, or debugging HTML email and newsletters across Outlook, Gmail, Apple Mail, dark mode, mobile, image-off, and limited-CSS conditions. Use ux-writing-and-microcopy for subject, preheader, and CTA wording, and responsive layout skills for non-email surfaces. copy).
metadata	{"portable":true,"category":"13-presentations-and-documents","compatible_with":["claude-code","codex"]}

Email & Newsletter Design (Bulletproof, Client-Resilient HTML Email)

HTML email is the most constrained rendering target a designer touches. It is not the web: the most common rendering engine in the world for email is Microsoft Word (desktop Outlook), flexbox and grid do not exist, <style> blocks are stripped or partially honoured, webfonts silently fail in most clients, and the same file is re-coloured without warning by dark mode. Designing email is the discipline of building a layout that degrades into a still-correct layout in every client, because you cannot control which one renders it.

Per doctrine/design-doctrine.md §0–2, the moat is output that looks authored — but in email the authored choice must survive a client that strips half of it. The craft here is not "use a clever font"; it is "choose a face whose fallback still carries the design when the webfont is dropped," and to build structure that holds when CSS is ignored. Restraint plus one strong, intentional choice that survives degradation beats five choices that only render in one client.

Use When

• Building any HTML email: marketing campaign, newsletter/digest, transactional (receipt, password reset, invite), or announcement, that must render across many clients.