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
Harbor support-guide pilot — scope and next actions
Update for the sponsor and delivery team, September 7, 2026:
Four guides are planned, and three have passed editorial review. Account recovery, the fourth guide, is blocked on a Support policy answer. Maya owns that answer, due September 9. Luis will update the guide after the answer arrives; his completion date is not confirmed.
The sponsor needs to choose by September 10 whether to run a three-guide pilot or wait for all four. The four-guide pilot target is September 14, not an approved launch date. There are no impact or adoption results yet, and these facts do not establish which option is better.
For the sponsor, the next question is pilot scope. For the delivery team, it is how to unblock the guide. Both groups need the same facts and qualifications.
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>Harbor pilot · Same facts, two readers</title><style>
*{box-sizing:border-box}body{margin:0;background:#f8f6ef;color:#172520;font:17px/1.65 system-ui,sans-serif}main{max-width:1000px;margin:auto;padding:clamp(20px,5vw,56px)}h1,h2,h3,p{margin:0 0 18px}h1{font:500 clamp(32px,5vw,54px)/1.14 Georgia,serif;overflow-wrap:anywhere}h2{font:500 clamp(27px,4vw,36px)/1.2 Georgia,serif}h3{font-size:20px;line-height:1.4}.label{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.note{font-size:15px;color:#40584d}.version{margin:38px 0;border:1px solid #8e9f93;background:#fff;padding:clamp(20px,4vw,36px)}.lead{background:#153e32;color:#fff;margin:24px 0;padding:24px}.lead p:last-child{margin-bottom:0}.facts{margin:26px 0}.caveat{border-left:4px solid #153e32;padding-left:18px}footer{border-top:1px solid #8e9f93;margin-top:36px;padding-top:22px}a{color:#153e32;text-underline-offset:4px}a:focus-visible{outline:3px solid #153e32;outline-offset:4px}@media print{.version{break-before:page}.lead{break-inside:avoid}}
</style></head><body><main><header><p class="label">Fictional worked example · September 7, 2026</p><h1>Same facts. A different first question.</h1><p>Harbor support-guide pilot: two complete briefings from one source bundle. The palette and type stay the same; the reader’s job changes what leads.</p><p><a href="#sponsor">Read the sponsor version</a> · <a href="#delivery">Read the delivery-team version</a></p></header>
<article class="version" id="sponsor"><header><p class="label">Version A · Sponsor · Snapshot September 7, 2026</p><h2>Choose the pilot scope by September 10.</h2></header><aside class="lead"><p class="label">Decision needed</p><p>The sponsor must choose by September 10, 2026: run a three-guide pilot or wait for all four.</p><p>Neither option is approved by this briefing.</p></aside><section class="facts"><h3>Evidence for the choice</h3><p>Four guides are planned. Three have passed editorial review.</p><p><strong>Blocked:</strong> the fourth guide, account recovery, is waiting for a policy answer from Support. Maya owns that answer, due September 9, 2026.</p><p>Luis will update the account-recovery guide after Maya’s answer arrives. His completion date is not yet confirmed.</p></section><section class="caveat"><h3>Target, not approval</h3><p>The four-guide pilot is targeted for September 14, 2026. It is not approved for launch.</p><p>No impact or adoption results are available yet.</p></section><p class="note">Why this leads: the sponsor needs a scope choice. The blocked guide, owner, and unconfirmed completion remain visible below the decision.</p></article>
<article class="version" id="delivery"><header><p class="label">Version B · Delivery team · Snapshot September 7, 2026</p><h2>Unblock the account-recovery guide.</h2></header><aside class="lead"><p class="label">Next action · Maya</p><p>Provide the Support policy answer by September 9, 2026.</p></aside><section class="facts"><h3>Work and dependency</h3><p>Four guides are planned. Three have passed editorial review.</p><p><strong>Blocked:</strong> the fourth guide, account recovery, is waiting for a policy answer from Support. Maya owns that answer, due September 9, 2026.</p><p>Luis will update the account-recovery guide after Maya’s answer arrives. His completion date is not yet confirmed.</p></section><section class="facts"><h3>The scope decision still matters</h3><p>The sponsor must choose by September 10, 2026: run a three-guide pilot or wait for all four.</p></section><section class="caveat"><h3>Target, not approval</h3><p>The four-guide pilot is targeted for September 14, 2026. It is not approved for launch.</p><p>No impact or adoption results are available yet.</p></section><p class="note">Why this leads: the delivery team needs the next action and dependency. The sponsor’s choice and the launch caveat remain visible, not omitted.</p></article>
<footer><p><strong>What changed:</strong> the first heading and accent panel answer a different reader’s question. Every source fact appears in both versions. Color reinforces written labels; it does not establish status.</p><p class="note">Fictional worked example by share/artifacts. Names, dates, and facts are invented for demonstration. Static snapshot; no live tracking, automatic updates, or approval mechanism.</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 agentNo 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.