Back to marketing templates
SaaS Product Launch Announcement
Built for software companies that need to generate genuine excitement around a product launch. The deep navy and electric blue palette creates urgency and energy without resorting to visual noise. Feature blocks are clear, scannable, and purposeful.
Responsive Dark Mode Gmail Outlook Apple Mail
Preview
Production-Ready HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<title>Introducing Relay 3.0 — Your workflow, redesigned</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
@media only screen and (max-width: 600px) {
.email-container { width: 100% !important; }
.fluid { max-width: 100% !important; height: auto !important; }
.feature-cell { display: block !important; width: 100% !important; padding: 16px 24px !important; }
.mobile-pad { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (prefers-color-scheme: dark) {
.dark-bg { background-color: #0f111a !important; }
.dark-card { background-color: #161925 !important; }
.dark-text { color: #e8eaf2 !important; }
.dark-muted { color: #8b8fa8 !important; }
.dark-border { border-color: #2a2d3e !important; }
.dark-feature { background-color: #1e2130 !important; }
}
</style>
</head>
<body width="100%" style="margin:0; padding:0; background-color:#F5F6FA; font-family:'Helvetica Neue', Arial, sans-serif;">
<center style="width:100%; background-color:#F5F6FA;" class="dark-bg">
<!-- Preview text -->
<div style="display:none; max-height:0; overflow:hidden; mso-hide:all;">Relay 3.0 is here. A completely rebuilt workflow engine, smarter automations, and the UI your team has been asking for.͏ ͏ ͏ ͏</div>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="600" class="email-container" style="max-width:600px; margin:auto;">
<!-- Header bar -->
<tr>
<td style="padding: 0 40px; background-color: #1a1d2e; border-bottom: 2px solid #4F6AF5;" class="dark-card">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 20px 0;">
<span style="font-size: 18px; font-weight: 700; color: #ffffff; letter-spacing: -0.5px;">Relay</span>
<span style="font-size: 11px; color: #4F6AF5; margin-left: 6px; letter-spacing: 1px; text-transform: uppercase; font-weight: 500;">3.0</span>
</td>
<td style="padding: 20px 0; text-align: right;">
<span style="font-size: 11px; color: #6b7280; letter-spacing: 0.5px;">Product Update</span>
</td>
</tr>
</table>
</td>
</tr>
<!-- Hero -->
<tr>
<td style="padding: 52px 40px 44px; background-color: #1a1d2e;" class="dark-card">
<p style="margin: 0 0 8px; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: #4F6AF5; font-weight: 600;">What's new</p>
<h1 style="margin: 0 0 20px; font-size: 36px; font-weight: 700; color: #ffffff; line-height: 1.15; letter-spacing: -0.5px;">Your workflow,<br>completely redesigned.</h1>
<p style="margin: 0 0 32px; font-size: 16px; color: #9ca3b8; line-height: 1.7;">Relay 3.0 is the most significant update we've ever shipped. A rebuilt automation engine, a new real-time collaboration layer, and an interface that finally gets out of your way.</p>
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="border-radius: 6px; background: linear-gradient(135deg, #4F6AF5 0%, #6B4FE0 100%); text-align: center;">
<a href="#" target="_blank" style="display: inline-block; color: #ffffff; font-size: 14px; font-weight: 600; letter-spacing: 0.3px; text-decoration: none; padding: 14px 32px; border-radius: 6px;">Explore what's new →</a>
</td>
<td width="12"></td>
<td style="border-radius: 6px; border: 1px solid #2a2d40; text-align: center;">
<a href="#" target="_blank" style="display: inline-block; color: #9ca3b8; font-size: 14px; font-weight: 500; text-decoration: none; padding: 14px 24px; border-radius: 6px;">Release notes</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Feature divider -->
<tr>
<td style="height: 1px; background-color: #252838;" class="dark-border"></td>
</tr>
<!-- Features -->
<tr>
<td style="padding: 40px 40px 32px; background-color: #1a1d2e;" class="dark-card">
<p style="margin: 0 0 28px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #6b7280; font-weight: 600;">Three things that change everything</p>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<!-- Feature 1 -->
<tr>
<td class="feature-cell dark-feature" style="padding: 20px 20px; background-color: #1e2130; border-radius: 6px; margin-bottom: 12px; border-left: 3px solid #4F6AF5;">
<p style="margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #ffffff;">Parallel automation engine</p>
<p style="margin: 0; font-size: 13px; color: #9ca3b8; line-height: 1.6;">Run thousands of automation branches simultaneously. No more queuing. Your workflows execute exactly when they should.</p>
</td>
</tr>
<tr><td style="height: 10px;"></td></tr>
<!-- Feature 2 -->
<tr>
<td class="feature-cell dark-feature" style="padding: 20px 20px; background-color: #1e2130; border-radius: 6px; border-left: 3px solid #6B4FE0;">
<p style="margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #ffffff;">Real-time collaboration</p>
<p style="margin: 0; font-size: 13px; color: #9ca3b8; line-height: 1.6;">See your team's cursor live inside the workflow builder. Comment on steps, assign tasks, and review changes — all without leaving Relay.</p>
</td>
</tr>
<tr><td style="height: 10px;"></td></tr>
<!-- Feature 3 -->
<tr>
<td class="feature-cell dark-feature" style="padding: 20px 20px; background-color: #1e2130; border-radius: 6px; border-left: 3px solid #4FD9E0;">
<p style="margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #ffffff;">Rebuilt visual interface</p>
<p style="margin: 0; font-size: 13px; color: #9ca3b8; line-height: 1.6;">A cleaner canvas, faster load times, and keyboard shortcuts throughout. Built from the ground up based on two years of user feedback.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- CTA band -->
<tr>
<td style="padding: 36px 40px; background-color: #252838; text-align: center; border-top: 1px solid #2a2d3e;" class="dark-border">
<p style="margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #ffffff;">Available today for all plans.</p>
<p style="margin: 0 0 24px; font-size: 14px; color: #6b7280; line-height: 1.6;">Relay 3.0 is live in your dashboard. No migration required.</p>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td style="border-radius: 6px; background-color: #4F6AF5;">
<a href="#" style="display:inline-block; font-size: 14px; font-weight: 600; color: #ffffff; text-decoration: none; padding: 13px 32px; border-radius: 6px; letter-spacing: 0.2px;">Open my dashboard →</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding: 28px 40px; background-color: #13151f; text-align: center; border-top: 1px solid #1e2130;">
<p style="margin: 0 0 6px; font-size: 12px; color: #4a4d5e; line-height: 1.6;">
Relay, Inc. · 340 Pine Street, Suite 800 · San Francisco, CA 94104
</p>
<p style="margin: 0; font-size: 11px; color: #3a3d50;">
<a href="#" style="color: #4a4d5e; text-decoration: none;">Manage preferences</a> · <a href="#" style="color: #4a4d5e; text-decoration: none;">Unsubscribe</a> · <a href="#" style="color: #4a4d5e; text-decoration: none;">Privacy</a>
</p>
</td>
</tr>
</table>
</center>
</body>
</html>