Certificate — rendered output
data.json first. Caveat: the double frame is two nested bordered boxes with explicit heights — the subset has no outline property — so adjusting the page margins means re-deriving those two heights.
Engine features exercised: own @page margins, nested bordered frames with content-box height arithmetic, column flex centring, 6px head rule variant.
Render it:
npx @formepdf/html templates/certificate/index.html -o certificate.pdf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Certificate of completion CC-2026-0044 — Northmoor Industrial Group, Inc.</title>
<link rel="stylesheet" href="../northmoor-shared.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sheet">
<header><div class="atop"></div></header>
<div class="certfill">
<div class="cert-outer">
<div class="cert-inner">
<div class="rowstart" style="justify-content: center"><div class="mark" style="width: 34.5pt; height: 34.5pt; font-size: 14.25pt; line-height: 34.5pt">N</div></div>
<div class="wm" style="margin-top: 10.5pt; font-size: 8.25pt">Northmoor</div>
<div class="sub" style="margin-top: 3pt">Industrial Group, Inc. · Rochester, New York</div>
<div class="cert-rule"></div>
<h1 class="cert-title">Certificate of<br>Completion</h1>
<div class="lbl lbl-accent cert-kicker">Mechanical installation and commissioning</div>
<div class="cert-lead">This is to certify that</div>
<div class="cert-name">Kestrel Medical Center</div>
<div class="cert-body">has taken beneficial occupancy of the works described below, that those works have been completed in accordance with contract 2026-CS-04 and the drawings referred to in it, and that commissioning was witnessed and passed on the date shown.</div>
<div class="cert-meta">
<div><div class="lbl">Works</div>Central Sterile utility skid<br>replacement, two skids</div>
<div><div class="lbl">Location</div>1465 Whitmore Parkway<br>Cleveland, Ohio</div>
<div><div class="lbl">Commissioned</div>25 September 2026<br>Witnessed by D. Kowalczyk</div>
<div><div class="lbl">Warranty</div>12 months from this date<br>Expires 25 September 2027</div>
</div>
<div class="hair" style="margin-top: 22.5pt; width: 100%"></div>
<div class="cert-sigs">
<div class="cert-sig lbl">Robert A. Halloran · Vice President, Commercial</div>
<div class="cert-sig lbl">Priya N. Raghunathan · Quality Systems Manager</div>
<div class="cert-sig cert-sig-short lbl">Date of issue</div>
</div>
<footer class="cert-foot">
<span>Certificate CC-2026-0044</span>
<span>Retainage released on this certificate · Article 7</span>
<span>Original — one of two issued</span>
</footer>
</div>
</div>
</div>
</div>
</body>
</html>
/* certificate — engraved double frame, centred setting.
* Accent policy (certificate): 1.5pt accent frame with a 0.75pt accent
* outline offset 4.5pt (nested boxes — `outline` is outside the
* subset), accent rule under the title, accent underline beneath the
* recipient name. */
@page {
size: Letter;
margin: 52.5pt 63pt 45pt; /* 70px 84px 60px — this document's own margins */
@bottom-left {
content: "Certificate of completion CC-2026-0044";
font-family: Helvetica, Arial, sans-serif;
font-size: 5.625pt;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #8A857E;
}
@bottom-right {
content: "Page " counter(page) " of " counter(pages);
font-family: Helvetica, Arial, sans-serif;
font-size: 5.625pt;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #8A857E;
}
}
.sheet { position: relative; }
.atop { position: absolute; top: -52.5pt; left: -63pt; right: -63pt; height: 4.5pt; background-color: #7B2233; }
/* Content box: 792 − 52.5 − 45 = 694.5pt. */
.certfill { height: 694.5pt; display: flex; flex-direction: column; }
.cert-outer { border: 0.75pt solid #7B2233; padding: 4.5pt; height: 694.5pt; display: flex; flex-direction: column; } /* border box fills .certfill exactly */
.cert-inner {
border: 1.5pt solid #7B2233;
height: 684pt; /* border box = the outer frame's content height */
display: flex;
flex-direction: column;
align-items: center;
padding: 36pt 42pt 30pt;
text-align: center;
}
.cert-rule { width: 72pt; height: 1.5pt; background-color: #7B2233; margin-top: 22.5pt; }
.cert-title { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 34.5pt; line-height: 1.06; letter-spacing: -0.02em; margin: 22.5pt 0 0; }
.cert-kicker { margin-top: 12pt; letter-spacing: 0.22em; }
.cert-lead { font-family: Georgia, 'Times New Roman', serif; font-size: 8.25pt; line-height: 1.8; margin-top: 25.5pt; }
.cert-name {
font-family: Georgia, 'Times New Roman', serif;
font-size: 22.5pt;
line-height: 1.2;
margin-top: 10.5pt;
padding-bottom: 10.5pt;
border-bottom: 1.125pt solid #7B2233;
width: 330pt;
}
.cert-body { font-family: Georgia, 'Times New Roman', serif; font-size: 8.25pt; line-height: 1.85; margin-top: 16.5pt; max-width: 247.5pt; }
.cert-meta { display: flex; gap: 25.5pt; margin-top: 22.5pt; text-align: left; font-size: 7.125pt; line-height: 1.6; justify-content: center; }
.cert-sigs { display: flex; gap: 33pt; margin-top: 27pt; text-align: left; width: 100%; break-inside: avoid; }
.cert-sig { flex: 1; border-top: 0.75pt solid #111111; padding-top: 5.25pt; }
.cert-sig-short { flex: 0.7; }
.cert-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; font-size: 6pt; letter-spacing: 0.11em; text-transform: uppercase; color: #767676; padding-top: 19.5pt; width: 100%; }
northmoor-shared.css alongside them — the set’s shared spine (type scale, tables, signature blocks, the accent).
Sample data (data.json)
Sample data (data.json)
data.json
{
"certificateNumber": "CC-2026-0044",
"kind": "Mechanical installation and commissioning",
"recipient": "Kestrel Medical Center",
"contract": "2026-CS-04",
"works": "Central Sterile utility skid replacement, two skids",
"location": "1465 Whitmore Parkway, Cleveland, Ohio",
"commissioned": "25 September 2026",
"witnessedBy": "D. Kowalczyk",
"warranty": "12 months from this date · Expires 25 September 2027",
"signatories": [
{
"name": "Robert A. Halloran",
"title": "Vice President, Commercial"
},
{
"name": "Priya N. Raghunathan",
"title": "Quality Systems Manager"
}
],
"notes": {
"retainage": "Retainage released on this certificate · Article 7",
"issue": "Original — one of two issued"
}
}
MIT-licensed, free to copy — source on GitHub. Passes PDF/UA-1 validation (veraPDF) in CI; validation is a floor, not a certification.