Responsive HTML email templates: newsletter and 9 transactional emails, light and dark (HTML, MJML, plain text, FR and EN)

These templates are for freelancers, small online shops and developers who wire up the automated emails of a website or an app: confirming an address, a sign-in code, an order receipt, a reminder after a failed payment. They save you from starting from scratch in a format where usual web code falls short: table layout, inline CSS, a fallback when the mail client strips styles. Every template comes in English and French, as MJML source, as ready-to-send HTML and as plain text, with a light theme and a dark theme in the same file.

• 10 templates, a newsletter and 9 transactional emails:
  • Newsletter (newsletter);
  • Welcome (welcome);
  • Email verification (verify-email);
  • Password reset (password-reset);
  • Sign-in code (login-code);
  • Order receipt (order-receipt);
  • Download ready (download-ready);
  • Abandoned cart (abandoned-cart);
  • Failed payment (payment-failed);
  • Notification (notification).
• 2 languages, English and French, for every template.
• 2 themes, light and dark, combined in each HTML file.
• 20 MJML sources and 6 shared partials: common settings, header, transactional and marketing footers in English and French.
• 20 compiled HTML files, base CSS inlined.
• 20 plain text versions, to attach to each send.
• 20 HTML previews filled with sample data, and a page that gathers them.
• 40 PNG captures of the templates, at 320 and 600 px wide, light and dark.
• 6 placeholder images: a header image, article and product thumbnails.
• variables.md, the list of every variable, template by template, with an English and a French example, and compatibilite.md, what was measured and what was not.

Archive layout:

mjml/fr/<template>.mjml
mjml/en/<template>.mjml
mjml/partials/<partial>.mjml
html/fr/<template>.html
html/en/<template>.html
text/fr/<template>.txt
text/en/<template>.txt
preview/index.html
preview/fr/<template>.html
preview/en/<template>.html
captures/<template>-<320|600>-<light|dark>.png
images/<image>.png
variables.md
compatibilite.md

The zip also holds the licence text, a README file and the credits.

How to use them

• From the MJML, to change the layout: every source includes the partials in mjml/partials/, so a change to the header or footer applies to every template. Then compile with MJML, installed separately (the kit was compiled with version 5.4.1).
• From the compiled HTML, without MJML: the files in html/ can be sent as they are once the variables are replaced. Paste them into your email tool or wire them into your code.
• Variables: variable text is written {{variable_name}}, a format read as is by double-brace template engines. variables.md describes each one. The item rows of the receipt and the cart come as two sample lines: duplicate the row or use your engine’s loop. The notification button is optional, and variables.md says what to remove in each format.
• Plain text: send the file from text/ as the text part of the same message. It repeats the headings, the button links and the same variables as the HTML.
• Images: the files in images/ are placeholders. Host your own and replace the relative paths with absolute URLs.
• Dark theme: nothing to switch on. The HTML turns dark when the mail client reads the prefers-color-scheme preference and the reader has chosen dark mode.
• Previews: open preview/index.html in a browser to see the 10 filled templates.

What was checked, and how

The measurements are detailed in compatibilite.md. They were made in two browser engines, Chromium and WebKit, not in mail clients.

• Responsive: renders at 320, 600 and 1,024 px, light and dark, with no overflow; the receipt and cart amounts stay on one line at 320 px.
• Fallback with no style: once every <style> block is removed, as some mail clients do, the 20 HTML files stay readable, with no overflow at 600 or 320 px.
• Contrast: every text, light, dark and fallback, reaches at least 5.69:1, against a 4.5:1 threshold.
• Spacing: margins, paddings, font sizes and line heights follow a 4 px grid.
• Weight: the heaviest file, the French newsletter, weighs 29.4 KB, under the 102 KB threshold above which some mail clients clip the message.
• Validity: HTML validated; MJML sources in strict validation, recompiled and compared with the delivered HTML.
• Accessibility: axe audit on the 20 previews, light and dark, with no serious or critical violation. Layout tables carry role="presentation"; the receipt and cart tables have column headers and a caption.

Outlook for Windows, dark mode and other mail clients

The real render in each mail client was not captured: no multi-client screenshot service was used. Compatibility rests on construction rules and on the public caniemail database, from which compatibilite.md records 59 entries for 16 mail clients, with the fallback planned for each poorly supported property.

• Outlook for Windows: its rendering engine was not tested. The templates give it fixed-width tables in conditional comments written by MJML, and double backgrounds and widths with HTML attributes.
• Mail clients that show the dark theme, according to the database and not to captures: Apple Mail (macOS, iOS), Outlook (macOS, Outlook.com, iOS, Android) and Samsung Email (Android). The Outlook versions in this list may also adjust colours themselves.
• Mail clients that do not: Gmail (web, iOS, Android), Outlook (Windows, Windows Mail), Yahoo! Mail (web, iOS, Android) and Thunderbird (macOS). They show the light version, or apply their own colour inversion, which was not measured.
• Without media queries: the three newsletter columns stay stacked and the email shows in light mode, readable at any width.

Marketing emails

The newsletter and the abandoned cart reminder are marketing emails. They generally require the recipient’s prior consent, or an existing customer relationship depending on the case, and a way to unsubscribe in every email. The footer of these two templates provides an unsubscribe link ({{unsubscribe_url}}) and the sender’s identity, but it does not replace unsubscribe handling in your email tool, nor the one-click unsubscribe header that major mailbox providers expect for bulk sending. Adjust the sentence that explains why the recipient gets the email. These templates do not by themselves make your sending compliant.

Good to know

• Test your sends with your email tool before a campaign: no capture was made in a mail client.
• Deliverability (spam filters, sender authentication) depends on your email tool and your domain, not on the templates.
• Opened without replacing the variables, the raw templates break long variable names at 320 px. Once filled, they show with no overflow.
• The VAT row of the receipt is an example: remove it or replace it with the wording that fits your situation.
• compatibilite.md is written in French first; its English part follows it.
• Neither MJML nor an email tool is included, and the kit has no mockup file for a design tool.

Production and AI

The English and French texts, the MJML sources, the compiled HTML and the generation and checking scripts were produced with an AI assistant (Claude Code), then reviewed and checked: a fingerprint for every file, the recompiled sources compared with the delivered HTML, renders in two engines at several widths, contrast, an accessibility audit, contact sheets reviewed by eye. No image was produced by an image generator: the placeholder images and the captures come out of the kit’s scripts.

• MJML: 20 sources and 6 partials, to compile with MJML.
• HTML: 20 files, one column of 600 px at most, fluid below, base CSS inlined, system fonts, to paste into an email tool or wire into your code.
• Plain text: 20 UTF-8 .txt files, lines of 78 characters at most apart from web addresses.
• PNG: 40 captures and 6 placeholder images.
• Variables in the {{…}} format, for double-brace template engines.

The templates are sold with the commercial licence (terms in French): you may modify them and use them for your own sending as well as your clients’, in personal and professional projects, but you may not resell them, redistribute them or publish them as reusable templates (template gallery, public repository), even for free.

• HTML email templates for subscription software: the trial, the team invitation, renewal, the subscription invoice and cancellation, built the same way as this pack and sharing no template with it.

1.0.0 (November 11, 2026): first version.