---
name: Email Template (Figma)
description: Transactional or marketing email designed to render in Gmail, Outlook, and iOS Mail — single-column 600px core, bulletproof layout, restrained visual system.
triggers:
  - email template
  - html email
  - marketing email
  - transactional email
  - newsletter
  - welcome email
cd:
  mode: email
  platform: figma-fixed-canvas
  scenario: transactional
  preview: figma_frames
  fidelity: high
  speaker_notes: false
  animations: false
  featured: true
  design_system:
    requires: true
    sections: [palette, type]
  craft:
    requires:
      - typography
      - typography-hierarchy
      - color
      - anti-ai-slop
      - accessibility-baseline
  inputs:
    - email type (welcome / receipt / reset / notification / newsletter)
    - sender identity (brand voice in one line)
    - primary action (if any — one CTA)
    - context data the email references (order, user name, item…)
  parameters:
    - width (default 600)
    - dark_mode (default true — render both light and dark)
  outputs:
    primary: figma_frames
    capabilities_required:
      - figma_execute
  default_for:
    - email
    - email-template
  example_prompt: "Welcome email for a new SaaS signup — one CTA 'Verify your email', friendly-but-short voice"
---

## Email is not a website

Email rendering is hostile. Your design must survive Gmail stripping CSS, Outlook's Word renderer, iOS dark mode inverting your palette, and a user opening it on a 320px phone. Constraints, not ornament:

- Single column, 600px core width. Content fluids down to ~320px on mobile.
- No background images behind text. No fixed-positioned overlays. No web fonts as the only fallback.
- Every visual choice must degrade gracefully when CSS is stripped — the email should still be legible as flat HTML.

## Anatomy

1. **Preheader** — the hidden line that shows in the inbox list under the subject. 40–90 characters, complements the subject rather than repeating it.
2. **Header** — brand mark (logo or wordmark, 32–48pt tall). Optionally one nav-link-sized line ("View in browser"). No multi-link menu — this isn't a site.
3. **Body** — headline (≤ 50 char), one or two short paragraphs, the primary CTA button. Paragraphs < 3 lines each.
4. **CTA** — single button, full-width on mobile, auto-width on desktop, accent-colored with `color.accent` and `color.fg` text per DS contrast rules. Verb-led label.
5. **Secondary content** (optional) — one supporting block (order summary, feature list of ≤ 3 items, a quote). Divided from body by whitespace, not heavy borders.
6. **Footer** — sender name/address (legally required for marketing), a single unsubscribe link, optional preference center link. Muted-foreground, small but readable.

No more than 6 vertical sections top-to-bottom. If the email needs more, you're writing a page — split or shrink.

## Canvas

- Desktop frame: 680 wide (40 outer padding + 600 content).
- Mobile frame: 375 wide, content 335.
- Render both light and dark variants side-by-side — half of iOS Mail users read in dark mode, and an inverted light palette always looks broken.

## Typography

Email typography is stripped-down:

- Body: system font stack (`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`) at 16px with 1.5 line-height. Web fonts are a progressive enhancement, not a foundation.
- Headline: 24–28px, weight 600. Don't go larger than 32 — emails are read in the inbox pane at reduced size.
- Never more than 3 type sizes across the whole email.
- Links use `color.accent` with an underline. No accent-colored body paragraphs.

## Palette discipline

- `color.bg` as the outer wrapper (the space around the 600-wide card). `color.surface` as the card itself.
- `color.accent` on the CTA button fill and inline links only. Headlines and body stay at `color.fg` / `color.muted`.
- Dark mode: do NOT invert algorithmically. Use the DS's dark ramp if present; if not, ask before shipping.

## CTA

- One primary button, no exceptions. A secondary link beneath it is fine; a second button is not.
- Button: 44–48pt tall, 20–28pt horizontal padding, 6–10pt radius per the DS. Label ≤ 3 words, verb-led ("Verify email", "View receipt", "Reset password").
- Always pair with a plaintext fallback link below the button: "Or copy and paste this link: …". Email clients block buttons sometimes.

## Copy discipline

Email copy is the primary content; visual is secondary. Hold it to this bar:

- Subject: ≤ 50 characters, question or outcome. No emoji spam. One scope emoji is fine if brand-consistent.
- Preheader: ≤ 90 characters, complements subject.
- Body: 3–6 sentences. Scannable — the reader decides in ~3 seconds whether to act.
- Sign-off: if transactional, omit. If relational, a real human name or team name.

Do not fabricate specifics ("We noticed you opened 5 tabs today"). Write copy the brief supports.

## Accessibility

- Body-text contrast ≥ 4.5:1 against the card surface. The CTA button text contrast ≥ 4.5:1 against the button fill.
- Images always have alt text (Figma can't enforce this, but write the alt for each image in a sibling text layer or the notes).
- Minimum tap target 44×44 for any link or button on mobile.

## Anti-patterns

- Full-bleed background image behind body copy. Strips clients will show white text on white.
- Multi-column layouts inside the email body (two cards side-by-side that won't stack on mobile).
- 7+ social icons in the footer. Keep to the 2–3 the brand actually lives on.
- Marketing-copy filler ("You won't believe what we built!"). Specific outcome language or no line at all.
- Invented statistics or urgency ("Only 24 hours left!") unless the brief supplied them.
- Emoji as CTA decoration (🎉 or 👉 prefixing a button). Restraint.

## Quality bar

Render both light and dark versions before replying. Re-read the copy at 80% zoom — can you understand the email without loading a single image? That's the test. Run `craft_lint` against the concatenated copy.