hubeiqiao 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.mdcompletely 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.mdSection 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
.htmlfile 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 astyleattribute. 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"withmax-width:600px. - System fonts only — Use
-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-seriffor body andGeorgia,'Times New Roman',seriffor headings. No@font-face. - Dark mode classes alongside inline styles — Every text element gets both an inline
colorand 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, andfluidclasses for the@media (max-width: 620px)breakpoint.
Customization Checklist
For each new email, verify:
- Subject line is set in
<title>tag - Preheader text matches the email's key message
- Brand header links point to
https://joespeaking.com - All
<!-- CUSTOM -->placeholder values are replaced - CTA button text and URL are correct
- VML fallback href, width, and text match the HTML button
- Footer copyright year is current
- Social links are present and correct
- "You received this because..." text is appropriate for the audience
Reference Files
design-system.md— Complete design tokens, CSS reset, 15 component HTML blocks, and HTML skeletonexamples/alpha-launch.html— Production alpha launch email (full reference)