Transactional email templates (welcome, verify, password reset)

Account emails are the ones people actually open: they’re waiting for them. These templates cover a welcome email with a getting-started checklist, email verification with a code, a magic-link sign-in, a password reset and a paid invoice. Each is table-based HTML with inline styles, a 600px layout that goes fluid on phones, a bulletproof button and dark-mode colours, in eight visual styles. Every example is an original design that comes with its HTML code and a DESIGN.md of colour, type and spacing tokens, in light and dark. Free to use and adapt.

DeviceAll Web Mobile

StyleAll Minimal Editorial Brutalist Luxury Playful Corporate Retro Monochrome

Theme

80 examples

Invoice email (paid) — web, minimal (Fernway)

Web · Invoice · minimal

Magic link sign-in email — web, minimal (Fernway)

Web · Magic link sign-in · minimal

Password reset email — web, minimal (Fernway)

Web · Password reset · minimal

Verify email address email — web, minimal (Fernway)

Web · Verify email · minimal

Web · Welcome · minimal

Invoice email (paid) — web, editorial (Fernway)

Web · Invoice · editorial

Magic link sign-in email — web, editorial (Fernway)

Web · Magic link sign-in · editorial

Password reset email — web, editorial (Fernway)

Web · Password reset · editorial

Verify email address email — web, editorial (Fernway)

Web · Verify email · editorial

Welcome email — web, editorial (Fernway)

Web · Welcome · editorial

Invoice email (paid) — web, brutalist (Fernway)

Web · Invoice · brutalist

Magic link sign-in email — web, brutalist (Fernway)

Web · Magic link sign-in · brutalist

Password reset email — web, brutalist (Fernway)

Web · Password reset · brutalist

Verify email address email — web, brutalist (Fernway)

Web · Verify email · brutalist

Welcome email — web, brutalist (Fernway)

Web · Welcome · brutalist

Invoice email (paid) — web, luxury (Fernway)

Web · Invoice · luxury

Magic link sign-in email — web, luxury (Fernway)

Web · Magic link sign-in · luxury

Password reset email — web, luxury (Fernway)

Web · Password reset · luxury

Verify email address email — web, luxury (Fernway)

Web · Verify email · luxury

Web · Welcome · luxury

Invoice email (paid) — web, playful (Fernway)

Web · Invoice · playful

Magic link sign-in email — web, playful (Fernway)

Web · Magic link sign-in · playful

Password reset email — web, playful (Fernway)

Web · Password reset · playful

Verify email address email — web, playful (Fernway)

Web · Verify email · playful

Web · Welcome · playful

Invoice email (paid) — web, corporate (Fernway)

Web · Invoice · corporate

Magic link sign-in email — web, corporate (Fernway)

Web · Magic link sign-in · corporate

Password reset email — web, corporate (Fernway)

Web · Password reset · corporate

Verify email address email — web, corporate (Fernway)

Web · Verify email · corporate

Welcome email — web, corporate (Fernway)

Web · Welcome · corporate

Invoice email (paid) — web, retro (Fernway)

Web · Invoice · retro

Magic link sign-in email — web, retro (Fernway)

Web · Magic link sign-in · retro

Password reset email — web, retro (Fernway)

Web · Password reset · retro

Verify email address email — web, retro (Fernway)

Web · Verify email · retro

Web · Welcome · retro

Invoice email (paid) — web, monochrome (Fernway)

Web · Invoice · monochrome

Magic link sign-in email — web, monochrome (Fernway)

Web · Magic link sign-in · monochrome

Password reset email — web, monochrome (Fernway)

Web · Password reset · monochrome

Verify email address email — web, monochrome (Fernway)

Web · Verify email · monochrome

Welcome email — web, monochrome (Fernway)

Web · Welcome · monochrome

Invoice email (paid) — mobile, minimal (Fernway)

Mobile · Invoice · minimal

Magic link sign-in email — mobile, minimal (Fernway)

Mobile · Magic link sign-in · minimal

Password reset email — mobile, minimal (Fernway)

Mobile · Password reset · minimal

Verify email address email — mobile, minimal (Fernway)

Mobile · Verify email · minimal

Welcome email — mobile, minimal (Fernway)

Mobile · Welcome · minimal

Invoice email (paid) — mobile, editorial (Fernway)

Mobile · Invoice · editorial

Magic link sign-in email — mobile, editorial (Fernway)

Mobile · Magic link sign-in · editorial

Password reset email — mobile, editorial (Fernway)

Mobile · Password reset · editorial

Verify email address email — mobile, editorial (Fernway)

Mobile · Verify email · editorial

Welcome email — mobile, editorial (Fernway)

Mobile · Welcome · editorial

Invoice email (paid) — mobile, brutalist (Fernway)

Mobile · Invoice · brutalist

Magic link sign-in email — mobile, brutalist (Fernway)

Mobile · Magic link sign-in · brutalist

Password reset email — mobile, brutalist (Fernway)

Mobile · Password reset · brutalist

Verify email address email — mobile, brutalist (Fernway)

Mobile · Verify email · brutalist

Welcome email — mobile, brutalist (Fernway)

Mobile · Welcome · brutalist

Invoice email (paid) — mobile, luxury (Fernway)

