The HTML behind it
Project brief template HTML
This is the whole template. The fields in double braces fill from your data on every render. Copy it into your account and change anything you like.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style data-thirds="base">
html,body{margin:0}
[data-thirds="canvas"]{position:relative;overflow:hidden}
[data-thirds="canvas"] [data-thirds]{position:absolute;box-sizing:border-box;margin:0}
[data-thirds="text"]{white-space:pre-wrap;overflow-wrap:anywhere}
[data-thirds="image"]{display:block}
[data-thirds="table"]{border-collapse:collapse}
[data-thirds="table"] th,[data-thirds="table"] td{padding:4px 6px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule,#dde1e8)}
[data-thirds="table"] th{background:var(--head,transparent)}
[data-thirds="list"]{display:flex;flex-direction:column}
[data-thirds="canvas"] [data-thirds="item"]{position:relative;flex:none}
</style>
<style>@page { size: 794px 1123px; margin: 0; } body { font-family: Arial, sans-serif; } [data-thirds="table"] th,[data-thirds="table"] td { padding: 4px 10px; } </style>
</head>
<body>
<div data-thirds="canvas" data-thirds-kind="pdf" style="width:794px;height:1123px;background:white">
<div data-thirds="text" style="left:56px;top:55px;width:500px;height:22px;font-size:12px;color:#0a46ff;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">Project plan</div>
<div data-thirds="text" style="left:56px;top:110px;width:675px;height:130px;font-size:46px;color:#0b0b0b;font-weight:700;line-height:1.25">{{ project_name }}</div>
<div data-thirds="box" style="left:56px;top:276px;width:682px;height:152px;background:#eaf0ff"></div>
<div data-thirds="text" style="left:82px;top:300px;width:630px;height:103px;font-size:22px;color:#0b0b0b;font-weight:400;line-height:1.25">{{ summary }}</div>
<div data-thirds="text" style="left:56px;top:474px;width:210px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">Project owner</div>
<div data-thirds="text" style="left:56px;top:503px;width:205px;height:55px;font-size:18px;color:#0b0b0b;font-weight:700;line-height:1.25">{{ owner }}</div>
<div data-thirds="text" style="left:292px;top:474px;width:190px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">Start date</div>
<div data-thirds="text" style="left:292px;top:503px;width:190px;height:30px;font-size:18px;color:#0b0b0b;font-weight:400;line-height:1.25">{{ starts_on|date }}</div>
<div data-thirds="text" style="left:524px;top:474px;width:205px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">Target date</div>
<div data-thirds="text" style="left:524px;top:503px;width:205px;height:30px;font-size:18px;color:#0b0b0b;font-weight:400;line-height:1.25">{{ target_on|date }}</div>
<div data-thirds="text" style="left:56px;top:596px;width:600px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">What success looks like</div>
<div data-thirds="text" style="left:56px;top:626px;width:680px;height:110px;font-size:21px;color:#0b0b0b;font-weight:400;line-height:1.25">{{ success }}</div>
<div data-thirds="text" style="left:56px;top:746px;width:500px;height:34px;font-size:25px;color:#0b0b0b;font-weight:700;line-height:1.25">Milestones</div>
<table data-thirds="table" style="left:56px;top:792px;width:682px;font-size:16px;--head:#eaf0ff"><thead><tr><th>Date</th><th>Milestone</th></tr></thead><tbody>{% for milestone in milestones %}<tr><td>{{ milestone.date|date }}</td><td>{{ milestone.name }}</td></tr>{% endfor %}</tbody></table>
<div data-thirds="text" style="left:56px;top:1051px;width:682px;height:45px;font-size:12px;color:#575f6d;font-weight:400;line-height:1.25">{{ note }}</div>
</div>
</body>
</html>
Sample data
The values that made the picture.
Change any of them, and the same HTML makes a new file.
{
"project_name": "Fieldnote launch campaign",
"summary": "Create one clear launch story and turn it into a reusable set of branded sales and social material.",
"owner": "Maya Chen",
"starts_on": "2026-09-07",
"target_on": "2026-10-02",
"success": "The sales team can explain the release in one minute, and every launch item uses the same message and visual system.",
"milestones": [
{
"date": "2026-09-10",
"name": "Approve the launch message"
},
{
"date": "2026-09-18",
"name": "Review the first document and image set"
},
{
"date": "2026-09-28",
"name": "Hand off the final reusable templates"
}
],
"note": "Keep customer names and unreleased product facts out of public drafts."
}