SaaS Onboarding Email Template

The template uses a demo brand called Cadence, a Linear-style dev tool, so you can see exactly how it reads before you swap in your own product. It is a single 600px column on a near-black ground (#0e0e11, not pure black) with off-white text and one emerald accent (#34e0a0). Nothing fights for attention.

The order is deliberate. A small emerald square mark sits next to the Cadence wordmark. Then a short headline, "Welcome to Cadence." Two intro lines follow, and the second one drops to a softer grey so the eye reads them as primary then secondary. Below that is a framed product screenshot with a hairline border and rounded corners, so the new user sees the actual app before they are asked to do anything.

The middle is three setup steps: Connect your repo, Invite your team, and Learn the keyboard flow. Each is an emerald text link with one plain grey sentence under it, separated by thin hairline dividers. These are links, not competing buttons, which is the point. There is one button in the whole email, "Open Cadence," and it comes after a short sign-off from a named person (nora@cadence.dev) who says a real engineer answers replies, usually same day.

That is the single-message discipline. The three steps tell the user what to do, the one button gives them a single obvious next click, and the human note makes a reply feel safe. Type is Geist with tight letter-spacing on the 33px headline; body sits at 16px with 26px line height for easy reading. The footer carries the company name, a real mailing address, and unsubscribe and email-preference links.

Email clients are not browsers. Outlook on Windows renders with Microsoft Word, Gmail strips out anything in the head it does not like, and every client treats dark mode differently. This template is built for that reality, not for a modern browser.

The whole layout is tables with role=presentation, not divs and flexbox. Every visible style is inline on the element, so Gmail cannot drop it. The button is bulletproof: there is a VML rounded-rectangle version inside an MSO conditional comment for Outlook, and a normal padded link with inline background for everyone else, so the emerald button keeps its shape and dark text in both.

All the copy is live text, not baked into an image. That means it stays sharp, stays selectable, and still reads if images are blocked. The only image is the product screenshot, and it has alt text and a fixed width that scales down on mobile.

Dark mode is handled on purpose. The email declares color-scheme and supported-color-schemes as dark, uses x-apple-disable-message-reformatting so Apple Mail does not recolor it, and starts from a near-black background with light text, so clients that auto-invert have far less to fight with. The Geist web font loads where it can (Apple Mail, iOS) and falls back cleanly to the system sans-serif in Gmail and Outlook. There is one mobile media query that widens the padding, stretches the headline, and turns the button full width on small screens.

Copy the full HTML from the template. In Klaviyo, create a campaign or flow email, choose the option to start from HTML or drag in an HTML block, and paste it in. In Mailchimp, create a campaign, pick the Code your own / Paste in code option, and drop the HTML there. Both keep the table structure and inline styles intact.

Now make it yours. Replace Cadence with your product name and wordmark, and swap the emerald (#34e0a0) for your brand color everywhere it appears: the small square mark, the three step links, the sign-off email link, and the button background. Rewrite the headline, the two intro lines, and the three setup steps so they match your actual first-run flow. Point every link and the button at your real URLs, and change the from-name email to a real person on your team.

Update the footer with your company name, mailing address, and a working unsubscribe link, since that is required by law and by every ESP. Then send a test to yourself and open it in Gmail, Apple Mail, and Outlook, and check it in dark mode. If you want client-by-client proof before a big send, run it through a tool like Litmus or Email on Acid. Once it looks right, send it or add it to your welcome flow.