Email Templates

The four transactional emails every product sends, in HTML that survives Outlook

Brand

Site URL

Button colour

Keep this email. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.

Create a free account Sign in

Subject: Welcome to Acme

htmlwelcome.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Welcome to Acme</title>
</head>
<body style="margin: 0; padding: 0; background-color: #f4f4f5;">
  <!-- Preheader: shown after the subject line in the inbox list, hidden in
       the body. Without it, clients show the first words of your markup. -->
  <div style="display: none; max-height: 0; overflow: hidden; opacity: 0;">
    Your account is ready — here is the one thing to do first.
  </div>

  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f5;">
    <tr>
      <td align="center" style="padding: 32px 16px;">

        <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="width: 600px; max-width: 100%; background-color: #ffffff; border-radius: 12px;">
          <tr>
            <td style="padding: 32px 32px 0;">
              <div style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 18px; font-weight: 700; color: #18181b;">
                Acme
              </div>
            </td>
          </tr>

          <tr>
            <td style="padding: 24px 32px 0;">
              <h1 style="margin: 0; font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 24px; line-height: 1.3; font-weight: 700; color: #18181b;">
                Welcome to Acme
              </h1>
            </td>
          </tr>

          <tr>
            <td style="padding: 16px 32px 0;">
              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                  <td style="padding-bottom: 16px; font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.6; color: #52525b;">
                    Your account is ready. The fastest way to see whether this is useful is to create your first project — it takes about a minute.
                  </td>
                </tr>
                <tr>
                  <td style="padding-bottom: 16px; font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.6; color: #52525b;">
                    If you get stuck, reply to this email. It goes to a person.
                  </td>
                </tr>

              <tr>
                <td style="padding: 8px 0 24px;">
                  <table role="presentation" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td align="center" bgcolor="#6366f1" style="border-radius: 8px;">
                        <a href="https://acme.com/new"
                           style="display: inline-block; padding: 12px 24px; font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 15px; font-weight: 600; color: #ffffff; text-decoration: none; border-radius: 8px;">
                          Create your first project
                        </a>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              </table>
            </td>
          </tr>

          <tr>
            <td style="padding: 8px 32px 32px;">
              <div style="border-top: 1px solid #e4e4e7; padding-top: 16px; font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; line-height: 1.5; color: #a1a1aa;">
                You are receiving this because you signed up for Acme.
              </div>
            </td>
          </tr>
        </table>

        <div style="padding-top: 16px; font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; color: #a1a1aa;">
          Acme · <a href="https://acme.com" style="color: #a1a1aa;">acme.com</a>
        </div>

      </td>
    </tr>
  </table>
</body>
</html>

mdwelcome.txt — the text/plain part

Welcome to Acme

Your account is ready. The fastest way to see whether this is useful is to create your first project — it takes about a minute.
If you get stuck, reply to this email. It goes to a person.

Create your first project: https://acme.com/new

—
You are receiving this because you signed up for Acme.
Acme · https://acme.com

Now use it on something

Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.

Preview the catalog in this paletteHand these tokens to an agent

npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json

More designer tools

All 36 run in the tab — no account, no upload.See all