Mobile · Invoice · luxury

Magic link sign-in email — mobile, luxury (Fernway)

Mobile · Magic link sign-in · luxury

Password reset email — mobile, luxury (Fernway)

Mobile · Password reset · luxury

Verify email address email — mobile, luxury (Fernway)

Mobile · Verify email · luxury

Welcome email — mobile, luxury (Fernway)

Mobile · Welcome · luxury

Invoice email (paid) — mobile, playful (Fernway)

Mobile · Invoice · playful

Magic link sign-in email — mobile, playful (Fernway)

Mobile · Magic link sign-in · playful

Password reset email — mobile, playful (Fernway)

Mobile · Password reset · playful

Verify email address email — mobile, playful (Fernway)

Mobile · Verify email · playful

Welcome email — mobile, playful (Fernway)

Mobile · Welcome · playful

Invoice email (paid) — mobile, corporate (Fernway)

Mobile · Invoice · corporate

Magic link sign-in email — mobile, corporate (Fernway)

Mobile · Magic link sign-in · corporate

Password reset email — mobile, corporate (Fernway)

Mobile · Password reset · corporate

Verify email address email — mobile, corporate (Fernway)

Mobile · Verify email · corporate

Welcome email — mobile, corporate (Fernway)

Mobile · Welcome · corporate

Invoice email (paid) — mobile, retro (Fernway)

Mobile · Invoice · retro

Magic link sign-in email — mobile, retro (Fernway)

Mobile · Magic link sign-in · retro

Password reset email — mobile, retro (Fernway)

Mobile · Password reset · retro

Verify email address email — mobile, retro (Fernway)

Mobile · Verify email · retro

Mobile · Welcome · retro

Invoice email (paid) — mobile, monochrome (Fernway)

Mobile · Invoice · monochrome

Magic link sign-in email — mobile, monochrome (Fernway)

Mobile · Magic link sign-in · monochrome

Password reset email — mobile, monochrome (Fernway)

Mobile · Password reset · monochrome

Verify email address email — mobile, monochrome (Fernway)

Mobile · Verify email · monochrome

Welcome email — mobile, monochrome (Fernway)

Mobile · Welcome · monochrome

See it in a flow

Sign up and onboarding · Reset a password · Sign in with a magic link

Account email design tips

Put the one action in a big button near the top, and repeat it as a plain link for clients that block buttons.
Say how long a link or code is valid (15 minutes, 60 minutes, 24 hours) so people know whether to hurry.
For sign-in and reset emails, show when and from which device the request came, and what to do if it wasn’t them.
Use hidden preheader text: it’s the line that shows after the subject in the inbox.

Questions

Why are email templates built with tables?

Several widely used email clients, Outlook for Windows in particular, ignore modern CSS layout such as flexbox and grid. Nested tables with role="presentation" and inline styles are the most reliable way to keep the layout intact everywhere.

Do these emails support dark mode?

Yes. Light colours are inline, and a prefers-color-scheme block (plus Outlook.com’s data-ogsc selectors) swaps in the dark tokens from the DESIGN.md. Some clients still invert colours on their own, so test in the clients your users have.

Can I use these with my email provider?

Yes. They’re plain HTML, so they work with any sending service or framework. Replace the example links and copy with your own merge fields.

Browse by pattern

App screens

Dashboard
Data table
Analytics charts
Login
Sign up
Forgot password
Two-factor code
Welcome
Onboarding step
Permissions request
Home
Feed
List view
Detail view
Kanban board
Calendar
File manager
Search results
Editor toolbar
AI chat assistant
Chat list
Chat thread
Video call
Image viewer
Map view
Video player
Create post
Class schedule
Booking details
Booking confirmed
Product detail
Cart
Checkout
Order confirmation
Settings
Profile
Notifications center
Team members
Roles permissions
Audit log
API keys
Integrations
Billing plans
Invoice
Paywall upgrade
Cancel subscription
Empty state
404 error
Loading skeleton
Success confirmation
AI workspace
AI settings
Version history
Approval queue
Doctor directory
Telehealth visit
Clinic home
Music player
Playlist
Portfolio home
Case study
Security dashboard
Project tracker
Course dashboard
Multi-step form wizard
Bank onboarding
Product scan
Split view (master-detail)
Canvas editor
Floor plan
Voice call
Toast / snackbar with undo
Confirm dialog (destructive)
Side drawer
Command palette
Date range picker
Form validation errors
Sign-in error
Card declined at checkout
Find a pro (home services)
Book a home-service visit
Job tracker
Account email
Order email
Shift scheduler
Leave calendar
Time-off request
Multi-location operations dashboard
Inventory stock
Savings goal
Onboarding carousel

UI components

Tabs
Cards
Pagination
Popover
Tooltip
Dropdown menu
Accordion
Radio buttons
Breadcrumbs
Toggle switch
Stepper
Sidebar navigation
Loading spinner

Website sections

Website templates

Building with an AI coding agent? Every screen here is also in the free Made Good Designs MCP server: ask Claude, Cursor or ChatGPT to search_ui_screens (e.g. “billing settings, editorial style”), get_ui_flow for a whole journey, and get_ui_screen_code to pull the HTML and DESIGN.md straight into your project.