Legal and awards / A4
Statement of work HTML template
Scope, deliverables with acceptance criteria, assumptions, an explicit out-of-scope list and a milestone payment schedule, under an existing master agreement.
When this document is the right one
A master agreement exists and a specific piece of work needs defining under it. The master says how the parties behave; this says what is being made, when it is done, and what done means.
Why each part is there
The fields are visible in the markup. What is not visible is why they are present, which is the part that gets removed first when someone adapts a template for their own use.
- A reference to the agreement it sits under, because a statement of work with no master is a contract missing its terms.
- An acceptance criterion beside every deliverable. A deliverable with no test for whether it is finished is a deliverable that is never finished.
- A deemed-acceptance period, so a client who stops responding does not hold a project open indefinitely.
- An explicit out-of-scope list, which prevents more arguments than the scope section does.
- Payment milestones tied to acceptance rather than to dates, since a date arrives whether or not the work did.
The template
A complete file. Doctype, stylesheet, body: paste it into a renderer unchanged and it produces a finished A4 page. Replace the sample data and the styling holds.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Statement of work, SOW-2026-014</title>
<style>
@page { size: A4; margin: 22mm 20mm; }
* { box-sizing: border-box; }
body { margin: 0; font: 10pt/1.55 "Helvetica Neue", Arial, sans-serif; color: #16202b;
counter-reset: sec; }
header { border-bottom: 2px solid #16202b; padding-bottom: 5mm; }
h1 { margin: 0; font-size: 18pt; }
.ref { color: #5b6b7c; margin-top: 1.5mm; }
.frame { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4mm; margin: 6mm 0;
break-inside: avoid; }
.frame div { border: 1px solid #dbe2e8; padding: 3.5mm; }
.frame .k { font-size: 7.5pt; text-transform: uppercase; letter-spacing: 0.07em;
color: #5b6b7c; }
.frame .v { margin-top: 1mm; font-weight: 700; }
h2 { font-size: 11.5pt; margin: 8mm 0 2mm; break-after: avoid; }
h2::before { counter-increment: sec; content: counter(sec) ". "; color: #5b6b7c; }
p { margin: 0 0 3mm; }
ul { margin: 0 0 3mm; padding-left: 5mm; }
li { margin-bottom: 1.5mm; }
/* Acceptance criteria are the whole document. A deliverable with no test for
whether it is done is a deliverable that is never done. */
table { width: 100%; border-collapse: collapse; margin: 3mm 0; }
thead { display: table-header-group; }
th { text-align: left; font-size: 7.5pt; text-transform: uppercase; letter-spacing: 0.06em;
color: #5b6b7c; border-bottom: 1.5px solid #16202b; padding-bottom: 2mm; }
td { padding: 2.5mm 3mm 2.5mm 0; border-bottom: 1px solid #eef2f5; vertical-align: top; }
tr { break-inside: avoid; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.out-of-scope { border-left: 3px solid #b3261e; padding: 2mm 0 2mm 5mm; margin: 4mm 0;
break-inside: avoid; }
.sign { margin-top: 12mm; display: grid; grid-template-columns: 1fr 1fr; gap: 12mm;
break-inside: avoid; }
.sign div { border-top: 1px solid #16202b; padding-top: 1.5mm; margin-top: 14mm;
font-size: 8.5pt; color: #5b6b7c; }
</style>
</head>
<body>
<header>
<h1>Statement of work</h1>
<div class="ref">SOW-2026-014 · under the Services Agreement dated 14 May 2026</div>
</header>
<div class="frame">
<div><div class="k">Client</div><div class="v">Ravenshill Hotel Group Ltd</div></div>
<div><div class="k">Supplier</div><div class="v">Kilnworks Studio Ltd</div></div>
<div><div class="k">Start</div><div class="v">08 June 2026</div></div>
<div><div class="k">Target completion</div><div class="v">14 August 2026</div></div>
<div><div class="k">Charges</div><div class="v">GBP 12,288 including VAT</div></div>
<div><div class="k">Basis</div><div class="v">Fixed price, milestone billed</div></div>
</div>
<h2>Background</h2>
<p>
The Client is refurbishing the dining rooms at its Bath and Wells properties and
requires a bespoke tableware range for 220 covers. Samples were produced and
approved in March 2026. This statement of work covers production and delivery of
the approved range in two batches.
</p>
<h2>Deliverables and acceptance</h2>
<p>
Each deliverable is accepted when the criterion in the right-hand column is met, or
ten working days after delivery without written objection, whichever is earlier.
</p>
<table>
<thead>
<tr><th>Deliverable</th><th>Acceptance criterion</th><th class="num">Due</th></tr>
</thead>
<tbody>
<tr>
<td>Batch 1: 110 covers, four piece setting</td>
<td>Count verified at delivery. No more than 2% of pieces outside the agreed
dimensional tolerance, assessed against the approved sample.</td>
<td class="num">03 Jul</td>
</tr>
<tr>
<td>Service trial report</td>
<td>Written report from the Client after two weeks of service, listing any
issue that recurred more than twice.</td>
<td class="num">24 Jul</td>
</tr>
<tr>
<td>Batch 2: 110 covers, incorporating trial findings</td>
<td>As batch 1, plus written confirmation that issues raised in the trial
report have been addressed or explained.</td>
<td class="num">14 Aug</td>
</tr>
</tbody>
</table>
<h2>Assumptions</h2>
<ul>
<li>Kiln capacity is available from 08 June. A slip in the preceding commission moves every date in this document by the same amount.</li>
<li>The Client provides a single named contact empowered to accept a batch.</li>
<li>Glaze tone varies between firings. The approved sample sets the centre of an acceptable range, not a target to match.</li>
</ul>
<div class="out-of-scope">
<strong>Explicitly out of scope.</strong> Installation, styling and photography.
Replacement of breakage in service. Storage of unshipped stock beyond 30 days from
a batch being ready. Any change to the approved design after 08 June, which is a
change order rather than a revision.
</div>
<h2>Payment schedule</h2>
<table>
<thead>
<tr><th>Milestone</th><th>Trigger</th><th class="num">Amount</th></tr>
</thead>
<tbody>
<tr><td>Deposit</td><td>Signature of this statement of work</td><td class="num">4,915.20</td></tr>
<tr><td>Batch 1</td><td>Acceptance of batch 1</td><td class="num">3,686.40</td></tr>
<tr><td>Completion</td><td>Acceptance of batch 2</td><td class="num">3,686.40</td></tr>
</tbody>
</table>
<div class="sign">
<div>For Ravenshill Hotel Group Ltd, name, position, date</div>
<div>For Kilnworks Studio Ltd, name, position, date</div>
</div>
</body>
</html>The layout decision worth understanding
The out-of-scope block is bordered in red on the left, and it is deliberately the most visually distinct thing on the page after the deliverables table. In practice it is the section that gets read only after a disagreement, and making it prominent at signature is the cheapest possible dispute prevention.
The mistake people make adapting it
Writing acceptance criteria that are opinions. Satisfactory, high quality and to the client's approval are not criteria, they are invitations. A criterion has to be something two people who disagree could still both measure.
Rendering it
The page box is declared in the template's own CSS as A4, so the size travels with the markup rather than living in the code that calls the renderer. A4 is also one of the six named formats the API accepts, so it can be passed in the request options instead if that suits your setup better.
curl -X POST https://api.pdfpipe.xyz/v1/pdf \
-H "Authorization: Bearer $PDFPIPE_KEY" \
-H "Content-Type: application/json" \
-d '{
"html": "<!doctype html>...",
"options": { "format": "A4" }
}' \
--output statement-of-work.pdfFrequently asked
Can I use this template commercially?
Yes. Copy it, change it, ship it. It is sample markup written to be taken, and the sample data in it is invented, so replace the names and the numbers before anyone sees it.
Why is the page size in the CSS rather than in the API call?
Because a statement of work is a A4 document, and that is a property of the document rather than of the code that renders it. Declaring it in the page box means the size cannot be lost between the template and the call, which is the usual way a document ends up on the wrong paper.
Will it look the same in every renderer?
The layout will, because it uses ordinary CSS. The page break behaviour will not: break-inside and break-after are implemented differently by browser engines and by dedicated print engines, and some of the paged media specification is not implemented in browser renders at all. That difference is documented per property in the paged CSS reference.
Other templates
Documents from the same part of a business, and one from each of the other groups.
Contract HTML template with numbered clauses
A two-party agreement with automatically numbered clauses and sub-clauses, a cover page, and an execution block that cannot be orphaned.
NDA HTML template
A mutual confidentiality agreement with the two commercially significant terms, the definition of confidential information and the duration, pulled out into a box.
Certificate HTML template with border
A landscape award document: a double frame, the recipient's name as the largest element, a citation, and two signatures with a seal between them.
Change order HTML template
A signed amendment to an existing statement of work, showing the change as a before and after, with its effect on cost, schedule, and what happens if it is not agreed.
HTML invoice template with CSS
The standard commercial invoice: a demand for payment with line items, a tax figure, and terms that say when the money is due.
Payment receipt HTML template
Proof that a payment was made: the amount, the payment reference, the method, and what it was for.
Quotation HTML template with CSS
A priced proposal with a validity date, a scope, optional items kept out of the headline total, and somewhere to sign.
Every template
The full set, grouped by what part of a business produces the document.
A4 page size for PDF generation
A4 is the default page for business documents everywhere except North America, and the default this API uses when no format is given.
Paste the template into the playground and get the PDF back. No signup, no key.