Bring the charm of traditional stationery to your billing documents with this vintage paper invoice HTML template using HTML5 and CSS3. Warm parchment tones, dark brown typography, delicate borders, and subtle paper effects create a classic appearance while keeping invoice information clear and organized.
This static invoice template suits boutique businesses, artisan studios, freelancers, and creative professionals. It includes business details, client information, an itemized billing table, fixed totals, and payment instructions. Separate HTML and CSS files make it easy to customize the content, paper colors, typography, and decorative details directly in the source code.
This static invoice template suits freelancers, consultants, agencies, and small businesses. It includes company information, client details, an itemized service table, fixed totals, and payment instructions. Separate HTML and CSS files make it easy to customize the content, brand colors, and decorative shapes directly in the source code.
What you will build
You will build a responsive static invoice template inspired by vintage paper stationery. The design includes:
A warm parchment background with subtle paper grain and aged edges.
Classic serif typography and a thin double-line border.
A centered business name, establishment year, and contact details.
Delicate ornamental dividers.
Invoice number, issue date, and payment due date.
A clearly arranged client billing section.
An itemized table containing five sample entries.
Right-aligned quantities, prices, and amounts.
Fixed subtotal, discount, and total due.
Bank details and payment instructions.
Payment terms, a signature line, and a thank-you message.
A responsive screen layout and a simplified A4-friendly print design.
HTML source
<!doctype html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A classic stationery invoice from the Willow & Wren artisan studio.">
<title>Invoice WW-2026-042 | Willow & Wren</title>
</head>
<body>
<main class="invoice" aria-labelledby="invoice-title">
<!-- Customize business details. -->
<header class="business">
<p class="eyebrow">Independent craft & considered design</p>
<h1>Willow & Wren</h1>
<p class="established">EST. 1998</p>
<p class="tagline">Beautiful things, thoughtfully made.</p>
<address>24 Orchard Lane, Portland, ME 04101<br>
hello@willowandwren.example <span class="separator">·</span> +1 (207) 555-0148</address>
<div class="ornament" aria-hidden="true"><span>✧</span></div>
</header>
<section class="particulars" aria-label="Client and invoice details">
<!-- Customize client details. -->
<div class="client">
<h2 class="eyebrow">Billed to</h2>
<p class="client-name">Eleanor Bennett</p>
<address>The Orchard House<br>118 Maple Avenue<br>Hudson, NY 12534<br>eleanor@orchardhouse.example</address>
</div>
<!-- Customize invoice number and dates. -->
<div class="invoice-details">
<h2 id="invoice-title" class="invoice-label">Invoice</h2>
<dl>
<div><dt>Invoice no.</dt><dd>WW-2026-042</dd></div>
<div><dt>Issue date</dt><dd><time datetime="2026-10-19">19 October 2026</time></dd></div>
<div><dt>Payment due</dt><dd><time datetime="2026-11-02">02 November 2026</time></dd></div>
</dl>
</div>
</section>
<!-- Customize item text and prices manually; all amounts are USD. -->
<section aria-label="Invoice items">
<div class="table-scroll" role="region" aria-label="Itemized invoice, scroll horizontally on small screens" tabindex="0">
<table>
<caption>Goods & services <span>All amounts in USD</span></caption>
<thead><tr><th scope="col">No.</th><th scope="col">Description</th><th scope="col" class="number">Qty.</th><th scope="col" class="number">Unit price</th><th scope="col" class="number">Amount</th></tr></thead>
<tbody>
<tr><td>01</td><th scope="row">Custom stationery design<small>Bespoke letterhead & correspondence suite</small></th><td class="number">1</td><td class="number">$320.00</td><td class="number">$320.00</td></tr>
<tr><td>02</td><th scope="row">Letterpress note cards<small>Set of 25 · warm ivory stock</small></th><td class="number">4</td><td class="number">$45.00</td><td class="number">$180.00</td></tr>
<tr><td>03</td><th scope="row">Hand-bound linen journals<small>Natural linen · ruled pages</small></th><td class="number">3</td><td class="number">$38.00</td><td class="number">$114.00</td></tr>
<tr><td>04</td><th scope="row">Personalized wax seal<small>Custom brass stamp with walnut handle</small></th><td class="number">1</td><td class="number">$65.00</td><td class="number">$65.00</td></tr>
<tr><td>05</td><th scope="row">Gift wrapping & preparation<small>Archival tissue, ribbon & handwritten notes</small></th><td class="number">1</td><td class="number">$21.00</td><td class="number">$21.00</td></tr>
</tbody>
</table>
</div>
<!-- Update totals manually whenever items change. -->
<dl class="totals">
<div><dt>Subtotal</dt><dd>$700.00</dd></div>
<div><dt>Courtesy discount (10%)</dt><dd>−$70.00</dd></div>
<div class="total-due"><dt>Total due <small>USD</small></dt><dd>$630.00</dd></div>
</dl>
</section>
<section class="payment" aria-labelledby="payment-title">
<!-- Replace sample bank information before issuing. -->
<h2 id="payment-title" class="eyebrow">Payment information</h2>
<dl class="bank-details">
<div><dt>Bank</dt><dd>Example Heritage Bank</dd></div>
<div><dt>Account holder</dt><dd>Willow & Wren Studio</dd></div>
<div><dt>Account number</dt><dd>000123456789 (sample)</dd></div>
<div><dt>Payment reference</dt><dd>WW-2026-042</dd></div>
</dl>
<p class="deadline">Please arrange payment by 02 November 2026 and include the invoice number as your reference.</p>
</section>
<section class="closing" aria-label="Notes and authorization">
<!-- Customize notes, terms, and authorized signatory. -->
<div class="notes"><h2 class="eyebrow">Notes & terms</h2><p>It was a pleasure creating these pieces for The Orchard House. Payment is due within 14 days of issue. Please contact us with any billing questions before the due date.</p></div>
<div class="signature"><div class="signature-line" aria-hidden="true"></div><p>Margaret Ellis</p><small>Authorized signature · Studio proprietor</small></div>
</section>
<footer>
<p class="thanks">Thank you for your business</p>
<p class="enquiries">Billing enquiries · accounts@willowandwren.example</p>
<div class="flourish" aria-hidden="true">❦</div>
</footer>
</main>
</body></html>CSS source
/* Customize the stationery palette and border here. */
:root {
--paper: #f8f2e5;
--ink: #392d23;
--border: #8b7354;
--accent: #756047;
--table-header: #eee4d2;
--surround: #ded5c6;
--paper-border: 3px double var(--border);
}
* { box-sizing: border-box; }
body { margin: 0; padding: 40px 20px; background: var(--surround); color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 14px; line-height: 1.6; }
.invoice { position: relative; isolation: isolate; max-width: 900px; margin: auto; padding: 42px 54px 24px; background: var(--paper); border: var(--paper-border); box-shadow: 0 12px 40px #392d2324; }
/* Lightweight grain and edge aging; decorations never intercept input. */
.invoice::before, .invoice::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.invoice::before { opacity: .2; background-image: repeating-linear-gradient(0deg, #8b735414 0, #8b735414 1px, transparent 1px, transparent 4px), repeating-linear-gradient(93deg, transparent 0, transparent 5px, #8b73540d 5px, #8b73540d 6px); }
.invoice::after { box-shadow: inset 0 0 32px #9b78351c; background: linear-gradient(90deg, #9b783509, transparent 12%, transparent 88%, #9b783509); }
h1, h2, p, dl { margin: 0; }
address { font-style: normal; overflow-wrap: anywhere; }
.business { text-align: center; }
.eyebrow { color: var(--accent); font-size: 10px; font-weight: 400; letter-spacing: .17em; text-transform: uppercase; }
h1 { font-size: clamp(32px, 6vw, 46px); font-weight: 400; letter-spacing: -.035em; line-height: 1.25; margin: 7px 0; }
.established { font-size: 10px; letter-spacing: .23em; }
.tagline { font-size: 13px; font-style: italic; margin: 8px 0 10px; }
.business address { color: var(--accent); font-size: 11px; }
.separator { padding: 0 7px; }
.ornament { display: flex; align-items: center; gap: 15px; margin: 22px 0 26px; color: var(--border); }
.ornament::before, .ornament::after { content: ""; height: 1px; flex: 1; background: var(--border); opacity: .65; }
.ornament span { font-size: 19px; line-height: 1; }
.particulars { display: flex; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.client-name { font-size: 18px; margin: 7px 0 3px; }
.client address { font-size: 12px; }
.invoice-details { min-width: 255px; }
.invoice-label { display: table; margin: 0 0 14px auto; padding: 2px 17px; border: 1px solid var(--border); font-weight: 400; font-size: 19px; letter-spacing: .18em; text-transform: uppercase; }
dl > div { display: flex; justify-content: space-between; gap: 20px; }
dt { color: var(--accent); }
dd { margin: 0; }
.invoice-details dl { font-size: 12px; }
.invoice-details dd { text-align: right; }
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
table { width: 100%; min-width: 570px; border-collapse: collapse; font-size: 12px; }
caption { text-align: left; padding-bottom: 9px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); font-size: 10px; }
caption span { float: right; text-transform: none; letter-spacing: .03em; }
thead { background: var(--table-header); }
th, td { padding: 12px 10px; border-bottom: 1px solid #8b73544d; vertical-align: top; }
thead th { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: left; font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; }
tbody th { font-weight: 400; text-align: left; }
tbody td:first-child { color: var(--accent); font-size: 11px; }
th small { display: block; font-size: 10px; color: var(--accent); margin-top: 3px; }
.number { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.totals { width: 310px; max-width: 100%; margin: 19px 0 25px auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.totals > div { padding: 5px 0; }
.totals .total-due { border-top: 3px double var(--border); border-bottom: 3px double var(--border); margin-top: 7px; padding: 9px 0; font-size: 20px; font-weight: 700; }
.total-due dt { color: var(--ink); }
.total-due small { font-size: 9px; font-weight: 400; color: var(--accent); margin-left: 5px; }
.payment { border-top: 1px solid var(--border); padding-top: 18px; }
.bank-details { font-size: 11px; margin-top: 9px; max-width: 370px; }
.bank-details > div { justify-content: flex-start; gap: 15px; }
.bank-details dt { flex: 0 0 110px; }
.bank-details dd { overflow-wrap: anywhere; }
.deadline { font-size: 10px; font-style: italic; margin-top: 10px; }
.closing { display: flex; align-items: flex-end; gap: 40px; margin-top: 23px; }
.notes { flex: 1; }
.notes p { font-size: 10px; margin-top: 7px; }
.signature { flex: 0 0 220px; text-align: center; }
.signature-line { border-bottom: 1px solid var(--border); height: 30px; margin-bottom: 6px; }
.signature p { font-size: 12px; }
.signature small { display: block; font-size: 9px; color: var(--accent); }
footer { text-align: center; margin-top: 24px; }
.thanks { font-size: 19px; font-style: italic; }
.enquiries { font-size: 9px; margin-top: 5px; overflow-wrap: anywhere; }
.flourish { color: var(--accent); font-size: 25px; margin-top: 5px; line-height: 1.2; }
@media (max-width: 650px) {
body { padding: 16px 10px; }
.invoice { padding: 28px 22px 20px; }
.particulars { flex-direction: column; gap: 22px; }
.invoice-details { min-width: 0; }
.invoice-label { margin-left: 0; }
.closing { flex-direction: column; align-items: stretch; gap: 20px; }
.signature { flex-basis: auto; align-self: flex-end; width: 220px; max-width: 100%; }
}
@page { size: A4; margin: 12mm; }
@media print {
body { padding: 0; background: white; color: #30261e; font-size: 10pt; }
.invoice { width: 100%; max-width: none; margin: 0; padding: 8mm 10mm 5mm; background: white; box-shadow: none; }
.invoice::before, .invoice::after { display: none; }
.particulars { flex-direction: row; gap: 8mm; margin-bottom: 5mm; }
.invoice-details { min-width: 62mm; }
.invoice-label { margin-left: auto; }
.ornament { margin: 4mm 0 5mm; }
.table-scroll { overflow: visible; }
table { min-width: 0; width: 100%; font-size: 9pt; }
th, td { padding: 3mm 2mm; }
thead { display: table-header-group; }
tr, .totals, .payment, .closing, footer { break-inside: avoid; page-break-inside: avoid; }
.totals { margin-top: 4mm; margin-bottom: 5mm; }
.closing { flex-direction: row; align-items: flex-end; gap: 8mm; margin-top: 5mm; }
.signature { flex: 0 0 52mm; align-self: auto; }
footer { margin-top: 5mm; }
}
JavaScript source
How it works
The project uses index.html for the invoice content and style.css for its vintage appearance, responsive layout, and print formatting. All business details, invoice items, and amounts are updated manually in the HTML file.
Try a change
Choose Edit code, make a small change, then press Run to preview it.
Use the source Copy buttons, choose Edit code to open the editor, or Download ZIP to save the project after a six-second countdown.
Discussion (0)
Leave a comment