Magic Link – Dark

Dark-mode magic link sign-in email.

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: 600;
      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:#0d1117;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">Your sign-in link for AppName — valid for 60 minutes. Do not share this email.<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><!--head--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="background-color:#0d1117;margin:0;padding:0;font-family:Inter, Arial, sans-serif"><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#0d1117;padding:40px 16px"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:600px;margin:0 auto"><tbody><tr style="width:100%"><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#111827;border-radius:12px 12px 0 0;border-bottom:1px solid #1f2937;padding:28px 40px"><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:20px;line-height:24px;color:#F9FAFB;font-weight:700;margin:0;letter-spacing:-0.3px;font-family:Inter, Arial, sans-serif;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">AppName</p></td><td align="right" data-id="__react-email-column"><p style="font-size:13px;line-height:24px;color:#6B7280;margin:0;font-family:Inter, Arial, sans-serif;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">Secure Sign-In</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;padding:48px 40px 40px 40px"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="text-align:center;margin-bottom:32px"><tbody><tr><td><div style="display:inline-block;background-color:#1f2937;border-radius:50%;width:64px;height:64px;line-height:64px;text-align:center;margin:0 auto 24px auto;border:1px solid #374151"><p style="font-size:28px;line-height:64px;color:#3B82F6;margin:0;font-family:Inter, Arial, sans-serif;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">🔑</p></div></td></tr></tbody></table><h1 style="color:#F9FAFB;font-size:28px;font-weight:700;line-height:1.25;margin:0 0 16px 0;text-align:center;letter-spacing:-0.5px;font-family:Inter, Arial, sans-serif">Here&#x27;s your sign-in link</h1><p style="font-size:16px;line-height:1.7;color:#9CA3AF;margin:0 0 36px 0;text-align:center;font-family:Inter, Arial, sans-serif;margin-top:0;margin-right:0;margin-bottom:36px;margin-left:0">Use the button below to sign in instantly — no password required. This link is personal to your account and should not be shared.</p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="text-align:center;margin-bottom:36px"><tbody><tr><td><a href="https://app.appname.com/auth/magic?token=abc123xyz" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;background-color:#3B82F6;color:#ffffff;font-size:16px;font-weight:600;padding:16px 40px;border-radius:8px;font-family:Inter, Arial, sans-serif;letter-spacing:0.1px;padding-top:16px;padding-right:40px;padding-bottom:16px;padding-left:40px" target="_blank"><span><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:24" hidden>&#8202;&#8202;&#8202;&#8202;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:12px">Sign In to AppName</span><span><!--[if mso]><i style="mso-font-width:500%" hidden>&#8202;&#8202;&#8202;&#8202;&#8203;</i><![endif]--></span></a></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#1f2937;border-radius:8px;padding:16px 20px;margin-bottom:32px;border:1px solid #374151"><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:20px;vertical-align:top;padding-top:1px"><p style="font-size:14px;line-height:24px;color:#FBBF24;margin:0;font-family:Inter, Arial, sans-serif;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">ⓘ</p></td><td data-id="__react-email-column" style="padding-left:10px"><p style="font-size:13px;line-height:1.6;color:#D1D5DB;margin:0;font-family:Inter, Arial, sans-serif;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">This link expires in <span style="color:#F9FAFB;font-weight:600">60 minutes</span> and can only be used once. If you did not request this link, you can safely ignore this email — your account remains secure.</p></td></tr></tbody></table></td></tr></tbody></table><hr style="width:100%;border:none;border-top:1px solid #eaeaea;border-color:#1f2937;border-top-width:1px;margin:0 0 28px 0"/><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#0d1117;border-radius:8px;padding:16px 20px;border:1px solid #1f2937"><tbody><tr><td><h2 style="color:#6B7280;font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;margin:0 0 8px 0;font-family:Inter, Arial, sans-serif">Security Notice</h2><p style="font-size:13px;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">AppName will never ask for your password via email. Do not forward this message to anyone. If you believe your account has been compromised, contact<!-- --> <a href="mailto:security@appname.com" style="color:#3B82F6;text-decoration-line:none;text-decoration:none;font-family:Inter, Arial, sans-serif" target="_blank">security@appname.com</a> <!-- -->immediately.</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;padding:0 40px 40px 40px"><tbody><tr><td><hr style="width:100%;border:none;border-top:1px solid #eaeaea;border-color:#1f2937;border-top-width:1px;margin:0 0 24px 0"/><p style="font-size:12px;line-height:1.6;color:#6B7280;margin:0 0 8px 0;font-family:Inter, Arial, sans-serif;margin-top:0;margin-right:0;margin-bottom:8px;margin-left:0">If the button above does not work, copy and paste this URL into your browser:</p><p style="font-size:14px;line-height:24px;margin:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0"><a href="https://app.appname.com/auth/magic?token=abc123xyz" style="color:#3B82F6;text-decoration-line:none;font-size:12px;text-decoration:underline;word-break:break-all;font-family:Inter, Arial, sans-serif" target="_blank">https://app.appname.com/auth/magic?token=abc123xyz</a></p></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#0d1117;border-radius:0 0 12px 12px;padding:28px 40px;border-top:1px solid #1f2937"><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 align="center" data-id="__react-email-column"><p style="font-size:12px;line-height:1.6;color:#374151;margin:0 0 12px 0;text-align:center;font-family:Inter, Arial, sans-serif;margin-top:0;margin-right:0;margin-bottom:12px;margin-left:0">AppName Inc. — 340 Pine Street, Suite 800, San Francisco, CA 94104</p><p style="font-size:12px;line-height:24px;color:#374151;margin:0;text-align:center;font-family:Inter, Arial, sans-serif;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">This is a transactional email related to your account security.<!-- --> <a href="https://appname.com/privacy" style="color:#4B5563;text-decoration-line:none;text-decoration:underline;font-family:Inter, Arial, sans-serif" target="_blank">Privacy Policy</a> <!-- -->·<!-- --> <a href="https://appname.com/terms" style="color:#4B5563;text-decoration-line:none;text-decoration:underline;font-family:Inter, Arial, sans-serif" target="_blank">Terms of Service</a></p><p style="font-size:11px;line-height:24px;color:#1f2937;margin:12px 0 0 0;text-align:center;font-family:Inter, Arial, sans-serif;margin-top:12px;margin-right:0;margin-bottom:0;margin-left:0">© 2026 AppName Inc. All rights reserved.</p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><!--/$--></body></html>