The four service emails every shop or app sends, built in MJML: order receipt with line items, shipped with tracking, password reset, email confirmation with a code. Built for Outlook, Gmail and Apple Mail, dark mode handled. The receipt is free.
What actually happens in each client, and why the markup is built the way it is.
Outlook renders mail through the Word engine. The layout is nested tables with conditional comments, so the structure holds and nothing collapses — but the dark theme is ignored and it stays light, which is intentional.
Gmail strips part of the media queries and clips messages over 102 KB. Each email here is well under that, and the mobile layout works even where the media queries are dropped.
Full support, including the dark theme. Backgrounds and text stay contrasty rather than being auto-inverted into mush.
Dark mode is handled with prefers-color-scheme plus
[data-ogsc] fallbacks for Outlook.com, which rewrites
colours instead of reading media queries.
| Client | Light | Dark |
|---|---|---|
| Outlook 2016 / 2019 / 365 (Windows) | ✓ | — |
| Outlook.com | ✓ | ✓ |
| Gmail web | ✓ | ✓ |
| Gmail iOS and Android | ✓ | partial |
| Apple Mail | ✓ | ✓ |
| Yahoo Mail | ✓ | ✓ |
| Thunderbird | ✓ | ✓ |
“partial” means the client applies its own colour inversion rather than reading the palette in the source. Nothing breaks — it simply is not identical to the design.
The home page and its CSS — enough to publish a one-pager. A credit link stays in the footer.
Every page, the Pro-only pages, the source files, no attribution, and 12 months of updates and email support.
Use it in unlimited personal and commercial projects, including client work.
Do not resell the template itself, alone or in a bundle.
Outlook renders email with the Word engine. Anything that behaves in a browser falls apart there: flexbox does nothing, margins collapse unpredictably, and background images are ignored outright. Transactional emails get sent more than any other kind — every order, every login — so a layout that breaks in one client breaks in front of everyone, all day.
These four are nested tables with conditional comments where Outlook needs them, VML buttons,
and a dark-mode block that Gmail and Apple Mail honour and Outlook ignores gracefully. The
receipt’s line items are a plain <table> with inline styles, so your template engine can
loop the rows. The shipped email’s progress bar is three table cells with background
colours — no image to host, nothing for a client to block.
The free archive is the receipt as compiled HTML. Pro is all four, plus the MJML source with the shared theme, header and footer, so you change the brand once.
No unsubscribe link — these are service emails, and the footer says so; add one back if you
send anything promotional on the same stream. The merge tags are the common {{variable}}
syntax that Postmark, SendGrid, Mailgun and Resend accept directly; the README lists every
tag per email. The sender name and address block are placeholders and must be replaced.
Gmail on iOS and Android honours the dark theme by inverting colours itself rather than
reading prefers-color-scheme. The result is readable and contrasty, but it is Gmail’s
inversion, not the palette in the source. Nothing breaks; it simply is not identical.
First release
Four emails a shop actually sends, built in MJML in a 1970s ledger style: the parcel went out, here is your receipt, your seat is held, the thing you asked about is back. Warm paper, oxblood, squared corners. Built for Outlook, Gmail and Apple Mail, dark mode wired up. The dispatch email is free.
Three newsletter emails built in MJML: a one-column digest, a magazine issue with a lead story and two-up grid, and a single-message announcement. Sample copy written in full. Built for Outlook, Gmail and Apple Mail, dark mode handled. The digest is free.
A four-email onboarding series built in MJML: welcome, activation, trial ending, day-14 check-in. Built for Outlook, Gmail and Apple Mail, and it holds up in dark mode. The first email is free.