Email Newsletter

Email Newsletter

Draft and design a complete HTML email newsletter from a topic or content brief. Output is paste-ready for Loops, Mailchimp, Beehiiv, Resend, or any standard email platform.

Critical rule: Table-based HTML with inline styles only. No CSS classes, no flexbox, no grid, no <style> blocks. Every element gets style="" directly. This is not optional -- email clients strip everything else.

Step 1: Brief Intake

Need three things to start. If all three present in the message: skip to Step 2.

If any missing, ask exactly:

"To get started, I need three things:

1. Topic -- what is this newsletter about?
2. Audience -- who is reading? (role, company size, how they know you)
3. Primary CTA -- what one action do you want readers to take?"

Wait for all three before continuing.

Step 2: Complete Intake

Ask all questions in one message, grouped by category. User can skip any -- defaults apply.

"A few questions before I draft -- answer what you know, skip the rest:

Content

1. Length -- brief (300 words, punchy) / standard (500-700) / deep dive (800+ words)?
2. Format -- editorial article / numbered breakdown / personal story / data report?
3. Issue context -- one-time send / part of weekly series / monthly digest?
4. CTA URL -- what's the actual link? (or I'll use a placeholder)

Brand 5. Company / brand name -- for header and footer 6. Tagline -- one-line description (optional, for footer) 7. City & country -- for footer (e.g. "San Francisco, US") 8. Primary brand color -- hex? (e.g. #856FE6) 9. Secondary accent -- keep default yellow-green (#D8F90A) / use brand color / something else?

Design 10. Background -- dark (editorial/SaaS) / light (clean/corporate) / custom hex? 11. Display font -- editorial serif (Instrument Serif) / clean modern sans / system fonts only? 12. Button style -- pill (very rounded) / softly rounded / sharp corners? 13. Visual style -- editorial / technical+data / warm+founder / bold+campaign?

Platform & Technical 14. Platform -- Loops / Mailchimp / Beehiiv / Resend / other? 15. Tone -- educational / conversational / bold+direct / formal / playful? 16. Personalization -- none / first name / first name + company? 17. Subject line -- have one / want 3 options? 18. Secondary sections -- sponsor block / product callout / event / quick links / none? 19. Plain-text version -- yes (recommended) / no?"

Defaults if skipped:

Step 2.5: Design Direction (internal -- not shown to user)

From Step 2 answers, determine:

• Visual character (from question 13, or inferred from tone + format if skipped)
• ONE unmissable element -- identify before Step 3
• Template path (see Step 5)

Character defaults if question 13 skipped:

• Educational / formal tone: Editorial
• Metrics-heavy content (stats, benchmarks, reports): Technical/data-forward
• Product launches, events, campaigns: Bold/campaign

Never ask the user for design direction separately -- derive it from their answers.

Step 3: Structure Design

Read references/html-email-guide.md for layout rules before choosing sections.

Based on topic + audience + CTA + secondary sections requested, select sections from this library:

Output the chosen structure as a numbered list with one-line purpose per section:

Proposed structure:
1. Header -- logo + Issue #1 / [date]
2. Hero -- headline + hook paragraph
3. Intro -- short personal framing
4. Main Content -- [topic] breakdown
5. Stat Callout -- key data point from the story
6. CTA -- [cta text]
7. Footer -- unsubscribe + company

Does this structure work, or should I adjust any sections?

Wait for confirmation before Step 4.

Step 4: Content Draft

Write copy for each section in sequence. No HTML yet -- clean prose only.

Rules per section:

• Header: Issue number + date. No copy needed.
• Hero headline: 8 words max, outcome-focused, no starting with "I/We/Our"
• Hero hook: 1-2 sentences, problem or curiosity gap, pulls reader in
• Intro: 2-3 sentences, personal or contextual, not corporate-speak, contractions OK
• Main content: 250-400 words, scannable -- use bold phrases for key points, short paragraphs (1-3 lines), no walls of text, no bullet overload
• Stat callout: One stat or quote, 20 words max, punchy
• Product CTA: 2-3 sentences, value-forward, not "Check out our product" -- tell them what changes for them
• CTA button text: 3-5 words, action verb + benefit ("Read the full breakdown", "Save my seat", "Get the guide")
• Footer: Unsubscribe link placeholder + company name

Read references/subject-line-formulas.md then write 3 subject line options (if subject line not provided by user):

• Option A: Curiosity gap formula
• Option B: Direct benefit formula
• Option C: Number/list formula

Do not use em dashes. Do not use: "powerful", "seamless", "game-changing", "leverage", "innovative", "unlock", "transform", "elevate", "cutting-edge", "robust".

Step 5: HTML Generation

Read references/design-system.md and references/html-email-guide.md before generating HTML.

Template or custom -- decide based on Step 2 answers:

Use templates/dark-newsletter.html as base when ALL of:

• background = dark (or not specified)
• display font = Instrument Serif (or not specified)
• no custom background hex provided

Use templates/light-newsletter.html as base when ALL of:

• background = light OR tone = formal
• display font = Instrument Serif (or not specified)
• no custom background hex provided

Generate custom HTML from scratch when ANY of:

• custom background hex provided (not dark, not white)
• display font = modern sans or system fonts only
• combination of answers produces a design neither template serves

For custom generation: use references/design-system.md Custom Generation Guide as the full token spec. Apply user's background/font/button/accent choices throughout.

Then (for template path):

1. Select only the sections needed from the template (based on Step 3 structure)
2. Fill in all [PLACEHOLDER] values with content from Step 4
3. Apply brand color substitution (see below)
4. Verify all [UNSUBSCRIBE_URL] placeholders are still present (platform tuning happens in Step 6)

Brand color substitution rules:

If brand_color is provided:

• Replace brand strip bgcolor (#D8F90A in the height:2px row) with brand_color
• Replace stat callout left border color with brand_color
• Replace category label color with brand_color
• If brand_color luminance is high (yellows, greens, oranges -- most neons): replace step badge #D8F90A with brand_color too
• If brand_color luminance is low (dark navy, forest, charcoal): keep step badges and CTA button as #D8F90A, only use brand_color for strip + stat border

If brand_color is NOT provided: keep all #D8F90A values as-is.

Content substitution rules (from Step 2 answers):

• If company_name provided: replace all [YOUR BRAND] and [COMPANY NAME] placeholders
• If city_country provided: replace [CITY, COUNTRY] placeholder
• If tagline provided: add as subtitle line in footer after company name
• If cta_url provided: replace all [CTA_URL] placeholders with actual URL
• If personalization = first_name: add platform-appropriate first name variable to hero greeting -- e.g. Hey %%first_name%%, on Beehiiv, Hey {{first_name}}, on Loops, Hey *|FNAME|*, on Mailchimp
• If personalization = first_name + company: add both variables where contextually appropriate

Brand color visual tension check (on dark email):

Does the brand color visually pop on #111111? Test mentally: would it be visible as a 2px strip?

• High-saturation colors (purples, blues, teals, pinks, yellows, oranges, greens): YES -- use for strip + stat border + category label
• Low-saturation / near-neutral (warm greys, beige, off-white): strip only; category label reverts to #555555
• Near-black (very dark navy, forest, charcoal below ~#2A2A2A): skip brand_color for ALL accent uses, fall back to #D8F90A for every element

Accent discipline rule: brand_color appears in AT MOST 3 places: brand strip, stat border, category label. Never in body copy, headlines, button backgrounds, or section backgrounds. Over-branding kills the premium feel.

CTA button text color:

• On #D8F90A button background: always use #0A0A0A text (it's a light color)
• On #111111 button background (inside yellow callout card): always use #F2F2F2 text
• On brand_color button: use #0A0A0A if brand is light, #FFFFFF if brand is dark