Figma email templates

Email is the one design you hand to software that will rewrite it. Gmail strips what it does not recognise, Outlook renders through Word, Apple Mail inverts your palette when the phone is in dark mode, and none of them ask permission.

That is the real constraint on this set, and it explains why the templates look the way they do: table-friendly structure, one column, generous tap targets, and nothing that depends on a layout engine agreeing with you.

Ten templates and two modular pieces

The main component set is Email template, 640px wide, with ten types covering the messages most products actually send: two simple welcome layouts, an invite, a verification message, an image-led welcome, three video welcome variants, and two built around product mockups.

Beside it sit two smaller sets that many teams will get more use from. The header comes left or center aligned, with navigation links, without them, or with a row of social icons. The footer comes left aligned, center aligned, or center aligned with a divider, each available with or without an action row. Both are 576px wide, which is the 640px template minus 32px of gutter on each side, and both are meant to be swapped while the body of the message changes underneath.

Width, tables, and what you are allowed to style

640px is a deliberate number. The old 600px convention comes from Outlook's rendering width on a 1,024px screen, and modern clients handle a little more, so 640 buys a roomier column without risking a horizontal scroll.

What it cannot buy is layout freedom. Can I email is the reference for what any given client supports, and it is a sobering read: flexbox and grid are still not safe across the clients your recipients have, so nested tables remain the structure and inline styles remain the delivery mechanism. Gmail's own CSS documentation lists what it will honour and notes that anything outside the list is simply ignored, which is the failure mode that makes email debugging so unpleasant.

So design as a single column, keep body copy as real text rather than baking it into an image, and treat every button as a padded table cell rather than a shape.

Dark mode happens whether you plan for it or not

Every frame in this file exists twice, once light and once dark, which is convenient given how many recipients will read the message inverted. The clients do not agree on how to do it. Some invert nothing, some flip only pure black and white on backgrounds, and Gmail on iOS rewrites colors across the whole message, as Campaign Monitor's dark mode guide documents client by client.

Two habits cover most of the damage: keep text off pure #000000 and #FFFFFF, since those are the values most likely to be swapped out from under you, and export logos and icons as transparent PNGs that hold up on either background. A white wordmark sitting on a white JPEG is the classic dark mode failure, and it happens to somebody every week.

Where the templates connect

Transactional email is half of a flow that starts on screen. The verification template is the other half of the verification screens, the welcome layouts follow sign up, and the invite template answers a team invite dialog.

Keeping the sender name, logo, and button styling identical across both halves is most of what makes a message look legitimate rather than phished, and it is the detail that slips when the email is written by a different team a sprint later. The social rows in the header and footer use the same social icons as the rest of the kit, and placeholder company marks are free at logos while you wait on real brand assets.

When it is time to build, the same layouts exist in code. Untitled UI React email templates are open source, part of a library built with Tailwind CSS and React Aria, so the markup and the design stay in step.