Architecture diagram template
A system diagram as a drawing sheet in one HTML file – title block, inline SVG diagram with numbered callouts, latency budget, failure modes, and a change log. Duplicate it, or hand the prompt to your agent.
Template
A consulting proposal in one HTML page – situation, recommendation, three priced options with one recommended, scope, timeline, team, terms, and an approval block. Duplicate it, or hand the prompt to your agent.
Publishing this from your own stack? See Display for sharing a private page with a client.
Preview
client-proposal.html<!doctype html>
<!-- Template: Client proposal. Replace the sample content and keep the structure. Sections: Opening (title, prepared for/by, date, validity), Your situation, What we recommend, Three options (cards + scope table), Timeline (SVG bar figure), Team, Assumptions and what we need from you, Terms (payment schedule), Approval (signature lines). -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light">
<meta name="description" content="Proposal from Harrowgate Partners to Northwind Freight: a ten-week audit and pilot of self-planning replenishment across a fourteen-site warehouse network, with two further options.">
<title>Proposal – A warehouse network that plans itself – Harrowgate Partners</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Source+Sans+3:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
<style>
:root {
--bg: oklch(0.975 0.010 110);
--bg-2: oklch(0.945 0.016 120);
--white: oklch(0.995 0.003 110);
--ink: oklch(0.24 0.020 150);
--ink-2: oklch(0.40 0.020 150);
--muted: oklch(0.47 0.020 145);
--green: oklch(0.35 0.070 155);
--green-2: oklch(0.45 0.080 155);
--green-soft: oklch(0.905 0.040 150);
--green-tint: oklch(0.935 0.028 150);
--rule: oklch(0.80 0.020 130);
--rule-2: oklch(0.88 0.015 120);
--hatch: oklch(0.70 0.010 120);
--serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
--sans: "Source Sans 3", "Segoe UI", Cantarell, "Noto Sans", sans-serif;
--measure: 40rem;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
font-size: 1.0625rem;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.page {
max-width: 64rem;
margin: 0 auto;
padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 3rem) 3rem;
}
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; }
li { margin: 0 0 .4rem; }
li::marker { color: var(--green-2); }
em { font-style: italic; }
strong { font-weight: 600; }
/* ---------- Labels ---------- */
.label {
font-size: .75rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--muted);
margin: 0;
}
/* ---------- Opening ---------- */
.opening {
padding: 0 0 2.25rem;
border-bottom: 1px solid var(--green);
}
.opening .label { color: var(--green); }
h1 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(2.5rem, 6vw, 4rem);
line-height: 1.02;
letter-spacing: -0.01em;
margin: .6rem 0 1.1rem;
max-width: 16ch;
}
h1 em { color: var(--green); }
.lede {
font-size: 1.25rem;
line-height: 1.42;
color: var(--ink-2);
max-width: 34rem;
margin: 0;
}
.meta {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.25rem 2rem;
margin: 2.25rem 0 0;
}
.meta div { margin: 0; }
.meta dt {
font-size: .75rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--muted);
}
.meta dd { margin: .2rem 0 0; line-height: 1.4; }
/* ---------- Sections ---------- */
.section {
display: grid;
grid-template-columns: 13rem minmax(0, 1fr);
gap: 1rem 3rem;
padding: 2.25rem 0;
border-top: 1px solid var(--rule);
}
.section:first-of-type { border-top: 0; }
.section > h2 {
grid-column: 1;
font-family: var(--serif);
font-weight: 400;
font-size: 1.75rem;
line-height: 1.15;
letter-spacing: -0.005em;
margin: -.2rem 0 0;
}
.section > .body { grid-column: 2; }
.section > .wide { grid-column: 1 / -1; }
.body > p, .body li { max-width: var(--measure); }
.body p:last-child { margin-bottom: 0; }
h3 {
font-family: var(--serif);
font-weight: 400;
font-size: 1.35rem;
line-height: 1.2;
margin: 1.75rem 0 .5rem;
}
.body > h3:first-child { margin-top: 0; }
.num { font-family: var(--serif); font-size: 1.15em; line-height: 1; color: var(--green); }
/* ---------- Options ---------- */
.options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin: .5rem 0 2rem;
list-style: none;
padding: 0;
}
.option {
margin: 0;
padding: 1.25rem 1.25rem 1.4rem;
border: 1px solid var(--rule);
display: flex;
flex-direction: column;
}
.option.is-recommended {
background: var(--white);
border-color: var(--green);
}
.option .label { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 1.5rem; }
.flag {
display: inline-block;
background: var(--green);
color: var(--white);
padding: .15rem .45rem .2rem;
border-radius: 2px;
letter-spacing: .04em;
}
.option h3 { margin: .4rem 0 .9rem; font-size: 1.6rem; }
.price {
font-family: var(--serif);
font-size: 2.6rem;
line-height: 1;
margin: 0 0 .15rem;
font-variant-numeric: lining-nums;
}
.is-recommended .price { color: var(--green); }
.duration { color: var(--ink-2); margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule-2); }
.is-recommended .duration { border-color: var(--green-soft); }
.option p.desc { font-size: .95rem; line-height: 1.5; margin: 0 0 1.25rem; }
.option .ends { margin-top: auto; font-size: .9rem; line-height: 1.4; }
.option .ends span { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 .5rem; }
table {
border-collapse: collapse;
width: 100%;
font-size: .9375rem;
line-height: 1.4;
font-variant-numeric: tabular-nums;
}
.table-note {
font-size: .875rem;
color: var(--muted);
margin: 0 0 .7rem;
max-width: 48rem;
}
th, td {
text-align: left;
vertical-align: top;
padding: .55rem .8rem;
border-top: 1px solid var(--rule-2);
}
th:first-child, td:first-child { padding-left: 0; }
thead th {
font-size: .72rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--muted);
border-top: 0;
border-bottom: 1px solid var(--rule);
padding-top: 0;
}
thead th small { display: block; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: .8rem; color: var(--green); }
tbody th { font-weight: 600; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
tr.total th, tr.total td { font-weight: 600; }
td.dash { color: var(--muted); }
col.rec { background: var(--green-tint); }
table.scope { min-width: 44rem; }
table.scope td, table.scope th { width: 22%; }
table.scope td:first-child, table.scope th:first-child { width: 34%; }
table.pay { min-width: 34rem; }
.pay-note { font-size: .875rem; color: var(--muted); margin-top: .6rem; }
/* ---------- Timeline figure ---------- */
figure { margin: .5rem 0 0; }
.figure-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.timeline { display: block; width: 100%; min-width: 860px; height: auto; }
.timeline text { font-family: var(--sans); }
.tl-quarter { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; fill: var(--ink-2); }
.tl-month { font-size: 12px; fill: var(--muted); }
.tl-axis { stroke: var(--rule); stroke-width: 1; }
.tl-tick { stroke: var(--rule); stroke-width: 1; }
.tl-qline { stroke: var(--rule-2); stroke-width: 1; }
.tl-rowlabel { font-size: 14px; font-weight: 600; fill: var(--ink); }
.tl-rowlabel.rec { fill: var(--green); }
.tl-rowsub { font-size: 12px; fill: var(--muted); }
.tl-shared { fill: var(--green-soft); }
.tl-rec { fill: var(--green); }
.tl-only { fill: var(--white); stroke: var(--green); stroke-width: 1; }
.tl-freeze { fill: url(#hatch); stroke: var(--rule); stroke-width: 1; }
.hatch-line { stroke: var(--hatch); stroke-width: 1; }
.tl-divider { stroke: var(--bg); stroke-width: 1.5; }
.tl-seg { font-size: 12.5px; fill: var(--ink); }
.tl-seg.light { fill: var(--white); }
.tl-seg.green { fill: var(--green); }
.tl-end { font-size: 12px; fill: var(--muted); }
.tl-gate { stroke: var(--green-2); stroke-width: 1; stroke-dasharray: 2 3; }
.tl-diamond { fill: var(--bg); stroke: var(--green); stroke-width: 1.5; }
.tl-note { font-size: 12px; fill: var(--ink-2); }
.tl-legend { font-size: 12px; fill: var(--ink-2); }
figcaption {
font-size: .875rem;
color: var(--muted);
line-height: 1.45;
margin-top: .75rem;
max-width: 48rem;
}
figcaption b { font-weight: 600; color: var(--ink-2); }
/* ---------- Team ---------- */
.team {
list-style: none;
padding: 0;
margin: .25rem 0 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem 2rem;
}
.team li { margin: 0; padding-top: .75rem; border-top: 1px solid var(--green); }
.team h3 { margin: 0 0 .1rem; }
.team .role { font-weight: 600; margin: 0 0 .4rem; }
.team p { font-size: .95rem; margin: 0 0 .4rem; }
.team .time { color: var(--muted); font-size: .875rem; margin: 0; }
/* ---------- Assumptions ---------- */
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.5rem; }
.two-col h3 { margin-top: 0; }
.two-col ul { margin-bottom: 0; }
/* ---------- Approval ---------- */
.choice { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.choice li { margin: 0; }
.tick {
display: inline-block;
width: .9em; height: .9em;
border: 1px solid var(--ink);
vertical-align: -.08em;
margin-right: .5em;
}
.sig-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; margin-top: .5rem; }
.sig h3 { margin: 0 0 1.25rem; padding-bottom: .4rem; border-bottom: 1px solid var(--green); }
.sig dl { margin: 0; }
.sig .line { display: flex; flex-direction: column-reverse; margin: 0 0 1rem; }
.sig dd { margin: 0; min-height: 2rem; padding: 0 0 .15rem; border-bottom: 1px solid var(--ink); line-height: 1.3; }
.sig dt { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; }
/* ---------- Footer ---------- */
.colophon {
margin-top: 1rem;
padding-top: 1.25rem;
border-top: 1px solid var(--green);
font-size: .8125rem;
color: var(--muted);
display: flex;
flex-wrap: wrap;
gap: .25rem 1.5rem;
justify-content: space-between;
}
.colophon p { margin: 0; }
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.section { grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem 2rem; }
.options { gap: .75rem; }
.option { padding: 1rem 1rem 1.2rem; }
.price { font-size: 2.2rem; }
}
@media (max-width: 760px) {
body { font-size: 1rem; }
.section { grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: 1.85rem 0; }
.section > h2, .section > .body, .section > .wide { grid-column: 1; }
.section > h2 { margin: 0 0 .25rem; }
.meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.5rem; margin-top: 1.75rem; }
.lede { font-size: 1.125rem; }
.options { grid-template-columns: minmax(0, 1fr); margin-bottom: 2rem; }
.option { padding: 1.1rem 1.1rem 1.3rem; }
.price { font-size: 2.4rem; }
.team { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.two-col { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.sig-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.colophon { flex-direction: column; }
table.scope { min-width: 40rem; }
table.scope td, table.scope th { width: 9.8rem; min-width: 9.8rem; }
table.scope th:first-child, table.scope td:first-child { width: 10.5rem; min-width: 10.5rem; }
table.scope th:first-child { position: sticky; left: 0; background: var(--bg); border-right: 1px solid var(--rule-2); padding-right: .6rem; }
}
@media print {
.page { max-width: none; padding: 0; }
.option, table, figure, .sig, .team li { break-inside: avoid; }
.section { padding: 1.5rem 0; }
}
</style>
</head>
<body>
<main class="page">
<header class="opening">
<p class="label">Proposal · HP-26-041</p>
<h1>A warehouse network that <em>plans itself</em></h1>
<p class="lede">Ten weeks to audit Northwind Freight's fourteen-site network and prove self-planning replenishment between three of the sites, before any decision on a full rollout.</p>
<dl class="meta">
<div><dt>Prepared for</dt><dd>Northwind Freight<br>Operations leadership, Rotterdam</dd></div>
<div><dt>Prepared by</dt><dd>Harrowgate Partners<br>Marit Solberg, Partner</dd></div>
<div><dt>Date</dt><dd><time datetime="2026-09-25">25 September 2026</time></dd></div>
<div><dt>Valid until</dt><dd><time datetime="2026-10-25">25 October 2026</time><br>30 days from issue</dd></div>
</dl>
</header>
<section class="section" id="situation">
<h2>Your situation</h2>
<div class="body">
<p>Northwind Freight runs fourteen warehouses across the Netherlands, Belgium and North Rhine-Westphalia, four of them added with the Rotterdam acquisition in 2025. Each site still plans its own stock. Four regional planners set replenishment quantities from weekly spreadsheet exports, and when a site runs short, a neighbouring site covers it with a transfer.</p>
<p>The movement data you shared in August shows what that costs. In the first half of 2026, <span class="num">23%</span> of all pallet movements were transfers between Northwind's own sites, up from 15% two years earlier, at an annualised cost of about <span class="num">€1.9 million</span> in handling and haulage. For the same product families, stock cover ranges from nine days in Antwerp to 41 days in Dortmund: the network is short and over-stocked at the same time.</p>
<p>Your team has already evaluated planning software and concluded, in our view correctly, that the tools are not the constraint. The constraint is that no one owns the network as a whole. There is no shared demand signal, no agreed service level per site, and no rule for when a transfer is cheaper than a stock-out. Software automates whatever rules it is given, so the rules have to come first.</p>
</div>
</section>
<section class="section" id="recommendation">
<h2>What we recommend</h2>
<div class="body">
<p>Take Option B. A four-week audit of the whole network sets the rules and the business case; a six-week pilot then runs replenishment for Antwerp, Venlo and Dortmund from a single network model, on live orders. You decide on a rollout at the end of week 10 with measured results rather than a forecast.</p>
<p>We do not recommend committing to the full rollout (Option C) now. Data quality at the four acquired sites is untested, and the pilot will change how a rollout should be sequenced. The audit alone (Option A) tells you what is wrong but leaves your team to prove the fix.</p>
<h3>What <em>plans itself</em> means in practice</h3>
<p>Every night a shared network model proposes each site's replenishment quantities and inter-site transfers from actual demand, stock on hand, lead times and transfer cost. Your planners review exceptions and approve the plan instead of building it. In the pilot, nothing ships without a planner's approval.</p>
<h3>What you have on 11 December</h3>
<ul>
<li>A network model of all fourteen sites, built on your data and yours to keep.</li>
<li>Agreed service levels per site and a written transfer rule.</li>
<li>Six weeks of measured pilot results for three sites: transfers, stock cover and service level against the same weeks last year.</li>
<li>A rollout plan, sequence and fixed price for the remaining eleven sites.</li>
</ul>
</div>
</section>
<section class="section" id="options">
<h2>Three options</h2>
<div class="body">
<p>All three start on Monday 5 October and share the same four-week audit. They differ in how far you commit before seeing results.</p>
</div>
<ul class="options wide">
<li class="option">
<p class="label">Option A</p>
<h3>Audit only</h3>
<p class="price">€48k</p>
<p class="duration">4 weeks · excl. VAT</p>
<p class="desc">The network audit and readout: where stock and transfers go today, what they cost, and the rules and business case for changing it.</p>
<p class="ends"><span>Ends with</span>Findings readout and business case, 30 October</p>
</li>
<li class="option is-recommended">
<p class="label">Option B <span class="flag">Recommended</span></p>
<h3>Audit and pilot</h3>
<p class="price">€96k</p>
<p class="duration">10 weeks · excl. VAT</p>
<p class="desc">The audit, then six weeks of self-planning replenishment across Antwerp, Venlo and Dortmund on live orders, with your planners approving every plan.</p>
<p class="ends"><span>Ends with</span>Pilot readout and go/no-go on rollout, 11 December</p>
</li>
<li class="option">
<p class="label">Option C</p>
<h3>Full rollout</h3>
<p class="price">€180k</p>
<p class="duration">6 months · excl. VAT</p>
<p class="desc">The audit and pilot, then rollout to all fourteen sites in three waves, live integration with your WMS and forecast, and a stabilisation period with a 60-day review.</p>
<p class="ends"><span>Ends with</span>Handover 2 April 2027, review in June</p>
</li>
</ul>
<p class="table-note wide" id="scope-note">Scope by option. Fees are fixed and exclude VAT. The recommended option is shaded.</p>
<div class="table-scroll wide">
<table class="scope" aria-describedby="scope-note">
<colgroup><col><col><col class="rec"><col></colgroup>
<thead>
<tr>
<th scope="col">Scope</th>
<th scope="col">A · Audit only</th>
<th scope="col">B · Audit and pilot <small>Recommended</small></th>
<th scope="col">C · Full rollout</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">Network data audit: 24 months of movements, stock and orders, all 14 sites</th><td>Included</td><td>Included</td><td>Included</td></tr>
<tr><th scope="row">Interviews and process mapping with 4 regional planners and 14 site leads</th><td>Included</td><td>Included</td><td>Included</td></tr>
<tr><th scope="row">Findings readout and business case (Gate 1)</th><td>Included</td><td>Included</td><td>Included</td></tr>
<tr><th scope="row">Replenishment pilot on live orders: Antwerp, Venlo, Dortmund</th><td class="dash">–</td><td>6 weeks</td><td>6 weeks</td></tr>
<tr><th scope="row">Network planning model built on Northwind data</th><td class="dash">–</td><td>Pilot sites</td><td>All 14 sites</td></tr>
<tr><th scope="row">WMS and forecast integration</th><td class="dash">–</td><td>File exchange, weekly</td><td>Live, nightly</td></tr>
<tr><th scope="row">Planner training</th><td class="dash">–</td><td>4 regional planners</td><td>4 planners and 14 site leads</td></tr>
<tr><th scope="row">Rollout to the remaining 11 sites</th><td class="dash">–</td><td class="dash">–</td><td>3 waves, weeks 14 to 23</td></tr>
<tr><th scope="row">Stabilisation and handover</th><td class="dash">–</td><td>Pilot handover, week 10</td><td>3 weeks, plus 60-day review</td></tr>
<tr><th scope="row">Harrowgate on site</th><td>2 days a week</td><td>3 days a week</td><td>3 days a week</td></tr>
<tr><th scope="row">Duration</th><td>4 weeks</td><td>10 weeks</td><td>26 weeks</td></tr>
<tr class="total"><th scope="row">Fee, excl. VAT</th><td>€48,000</td><td>€96,000</td><td>€180,000</td></tr>
</tbody>
</table>
</div>
</section>
<section class="section" id="timeline">
<h2>Timeline</h2>
<div class="body">
<p>The gates are the point of the plan. Each option ends at a gate where you have new evidence and can stop, continue or change scope without paying for work not yet done.</p>
</div>
<figure class="wide">
<div class="figure-scroll">
<svg class="timeline" viewBox="0 0 1000 320" role="img" aria-label="Timeline from October 2026 to June 2027. All three options start on 5 October and share a four-week audit. Option A ends at Gate 1 on 30 October. Option B, the recommended option, adds a six-week pilot and ends at Gate 2 on 11 December with pilot results. Option C continues after a peak-season freeze with three rollout waves in January to March, hands over on 2 April 2027 and has a 60-day review in June.">
<defs>
<pattern id="hatch" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
<line class="hatch-line" x1="0" y1="0" x2="0" y2="6"/>
</pattern>
</defs>
<!-- quarter and month axis -->
<text class="tl-quarter" x="272.9" y="20" text-anchor="middle">Q4 2026</text>
<text class="tl-quarter" x="559.6" y="20" text-anchor="middle">Q1 2027</text>
<text class="tl-quarter" x="844.7" y="20" text-anchor="middle">Q2 2027</text>
<text class="tl-month" x="176.8" y="42" text-anchor="middle">Oct</text>
<text class="tl-month" x="272.9" y="42" text-anchor="middle">Nov</text>
<text class="tl-month" x="369.0" y="42" text-anchor="middle">Dec</text>
<text class="tl-month" x="466.6" y="42" text-anchor="middle">Jan</text>
<text class="tl-month" x="559.6" y="42" text-anchor="middle">Feb</text>
<text class="tl-month" x="652.5" y="42" text-anchor="middle">Mar</text>
<text class="tl-month" x="748.5" y="42" text-anchor="middle">Apr</text>
<text class="tl-month" x="844.6" y="42" text-anchor="middle">May</text>
<text class="tl-month" x="940.7" y="42" text-anchor="middle">Jun</text>
<line class="tl-axis" x1="128" y1="50.5" x2="988" y2="50.5"/>
<line class="tl-tick" x1="225.7" y1="46" x2="225.7" y2="50.5"/>
<line class="tl-tick" x1="320.2" y1="46" x2="320.2" y2="50.5"/>
<line class="tl-tick" x1="515.5" y1="46" x2="515.5" y2="50.5"/>
<line class="tl-tick" x1="603.7" y1="46" x2="603.7" y2="50.5"/>
<line class="tl-tick" x1="795.8" y1="46" x2="795.8" y2="50.5"/>
<line class="tl-tick" x1="893.5" y1="46" x2="893.5" y2="50.5"/>
<line class="tl-qline" x1="128.5" y1="6" x2="128.5" y2="246"/>
<line class="tl-qline" x1="417.8" y1="6" x2="417.8" y2="246"/>
<line class="tl-qline" x1="701.3" y1="6" x2="701.3" y2="246"/>
<line class="tl-qline" x1="987.5" y1="6" x2="987.5" y2="246"/>
<!-- gate lines -->
<line class="tl-gate" x1="222.5" y1="62" x2="222.5" y2="244"/>
<line class="tl-gate" x1="354.8" y1="62" x2="354.8" y2="244"/>
<!-- Option A -->
<text class="tl-rowlabel" x="0" y="91">Option A</text>
<text class="tl-rowsub" x="0" y="105">Audit only · 4 wks</text>
<rect class="tl-shared" x="140.6" y="78" width="81.9" height="28"/>
<text class="tl-seg" x="148" y="96">Audit</text>
<text class="tl-end" x="235" y="96">30 Oct</text>
<!-- Option B (recommended) -->
<text class="tl-rowlabel rec" x="0" y="151">Option B</text>
<text class="tl-rowsub" x="0" y="165">Audit + pilot · 10 wks</text>
<rect class="tl-rec" x="140.6" y="138" width="81.9" height="28"/>
<rect class="tl-rec" x="222.5" y="138" width="132.3" height="28"/>
<line class="tl-divider" x1="222.5" y1="138" x2="222.5" y2="166"/>
<text class="tl-seg light" x="148" y="156">Audit</text>
<text class="tl-seg light" x="236" y="156">Pilot · 3 sites</text>
<text class="tl-end" x="367" y="156">11 Dec</text>
<!-- Option C -->
<text class="tl-rowlabel" x="0" y="211">Option C</text>
<text class="tl-rowsub" x="0" y="225">Full rollout · 26 wks</text>
<rect class="tl-shared" x="140.6" y="198" width="81.9" height="28"/>
<rect class="tl-shared" x="222.5" y="198" width="132.3" height="28"/>
<line class="tl-divider" x1="222.5" y1="198" x2="222.5" y2="226"/>
<text class="tl-seg" x="148" y="216">Audit</text>
<text class="tl-seg" x="236" y="216">Pilot · 3 sites</text>
<rect class="tl-freeze" x="354.8" y="198.5" width="66.2" height="27"/>
<rect class="tl-only" x="421" y="198.5" width="66.1" height="27"/>
<text class="tl-seg green" x="428" y="216">Wave 1</text>
<rect class="tl-only" x="487.1" y="198.5" width="66.2" height="27"/>
<text class="tl-seg green" x="494" y="216">Wave 2</text>
<rect class="tl-only" x="553.3" y="198.5" width="88.2" height="27"/>
<text class="tl-seg green" x="560" y="216">Wave 3</text>
<rect class="tl-only" x="641.5" y="198.5" width="66.1" height="27"/>
<text class="tl-seg green" x="648" y="216">Handover</text>
<text class="tl-end" x="714" y="216">2 Apr</text>
<rect class="tl-only" x="912.4" y="198.5" width="15.7" height="27"/>
<text class="tl-end" x="906" y="216" text-anchor="end">60-day review</text>
<!-- gate markers -->
<polygon class="tl-diamond" points="222.5,86 228.5,92 222.5,98 216.5,92"/>
<polygon class="tl-diamond" points="222.5,146 228.5,152 222.5,158 216.5,152"/>
<polygon class="tl-diamond" points="354.8,146 360.8,152 354.8,158 348.8,152"/>
<polygon class="tl-diamond" points="222.5,206 228.5,212 222.5,218 216.5,212"/>
<polygon class="tl-diamond" points="354.8,206 360.8,212 354.8,218 348.8,212"/>
<!-- gate and freeze labels -->
<text class="tl-note" x="218" y="264" text-anchor="end">Gate 1 · 30 Oct</text>
<text class="tl-note" x="350" y="264" text-anchor="end">Gate 2 · 11 Dec</text>
<!-- legend -->
<polygon class="tl-diamond" points="146,292 152,298 146,304 140,298"/>
<text class="tl-legend" x="160" y="302">Decision gate: continue, stop or change scope</text>
<rect class="tl-freeze" x="440" y="291" width="20" height="13"/>
<text class="tl-legend" x="468" y="302">Peak-season change freeze, 14 Dec to 1 Jan: no go-lives</text>
<rect class="tl-rec" x="812" y="291" width="20" height="13"/>
<text class="tl-legend" x="840" y="302">Recommended option</text>
</svg>
</div>
<figcaption><b>Figure 1.</b> All options start on Monday 5 October 2026 and pass the same gates. Option A ends at Gate 1 with the findings; Option B ends at Gate 2 with pilot results; Option C waits out Northwind's peak-season freeze, then rolls out to the remaining eleven sites in waves of four, four and three, hands over on 2 April 2027 and returns for a 60-day review in June.</figcaption>
</figure>
</section>
<section class="section" id="team">
<h2>Team</h2>
<div class="body">
<p>Three people, the same throughout. There is no hand-off to a delivery team after signature.</p>
</div>
<ul class="team wide">
<li>
<h3>Marit Solberg</h3>
<p class="role">Engagement partner</p>
<p>Accountable for the recommendation. Leads both readouts and is your escalation point.</p>
<p class="time">One day a week</p>
</li>
<li>
<h3>Tomas Ekwueme</h3>
<p class="role">Planning lead</p>
<p>Runs the interviews, designs the transfer rule and service levels with your planners, and leads the pilot.</p>
<p class="time">Three days a week, on site</p>
</li>
<li>
<h3>Priya Venkataraman</h3>
<p class="role">Network analyst</p>
<p>Builds the network model from your data, keeps it running through the pilot and hands it over.</p>
<p class="time">Full time, mostly remote</p>
</li>
</ul>
</section>
<section class="section" id="assumptions">
<h2>Assumptions and what we need from you</h2>
<div class="body two-col">
<div>
<h3>We assume</h3>
<ul>
<li>Work starts Monday 5 October, which requires signature by Friday 2 October. A later signature moves every date week for week.</li>
<li>The pilot sites are Antwerp, Venlo and Dortmund. A different set is possible if agreed by the end of week 3.</li>
<li>Pilot orders are proposed by the model and approved by your planners. Nothing ships without approval.</li>
<li>No new software licences are needed for the audit or the pilot; both run on our planning model. Licences for a rollout are quoted at Gate 2.</li>
</ul>
</div>
<div>
<h3>We need from you</h3>
<ul>
<li>One counterpart with authority to decide at each gate. We suggest the Chief Operating Officer.</li>
<li>WMS, order and forecast exports for the 24 months to August 2026, for all fourteen sites, in week 1, as files or read access.</li>
<li>Two hours a week from each regional planner during the audit and four hours a week during the pilot.</li>
<li>Thirty minutes with each site lead in weeks 2 and 3.</li>
<li>A working space at your Rotterdam office two days a week.</li>
</ul>
</div>
</div>
</section>
<section class="section" id="terms">
<h2>Terms</h2>
<div class="body">
<p>Fees are fixed per option and exclude VAT. Travel and accommodation are billed at cost and capped at 8% of fees. Invoices are payable within 14 days.</p>
<p class="table-note" id="pay-note">Payment schedule as a share of the fee for each option.</p>
<div class="table-scroll">
<table class="pay" aria-describedby="pay-note">
<thead>
<tr>
<th scope="col">Option</th>
<th scope="col">On signature</th>
<th scope="col">Gate 1 · 30 Oct</th>
<th scope="col">Gate 2 · 11 Dec</th>
<th scope="col">Handover · 2 Apr</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">A · €48,000</th><td>50%</td><td>50%</td><td class="dash">–</td><td class="dash">–</td></tr>
<tr><th scope="row">B · €96,000</th><td>30%</td><td>40%</td><td>30%</td><td class="dash">–</td></tr>
<tr><th scope="row">C · €180,000</th><td>25%</td><td>25%</td><td>25%</td><td>25%</td></tr>
</tbody>
</table>
</div>
<p class="pay-note">Either party may stop at Gate 1 or Gate 2 by written notice. Fees are then due for completed phases only, and everything produced to that point is delivered.</p>
<p>Findings, the network model configured on your data and all training material belong to Northwind Freight. Harrowgate retains its methods and tooling. The mutual confidentiality agreement of 3 August 2026 covers this proposal and the work.</p>
<p>This proposal is valid for 30 days, until 25 October 2026.</p>
</div>
</section>
<section class="section" id="approval">
<h2>Approval</h2>
<div class="body">
<p>Signing below accepts this proposal for the option marked. If no option is marked, Option B applies.</p>
<ul class="choice">
<li><span class="tick" aria-hidden="true"></span>Option A · €48,000</li>
<li><span class="tick" aria-hidden="true"></span>Option B · €96,000 (recommended)</li>
<li><span class="tick" aria-hidden="true"></span>Option C · €180,000</li>
</ul>
<div class="sig-grid">
<div class="sig">
<h3>For Northwind Freight</h3>
<dl>
<div class="line"><dt>Name</dt><dd></dd></div>
<div class="line"><dt>Title</dt><dd></dd></div>
<div class="line"><dt>Signature</dt><dd></dd></div>
<div class="line"><dt>Date</dt><dd></dd></div>
</dl>
</div>
<div class="sig">
<h3>For Harrowgate Partners</h3>
<dl>
<div class="line"><dt>Name</dt><dd>Marit Solberg</dd></div>
<div class="line"><dt>Title</dt><dd>Partner</dd></div>
<div class="line"><dt>Signature</dt><dd></dd></div>
<div class="line"><dt>Date</dt><dd></dd></div>
</dl>
</div>
</div>
</div>
</section>
<footer class="colophon">
<p>Harrowgate Partners · Operations consultancy · Proposal HP-26-041</p>
<p>Confidential. Prepared for Northwind Freight and not for onward distribution.</p>
</footer>
</main>
</body>
</html>
A proposal the client can forward. Three options side by side with one recommended, the scope per option in a table, and an approval block at the end, so the decision is visible on one page instead of buried in a PDF.
The sample is Harrowgate Partners, a fictional operations consultancy, proposing warehouse-network planning to a fictional freight company. The structure fits agency and consulting proposals of most sizes.
Cover block, situation, recommendation, three option cards, scope table, timeline figure, team, assumptions, terms, and approval block. Inline CSS and SVG, no scripts.
More templates
A system diagram as a drawing sheet in one HTML file – title block, inline SVG diagram with numbered callouts, latency budget, failure modes, and a change log. Duplicate it, or hand the prompt to your agent.
A one-page PRD in HTML – problem, goals, non-goals, a requirements table with IDs and status, a flow diagram, rollout plan, open questions, and a decision log. Duplicate it, or hand the prompt to your agent.
Any agent, any model. Behind your company’s sign-in, at one flat price.
Free to start · Unlimited viewers