SAME INFORMATION. A DIFFERENT WAY TO SHARE IT.

A weekly update that makes the next decision clear

Turn scattered project notes into a readable status page with progress, risks, owners, and one clear decision.

Fictional worked example · Not a published customer artifact.

Make this with my agent See the complete result ↓

Your agent can use your own context or help you try the fictional sample. Review a draft first; nothing is published without your approval.

01 / The familiar format

You could send this as an email.

A fictional email with the same underlying facts. Read it here, then compare how the HTML version presents the information.

Email · Fictional example

Northstar onboarding refresh — September 1–5 update

Hi product lead and delivery team,

The September 18, 2026 launch target is at risk, but has not moved. We have completed 9 of the 12 planned sprint tasks (75%), compared with 6 of 12 (50%) last week. These are sprint task counts, not a prediction of overall project completion. This week the welcome email copy was approved, the onboarding checklist was implemented, and the analytics event names were agreed.

Two dependencies remain. Mobile QA has 3 open defects; Eli owns fixes and retesting by September 10. Severity and user impact still need assessment. Legal approval of the consent wording is outstanding; Noor expects a response September 9, and launch depends on that approval.

Decision needed: could the product lead approve two additional QA days by September 8? This is proposed staffing, not an approved change. Noor will follow up on September 9, Eli will retest by September 10, and I will share a launch readiness check September 11.

We do not yet have customer outcome measurements, budget figures, or an updated launch commitment.

Maya, project lead

02 / The HTML version

Same information. See what needs your attention.

This is the complete static HTML example, not a screenshot. Scroll inside the preview to read it all. It has no live data, scripts, forms, or external resources.

Inspect the complete HTML source

