Email Design System
When to Use This Skill
Use this skill when you need to:
- Create a set of branded email templates for different use cases
- Standardize email design across marketing, transactional, and internal communications
- Define responsive email design rules for mobile and desktop
- Brief a developer or email platform on template requirements
DO NOT use this skill for writing email copy, email marketing strategy, or email deliverability optimization. This is for visual and structural email template design.
Core Principle
EMAIL DESIGN MUST WORK ON THE WORST-CASE SCENARIO — A 5-YEAR-OLD PHONE, OUTLOOK 2016, AND DARK MODE SIMULTANEOUSLY. DESIGN FOR CONSTRAINTS, NOT IDEALS.
Phase 1: Brief
Required Inputs
| Input |
What to Ask |
Default |
| Email types |
"What types of emails do you send? (newsletter, promotional, transactional, onboarding, announcement)" |
Newsletter and transactional |
| Platform |
"What email tool? (Mailchimp, ConvertKit, Klaviyo, SendGrid, custom)" |
Mailchimp |
| Brand guidelines |
"Brand colors, fonts, and logo?" |
Must be provided |
| Current issues |
"What is wrong with your current emails? (inconsistent, ugly on mobile, low clicks)" |
Inconsistent design |
| Audience |
"Who receives these emails? (customers, subscribers, internal team)" |
Customers and subscribers |
| Frequency |
"How often do you send each type?" |
Weekly newsletter, daily transactional |
GATE: Confirm brief before proceeding.
Phase 2: Design
Email Template System Components
- Global header — logo placement, navigation links, preheader text zone
- Global footer — social links, unsubscribe, physical address, legal text
- Content modules — reusable blocks (hero image, text block, CTA button, image + text, testimonial, divider)
- Button styles — primary CTA, secondary CTA, text link
- Typography — email-safe fonts, size hierarchy, line height
- Color application — background, text, CTA, accent usage rules
- Image guidelines — dimensions, alt text requirements, file size limits
Template Types
| Type |
Purpose |
Key Elements |
| Newsletter |
Regular content delivery |
Hero, 2-3 content blocks, CTA |
| Promotional |
Sale or offer announcement |
Hero image, offer details, urgency CTA |
| Transactional |
Order confirmation, receipts |
Clean layout, order details, next steps |
| Onboarding |
Welcome sequence |
Personal greeting, single action CTA |
| Announcement |
Product launch, company news |
Bold headline, concise body, CTA |
GATE: Present the system design and confirm template types needed.
Phase 3: Build
Deliverables
1. Email Design System Document
- Component library with specifications for each module
- Color and typography standards for email specifically
- Responsive breakpoints and mobile rules
- Dark mode considerations and fallbacks
2. Template Specifications (per type)
- Layout wireframe with module arrangement
- Content zones with character limits
- Image dimensions and alt text requirements
- CTA button specifications (size, color, padding, border radius)
3. Technical Constraints Guide
- Email-safe font stack (fallbacks for every font)
- Maximum email width: 600px
- Image guidelines: max 200KB per image, always include alt text
- Button: minimum 44x44px tap target on mobile
- Avoid: CSS grid, custom fonts without fallbacks, video embeds
4. QA Checklist
Phase 4: Polish
Implementation Guide
- How to build each template in the chosen email platform
- Module reuse instructions for the team
- Brand-approved image library or resource links
Governance
- Who can modify templates (role-based access)
- How to request a new template type
- Quarterly review to retire unused templates and add new ones
Example 1: SaaS Weekly Newsletter
Structure: Logo header → Hero image with headline → 3 content blocks (image + text) → CTA button → Social footer. Width: 600px. Single column on mobile.
Example 2: E-commerce Promotional Email
Structure: Logo header → Full-width hero with offer overlay → Product grid (2x2) → Countdown timer zone → CTA button → Footer. Dynamic product blocks from catalog.
Anti-Patterns
- Custom fonts without fallbacks — if the custom font does not load (common in Outlook), text displays in Times New Roman. Always declare fallbacks.
- Designing desktop-first — 60%+ of email opens are on mobile. Design mobile-first, enhance for desktop.
- Giant images with no alt text — when images are blocked (default in many clients), the email is blank. Alt text is not optional.
- Tiny CTA buttons — a 30px button on mobile is untappable. Minimum 44x44px touch target.
- Ignoring dark mode — transparent PNGs and black text on white backgrounds invert poorly. Test dark mode explicitly.
Recovery
- Email client rendering issues: Simplify the design. Tables-based layout is ugly but universally supported. Progressive enhancement on top.
- No developer available: Use the email platform's drag-and-drop builder with brand colors and fonts configured as defaults.
- Emails look different on every device: Accept that pixel-perfect is impossible in email. Aim for "consistently good" not "identical everywhere."
- Team sends off-brand emails: Lock down templates in the platform. Restrict editing to content zones only, not design elements.
1---2name: email-design-system3description: Designs email template systems with header/footer standards, button styles, image guidelines, responsive rules, and type-specific layouts. Use when standardizing email communications.4---56# Email Design System78## When to Use This Skill910Use this skill when you need to:11- Create a set of branded email templates for different use cases12- Standardize email design across marketing, transactional, and internal communications13- Define responsive email design rules for mobile and desktop14- Brief a developer or email platform on template requirements1516**DO NOT** use this skill for writing email copy, email marketing strategy, or email deliverability optimization. This is for visual and structural email template design.1718---1920## Core Principle2122EMAIL DESIGN MUST WORK ON THE WORST-CASE SCENARIO — A 5-YEAR-OLD PHONE, OUTLOOK 2016, AND DARK MODE SIMULTANEOUSLY. DESIGN FOR CONSTRAINTS, NOT IDEALS.2324---2526## Phase 1: Brief2728### Required Inputs2930| Input | What to Ask | Default |31|-------|------------|---------|32| **Email types** | "What types of emails do you send? (newsletter, promotional, transactional, onboarding, announcement)" | Newsletter and transactional |33| **Platform** | "What email tool? (Mailchimp, ConvertKit, Klaviyo, SendGrid, custom)" | Mailchimp |34| **Brand guidelines** | "Brand colors, fonts, and logo?" | Must be provided |35| **Current issues** | "What is wrong with your current emails? (inconsistent, ugly on mobile, low clicks)" | Inconsistent design |36| **Audience** | "Who receives these emails? (customers, subscribers, internal team)" | Customers and subscribers |37| **Frequency** | "How often do you send each type?" | Weekly newsletter, daily transactional |3839**GATE: Confirm brief before proceeding.**4041---4243## Phase 2: Design4445### Email Template System Components46471. **Global header** — logo placement, navigation links, preheader text zone482. **Global footer** — social links, unsubscribe, physical address, legal text493. **Content modules** — reusable blocks (hero image, text block, CTA button, image + text, testimonial, divider)504. **Button styles** — primary CTA, secondary CTA, text link515. **Typography** — email-safe fonts, size hierarchy, line height526. **Color application** — background, text, CTA, accent usage rules537. **Image guidelines** — dimensions, alt text requirements, file size limits5455### Template Types5657| Type | Purpose | Key Elements |58|------|---------|-------------|59| Newsletter | Regular content delivery | Hero, 2-3 content blocks, CTA |60| Promotional | Sale or offer announcement | Hero image, offer details, urgency CTA |61| Transactional | Order confirmation, receipts | Clean layout, order details, next steps |62| Onboarding | Welcome sequence | Personal greeting, single action CTA |63| Announcement | Product launch, company news | Bold headline, concise body, CTA |6465**GATE: Present the system design and confirm template types needed.**6667---6869## Phase 3: Build7071### Deliverables7273**1. Email Design System Document**74- Component library with specifications for each module75- Color and typography standards for email specifically76- Responsive breakpoints and mobile rules77- Dark mode considerations and fallbacks7879**2. Template Specifications (per type)**80- Layout wireframe with module arrangement81- Content zones with character limits82- Image dimensions and alt text requirements83- CTA button specifications (size, color, padding, border radius)8485**3. Technical Constraints Guide**86- Email-safe font stack (fallbacks for every font)87- Maximum email width: 600px88- Image guidelines: max 200KB per image, always include alt text89- Button: minimum 44x44px tap target on mobile90- Avoid: CSS grid, custom fonts without fallbacks, video embeds9192**4. QA Checklist**93- [ ] Renders correctly in Gmail, Apple Mail, Outlook94- [ ] Mobile responsive at 375px width95- [ ] Dark mode tested and readable96- [ ] All images have alt text97- [ ] Links work and track correctly98- [ ] Unsubscribe link functional99- [ ] Preheader text displays correctly100- [ ] Load time under 3 seconds101102---103104## Phase 4: Polish105106### Implementation Guide107108- How to build each template in the chosen email platform109- Module reuse instructions for the team110- Brand-approved image library or resource links111112### Governance113114- Who can modify templates (role-based access)115- How to request a new template type116- Quarterly review to retire unused templates and add new ones117118---119120## Example 1: SaaS Weekly Newsletter121122**Structure:** Logo header → Hero image with headline → 3 content blocks (image + text) → CTA button → Social footer. Width: 600px. Single column on mobile.123124## Example 2: E-commerce Promotional Email125126**Structure:** Logo header → Full-width hero with offer overlay → Product grid (2x2) → Countdown timer zone → CTA button → Footer. Dynamic product blocks from catalog.127128---129130## Anti-Patterns131132- **Custom fonts without fallbacks** — if the custom font does not load (common in Outlook), text displays in Times New Roman. Always declare fallbacks.133- **Designing desktop-first** — 60%+ of email opens are on mobile. Design mobile-first, enhance for desktop.134- **Giant images with no alt text** — when images are blocked (default in many clients), the email is blank. Alt text is not optional.135- **Tiny CTA buttons** — a 30px button on mobile is untappable. Minimum 44x44px touch target.136- **Ignoring dark mode** — transparent PNGs and black text on white backgrounds invert poorly. Test dark mode explicitly.137138---139140## Recovery141142- **Email client rendering issues:** Simplify the design. Tables-based layout is ugly but universally supported. Progressive enhancement on top.143- **No developer available:** Use the email platform's drag-and-drop builder with brand colors and fonts configured as defaults.144- **Emails look different on every device:** Accept that pixel-perfect is impossible in email. Aim for "consistently good" not "identical everywhere."145- **Team sends off-brand emails:** Lock down templates in the platform. Restrict editing to content zones only, not design elements.
reaperinvest