Product Launch Email Campaign
A responsive HTML email layout for a product launch — featuring a hero image, feature highlights, social proof, and a single focused CTA — compatible with major email clients.
Compatible with:ChatGPTv0CursorGitHub Copilot
Patterns:hero, card-grid, footer
Prompt
Design a responsive HTML email template for a SaaS product launch campaign. The email should follow email-client-safe practices (table-based layout, inline styles, no custom fonts). Keep the maximum width at 600px, centered.
**Email structure:**
1. **Pre-header text** — Hidden preview text: "🚀 Introducing the feature you've been waiting for..."
2. **Header** — White background, centered company logo (120×40px), a thin bottom border.
3. **Hero section** — A full-width image (600×300px) showing a product screenshot or illustration. Below: a centered headline in a large dark font ("Introducing Smart Automations"), a 2-sentence subheadline in gray, and a large centered CTA button in blue ("See it in action →").
4. **Feature highlights — 3 columns** (stacked single column on mobile):
Each column has a centered icon (emoji or simple icon), a bold feature name, and 1–2 sentence description.
- ⚡ Set up in minutes — "No code required. Connect your tools and go."
- 🔁 Runs on autopilot — "Automations run 24/7 so you never miss a step."
- 📊 Full visibility — "Audit logs keep you in control of every action."
5. **Social proof strip** — Gray background row. Centered text: "Trusted by 10,000+ teams" followed by 4–5 small company logos in a row.
6. **Secondary CTA section** — Light blue background, centered text: "Not sure where to start?" and a ghost/outlined CTA button: "Browse automation templates →"
7. **Footer** — Small gray text: company name and address, unsubscribe link, view in browser link. Social icons row (Twitter, LinkedIn, GitHub).
Use web-safe fonts: Georgia for headings, Arial/sans-serif for body. Max-width 600px, centered on a light gray (#f4f4f5) email background.Mockdown
[EMAIL BACKGROUND — #f4f4f5] ┌───────────────────────────────────────────────────────────┐ ← max-w 600px │ [HEADER — white, bordered bottom] │ │ [Logo] │ ├───────────────────────────────────────────────────────────┤ │ [HERO IMAGE — 600×300] │ │ ┌────────────────────────────────────────────────────┐ │ │ │ [product screenshot] │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ Introducing Smart Automations │ │ "Automate repetitive work and ship faster than ever. │ │ No code, no complexity. Just results." │ │ │ │ [See it in action → ] │ │ (blue button, 200px wide) │ ├───────────────────────────────────────────────────────────┤ │ [FEATURE HIGHLIGHTS — 3 cols] │ │ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ ⚡ │ │ 🔁 │ │ 📊 │ │ │ │ Set up in │ │ Runs on │ │ Full │ │ │ │ minutes │ │ autopilot │ │ visibility │ │ │ │ No code req │ │ 24/7 runs │ │ Audit logs │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ ├───────────────────────────────────────────────────────────┤ │ [SOCIAL PROOF — gray bg] │ │ Trusted by 10,000+ teams │ │ [Logo] [Logo] [Logo] [Logo] [Logo] │ ├───────────────────────────────────────────────────────────┤ │ [SECONDARY CTA — light blue bg] │ │ Not sure where to start? │ │ [Browse automation templates →] │ │ (ghost button, outlined) │ ├───────────────────────────────────────────────────────────┤ │ [FOOTER — gray text, white bg] │ │ [𝕏 Twitter] [LinkedIn] [GitHub] │ │ │ │ Acme Inc. · 123 Market St, San Francisco, CA 94103 │ │ Unsubscribe · View in browser · Privacy Policy │ └───────────────────────────────────────────────────────────┘
Product Launch Email Campaign
┌───────────────────────────────────────────────┐
│ ┌───────────────────────────────────────┐ │
│ │ ✉ Preview text goes here... │ │
│ └───────────────────────────────────────┘ │
│ │
│ ◉ ACME Inc. │
│ │
│ ┌───────────────────────────────────────┐ │
│ │ │ │
│ │ 🚀 Introducing Our New Feature │ │
│ │ │ │
│ │ We've been working hard to bring │ │
│ │ you something special... │ │
│ │ │ │
│ │ [ Learn More → ] │ │
│ │ │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Feature 1│ │ Feature 2│ │ Feature 3│ │
│ │ desc │ │ desc │ │ desc │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ Unsubscribe · Preferences · View Online │
└───────────────────────────────────────────────┘UI Patterns Used
``` ▶ What is the refund policy? — When you request a refund, ... ▶ How do I change my plan? — Go to account settings → Billing. ```
Accordion
Collapsible panels that expand to reveal content, useful for FAQs and dense regions
--accordion--collapse--expand+1
``` ────────────── [Big Heading] Short supporting sentence that explains value. [Primary CTA] [Secondary Link] ──────────────
Call To Action (CTA)
Prominent CTA sections used to convert visitors with a clear value proposition and primary action
--cta--hero--action+1
``` ┌────────────────────────────────────────────────────────┐ │ Company Logo Products Resources Legal Social │ │ © 2026 Company Name • Terms • Privacy • Contact │ └────────────────────────────────────────────────────────┘ ```
Footer
Page footer with site links, legal info, and secondary navigation
--footer--legal--links+1
``` ┌──────────────────────────────────────────────────────────┐ │ │ │ 🚀 Welcome to Acme │ │ │ │ Build better products, faster │
Hero Section
A large, attention-grabbing area at the top of a page with headline, subtext, and call-to-action
--hero--landing--cta+2
``` Stay in the loop. Get product updates and tips. [ Email input __________________ ] [Subscribe] ``` Characteristics:
Newsletter Signup
Compact newsletter or mailing-list signup block used in footers or inline CTAs
--newsletter--email--signup+1
``` [New] Introducing our 50% discount for students → [Learn more] [Dismiss] ``` Characteristics: - Short headline with a single action
Promotional Banner
Top-of-page or inline banner for short-lived promotions, offers, or announcements
--banner--promo--announcement+1
Learn more about the UI patterns used in this layout.