email-template-design

name	email-template-design
description	Use when designing transactional and marketing email templates. Covers the email-safe CSS subset, mobile-first widths, the canonical header / body / footer structure, and the anti-patterns that get caught in spam filters.

Email Template Design

Email is its own design medium with its own constraints. Most CSS doesn't work. Most layouts must be table-based. Design for the lowest common denominator (Outlook on Windows).

Email-safe constraints

Tables for layout (not flexbox). Inline CSS (not tags — many clients strip). Max width 600px. No web fonts (use system fallbacks). No JS. No video (use animated GIF or static + 'play' overlay).

Canonical structure

Header (logo, optional preheader text). Body (1-3 sections, max). CTA (1 primary button). Footer (unsubscribe, address, social).

Mobile-first

Most email opens are mobile. Buttons must be 44px+ tall for thumb. Body text 14-16px minimum.

Dark-mode handling

Some clients auto-invert. Test in Apple Mail dark mode. Set explicit colors via media queries when supported.

Spam-filter avoidance

Don't use 'FREE' or 'WIN' in subject. Don't have only an image (text-to-image ratio matters). Real unsubscribe link required.

Common mistakes

Designing in HTML/CSS like a webpage. No mobile testing. Web fonts that fall back ugly. Image-only emails. Long subject lines (>40 chars truncate).

Where this fits in X3 Compass

Applied across the X3 Compass design system.