When to use it
Send to people who subscribed to product news. Replace the sample release notes with shipped, available features.
Includes inbox preview text, a clear action, a fallback URL, and a support link. The HTML uses inline styles, a fluid table layout, and system fonts, with a decorative illustration and no tracking pixels. Every action and important detail stays in live text.
The artwork is yours, too
The full collection includes lightweight JPEGs for your emails and full-resolution PNG originals. The HTML uses a shared Stampwing image URL. You can self-host the JPEG and replace its URL, or attach it using your provider’s content-ID support. The collection also includes editable SVG originals for the ten new designs, plus offline previews with sample data.
Illustrations are decorative. If an inbox blocks images, the message, details, and action remain readable.
Make it yours
Replace every placeholder using your template engine. Escape values for their HTML context and validate action URLs against your approved HTTPS origins.
The subject and preheader are separate: the preheader is the short text many inboxes show beside the subject. Set the subject in your sending API; the HTML already contains the hidden preheader. Send the matching text as the plain-text alternative.
| Variable | Illustrative value |
|---|---|
{{app_name}} | Atlas |
{{issue_number}} | 07 |
{{publish_date}} | October 2026 |
{{lead_title}} | A clearer view of every project |
{{lead_description}} | Pin the projects you return to, compare recent activity, and pick up where you left off. |
{{second_title}} | Saved views, ready to share |
{{second_description}} | Keep useful filters together and give your team the same starting point. |
{{third_title}} | The little details add up |
{{third_description}} | Faster keyboard navigation and clearer empty states make everyday work feel lighter. |
{{release_url}} | https://example.com/changelog/october |
{{support_email}} | support@example.com |
{{unsubscribe_url}} | https://example.com/preferences/unsubscribe/sample |
{{mailing_address}} | Atlas · 123 Example Street, Toronto, ON A1A 1A1 |
Implementation checklist
- Use the subscribed audience and honor suppressions.
- Only describe features that are actually available to these recipients.
- Replace mailing_address and provide a working unsubscribe URL.
- Configure your provider’s List-Unsubscribe headers where supported.
Inspect the source
HTML source
HTML templatehtml
<!doctype html>
<!-- Stampwing / Fieldnotes / Indigo. Free for personal and commercial use. No attribution required.
Palette: accent #4352b3; canvas #edf0f5; ink #18212d. Replace every placeholder before sending. -->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="x-apple-disable-message-reformatting"><meta name="color-scheme" content="light"><meta name="supported-color-schemes" content="light"><title>{{app_name}} notes / {{issue_number}}</title>
<!--[if mso]><noscript><xml><o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office"><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript><![endif]-->
<style>body,table,td,a{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}table,td{mso-table-lspace:0pt;mso-table-rspace:0pt}body{margin:0!important;padding:0!important}a:focus-visible{outline:3px solid #4352b3;outline-offset:4px}@media only screen and (max-width:480px){.email-outer{padding:16px 10px!important}.email-padding{padding-left:24px!important;padding-right:24px!important}.email-heading{font-size:34px!important;letter-spacing:-1.2px!important}.email-amount{font-size:36px!important}.email-fact-label{width:30%!important}.email-metric{display:block!important;width:auto!important;border-right:0!important;border-bottom:8px solid #fff!important}}</style></head>
<body style="margin:0;padding:0;width:100%;background:#edf0f5;font-family:Arial,Helvetica,sans-serif;color:#18212d;overflow-wrap:anywhere;word-break:break-word;">
<div style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;">{{lead_title}} — and two more useful improvements.͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ </div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" id="email-root" style="width:100%;border-collapse:collapse;background:#edf0f5;"><tr><td class="email-outer" align="center" style="padding:40px 16px;background:#edf0f5;"><!--[if mso]><table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;max-width:600px;table-layout:fixed;background:#ffffff;border:1px solid #dce2eb;border-radius:14px;border-collapse:separate;overflow:hidden;"><tr><td class="email-padding" style="padding:32px 40px;background:#f4f5fc;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;"><tr><td style="font-size:21px;line-height:1.4;letter-spacing:-.6px;font-weight:700;color:#18212d;">{{app_name}}</td></tr></table><div style="height:24px;line-height:24px;font-size:1px;" aria-hidden="true"> </div><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;"><tr><td valign="bottom"><p style="margin:0;font:700 58px/1 'Courier New',Courier,monospace;letter-spacing:-4px;color:#4352b3;">{{issue_number}}</p></td><td align="right" valign="bottom"><p style="margin:0;color:#4352b3;font:700 11px/1.6 'Courier New',Courier,monospace;letter-spacing:1.2px;">PRODUCT JOURNAL</p><p style="margin:0;color:#596578;font-size:15px;line-height:1.8;font-size:12px;">{{publish_date}}</p></td></tr></table><div style="height:24px;line-height:24px;font-size:1px;" aria-hidden="true"> </div><h1 class="email-heading" style="margin:0;color:#18212d;font-size:44px;line-height:1.08;letter-spacing:-1.8px;">A few things<br>you’ll want to try.</h1><p style="margin:0;color:#596578;font-size:15px;line-height:1.8;margin-top:20px;">A short update from the {{app_name}} team. Here’s what’s new, what’s improved, and where to take it next.</p><div style="height:26px;line-height:26px;font-size:1px;" aria-hidden="true"> </div><img src="https://www.stampwing.com/template-assets/v4/product-update.jpg" width="520" height="200" alt="" role="presentation" style="display:block;width:100%;max-width:520px;height:auto;border:0;outline:none;" /></td></tr><tr><td class="email-padding" style="padding:30px 40px 22px;"><p style="margin:0;color:#4352b3;font:700 11px/1.6 'Courier New',Courier,monospace;letter-spacing:1.2px;">THE LEAD STORY</p><h2 style="margin:12px 0;font-size:28px;line-height:1.2;letter-spacing:-.7px;color:#18212d;">{{lead_title}}</h2><p style="margin:0;color:#596578;font-size:15px;line-height:1.8;">{{lead_description}}</p><div style="height:28px;line-height:28px;font-size:1px;" aria-hidden="true"> </div><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;"><tr><td width="38" valign="top" style="padding:19px 12px 19px 0;border-top:1px solid #e3e7ee;font:12px/1.8 'Courier New',Courier,monospace;color:#4352b3;">02</td><td style="padding:19px 0;border-top:1px solid #e3e7ee;"><h2 style="font-size:17px;line-height:1.5;margin:0 0 5px;color:#18212d;">{{second_title}}</h2><p style="margin:0;color:#596578;font-size:15px;line-height:1.8;font-size:14px;">{{second_description}}</p></td></tr><tr><td width="38" valign="top" style="padding:19px 12px 19px 0;border-top:1px solid #e3e7ee;font:12px/1.8 'Courier New',Courier,monospace;color:#4352b3;">03</td><td style="padding:19px 0;border-top:1px solid #e3e7ee;"><h2 style="font-size:17px;line-height:1.5;margin:0 0 5px;color:#18212d;">{{third_title}}</h2><p style="margin:0;color:#596578;font-size:15px;line-height:1.8;font-size:14px;">{{third_description}}</p></td></tr></table></td></tr><tr><td class="email-padding" style="padding:0 40px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;"><tr><td class="" style="background:#4352b3;border-radius:7px;mso-padding-alt:17px 20px;"><a href="{{release_url}}" style="display:block;padding:17px 20px;border:1px solid #4352b3;border-radius:7px;font-size:15px;line-height:1.5;font-weight:bold;text-align:center;color:#ffffff;text-decoration:none;">Read the release notes <span aria-hidden="true"> →</span></a></td></tr></table><p style="margin:0;color:#596578;font-size:15px;line-height:1.8;font-size:12px;margin-top:20px;">Or copy this link into your browser:</p><p style="margin:5px 0 0;font:12px/1.7 'Courier New',Courier,monospace;word-break:break-all;"><a href="{{release_url}}" style="color:#4352b3;text-decoration:underline;">{{release_url}}</a></p></td></tr><tr><td class="email-padding" style="padding:26px 40px 32px;background:#f7f8fb;border-top:1px solid #e3e7ed;"><p style="margin:0;font-size:16px;line-height:1.75;color:#596578;font-size:13px;line-height:1.8;">You’re receiving product news because you subscribed. Thanks for making room for us in your inbox.</p>
<p style="margin:18px 0 0;font-size:12px;line-height:1.8;color:#596578;"><a href="{{unsubscribe_url}}" style="color:#4352b3;text-decoration:underline;">Unsubscribe from these emails</a><br>{{mailing_address}}</p>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;"><tr><td style="padding-top:22px;"><p style="margin:0;font-family:'Courier New',Courier,monospace;font-size:11px;line-height:1.6;font-weight:bold;letter-spacing:1.4px;overflow-wrap:anywhere;word-break:break-word;color:#596578;">NEED A HAND?</p><p style="margin:7px 0 0;font-size:13px;line-height:1.6;color:#596578;">We’re here to help. <a href="mailto:{{support_email}}" style="color:#4352b3;text-decoration:underline;">{{support_email}}</a></p></td></tr></table></td></tr></table>
<!--[if mso]></td></tr></table><![endif]-->
<p style="margin:22px 0 0;font-family:'Courier New',Courier,monospace;font-size:10px;line-height:1.8;letter-spacing:.7px;color:#627083;">{{app_name}} / PRODUCT JOURNAL</p></td></tr></table>
</body></html>Plain-text version
Plain-text templatetext
{{app_name}} notes / {{issue_number}}
{{lead_title}} — and two more useful improvements.
A few things
you’ll want to try.
A short update from the {{app_name}} team. Here’s what’s new, what’s improved, and where to take it next.
Issue: {{issue_number}}
Published: {{publish_date}}
Featured: {{lead_title}}
{{lead_description}}
Also new: {{second_title}}
{{second_description}}
Refined: {{third_title}}
{{third_description}}
Read the release notes:
{{release_url}}
You’re receiving product news because you subscribed. Thanks for making room for us in your inbox.
{{app_name}}
Questions? {{support_email}}
Unsubscribe: {{unsubscribe_url}}
{{mailing_address}}
Free to use, modify, and distribute in personal or commercial projects. No attribution required. Supplied as a starting point without warranty.