Account email · Transactional
Pro thank-you — light + dark
The thank-you email that fires after a Pro checkout. One design — A, The Welcome — in light and dark, both on the V1 “Thank you for going Pro” copy.
The copy
V1 — Thank you for going Pro is the shipping voice. Tile labels and coming-soon rows are product facts, not voice.
V1Thank you for going Prothe obvious one — says exactly what happened, nothing clever.
Subject: Thank you for going Pro 
Preheader: It’s live on your account now. Here’s what unlocked today, and what’s coming in August.
Trigger: successful Pro checkout during the beta (transactional route). From: a monitored address — never no-reply.
A — The Welcome · light (perk tiles)
The Welcome on the light palette.
It’s live on your account now. Here’s what unlocked today, and what’s coming in August.
Pro
Thank you for going Pro.
It just went live on your account. Beta support is what gets the rest built.
Open EmojiCopy
Find your receipt in Settings → Account.
What just unlocked
Infinite favorite listsBuild as many as you want, for anything.
Unlimited saved combosPlus your recent combos, kept for you.
Smart RecentsUp to 96, sorted and tuned your way.
Ad-freeNot just for the beta — for good.What’s next
Chrome extensionComing soon
Mac appComing soon
Both land with the full launch of EmojiCopy in August.
by JoyPixels ®
JoyPixels Inc · 2505 Anthem Village Dr Suite E-525, Henderson, NV 89052
Update preferences
Update preferences
<!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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<meta name="color-scheme" content="light">
<meta name="supported-color-schemes" content="light">
<title>Thank you for going Pro</title>
<!-- PRO PURCHASE THANK-YOU · Shell A — The Welcome (light) · V1 — Thank you for going Pro
Transactional: SendGrid Email API on the checkout-success webhook — NOT Marketing Campaigns.
Subject: "Thank you for going Pro 💚" · From: EmojiCopy (monitored inbox, never no-reply) · plain-text part required.
Footer: Update preferences only — transactional sends take no marketing unsubscribe. -->
<!--[if mso]>
<noscript><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript>
<![endif]-->
<style>
/* client resets */
body,table,td,a{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
table,td{ mso-table-lspace:0pt; mso-table-rspace:0pt; }
img{ -ms-interpolation-mode:bicubic; border:0; height:auto; line-height:100%; outline:none; text-decoration:none; }
a{ text-decoration:none; }
/* mobile */
@media only screen and (max-width:600px){
.container{ width:100%!important; }
.px{ padding-left:22px!important; padding-right:22px!important; }
.tile-cell{ display:block!important; width:100%!important; box-sizing:border-box; }
}
</style>
</head>
<body style="margin:0; padding:0; background-color:#f4f5f7;">
<!-- preheader (hidden) -->
<div style="display:none; font-size:1px; color:#f4f5f7; line-height:1px; max-height:0; max-width:0; opacity:0; overflow:hidden; mso-hide:all;">
It’s live on your account now. Here’s what unlocked today, and what’s coming in August.
</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f4f5f7;">
<tr>
<td align="center" style="padding:24px 12px;">
<table role="presentation" class="container" width="600" cellpadding="0" cellspacing="0" border="0" style="width:600px; max-width:600px; background-color:#FFFFFF; border-radius:16px; overflow:hidden;">
<!-- HERO -->
<tr>
<td align="center" class="px" style="padding:48px 40px 0; background-image:radial-gradient(120% 120% at 50% 0%, #DFFED7 0%, #FFFFFF 60%); background-repeat:no-repeat;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;">
<tr>
<td align="center" bgcolor="#052A1E" style="border-radius:999px; padding:6px 12px; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:11px; letter-spacing:1px; text-transform:uppercase; line-height:1; color:#85FC64;">PRO</td>
</tr>
</table>
<h1 style="margin:14px 0 12px; font-family:'DM Sans',Arial,Helvetica,sans-serif; font-weight:800; font-size:30px; line-height:1.12; letter-spacing:-1px; color:#0F1012;">Thank you for going Pro.</h1>
<p style="margin:0 auto; max-width:420px; font-family:Arial,Helvetica,sans-serif; font-size:15px; line-height:1.55; color:#353841;">It just went live on your account. Beta support is what gets the rest built.</p>
</td>
</tr>
<!-- CTA -->
<tr>
<td align="center" class="px" style="padding:24px 40px 0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;">
<tr>
<td align="center" bgcolor="#85FC64" style="border-radius:999px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://beta.emojicopy.com" style="height:47px;v-text-anchor:middle;width:220px;" arcsize="50%" fillcolor="#85FC64" stroke="f">
<w:anchorlock/>
<center style="color:#0F1012; font-family:Arial,Helvetica,sans-serif; font-size:16px; font-weight:bold;">Open EmojiCopy</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://beta.emojicopy.com" target="_blank" style="display:inline-block; padding:15px 28px; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:16px; color:#0F1012; text-decoration:none; border-radius:999px;">Open EmojiCopy</a>
<!--<![endif]-->
</td>
</tr>
</table>
<div style="margin-top:14px; font-family:Arial,Helvetica,sans-serif; font-size:12px; line-height:1.6; color:#7C8292;">Find your receipt in Settings → Account.</div>
</td>
</tr>
<!-- WHAT JUST UNLOCKED -->
<tr>
<td align="center" class="px" style="padding:48px 40px 14px; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:#7C8292;">What just unlocked</td>
</tr>
<tr>
<td class="px" style="padding:0 34px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="tile-cell" width="50%" valign="top" style="padding:6px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border:1px solid #EAEBEF; border-radius:16px;">
<tr>
<td align="center" style="padding:18px 16px 16px;">
<img src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/64/2b50.png" alt="⭐" width="30" height="30" style="display:block; margin:0 auto 10px; width:30px; height:30px;">
<div style="font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:13px; color:#0F1012; margin-bottom:3px;">Infinite favorite lists</div>
<div style="font-family:Arial,Helvetica,sans-serif; font-size:12px; line-height:1.5; color:#7C8292;">Build as many as you want, for anything.</div>
</td>
</tr>
</table>
</td>
<td class="tile-cell" width="50%" valign="top" style="padding:6px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border:1px solid #EAEBEF; border-radius:16px;">
<tr>
<td align="center" style="padding:18px 16px 16px;">
<img src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/64/1f9e9.png" alt="🧩" width="30" height="30" style="display:block; margin:0 auto 10px; width:30px; height:30px;">
<div style="font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:13px; color:#0F1012; margin-bottom:3px;">Unlimited saved combos</div>
<div style="font-family:Arial,Helvetica,sans-serif; font-size:12px; line-height:1.5; color:#7C8292;">Plus your recent combos, kept for you.</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="tile-cell" width="50%" valign="top" style="padding:6px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border:1px solid #EAEBEF; border-radius:16px;">
<tr>
<td align="center" style="padding:18px 16px 16px;">
<img src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/64/23f0.png" alt="⏰" width="30" height="30" style="display:block; margin:0 auto 10px; width:30px; height:30px;">
<div style="font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:13px; color:#0F1012; margin-bottom:3px;">Smart Recents</div>
<div style="font-family:Arial,Helvetica,sans-serif; font-size:12px; line-height:1.5; color:#7C8292;">Up to 96, sorted and tuned your way.</div>
</td>
</tr>
</table>
</td>
<td class="tile-cell" width="50%" valign="top" style="padding:6px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border:1px solid #EAEBEF; border-radius:16px;">
<tr>
<td align="center" style="padding:18px 16px 16px;">
<img src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/64/1f60c.png" alt="😌" width="30" height="30" style="display:block; margin:0 auto 10px; width:30px; height:30px;">
<div style="font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:13px; color:#0F1012; margin-bottom:3px;">Ad-free</div>
<div style="font-family:Arial,Helvetica,sans-serif; font-size:12px; line-height:1.5; color:#7C8292;">Not just for the beta — for good.</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- WHAT'S NEXT -->
<tr>
<td align="center" class="px" style="padding:34px 40px 14px; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:#7C8292;">What’s next</td>
</tr>
<tr>
<td align="center" class="px" style="padding:0 40px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:360px; margin:0 auto;">
<tr>
<td style="padding:4px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border:1px solid #EAEBEF; border-radius:12px;">
<tr>
<td width="18" style="padding:10px 0 10px 14px;">
<img src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/64/26a1.png" alt="⚡" width="18" height="18" style="display:block; width:18px; height:18px;">
</td>
<td align="left" style="padding:10px 0 10px 10px; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:13px; color:#0F1012;">Chrome extension</td>
<td align="right" style="padding:10px 12px 10px 0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="right"><tr>
<td bgcolor="#F4F5F7" style="border:1px solid #EAEBEF; border-radius:999px; padding:5px 10px; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:10px; letter-spacing:1px; text-transform:uppercase; line-height:1; white-space:nowrap; color:#7C8292;">Coming soon</td>
</tr></table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:4px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border:1px solid #EAEBEF; border-radius:12px;">
<tr>
<td width="18" style="padding:10px 0 10px 14px;">
<img src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/64/1f4bb.png" alt="💻" width="18" height="18" style="display:block; width:18px; height:18px;">
</td>
<td align="left" style="padding:10px 0 10px 10px; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:13px; color:#0F1012;">Mac app</td>
<td align="right" style="padding:10px 12px 10px 0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="right"><tr>
<td bgcolor="#F4F5F7" style="border:1px solid #EAEBEF; border-radius:999px; padding:5px 10px; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:10px; letter-spacing:1px; text-transform:uppercase; line-height:1; white-space:nowrap; color:#7C8292;">Coming soon</td>
</tr></table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" class="px" style="padding:14px 40px 44px; font-family:Arial,Helvetica,sans-serif; font-size:13px; line-height:1.55; color:#353841;">Both land with the full launch of EmojiCopy in August.</td>
</tr>
<!-- FOOTER -->
<tr>
<td align="center" class="px" style="padding:32px 32px 28px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="border-top:1px solid #EAEBEF; padding-top:28px;">
<img src="https://cdn.mcauto-images-production.sendgrid.net/c95e203486e80809/a3a2a61a-67a9-4b1b-989f-077ee3333b9e/563x121.png" alt="EmojiCopy" width="132" style="width:132px; max-width:132px; height:auto; display:block; margin:0 auto 14px;">
<div style="font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#7C8292;">by <a href="https://joypixels.com" target="_blank" style="color:#30D909; text-decoration:none;">JoyPixels</a> ®</div>
<div style="margin-top:10px; font-family:Arial,Helvetica,sans-serif; font-size:10px; line-height:1.6; color:#7C8292;">
JoyPixels Inc · 2505 Anthem Village Dr Suite E-525, Henderson, NV 89052<br>
<a href="{{preferences_url}}" style="color:#30D909; text-decoration:none;">Update preferences</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
/* ============ SHARED EMAIL CHROME (matches the as-sent invite base) ============ */
.email { max-width: 600px; margin:0 auto; background: var(--c-surface-primary); border-radius: var(--r-lg); overflow:hidden; box-shadow: 0 16px 60px rgba(15,16,18,.14); }
.email__pre { font-size:1.1rem; color: var(--c-text-tertiary); padding:8px 0; text-align:center; }
.email__footer { padding:32px 32px 28px; border-top:1px solid var(--c-border-primary); text-align:center; color: var(--c-text-tertiary); line-height:1.6; }
.email__footer a { color: var(--c-icon-green); text-decoration:none; }
.email__logo--footer { display:flex; justify-content:center; color: var(--c-text-primary); margin:0 auto 14px; }
.email__logo--footer svg { height:22px; width:auto; display:block; }
.email__footer-tag { font-size:1.15rem; }
.email__legal { font-size:0.95rem; margin-top:10px; line-height:1.5; }
.email__cta { text-align:center; }
.email__cta .btn { text-decoration:none; }
.email__cta .sub { display:block; margin-top:14px; font-size:1.2rem; color: var(--c-text-tertiary); line-height:1.6; }
/* PRO chip — the one continuity cue lifted from the app (dark chip, green text) */
.pro-chip {
display:inline-flex; align-items:center;
font-family:var(--ff-inter); font-weight:700; font-size:1.1rem;
letter-spacing:.08em; text-transform:uppercase; line-height:1;
padding:6px 12px; border-radius:var(--r-pill);
background: var(--green-950); color: var(--green-500);
box-shadow: inset 0 0 0 1px rgba(133,252,100,.25); /* matches brand.css .pill--beta-dark */
}
/* JoyPixels 11.0 PNG glyphs — guaranteed render in every browser (webfont color
formats can silently fall back to system emoji; pill-dot-swap lesson 7/14).
Sized by the parent's font-size; alt text carries the Unicode character. */
.jp-img { display:inline-block; width:1em; height:1em; vertical-align:-0.12em; }
/* status chips — text only, never a leading dot */
.chip {
display:inline-flex; align-items:center;
font-family:var(--ff-inter); font-weight:700; font-size:1.1rem;
letter-spacing:.07em; text-transform:uppercase; line-height:1;
padding:5px 10px; border-radius:var(--r-pill); white-space:nowrap;
}
.chip--muted { background: var(--c-surface-cta); color: var(--c-text-tertiary); box-shadow: inset 0 0 0 1px var(--c-border-secondary); }
.chip--live { background:rgba(133,252,100,.10); color:var(--green-500); box-shadow: inset 0 0 0 1px rgba(133,252,100,.35); }
.chip--soon { background:rgba(150,156,172,.08); color:var(--metal-400); box-shadow: inset 0 0 0 1px var(--metal-700); }
/* ============ A — THE WELCOME (light · perk tiles) ============ */
.ea-hero { padding: 48px 40px 4px; text-align:center; background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--green-500) 16%, transparent), transparent 60%); }
.ea-hero h1 { font-size:3rem; margin:14px 0 12px; }
.ea-hero p { font-size:1.5rem; color: var(--c-text-secondary); max-width: 42ch; margin:0 auto; }
.ea-body { padding: 10px 40px 44px; }
.ea-cta-top { margin: 24px 0 34px; }
.ea-block-title { font-family:var(--ff-inter); font-weight:700; font-size:1.15rem; letter-spacing:.09em; text-transform:uppercase; color: var(--c-text-tertiary); text-align:center; margin: 0 0 14px; }
.ea-grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom: 34px; }
.ea-tile { border:1px solid var(--c-border-primary); border-radius: var(--r-lg); padding:18px 16px 16px; text-align:center; }
.ea-tile .e { display:block; font-size:3rem; line-height:1; margin-bottom:10px; }
.ea-tile b { display:block; font-family:var(--ff-inter); font-weight:700; font-size:1.35rem; color: var(--c-text-primary); margin-bottom:3px; }
.ea-tile .d { display:block; font-size:1.2rem; color: var(--c-text-tertiary); line-height:1.5; }
.ea-coming { text-align:center; }
.ea-coming-rows { display:flex; flex-direction:column; gap:8px; max-width:360px; margin:0 auto 14px; }
.ea-coming-item { display:flex; align-items:center; gap:10px; border:1px solid var(--c-border-primary); border-radius:var(--r-md); padding:10px 12px 10px 14px; font-family:var(--ff-inter); font-weight:600; font-size:1.3rem; color: var(--c-text-primary); }
.ea-coming-item .e { font-size:1.8rem; line-height:1; }
.ea-coming-item .chip { margin-left:auto; }
.ea-cover-line { font-size:1.3rem; color: var(--c-text-secondary); max-width:46ch; margin:0 auto; }
A — The Welcome · dark (flat metal-950 shell)
The same email on the house dark palette.
It’s live on your account now. Here’s what unlocked today, and what’s coming in August.
Pro
Thank you for going Pro.
It just went live on your account. Beta support is what gets the rest built.
Open EmojiCopy
Find your receipt in Settings → Account.
What just unlocked
Infinite favorite listsBuild as many as you want, for anything.Unlimited saved combosPlus your recent combos, kept for you.Smart RecentsUp to 96, sorted and tuned your way.Ad-freeNot just for the beta — for good.What’s next
Chrome extensionComing soon
Mac appComing soon
Both land with the full launch of EmojiCopy in August.
by JoyPixels ®
JoyPixels Inc · 2505 Anthem Village Dr Suite E-525, Henderson, NV 89052
Update preferences
Update preferences
<!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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Thank you for going Pro</title>
<!-- PRO PURCHASE THANK-YOU · Shell A — The Welcome (black) · V1 — Thank you for going Pro
Transactional: SendGrid Email API on the checkout-success webhook — NOT Marketing Campaigns.
Subject: "Thank you for going Pro 💚" · From: EmojiCopy (monitored inbox, never no-reply) · plain-text part required.
Footer: Update preferences only — transactional sends take no marketing unsubscribe. -->
<!--[if mso]>
<noscript><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript>
<![endif]-->
<style>
/* client resets */
body,table,td,a{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
table,td{ mso-table-lspace:0pt; mso-table-rspace:0pt; }
img{ -ms-interpolation-mode:bicubic; border:0; height:auto; line-height:100%; outline:none; text-decoration:none; }
a{ text-decoration:none; }
/* Outlook.com dark mode — re-assert the dark-by-design palette */
[data-ogsc] .t-white{ color:#FFFFFF !important; }
[data-ogsc] .t-green{ color:#85FC64 !important; }
[data-ogsc] .t-m200{ color:#DCDFE6 !important; }
[data-ogsc] .t-m400{ color:#969CAC !important; }
[data-ogsc] .t-m500{ color:#7C8292 !important; }
[data-ogsb] .bg-950{ background-color:#0F1012 !important; }
[data-ogsb] .bg-900{ background-color:#1F2129 !important; }
[data-ogsb] .bg-white{ background-color:#FFFFFF !important; }
/* mobile */
@media only screen and (max-width:600px){
.container{ width:100%!important; }
.px{ padding-left:22px!important; padding-right:22px!important; }
.tile-cell{ display:block!important; width:100%!important; box-sizing:border-box; }
}
</style>
</head>
<body style="margin:0; padding:0; background-color:#f4f5f7;">
<!-- preheader (hidden) -->
<div style="display:none; font-size:1px; color:#f4f5f7; line-height:1px; max-height:0; max-width:0; opacity:0; overflow:hidden; mso-hide:all;">
It’s live on your account now. Here’s what unlocked today, and what’s coming in August.
</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f4f5f7;">
<tr>
<td align="center" style="padding:24px 12px;">
<table role="presentation" class="container bg-950" width="600" cellpadding="0" cellspacing="0" border="0" style="width:600px; max-width:600px; background-color:#0F1012; border-radius:16px; overflow:hidden;">
<!-- HERO -->
<tr>
<td align="center" class="px" style="padding:48px 40px 0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;">
<tr>
<td align="center" bgcolor="#052A1E" style="border-radius:999px; padding:6px 12px; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:11px; letter-spacing:1px; text-transform:uppercase; line-height:1; color:#85FC64;" class="t-green">PRO</td>
</tr>
</table>
<h1 style="margin:14px 0 12px; font-family:'DM Sans',Arial,Helvetica,sans-serif; font-weight:800; font-size:30px; line-height:1.12; letter-spacing:-1px; color:#FFFFFF;" class="t-white">Thank you for going Pro.</h1>
<p style="margin:0 auto; max-width:420px; font-family:Arial,Helvetica,sans-serif; font-size:15px; line-height:1.55; color:#DCDFE6;" class="t-m200">It just went live on your account. Beta support is what gets the rest built.</p>
</td>
</tr>
<!-- CTA -->
<tr>
<td align="center" class="px" style="padding:24px 40px 0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;">
<tr>
<td align="center" bgcolor="#30D909" style="border-radius:999px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://beta.emojicopy.com" style="height:47px;v-text-anchor:middle;width:220px;" arcsize="50%" fillcolor="#30D909" stroke="f">
<w:anchorlock/>
<center style="color:#0F1012; font-family:Arial,Helvetica,sans-serif; font-size:16px; font-weight:bold;">Open EmojiCopy</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://beta.emojicopy.com" target="_blank" style="display:inline-block; padding:15px 28px; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:16px; color:#0F1012; text-decoration:none; border-radius:999px;">Open EmojiCopy</a>
<!--<![endif]-->
</td>
</tr>
</table>
<div style="margin-top:14px; font-family:Arial,Helvetica,sans-serif; font-size:12px; line-height:1.6; color:#7C8292;" class="t-m500">Find your receipt in Settings → Account.</div>
</td>
</tr>
<!-- WHAT JUST UNLOCKED -->
<tr>
<td align="center" class="px" style="padding:48px 40px 14px; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:#7C8292;" class="t-m500">What just unlocked</td>
</tr>
<tr>
<td class="px" style="padding:0 34px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="tile-cell" width="50%" valign="top" style="padding:6px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#1F2129" class="bg-900" style="border:1px solid #353841; border-radius:16px;">
<tr>
<td align="center" style="padding:18px 16px 16px;">
<img src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/64/2b50.png" alt="⭐" width="30" height="30" style="display:block; margin:0 auto 10px; width:30px; height:30px;">
<div style="font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:13px; color:#FFFFFF; margin-bottom:3px;" class="t-white">Infinite favorite lists</div>
<div style="font-family:Arial,Helvetica,sans-serif; font-size:12px; line-height:1.5; color:#969CAC;" class="t-m400">Build as many as you want, for anything.</div>
</td>
</tr>
</table>
</td>
<td class="tile-cell" width="50%" valign="top" style="padding:6px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#1F2129" class="bg-900" style="border:1px solid #353841; border-radius:16px;">
<tr>
<td align="center" style="padding:18px 16px 16px;">
<img src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/64/1f9e9.png" alt="🧩" width="30" height="30" style="display:block; margin:0 auto 10px; width:30px; height:30px;">
<div style="font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:13px; color:#FFFFFF; margin-bottom:3px;" class="t-white">Unlimited saved combos</div>
<div style="font-family:Arial,Helvetica,sans-serif; font-size:12px; line-height:1.5; color:#969CAC;" class="t-m400">Plus your recent combos, kept for you.</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="tile-cell" width="50%" valign="top" style="padding:6px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#1F2129" class="bg-900" style="border:1px solid #353841; border-radius:16px;">
<tr>
<td align="center" style="padding:18px 16px 16px;">
<img src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/64/23f0.png" alt="⏰" width="30" height="30" style="display:block; margin:0 auto 10px; width:30px; height:30px;">
<div style="font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:13px; color:#FFFFFF; margin-bottom:3px;" class="t-white">Smart Recents</div>
<div style="font-family:Arial,Helvetica,sans-serif; font-size:12px; line-height:1.5; color:#969CAC;" class="t-m400">Up to 96, sorted and tuned your way.</div>
</td>
</tr>
</table>
</td>
<td class="tile-cell" width="50%" valign="top" style="padding:6px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#1F2129" class="bg-900" style="border:1px solid #353841; border-radius:16px;">
<tr>
<td align="center" style="padding:18px 16px 16px;">
<img src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/64/1f60c.png" alt="😌" width="30" height="30" style="display:block; margin:0 auto 10px; width:30px; height:30px;">
<div style="font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:13px; color:#FFFFFF; margin-bottom:3px;" class="t-white">Ad-free</div>
<div style="font-family:Arial,Helvetica,sans-serif; font-size:12px; line-height:1.5; color:#969CAC;" class="t-m400">Not just for the beta — for good.</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- WHAT'S NEXT -->
<tr>
<td align="center" class="px" style="padding:34px 40px 14px; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:#7C8292;" class="t-m500">What’s next</td>
</tr>
<tr>
<td align="center" class="px" style="padding:0 40px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:360px; margin:0 auto;">
<tr>
<td style="padding:4px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#1F2129" class="bg-900" style="border:1px solid #353841; border-radius:12px;">
<tr>
<td width="24" style="padding:10px 0 10px 14px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr>
<td width="24" height="24" align="center" valign="middle" bgcolor="#FFFFFF" class="bg-white" style="width:24px; height:24px; border-radius:6px; line-height:1;">
<img src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/64/26a1.png" alt="⚡" width="15" height="15" style="display:block; margin:0 auto; width:15px; height:15px;">
</td>
</tr></table>
</td>
<td align="left" style="padding:10px 0 10px 10px; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:13px; color:#FFFFFF;" class="t-white">Chrome extension</td>
<td align="right" style="padding:10px 12px 10px 0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="right"><tr>
<td bgcolor="#1A1B1E" style="border:1px solid #4B4F5C; border-radius:999px; padding:5px 10px; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:10px; letter-spacing:1px; text-transform:uppercase; line-height:1; white-space:nowrap; color:#969CAC;" class="t-m400">Coming soon</td>
</tr></table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:4px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#1F2129" class="bg-900" style="border:1px solid #353841; border-radius:12px;">
<tr>
<td width="24" style="padding:10px 0 10px 14px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr>
<td width="24" height="24" align="center" valign="middle" bgcolor="#FFFFFF" class="bg-white" style="width:24px; height:24px; border-radius:6px; line-height:1;">
<img src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/64/1f4bb.png" alt="💻" width="15" height="15" style="display:block; margin:0 auto; width:15px; height:15px;">
</td>
</tr></table>
</td>
<td align="left" style="padding:10px 0 10px 10px; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:13px; color:#FFFFFF;" class="t-white">Mac app</td>
<td align="right" style="padding:10px 12px 10px 0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="right"><tr>
<td bgcolor="#1A1B1E" style="border:1px solid #4B4F5C; border-radius:999px; padding:5px 10px; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:10px; letter-spacing:1px; text-transform:uppercase; line-height:1; white-space:nowrap; color:#969CAC;" class="t-m400">Coming soon</td>
</tr></table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" class="px" style="padding:14px 40px 44px; font-family:Arial,Helvetica,sans-serif; font-size:13px; line-height:1.55; color:#969CAC;" class="t-m400">Both land with the full launch of EmojiCopy in August.</td>
</tr>
<!-- FOOTER -->
<tr>
<td align="center" class="px" style="padding:32px 32px 28px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="border-top:1px solid #353841; padding-top:28px;">
<!-- ASSET NEEDED: white wordmark PNG is not hosted yet — export from Figma (Beta Assets),
upload to the SendGrid Image Library, then replace the placeholder src. PNG, never SVG. -->
<img src="{{wordmark_white_png_url}}" alt="EmojiCopy" width="132" style="width:132px; max-width:132px; height:auto; display:block; margin:0 auto 14px;">
<div style="font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#7C8292;" class="t-m500">by <a href="https://joypixels.com" target="_blank" style="color:#85FC64; text-decoration:none;" class="t-green">JoyPixels</a> ®</div>
<div style="margin-top:10px; font-family:Arial,Helvetica,sans-serif; font-size:10px; line-height:1.6; color:#7C8292;" class="t-m500">
JoyPixels Inc · 2505 Anthem Village Dr Suite E-525, Henderson, NV 89052<br>
<a href="{{preferences_url}}" style="color:#85FC64; text-decoration:none;" class="t-green">Update preferences</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
/* ============ SHARED EMAIL CHROME (matches the as-sent invite base) ============ */
.email { max-width: 600px; margin:0 auto; background: var(--c-surface-primary); border-radius: var(--r-lg); overflow:hidden; box-shadow: 0 16px 60px rgba(15,16,18,.14); }
.email__pre { font-size:1.1rem; color: var(--c-text-tertiary); padding:8px 0; text-align:center; }
.email__footer { padding:32px 32px 28px; border-top:1px solid var(--c-border-primary); text-align:center; color: var(--c-text-tertiary); line-height:1.6; }
.email__footer a { color: var(--c-icon-green); text-decoration:none; }
.email__logo--footer { display:flex; justify-content:center; color: var(--c-text-primary); margin:0 auto 14px; }
.email__logo--footer svg { height:22px; width:auto; display:block; }
.email__footer-tag { font-size:1.15rem; }
.email__legal { font-size:0.95rem; margin-top:10px; line-height:1.5; }
.email__cta { text-align:center; }
.email__cta .btn { text-decoration:none; }
.email__cta .sub { display:block; margin-top:14px; font-size:1.2rem; color: var(--c-text-tertiary); line-height:1.6; }
/* PRO chip — the one continuity cue lifted from the app (dark chip, green text) */
.pro-chip {
display:inline-flex; align-items:center;
font-family:var(--ff-inter); font-weight:700; font-size:1.1rem;
letter-spacing:.08em; text-transform:uppercase; line-height:1;
padding:6px 12px; border-radius:var(--r-pill);
background: var(--green-950); color: var(--green-500);
box-shadow: inset 0 0 0 1px rgba(133,252,100,.25); /* matches brand.css .pill--beta-dark */
}
/* JoyPixels 11.0 PNG glyphs — guaranteed render in every browser (webfont color
formats can silently fall back to system emoji; pill-dot-swap lesson 7/14).
Sized by the parent's font-size; alt text carries the Unicode character. */
.jp-img { display:inline-block; width:1em; height:1em; vertical-align:-0.12em; }
/* status chips — text only, never a leading dot */
.chip {
display:inline-flex; align-items:center;
font-family:var(--ff-inter); font-weight:700; font-size:1.1rem;
letter-spacing:.07em; text-transform:uppercase; line-height:1;
padding:5px 10px; border-radius:var(--r-pill); white-space:nowrap;
}
.chip--muted { background: var(--c-surface-cta); color: var(--c-text-tertiary); box-shadow: inset 0 0 0 1px var(--c-border-secondary); }
.chip--live { background:rgba(133,252,100,.10); color:var(--green-500); box-shadow: inset 0 0 0 1px rgba(133,252,100,.35); }
.chip--soon { background:rgba(150,156,172,.08); color:var(--metal-400); box-shadow: inset 0 0 0 1px var(--metal-700); }
/* ============ A — THE WELCOME (light · perk tiles) ============ */
.ea-hero { padding: 48px 40px 4px; text-align:center; background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--green-500) 16%, transparent), transparent 60%); }
.ea-hero h1 { font-size:3rem; margin:14px 0 12px; }
.ea-hero p { font-size:1.5rem; color: var(--c-text-secondary); max-width: 42ch; margin:0 auto; }
.ea-body { padding: 10px 40px 44px; }
.ea-cta-top { margin: 24px 0 34px; }
.ea-block-title { font-family:var(--ff-inter); font-weight:700; font-size:1.15rem; letter-spacing:.09em; text-transform:uppercase; color: var(--c-text-tertiary); text-align:center; margin: 0 0 14px; }
.ea-grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom: 34px; }
.ea-tile { border:1px solid var(--c-border-primary); border-radius: var(--r-lg); padding:18px 16px 16px; text-align:center; }
.ea-tile .e { display:block; font-size:3rem; line-height:1; margin-bottom:10px; }
.ea-tile b { display:block; font-family:var(--ff-inter); font-weight:700; font-size:1.35rem; color: var(--c-text-primary); margin-bottom:3px; }
.ea-tile .d { display:block; font-size:1.2rem; color: var(--c-text-tertiary); line-height:1.5; }
.ea-coming { text-align:center; }
.ea-coming-rows { display:flex; flex-direction:column; gap:8px; max-width:360px; margin:0 auto 14px; }
.ea-coming-item { display:flex; align-items:center; gap:10px; border:1px solid var(--c-border-primary); border-radius:var(--r-md); padding:10px 12px 10px 14px; font-family:var(--ff-inter); font-weight:600; font-size:1.3rem; color: var(--c-text-primary); }
.ea-coming-item .e { font-size:1.8rem; line-height:1; }
.ea-coming-item .chip { margin-left:auto; }
.ea-cover-line { font-size:1.3rem; color: var(--c-text-secondary); max-width:46ch; margin:0 auto; }
/* ============ A · BLACK — same welcome, flat metal-950 shell ============ */
.emailA--dark { background: var(--metal-950); box-shadow: 0 16px 60px rgba(15,16,18,.35); }
.emailA--dark .ea-hero { background: none; }
.emailA--dark .ea-hero h1 { color: var(--white); }
.emailA--dark .ea-hero p { color: var(--metal-200); }
.emailA--dark .email__cta .btn--green { background: var(--green-600); color: var(--metal-950); }
.emailA--dark .email__cta .btn--green:hover { background: var(--green-500); color: var(--metal-950); }
.emailA--dark .email__cta .sub { color: var(--metal-500); }
.emailA--dark .ea-block-title { color: var(--metal-500); }
.emailA--dark .ea-tile { background: var(--metal-900); border-color: var(--metal-800); }
.emailA--dark .ea-tile b { color: var(--white); }
.emailA--dark .ea-tile .d { color: var(--metal-400); }
.emailA--dark .ea-coming-item { background: var(--metal-900); border-color: var(--metal-800); color: var(--white); }
/* light backing squares so the darker glyphs (laptop) read on the dark rows */
.emailA--dark .ea-coming-item .e { flex:none; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; background: var(--white); border-radius:6px; font-size:1.5rem; }
.emailA--dark .ea-cover-line { color: var(--metal-400); }
.emailA--dark .email__footer { border-top:1px solid var(--metal-800); color: var(--metal-500); }
.emailA--dark .email__footer a { color: var(--green-500); }
.emailA--dark .email__logo--footer { color: var(--white); }
Production notes
SENDGRIDTransactional route (Email API on the checkout-success webhook), not Marketing Campaigns — the “subscription confirmation” moment from PLANS-PRICING’s email-notices list. Table-based, single column, 600px, inline styles, under 102KB; hosted PNG logo, never SVG; bulletproof CTA (padding-based anchor + VML roundrect for classic Outlook); plain-text MIME part; both
color-scheme metas. Sender is a monitored inbox. Footers carry Update preferences only — transactional confirmations don’t take the marketing unsubscribe. Emoji: mockups use JoyPixels 11.0 PNGs (cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/64/<codepoint>.png, base codepoint without -fe0f); in production ship them as hosted images too, or swap to Unicode where platform-set emoji are acceptable.LAUNCHBeta-voiced on purpose. At the full launch: the coda becomes an install row (“Get EmojiCopy for: Web · Chrome · Mac”) and the August lines rewrite to the web + Chrome + Mac register (scope stays those three — never “everywhere”).
DRAFTRetired drafts: B “The Dark Mark” ledger + the V2–V4 voices on every shell (
email-pro-thanks-2026-07-23-v4-all-12-voices-shells.html) · C/D designs (email-pro-thanks-2026-07-22-v2-four-designs.html) · the letter (email-pro-thanks-2026-07-22-v1-with-letter.html). Shell + voice picked 7/23: The Welcome, light + dark, V1.