Joe Speaking Email

Overview

Generate self-contained HTML email files that follow the Joe Speaking brand identity — warm stone tones, amber accents, Georgia serif headings, and system-font body text. Every email uses table-based layout with inline CSS for maximum client compatibility, VML rounded-button fallbacks for Outlook, dark mode support, and mobile responsiveness at 620px breakpoint. No external CSS, no JavaScript, no web fonts.

Workflow

1. Read the design system: Read design-system.md completely before generating any email. It contains all design tokens, the CSS reset, 15 ready-to-use components, and the complete HTML skeleton.
2. Determine email type: Identify which type of email the user needs (see Email Types table below).
3. Gather content: Collect subject line, preheader text, body copy, CTAs, images, and any promo codes or special elements.
4. Select components: Choose from the 15-component library in design-system.md Section 5.
5. Generate HTML: Start from the HTML skeleton (Section 7 of design-system.md), insert selected components, and customize content.
6. Verify compatibility: Run through all 8 Mandatory Compatibility Rules below.
7. Save file: Write the final .html file to the user's chosen path.

Output Format