When to use it
Send once after a workspace is successfully created. Replace the three setup steps with actions your product actually offers.
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 |
{{first_name}} | Alex |
{{workspace_name}} | Northstar Studio |
{{workspace_url}} | https://example.com/workspaces/northstar |
{{support_email}} | support@example.com |
Implementation checklist
- Trigger only after successful account and workspace creation.
- Keep the workspace link authorized for its intended recipient.
- Match the setup steps to your current product.
- Deduplicate the welcome operation so retries don’t send another welcome.
Inspect the source
HTML source
HTML templatehtml
<!doctype html>
<!-- Stampwing / First Light / Cobalt. Free for personal and commercial use. No attribution required.
Palette: accent #3056d9; canvas #e9eef8; 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>Welcome to {{app_name}}, {{first_name}}</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 #3056d9;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:#e9eef8;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;">Your {{workspace_name}} workspace is ready when you are.͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ </div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" id="email-root" style="width:100%;border-collapse:collapse;background:#e9eef8;"><tr><td class="email-outer" align="center" style="padding:40px 16px;background:#e9eef8;"><!--[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:#f6f8ff;"><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:26px;line-height:26px;font-size:1px;" aria-hidden="true"> </div><p style="margin:0;color:#3056d9;font:700 11px/1.6 'Courier New',Courier,monospace;letter-spacing:1.2px;">GETTING STARTED</p><div style="height:14px;line-height:14px;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;">Your next idea<br>starts here.</h1><p style="margin:0;color:#596578;font-size:15px;line-height:1.8;margin-top:20px;">Hi {{first_name}}, welcome to {{app_name}}. You’ve made a space for your next project. Let’s put it to work.</p><div style="height:26px;line-height:26px;font-size:1px;" aria-hidden="true"> </div><img src="https://www.stampwing.com/template-assets/v4/welcome-onboarding.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:28px 40px;"><p style="margin:0;color:#3056d9;font:700 11px/1.6 'Courier New',Courier,monospace;letter-spacing:1.2px;">YOUR WORKSPACE</p><p style="margin:8px 0 25px;font-size:23px;line-height:1.3;font-weight:bold;color:#18212d;">{{workspace_name}}</p><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:#3056d9;">01</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;">Make it yours</h2><p style="margin:0;color:#596578;font-size:15px;line-height:1.8;font-size:14px;">Add your project name and a few useful details.</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:#3056d9;">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;">Bring your people</h2><p style="margin:0;color:#596578;font-size:15px;line-height:1.8;font-size:14px;">Invite a teammate when you’re ready.</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:#3056d9;">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;">Make a first move</h2><p style="margin:0;color:#596578;font-size:15px;line-height:1.8;font-size:14px;">Start small. You can build from there.</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:#3056d9;border-radius:7px;mso-padding-alt:17px 20px;"><a href="{{workspace_url}}" style="display:block;padding:17px 20px;border:1px solid #3056d9;border-radius:7px;font-size:15px;line-height:1.5;font-weight:bold;text-align:center;color:#ffffff;text-decoration:none;">Open your workspace <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="{{workspace_url}}" style="color:#3056d9;text-decoration:underline;">{{workspace_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 this because you created an account. If you need a hand getting started, just ask.</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:#3056d9;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}} / GETTING STARTED</p></td></tr></table>
</body></html>Plain-text version
Plain-text templatetext
Welcome to {{app_name}}, {{first_name}}
Your {{workspace_name}} workspace is ready when you are.
Your next idea
starts here.
Hi {{first_name}}, welcome to {{app_name}}. You’ve made a space for your next project. Let’s put it to work.
Workspace: {{workspace_name}}
01 / Make it yours — Add your project name and a few useful details.
02 / Bring your people — Invite a teammate when you’re ready.
03 / Make a first move — Start small. You can build from there.
Open your workspace:
{{workspace_url}}
You’re receiving this because you created an account. If you need a hand getting started, just ask.
{{app_name}}
Questions? {{support_email}}
Free to use, modify, and distribute in personal or commercial projects. No attribution required. Supplied as a starting point without warranty.