| name | joe-speaking-email |
| description | Generate production-grade HTML emails for Joe Speaking using the brand's
warm editorial luxury design system. Use when the user asks to create an
email, newsletter, product announcement, feature update, or any email
communication for Joe Speaking. Produces self-contained .html files with
table-based layouts, inline CSS, VML Outlook fallbacks, dark mode, and
mobile responsiveness.
|
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
- 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.
- Determine email type: Identify which type of email the user needs (see Email Types table below).
- Gather content: Collect subject line, preheader text, body copy, CTAs, images, and any promo codes or special elements.
- Select components: Choose from the 15-component library in
design-system.md Section 5.
- Generate HTML: Start from the HTML skeleton (Section 7 of design-system.md), insert selected components, and customize content.
- Verify compatibility: Run through all 8 Mandatory Compatibility Rules below.
- Save file: Write the final
.html file to the user's chosen path.
Output Format
Always produce a single self-contained HTML file with:
<!DOCTYPE html> with VML/Office XML namespaces- All meta tags (charset, viewport, X-UA-Compatible, Apple disable reformatting, format-detection)
- MSO conditional
<noscript> block for Outlook
- Complete
<style> block (reset + responsive + dark mode)
- Hidden preheader div with whitespace padding
- Table-based layout only — 600px max container
- Every style inlined on every element
- VML fallback for every rounded button
Email Types
| Type | When to Use | Typical Sections |
|---|
| Launch | New product or feature launch | Hero heading, feature card, video card, CTA, promo code, personal story, quote, footer |
| Feature Update | Announcing improvements | Heading, what's new bullets, before/after, CTA, footer |
| Newsletter | Regular updates or roundups | Heading, multiple body sections, links, CTA, footer |
| Onboarding | Welcome new users | Greeting, getting started steps, CTA, help resources, footer |
| Transactional | Receipts, confirmations | Minimal heading, transaction details, support link, footer |
Component Library
| # | Component | Use Case |
|---|
| 5.1 | Brand Header | Logo + name + tagline — every email |
| 5.2 | Divider | Full-width 1px rule between sections |
| 5.3 | Decorative Divider | Centered 80px rule for visual breaks |
| 5.4 | Body Text | Standard paragraph with proper line-height |
| 5.5 | Hero Heading | Georgia h1 at 28px — opening greeting or title |
| 5.6 | Section Heading + Label | Amber uppercase label + Georgia subtitle |
| 5.7 | Amber Bullet Item | ✦ marker with bold title + description |
| 5.8 | Feature Card | White card wrapping bullet items + sub-note |
| 5.9 | Video/Image Card | Clickable thumbnail with caption |
| 5.10 | CTA Button (Primary) | Dark pill button with VML Outlook fallback |
| 5.11 | Secondary Button | Colored pill button (e.g., Discord purple) |
| 5.12 | Promo Code Badge | Dashed amber border, monospace code |
| 5.13 | Avatar Block | Centered circular image |
| 5.14 | Quote Block | Georgia italic text between decorative rules |
| 5.15 | Signature + Footer | Name, title, social links, copyright |
See design-system.md Section 5 for complete HTML markup of each component.
8 Mandatory Compatibility Rules
These rules are non-negotiable. Every generated email must pass all 8.
- Tables only — Use
<table role="presentation"> for all layout. No <div> layout, no flexbox, no grid.
- Inline styles on every element — Every
<td>, <p>, <a>, <img>, <span> must have a style attribute. Classes are ONLY for dark mode and responsive overrides.
- VML for every rounded button — Every CTA button needs
<!--[if mso]> VML <v:roundrect> before the HTML <a> tag.
- 600px max container — The inner email container table is
width="600" with max-width:600px.
- System fonts only — Use
-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif for body and Georgia,'Times New Roman',serif for headings. No @font-face.
- Dark mode classes alongside inline styles — Every text element gets both an inline
color and a dark mode class (text-primary, text-secondary, etc.).
- Preheader whitespace padding — The hidden preheader div must end with
͏‌  ­ entities repeated 8+ times.
- Mobile responsive classes — Use
mobile-padding, mobile-center, mobile-full, hero-heading, section-heading, email-container, and fluid classes for the @media (max-width: 620px) breakpoint.
Customization Checklist
For each new email, verify:
Reference Files
