One-Time Passcode email template
A black one-time passcode email: a small serif wordmark, the seven digit code in large white type, its expiry time and a quiet help line in grey.
Light shows the email as designed. Dark and Gmail show how email apps can change its colors.
<!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="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>One-Time Passcode</title>
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<style>
:root{color-scheme:light dark;supported-color-schemes:light dark;}
body{margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
table,td{mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;}
img{border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;}
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;line-height:inherit!important;}
u + .ete-body a{color:inherit;text-decoration:none;}
@media only screen and (max-width:620px){
.ete-container{width:100%!important;max-width:100%!important;}
.ete-outer{padding:0!important;}
.ete-content{border-radius:0!important;}
.ete-px{padding-left:20px!important;padding-right:20px!important;}
.ete-stack{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box;padding-left:0!important;padding-right:0!important;}
.ete-stack-gap{padding-bottom:20px!important;}
.ete-fluid{width:100%!important;max-width:100%!important;height:auto!important;}
.ete-fluid-cap{width:100%!important;max-width:280px!important;height:auto!important;display:block!important;margin-left:auto!important;margin-right:auto!important;}
.ete-stack-center,.ete-stack-center p{text-align:center!important;}
.ete-h1{font-size:28px!important;line-height:34px!important;}
.ete-h2{font-size:22px!important;line-height:28px!important;}
.ete-code{font-size:24px!important;letter-spacing:2px!important;}
.ete-btn-full{display:block!important;width:100%!important;box-sizing:border-box;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#000000!important;}
.ete-content{background-color:#000000!important;}
.ete-text{color:#ffffff!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#868686!important;}
.ete-link{color:#bdbdbd!important;}
.ete-border{border-color:#222222!important;}
.ete-panel{background-color:#000000!important;border-color:#222222!important;}
.ete-btn{background-color:#ffffff!important;border-color:#ffffff!important;}
.ete-btn-text{color:#000000!important;}
.ete-btn-outline{border-color:#ffffff!important;}
.ete-btn-outline-text{color:#ffffff!important;}
.ete-logo-light{display:none!important;}
.ete-logo-dark{display:block!important;max-height:none!important;overflow:visible!important;}
}
[data-ogsc] .ete-text{color:#ffffff!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#868686!important;}
[data-ogsc] .ete-link{color:#bdbdbd!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#000000!important;}
[data-ogsb] .ete-content{background-color:#000000!important;}
[data-ogsb] .ete-panel{background-color:#000000!important;border-color:#222222!important;}
</style>
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#000000;">
<!-- Made with emailtemplateexamples.com -->
<div class="ete-preheader" style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;">Your one-time passcode is inside. It expires in 30 minutes. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#000000;">
<tr><td align="center" class="ete-outer" style="padding:24px 12px;">
<!--[if mso]><table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" class="ete-container" width="600" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:600px;margin:0 auto;">
<tr><td class="ete-content" style="background-color:#000000;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td align="center" class="ete-px" style="padding:28px 32px 20px;"><span class="ete-heading" style="font-family:Georgia, 'Times New Roman', serif;font-size:18px;line-height:23px;font-weight:700;letter-spacing:-0.3px;color:#ffffff;">Vaultline</span></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:Georgia, 'Times New Roman', serif;font-size:14px;line-height:22px;color:#ffffff;text-align:center;">Here is your one-time passcode:</p></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" class="" style="padding:24px 20px;background-color:#000000;border:2px dashed #000000;border-radius:0px;text-align:center;"><p class="ete-code" style="margin:0;padding-top:8px;font-family:'Courier New',Courier,monospace;font-size:30px;line-height:38px;font-weight:700;letter-spacing:4px;color:#ffffff;">0293482</p></td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:Georgia, 'Times New Roman', serif;font-size:14px;line-height:22px;color:#868686;text-align:center;">This code will expire in 30 minutes.</p></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:Georgia, 'Times New Roman', serif;font-size:12px;line-height:19px;color:#868686;text-align:center;"><i>Problems? Just reply to this email.</i></p></td></tr>
<tr><td align="center" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:Georgia, 'Times New Roman', serif;font-size:13px;line-height:21px;color:#868686;line-height:20px;text-align:center;"><strong>Vaultline Security</strong><br>8 Bastion Court, Austin, TX 78702</p><p class="ete-muted" style="margin:0;font-family:Georgia, 'Times New Roman', serif;font-size:13px;line-height:21px;color:#868686;line-height:20px;text-align:center;padding-top:10px;"><a class="ete-link" href="{{unsubscribe_url}}" style="color:#868686;text-decoration:underline;">Unsubscribe</a></p></td></tr>
</table>
</td></tr>
<tr><td align="center" class="ete-muted" style="padding:20px 12px 0;font-family:Georgia, 'Times New Roman', serif;font-size:12px;line-height:18px;color:#868686;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#868686;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
Adapted from Waypoint responsive transactional email templates (saas one-time passcode) by usewaypoint, MIT license.
About this template
A sign in code email for any app that uses one-time passcodes. It is black from edge to edge, minimal and fast to read, because people open it with one goal: copy the code.
A small serif wordmark sits at the top, then a single line introduces the code. The code itself is set large in white monospace digits with generous letter spacing, so it is easy to read and to type on another device.
Grey text under the code says how long it stays valid, and an italic help line invites a reply if something goes wrong. There are no buttons, images or links in the body, which keeps the message short and trustworthy.
Fill the code from your auth system and keep the expiry in sync with your settings.
Use it in your email tool
- Click Copy HTML, or download the .html file.
- In Mailchimp, Brevo, HubSpot or Klaviyo, start a new email with the custom HTML or code editor and paste it in.
- Change the text, links and images. Map merge tags such as {{first_name}} and {{unsubscribe_url}} to the tags of your tool.
- Send a test to yourself on desktop and phone before you send it to your list.
Sections in this email
- Wordmark
- Intro line
- Passcode
- Expiry line
- Help line
- Footer
Subject line ideas
- Your Vaultline sign in code
- Here is your one-time passcode
- Use this code to finish signing in
Preview text idea
Your one-time passcode is inside. It expires in 30 minutes.