Magic Link – Comic
Comic-book style magic link email with bold expressive design.
Preview
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><style></style><style>
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
mso-font-alt: 'Arial';
src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2) format('woff2');
}
* {
font-family: 'Inter', Arial;
}
</style><style>
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
mso-font-alt: 'Arial';
src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuI6fAZ9hiJ-Ek-_EeA.woff2) format('woff2');
}
* {
font-family: 'Inter', Arial;
}
</style></head><body style="background-color:#F9FAFB;margin:0"><!--$--><!--html--><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">ZAP! Your one-time magic link is ready — tap to sign in before it expires!<div> </div></div><!--head--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="background-color:#F9FAFB;font-family:Inter, Arial, sans-serif;margin:0;padding:0"><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:600px;margin:0 auto;padding:24px 16px"><tbody><tr style="width:100%"><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#1E1B4B;border:3px solid #111827;border-radius:12px 12px 0 0;padding:14px 24px"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><p style="font-size:13px;line-height:24px;color:#FFFFFF;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;margin:0;font-family:Inter, Arial, sans-serif;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">ZAPMAIL — AUTHENTICATION SYSTEM</p></td><td data-id="__react-email-column" style="text-align:right"><p style="font-size:12px;line-height:24px;color:#A5B4FC;margin:0;font-family:Inter, Arial, sans-serif;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">Issue #001 — 2026</p></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#FEF08A;border:3px solid #111827;border-top:none;padding:36px 28px 28px;position:relative"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><p style="font-size:11px;line-height:24px;font-weight:700;color:#92400E;letter-spacing:0.18em;text-transform:uppercase;margin:0 0 10px 0;font-family:Inter, Arial, sans-serif;margin-top:0;margin-right:0;margin-bottom:10px;margin-left:0">CHAPTER 1 — THE ARRIVAL</p></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><h1 style="font-size:52px;font-weight:900;color:#111827;margin:0 0 4px 0;line-height:1;letter-spacing:-1px;font-family:Inter, Arial, sans-serif;text-shadow:4px 4px 0px #F59E0B;-webkit-text-stroke:2px #111827">ZAP!</h1></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><h2 style="font-size:22px;font-weight:900;color:#111827;margin:8px 0 0 0;line-height:1.25;font-family:Inter, Arial, sans-serif;letter-spacing:-0.3px">Your Magic Link Has Arrived!</h2></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><p style="font-size:28px;line-height:24px;letter-spacing:6px;color:#F59E0B;margin:10px 0 0 0;font-family:Inter, Arial, sans-serif;font-weight:900;margin-top:10px;margin-right:0;margin-bottom:0;margin-left:0">— — — — —</p></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#111827;height:6px;padding:0;margin:0"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><p style="font-size:0;line-height:0;margin:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0"> </p></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#FFFFFF;border:3px solid #111827;border-top:none;padding:28px 28px 24px"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column" style="width:60px;vertical-align:top;padding-top:4px"><div style="width:52px;height:52px;background-color:#3B82F6;border:3px solid #111827;border-radius:50%;display:flex;align-items:center;justify-content:center"><p style="font-size:22px;line-height:46px;color:#FFFFFF;font-weight:900;margin:0;text-align:center;font-family:Inter, Arial, sans-serif;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">Z</p></div></td><td data-id="__react-email-column" style="padding-left:14px;vertical-align:top"><div style="background-color:#EFF6FF;border:3px solid #111827;border-radius:12px 12px 12px 0px;padding:14px 18px;position:relative"><p style="font-size:15px;line-height:1.5;font-weight:800;color:#1E40AF;margin:0;font-family:Inter, Arial, sans-serif;letter-spacing:-0.2px;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">"No password? That IS magic!"</p><p style="font-size:12px;line-height:24px;font-weight:600;color:#6B7280;margin:6px 0 0 0;font-family:Inter, Arial, sans-serif;margin-top:6px;margin-right:0;margin-bottom:0;margin-left:0">— ZAP Bot, your friendly auth hero</p></div></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#111827;height:3px;padding:0;margin:0"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><p style="font-size:0;line-height:0;margin:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0"> </p></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#FFFFFF;border:3px solid #111827;border-top:none;padding:28px 28px"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><p style="font-size:11px;line-height:24px;font-weight:700;color:#6B7280;letter-spacing:0.18em;text-transform:uppercase;margin:0 0 12px 0;font-family:Inter, Arial, sans-serif;margin-top:0;margin-right:0;margin-bottom:12px;margin-left:0">CHAPTER 2 — THE MISSION</p><h3 style="font-size:18px;font-weight:900;color:#111827;margin:0 0 12px 0;font-family:Inter, Arial, sans-serif;line-height:1.3">Hey there, hero — your sign-in link is locked and loaded.</h3><p style="font-size:15px;line-height:1.7;font-weight:700;color:#374151;margin:0 0 16px 0;font-family:Inter, Arial, sans-serif;margin-top:0;margin-right:0;margin-bottom:16px;margin-left:0">Tap the link to sign in — works once, expires in 60 mins. No passwords. No hassle. Just one click and you are in.</p><p style="font-size:14px;line-height:1.6;color:#6B7280;margin:0;font-family:Inter, Arial, sans-serif;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">If you did not request this link, no worries — just ignore this email and your account stays safe. The link will expire on its own.</p></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#111827;height:3px;padding:0;margin:0"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><p style="font-size:0;line-height:0;margin:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0"> </p></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#3B82F6;border:3px solid #111827;border-top:none;padding:32px 28px;text-align:center"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><p style="font-size:11px;line-height:24px;font-weight:700;color:#BFDBFE;letter-spacing:0.18em;text-transform:uppercase;margin:0 0 10px 0;font-family:Inter, Arial, sans-serif;margin-top:0;margin-right:0;margin-bottom:10px;margin-left:0">CHAPTER 3 — THE ACTION</p></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column" style="text-align:center"><a href="https://zapmail.app/auth/magic?token=abc123xyz456" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;background-color:#FEF08A;color:#111827;font-size:18px;font-weight:900;font-family:Inter, Arial, sans-serif;padding:18px 36px;border:4px solid #111827;border-radius:6px;letter-spacing:0.04em;box-shadow:5px 5px 0px #111827;cursor:pointer;padding-top:18px;padding-right:36px;padding-bottom:18px;padding-left:36px" target="_blank"><span><!--[if mso]><i style="mso-font-width:450%;mso-text-raise:27" hidden>    </i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:13.5px">USE MAGIC LINK NOW!</span><span><!--[if mso]><i style="mso-font-width:450%" hidden>    ​</i><![endif]--></span></a></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column" style="text-align:center;padding-top:16px"><div style="display:inline-block;background-color:#EF4444;border:3px solid #111827;border-radius:50px;padding:8px 20px"><p style="font-size:13px;line-height:24px;color:#FFFFFF;font-weight:900;margin:0;letter-spacing:0.06em;text-transform:uppercase;font-family:Inter, Arial, sans-serif;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">One-time use only!</p></div></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column" style="text-align:center;padding-top:14px"><p style="font-size:12px;line-height:24px;color:#BFDBFE;margin:0;font-family:Inter, Arial, sans-serif;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">Link expires in 60 minutes. Do not share this link with anyone.</p></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#111827;height:3px;padding:0;margin:0"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><p style="font-size:0;line-height:0;margin:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0"> </p></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#F0FDF4;border:3px solid #111827;border-top:none;padding:24px 28px"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><p style="font-size:11px;line-height:24px;font-weight:700;color:#6B7280;letter-spacing:0.18em;text-transform:uppercase;margin:0 0 12px 0;font-family:Inter, Arial, sans-serif;margin-top:0;margin-right:0;margin-bottom:12px;margin-left:0">BONUS PANEL — HERO SAFETY TIPS</p></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column" style="width:50%;padding-right:8px;vertical-align:top"><div style="background-color:#FFFFFF;border:2px solid #111827;border-radius:6px;padding:12px 14px"><p style="font-size:12px;line-height:24px;font-weight:800;color:#065F46;margin:0 0 4px 0;text-transform:uppercase;letter-spacing:0.08em;font-family:Inter, Arial, sans-serif;margin-top:0;margin-right:0;margin-bottom:4px;margin-left:0">VALID FOR</p><p style="font-size:14px;line-height:24px;font-weight:700;color:#111827;margin:0;font-family:Inter, Arial, sans-serif;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">60 minutes from now</p></div></td><td data-id="__react-email-column" style="width:50%;padding-left:8px;vertical-align:top"><div style="background-color:#FFFFFF;border:2px solid #111827;border-radius:6px;padding:12px 14px"><p style="font-size:12px;line-height:24px;font-weight:800;color:#065F46;margin:0 0 4px 0;text-transform:uppercase;letter-spacing:0.08em;font-family:Inter, Arial, sans-serif;margin-top:0;margin-right:0;margin-bottom:4px;margin-left:0">USES REMAINING</p><p style="font-size:14px;line-height:24px;font-weight:700;color:#111827;margin:0;font-family:Inter, Arial, sans-serif;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">1 of 1 — use it wisely!</p></div></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#111827;height:3px;padding:0;margin:0"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><p style="font-size:0;line-height:0;margin:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0"> </p></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#F9FAFB;border:3px solid #111827;border-top:none;padding:20px 28px"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><p style="font-size:12px;line-height:24px;font-weight:700;color:#374151;margin:0 0 6px 0;font-family:Inter, Arial, sans-serif;margin-top:0;margin-right:0;margin-bottom:6px;margin-left:0">Button not working? Copy and paste this link into your browser:</p><p style="font-size:11px;line-height:24px;color:#3B82F6;margin:0;word-break:break-all;font-family:Inter, Arial, sans-serif;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0"><a href="https://zapmail.app/auth/magic?token=abc123xyz456" style="color:#3B82F6;text-decoration-line:none;text-decoration:underline" target="_blank">https://zapmail.app/auth/magic?token=abc123xyz456</a></p></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#111827;height:3px;padding:0;margin:0"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><p style="font-size:0;line-height:0;margin:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0"> </p></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#1E1B4B;border:3px solid #111827;border-top:none;border-radius:0 0 12px 12px;padding:28px 28px"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column" style="text-align:center"><p style="font-size:16px;line-height:24px;font-weight:900;color:#FFFFFF;margin:0 0 4px 0;letter-spacing:0.08em;font-family:Inter, Arial, sans-serif;margin-top:0;margin-right:0;margin-bottom:4px;margin-left:0">ZAPMAIL</p><p style="font-size:11px;line-height:24px;color:#A5B4FC;margin:0 0 16px 0;font-family:Inter, Arial, sans-serif;margin-top:0;margin-right:0;margin-bottom:16px;margin-left:0">Passwordless authentication for modern heroes</p></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column" style="text-align:center"><a href="https://zapmail.app" style="color:#A5B4FC;text-decoration-line:none;font-size:12px;text-decoration:none;font-family:Inter, Arial, sans-serif;margin-right:16px" target="_blank">Website</a><a href="https://zapmail.app/help" style="color:#A5B4FC;text-decoration-line:none;font-size:12px;text-decoration:none;font-family:Inter, Arial, sans-serif;margin-right:16px" target="_blank">Help Center</a><a href="https://zapmail.app/privacy" style="color:#A5B4FC;text-decoration-line:none;font-size:12px;text-decoration:none;font-family:Inter, Arial, sans-serif" target="_blank">Privacy Policy</a></td></tr></tbody></table><hr style="width:100%;border:none;border-top:1px solid #eaeaea;border-color:#312E81;margin:16px 0"/><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column" style="text-align:center"><p style="font-size:11px;line-height:1.6;color:#6366F1;margin:0;font-family:Inter, Arial, sans-serif;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">You received this email because a sign-in was requested for your account.<br/>ZapMail Inc., 123 Hero Lane, San Francisco, CA 94103<br/><a href="https://zapmail.app/unsubscribe" style="color:#818CF8;text-decoration-line:none;text-decoration:underline" target="_blank">Unsubscribe</a> <!-- -->from transactional emails</p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><!--/$--></body></html>