This is the authored source for the example. The preview above passes through our HTML sanitizer before rendering in an isolated frame.

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Northstar weekly update · September 5, 2026</title><style>
*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:#f2efe6;color:#192c30;font:16px/1.55 system-ui,sans-serif}main{max-width:1120px;margin:auto;padding:clamp(20px,5vw,60px)}h1,h2,h3,p,figure{margin:0}h1{max-width:850px;font-size:clamp(36px,6.5vw,76px);line-height:1.04;letter-spacing:-.045em;font-weight:750;margin:30px 0 24px}h2{font-size:clamp(25px,3.4vw,38px);line-height:1.15;letter-spacing:-.025em}h3{font-size:20px;line-height:1.3}p+p{margin-top:12px}.eyebrow{font:700 11px/1.6 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}.masthead{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:5px solid #192c30;border-bottom:1px solid #192c30;padding:14px 0}.brand{font-size:16px;letter-spacing:.14em}.status{display:inline-block;background:#fae0ad;border:1px solid #86521c;padding:4px 10px;color:#65400e;font-weight:700;font-size:12px}.intro{font-size:20px;max-width:670px}.byline{font-size:13px;margin-top:20px;color:#4c5d60} .decision{margin-top:32px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;background:#192c30;color:#fffaf0;padding:clamp(22px,4vw,40px);border-left:7px solid #ee9b71}.decision h2{margin:12px 0 18px;max-width:530px}.decision p{max-width:580px}.decision .eyebrow{color:#ffd0ad}.request-number{font-size:clamp(56px,9vw,100px);font-weight:750;line-height:1;letter-spacing:-.065em;color:#ffd0ad}.request-caption{display:block;font-size:12px;line-height:1.4;letter-spacing:0;max-width:95px;margin-top:10px}.section-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;margin-bottom:26px}.section-head .eyebrow{color:#526266}.section{margin-top:48px;padding-top:20px;border-top:1px solid #aab5ad}.sprint-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:40px}.comparison{padding:24px;background:#fffdf7;border:1px solid #b7c1b9}.bar-label{display:flex;justify-content:space-between;gap:10px;font-size:14px;margin-bottom:10px}.bar-label strong{font-variant-numeric:tabular-nums}.task-strip{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;height:34px;margin-bottom:22px}.task-strip span{border:1px solid #a6b2ae;background:#eeeee7}.task-strip .done{background:#235c51;border-color:#235c51}.previous .done{background:#718a81;border-color:#718a81}.legend{font-size:12px;color:#405454}.changed{list-style:none;padding:0;margin:18px 0 0}.changed li{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid #c3cdc4}.check{color:#235c51;font-size:20px;font-weight:800}.fine{font-size:13px;color:#4c5d60}.source-limit{margin-top:16px;max-width:750px}.gates{border-top:1px solid #aab5ad}.gate{display:grid;grid-template-columns:48px 1.2fr 1fr;gap:20px;padding:24px 0;border-bottom:1px solid #aab5ad}.gate-number{font:400 38px/1 Georgia,serif;color:#a54627}.gate h3{margin:8px 0 12px}.gate .owner{border-left:3px solid #c0cbc1;padding-left:20px}.owner strong{display:block;margin:8px 0}.owner p{font-size:14px}.timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;padding:0;margin:0;gap:0}.timeline li{border-top:3px solid #c3cdc4;padding:18px 16px 0 0;position:relative}.timeline li:before{content:"";display:block;width:11px;height:11px;background:#192c30;border:2px solid #f2efe6;position:absolute;top:-7px;left:0}.timeline .target{border-top:3px dashed #9a6c26}.timeline .target:before{background:#9a6c26}.timeline .date{font-size:24px;font-weight:700;letter-spacing:-.035em}.timeline p{font-size:13px;margin-top:8px}.timeline strong{display:block}.timeline .eyebrow{font-size:10px;letter-spacing:.04em}.caveat{display:grid;grid-template-columns:1fr 2fr;gap:24px;background:#e5e9df;padding:24px;margin-top:38px}.caveat p{font-size:14px}footer{border-top:1px solid #aab5ad;margin-top:40px;padding-top:20px;font-size:12px;color:#4c5d60}footer p+p{margin-top:8px}
@media(max-width:700px){.sprint-layout{grid-template-columns:1fr;gap:24px}.gate{grid-template-columns:34px 1fr;gap:12px}.gate .owner{grid-column:2}.timeline{grid-template-columns:1fr}.timeline li,.timeline .target{border-top:0;border-left:3px solid #c3cdc4;padding:0 0 26px 24px}.timeline .target{border-left-style:dashed;border-left-color:#9a6c26}.timeline li:before{top:9px;left:-7px}.timeline p{margin-top:4px}.timeline .date{font-size:22px}.caveat{grid-template-columns:1fr;gap:14px}.decision{grid-template-columns:1fr}.request-number{display:none}.section{margin-top:36px}.comparison{padding:18px}.task-strip{gap:3px}.masthead{align-items:center}}
@media print{body{background:#fff;font-size:11px}main{max-width:none;padding:12px}h1{font-size:38px;margin:18px 0}h2{font-size:23px}.intro{font-size:15px}.decision{background:white;color:#192c30;border:2px solid #192c30;padding:18px}.decision .eyebrow,.request-number{color:#192c30}.request-number{font-size:60px}.section{margin-top:24px}.decision,.comparison,.gate,.timeline li,.caveat{break-inside:avoid}.task-strip .done{background:#235c51;print-color-adjust:exact}.previous .done{background:#718a81}.sprint-layout{gap:24px}.gate{padding:16px 0}.timeline{display:block}.timeline li,.timeline .target{border-top:0;border-left:2px solid #aab5ad;padding:0 0 12px 18px}.timeline li:before{top:7px;left:-6px}.timeline .date{font-size:17px}.caveat{background:white;border:1px solid #aab5ad}footer{font-size:10px}}
</style></head><body><main>
<header><div class="masthead"><p class="eyebrow brand">Northstar / Fieldnotes</p><p class="eyebrow">Weekly update · September 1–5, 2026</p></div><h1>Three more tasks done.<br>Two launch gates open.</h1><p class="intro">The onboarding refresh is moving forward. Mobile QA and consent approval still put the September 18 launch target <span class="status">At risk</span></p><p class="byline">Prepared by Maya, project lead · For the product lead and delivery team</p></header>
<aside class="decision" id="decision"><div><p class="eyebrow">Product lead · Decision needed by September 8</p><h2>Approve two additional QA days.</h2><p>This staffing change is proposed, not yet approved. Mobile testing is one of the two open launch dependencies.</p></div><div class="request-number" aria-hidden="true">+2<span class="request-caption">QA days requested</span></div></aside>
<section class="section" id="sprint"><div class="section-head"><h2>Momentum, measured.</h2><p class="eyebrow">01 / Current sprint</p></div><div class="sprint-layout"><div class="comparison" role="group" aria-label="Sprint task comparison"><div class="bar-label"><span>Last week</span><strong>6 / 12 · 50%</strong></div><div class="task-strip previous" aria-hidden="true"><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span></span><span></span><span></span><span></span><span></span><span></span></div><div class="bar-label"><span>This week</span><strong>9 / 12 · 75%</strong></div><div class="task-strip" aria-hidden="true"><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span></span><span></span><span></span></div><p class="legend">Each segment = one planned task.<br>Filled = complete; outlined = remaining.</p></div><div><h3>What changed this week</h3><ul class="changed"><li><span class="check" aria-hidden="true">✓</span><span>Welcome email copy <strong>approved</strong></span></li><li><span class="check" aria-hidden="true">✓</span><span>Onboarding checklist <strong>implemented</strong></span></li><li><span class="check" aria-hidden="true">✓</span><span>Analytics event names <strong>agreed</strong></span></li></ul></div></div><p class="fine source-limit">This measures task completion in the current sprint, not overall launch readiness. The twelve-task denominator is the same in both snapshots.</p></section>
<section class="section" id="gates"><div class="section-head"><h2>Two gates. Neither cleared.</h2><p class="eyebrow">02 / Launch dependencies</p></div><div class="gates"><article class="gate"><span class="gate-number" aria-hidden="true">01</span><div><p class="eyebrow">Mobile QA · Open</p><h3>3 defects need fixing and retesting.</h3><p class="fine">Severity and user impact are not yet assessed.</p></div><div class="owner"><p class="eyebrow">Owner → Next action</p><strong>Eli · September 10</strong><p>Fix and retest mobile defects by the target date.</p></div></article><article class="gate"><span class="gate-number" aria-hidden="true">02</span><div><p class="eyebrow">Consent wording · Awaiting Legal</p><h3>Approval is still outstanding.</h3><p class="fine">Launch depends on this approval. An expected response is not a confirmed approval.</p></div><div class="owner"><p class="eyebrow">Owner → Next action</p><strong>Noor · September 9</strong><p>Follow up on consent wording. Legal’s response is expected, not guaranteed.</p></div></article></div></section>
<section class="section" id="next"><div class="section-head"><h2>The next checkpoints.</h2><p class="eyebrow">03 / September 2026</p></div><ol class="timeline"><li><span class="date">Sep 08</span><p class="eyebrow">Decision due</p><p><strong>Product lead</strong>Consider the two additional QA days.</p></li><li><span class="date">Sep 09</span><p class="eyebrow">Response expected</p><p><strong>Noor</strong>Follow up with Legal.</p></li><li><span class="date">Sep 10</span><p class="eyebrow">Retest target</p><p><strong>Eli</strong>Fix and retest mobile.</p></li><li><span class="date">Sep 11</span><p class="eyebrow">Readiness check</p><p><strong>Maya</strong>Share the launch readiness check on September 11.</p></li><li class="target"><span class="date">Sep 18</span><p class="eyebrow">Target · at risk</p><p><strong>Launch</strong>Date unchanged; QA and consent approval remain dependencies.</p></li></ol><p class="fine source-limit">Sequence shown, not a time-scale chart. These are decisions, expectations and targets—not a new launch commitment. The launch is at risk, not delayed yet.</p></section>
<aside class="caveat"><h3>What we cannot say yet</h3><p>No customer outcome measurements, budget figures, or revised launch commitments are available. More tasks completed is progress—not proof of launch readiness.</p></aside>
<footer><p>Source: the fictional project notes accompanying this example. All dates are in 2026.</p><p>Fictional worked example by share/artifacts. Names, dates, and figures are invented for demonstration. Static snapshot; no live data or automatic updates.</p></footer>
</main></body></html>

Make the next one about your work.

Take the task to your agent. We provide a request with the goal, example, and checks. Copy it into the conversation where your context lives.
Supply only what is missing. Use material your agent is authorized to access. Don’t substitute the example’s invented facts for your own.
Review a draft before sharing. Check facts, readability, and sensitive information. Publishing and choosing who can open it are separate, explicit decisions.

Make this with my agent

No publishing connection is needed for an initial local draft. Your agent needs to be able to create an HTML file; preview and connection support vary by client.