Back to transactional templates
Invoice Reminder
This invoice email template is built for freelancers, consultants, and small agencies who need to present a clean, professional invoice without a dedicated billing platform. The typographic hierarchy makes every figure scannable and the payment CTA is prominent without being aggressive.
Responsive Gmail Outlook Apple Mail
Preview
Production-Ready HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Invoice #INV-2026-0142 — Payment Due Aug 30</title>
<style>
@media only screen and (max-width: 600px) {
.email-container { width: 100% !important; }
.mobile-pad { padding: 24px !important; }
}
</style>
</head>
<body width="100%" style="margin:0; padding:0; background-color:#F5F5F3; font-family:'Helvetica Neue', Arial, sans-serif;">
<center style="width:100%; background-color:#F5F5F3;">
<div style="display:none; max-height:0; overflow:hidden; mso-hide:all;">Invoice #INV-2026-0142 for $4,200.00 is due on August 30, 2026. Pay online or reply to arrange another method.͏</div>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="600" class="email-container" style="max-width:600px; margin:auto; background-color:#ffffff; border: 1px solid #E0E0DC;">
<!-- Header -->
<tr>
<td style="padding: 32px 44px; border-bottom: 1px solid #EEEEE8;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td>
<p style="margin: 0; font-size: 16px; font-weight: 700; color: #1A1A18; letter-spacing: -0.3px;">North Star Creative</p>
<p style="margin: 2px 0 0; font-size: 11px; color: #9A9A90; letter-spacing: 0.3px;">northstarcreative.co · hello@northstarcreative.co</p>
</td>
<td style="text-align: right;">
<p style="margin: 0; font-size: 11px; font-weight: 600; color: #9A9A90; text-transform: uppercase; letter-spacing: 1.5px;">Invoice</p>
<p style="margin: 2px 0 0; font-size: 15px; font-weight: 700; color: #1A1A18;">#INV-2026-0142</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Invoice meta -->
<tr>
<td style="padding: 24px 44px 20px; border-bottom: 1px solid #EEEEE8;" class="mobile-pad">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="50%">
<p style="margin: 0 0 3px; font-size: 10px; color: #9A9A90; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600;">Billed to</p>
<p style="margin: 0; font-size: 14px; color: #1A1A18; line-height: 1.6; font-weight: 500;">Thornbridge Capital<br><span style="font-weight: 400; color: #5A5A52;">Alex Drummond, CFO<br>212 West Adams Street<br>Chicago, IL 60606</span></p>
</td>
<td width="50%" style="text-align: right; vertical-align: top;">
<p style="margin: 0 0 12px;">
<span style="font-size: 10px; color: #9A9A90; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; display: block;">Issue date</span>
<span style="font-size: 14px; color: #1A1A18;">August 1, 2026</span>
</p>
<p style="margin: 0;">
<span style="font-size: 10px; color: #9A9A90; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; display: block;">Due date</span>
<span style="font-size: 14px; color: #D64C32; font-weight: 600;">August 30, 2026</span>
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Line items -->
<tr>
<td style="padding: 24px 44px 0;" class="mobile-pad">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="font-size: 10px; color: #9A9A90; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; padding-bottom: 12px;">Description</td>
<td style="font-size: 10px; color: #9A9A90; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; padding-bottom: 12px; text-align: right;">Amount</td>
</tr>
<tr style="border-top: 1px solid #EEEEE8;">
<td style="padding: 14px 0; border-top: 1px solid #EEEEE8;">
<p style="margin: 0 0 2px; font-size: 14px; color: #1A1A18; font-weight: 500;">Brand Identity System</p>
<p style="margin: 0; font-size: 12px; color: #8A8A80;">Logo, typography, color system, usage guidelines</p>
</td>
<td style="padding: 14px 0; border-top: 1px solid #EEEEE8; text-align: right; font-size: 14px; color: #1A1A18; font-weight: 500; vertical-align: top;">$2,800.00</td>
</tr>
<tr>
<td style="padding: 14px 0; border-top: 1px solid #EEEEE8;">
<p style="margin: 0 0 2px; font-size: 14px; color: #1A1A18; font-weight: 500;">Collateral Design (5 items)</p>
<p style="margin: 0; font-size: 12px; color: #8A8A80;">Business card, letterhead, presentation deck, email signature, social templates</p>
</td>
<td style="padding: 14px 0; border-top: 1px solid #EEEEE8; text-align: right; font-size: 14px; color: #1A1A18; font-weight: 500; vertical-align: top;">$1,400.00</td>
</tr>
</table>
</td>
</tr>
<!-- Totals -->
<tr>
<td style="padding: 0 44px 32px;" class="mobile-pad">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-top: 2px solid #1A1A18;">
<tr>
<td style="padding: 16px 0 6px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="font-size: 13px; color: #5A5A52; padding-bottom: 6px;">Subtotal</td>
<td style="text-align: right; font-size: 13px; color: #1A1A18; padding-bottom: 6px;">$4,200.00</td>
</tr>
<tr>
<td style="font-size: 13px; color: #5A5A52; padding-bottom: 6px;">Tax (0%)</td>
<td style="text-align: right; font-size: 13px; color: #1A1A18; padding-bottom: 6px;">$0.00</td>
</tr>
<tr>
<td style="font-size: 16px; font-weight: 700; color: #1A1A18; padding-top: 10px; border-top: 1px solid #EEEEE8;">Total due</td>
<td style="text-align: right; font-size: 20px; font-weight: 800; color: #1A1A18; padding-top: 10px; border-top: 1px solid #EEEEE8;">$4,200.00</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- CTA -->
<tr>
<td style="padding: 0 44px 36px; text-align: center;" class="mobile-pad">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td style="background-color: #1A1A18; border-radius: 4px;">
<a href="#" style="display:inline-block; font-size: 14px; font-weight: 700; color: #F5F5F3; text-decoration: none; padding: 15px 36px; border-radius: 4px;">Pay invoice — $4,200.00</a>
</td>
</tr>
</table>
<p style="margin: 14px 0 0; font-size: 12px; color: #9A9A90;">Accepts all major cards · Bank transfer also available</p>
</td>
</tr>
<!-- Notes -->
<tr>
<td style="padding: 24px 44px; border-top: 1px solid #EEEEE8; background-color: #FAFAF8;">
<p style="margin: 0 0 4px; font-size: 12px; color: #7A7A72; line-height: 1.6;"><strong style="color: #1A1A18;">Payment terms:</strong> Net 30 from issue date. Late payments may incur a 1.5% monthly fee.</p>
<p style="margin: 8px 0 0; font-size: 12px; color: #7A7A72;">Questions? <a href="mailto:hello@northstarcreative.co" style="color: #1A1A18; text-decoration: underline;">hello@northstarcreative.co</a> · (312) 555-0178</p>
</td>
</tr>
</table>
</center>
</body>
</html>