Template

Workshop recap template

An offsite or workshop recap in one HTML page – the wall of sticky notes, decisions with owners, open questions, action items with dates, and the parking lot. Duplicate it, or hand the prompt to your agent.

  • free – no account
  • a URL in seconds
  • yours if you claim it

Publishing this from your own stack? See Display for internal docs.

Already chatting with an agent?
Or duplicate it as-is

Preview

What it looks like published

View live on Display →

Source – workshop-recap.html
Open raw file
<!doctype html>
<!-- Template: Workshop recap. Replace the sample content and keep the structure. Sections: header with session facts, summary, why we met (context, people, agenda figure), the wall (four sticky-note clusters with vote dots), decisions (owner and rationale), open questions, action items table, parking lot, next check-in, footer. -->
<html lang="en-GB">
<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="Recap of the Fernhill Q4 planning offsite on 18 September 2026: the wall, five decisions, open questions, actions and the next check-in.">
<title>Q4 planning offsite recap, 18 September 2026 – Fernhill</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=Figtree:ital,wght@0,400..700;1,400..700&family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&display=swap" rel="stylesheet">
<style>
  :root {
    --bg: oklch(0.965 0.02 145);
    --bg-deep: oklch(0.935 0.028 145);
    --white: oklch(0.995 0.003 145);
    --ink: oklch(0.26 0.035 150);
    --ink-soft: oklch(0.42 0.035 150);
    --fern: oklch(0.46 0.11 150);
    --fern-light: oklch(0.88 0.06 148);
    --line: oklch(0.86 0.03 145);
    --line-soft: oklch(0.91 0.022 145);
    --note-yellow: oklch(0.94 0.10 95);
    --note-rose: oklch(0.92 0.055 15);
    --note-sky: oklch(0.92 0.05 235);
    --note-apricot: oklch(0.92 0.075 60);
    --blocked: oklch(0.50 0.14 35);
    --shadow: oklch(0.30 0.04 150 / 0.16);
    --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --sans: "Figtree", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.55;
    font-optical-sizing: auto;
  }
  h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 500;
    line-height: 1.12;
    margin: 0;
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 40;
  }
  h1 {
    font-size: clamp(2.1rem, 1.35rem + 3.2vw, 3.4rem);
    letter-spacing: -0.015em;
    max-width: 22ch;
  }
  h1 em { font-style: italic; font-weight: 400; color: var(--fern); }
  .nb { white-space: nowrap; }
  h2 {
    font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2rem);
    letter-spacing: -0.01em;
  }
  h3 { font-size: 1.25rem; }
  p { margin: 0 0 1rem; }
  a { color: var(--fern); }

  .page {
    max-width: 66rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
  }
  .prose { max-width: 42rem; }
  .prose p:last-child { margin-bottom: 0; }
  .sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }

  /* Header */
  .doc-head { padding-top: 1.75rem; }
  .brand-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line);
  }
  .wordmark {
    font-family: var(--serif); font-weight: 600; font-size: 1.3rem;
    letter-spacing: -0.01em; color: var(--ink); text-decoration: none;
  }
  .wordmark::after {
    content: ""; display: inline-block; width: 0.42em; height: 0.42em;
    border-radius: 50%; background: var(--fern); margin-left: 0.18em; vertical-align: 0.06em;
  }
  .brand-row p { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }
  .title-block { padding: 2.75rem 0 0.5rem; }
  .title-block .lead {
    font-size: 1.2rem; line-height: 1.5; color: var(--ink-soft);
    max-width: 44rem; margin: 1.5rem 0 0;
  }
  .facts {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.25rem 1.5rem; margin: 2.25rem 0 0; padding: 1.1rem 0 1.25rem;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .facts div { min-width: 0; }
  .facts dt {
    font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 600; margin-bottom: 0.15rem;
  }
  .facts dd { margin: 0; font-size: 0.9875rem; line-height: 1.35; }

  /* Sections */
  section.page, section .page { padding-top: 3rem; padding-bottom: 0.5rem; }
  section > h2, section .page > h2 { margin-bottom: 1.1rem; }
  #summary { padding-top: 2.25rem; }
  #summary p {
    font-family: var(--serif); font-size: 1.32rem; line-height: 1.42;
    font-weight: 400; max-width: 40rem; margin: 0;
  }
  #summary strong { font-weight: 600; }

  .people {
    list-style: none; margin: 1.5rem 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem 1.5rem; max-width: 42rem; font-size: 0.9875rem;
  }
  .people li { display: flex; gap: 0.5rem; align-items: baseline; }
  .people li span { color: var(--ink-soft); font-size: 0.9rem; }
  .people li b { font-weight: 600; white-space: nowrap; }

  /* Agenda figure */
  figure { margin: 0; }
  .agenda { margin-top: 2.25rem; max-width: 52rem; }
  .agenda-scroll { overflow-x: auto; padding-bottom: 0.25rem; }
  .agenda svg { display: block; width: 100%; min-width: 40rem; height: auto; }
  .agenda text { fill: var(--ink); font-family: var(--sans); }
  .agenda .t-hour { font-weight: 700; }
  .agenda .t-min { fill: var(--ink-soft); }
  .agenda .t-in { font-weight: 600; }
  .agenda .t-above { fill: var(--ink-soft); }
  .agenda .blk-fern { fill: var(--fern-light); }
  .agenda .blk-wall { fill: var(--note-yellow); }
  .agenda .blk-white { fill: var(--white); stroke: var(--ink); stroke-width: 1; }
  .agenda .blk-break { fill: none; stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 3; }
  .agenda .rail { stroke: var(--ink); stroke-width: 1; }
  .agenda .tick { stroke: var(--ink-soft); stroke-width: 1; }
  figcaption {
    font-size: 0.875rem; color: var(--ink-soft); line-height: 1.45;
    margin-top: 0.6rem; max-width: 42rem;
  }

  /* The wall */
  .wall-band { background: var(--bg-deep); margin-top: 3rem; }
  .wall-band .page { padding-top: 2.75rem; padding-bottom: 3rem; }
  .wall-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end; }
  .wall-intro .prose p { margin-bottom: 0; }
  .wall-intro h2 { margin-bottom: 0.9rem; }
  .wall-intro .key { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.9rem; color: var(--ink-soft); justify-content: flex-end; }
  .wall-intro .key li { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
  .swatch { display: inline-block; width: 0.72em; height: 0.72em; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--shadow); vertical-align: -0.02em; flex: none; }
  .sw-pricing { background: var(--note-yellow); }
  .sw-support { background: var(--note-sky); }
  .sw-product { background: var(--note-rose); }
  .sw-gtm { background: var(--note-apricot); }

  .wall {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.75rem 3rem; margin-top: 2.25rem;
  }
  .cluster { min-width: 0; }
  .cluster-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; padding-bottom: 0.55rem; margin-bottom: 1rem;
    border-bottom: 1px dashed var(--ink-soft);
  }
  .cluster-head h3 { font-size: 1.45rem; font-style: italic; font-weight: 500; }
  .tally { margin: 0; font-size: 0.875rem; color: var(--ink-soft); white-space: nowrap; }
  .notes {
    list-style: none; margin: 0; padding: 0.35rem 0.35rem 0.6rem;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem;
  }
  .note {
    aspect-ratio: 1 / 0.94;
    padding: 0.85rem 0.9rem 0.8rem;
    font-family: var(--serif); font-size: 0.95rem; line-height: 1.28; font-weight: 500;
    font-variation-settings: "SOFT" 100;
    display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem;
    box-shadow: 0 1px 1px var(--shadow), 0 10px 14px -12px var(--shadow);
    rotate: -1.4deg;
  }
  .note:nth-child(5n+2) { rotate: 1.3deg; translate: 0 3px; }
  .note:nth-child(5n+3) { rotate: -0.5deg; translate: 0 -2px; }
  .note:nth-child(5n+4) { rotate: 2deg; translate: 0 2px; }
  .note:nth-child(5n+5) { rotate: -1.9deg; }
  .cluster:nth-child(even) .note:nth-child(5n+1) { rotate: 1.6deg; translate: 0 2px; }
  .cluster:nth-child(even) .note:nth-child(5n+4) { rotate: -1.1deg; }
  .c-pricing .note { background: var(--note-yellow); }
  .c-support .note { background: var(--note-sky); }
  .c-product .note { background: var(--note-rose); }
  .c-gtm .note { background: var(--note-apricot); }
  .note p { margin: 0; }
  .dots { display: flex; gap: 3px; align-items: center; min-height: 8px; }
  .dots b { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
  .wall-read { margin-top: 2.5rem; }

  /* Decisions */
  .decisions { list-style: none; margin: 0; padding: 0; counter-reset: dec; display: grid; gap: 1rem; }
  .decision {
    counter-increment: dec; position: relative;
    background: var(--white); border: 1px solid var(--line); border-radius: 10px;
    padding: 1.35rem 1.6rem 1.4rem 4.4rem;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 0.75rem 2.75rem;
  }
  .decision::before {
    content: counter(dec); position: absolute; left: 1.55rem; top: 1.1rem;
    font-family: var(--serif); font-style: italic; font-size: 1.7rem; line-height: 1;
    color: var(--fern); font-optical-sizing: auto;
  }
  .decision h3 { font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.005em; }
  .decision .who {
    margin: 0.7rem 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.75rem;
    font-size: 0.9rem;
  }
  .decision .who dt { color: var(--ink-soft); }
  .decision .who dd { margin: 0; display: flex; align-items: center; gap: 0.4rem; }
  .decision .why { margin: 0; font-size: 0.9875rem; line-height: 1.5; align-self: start; }

  /* Open questions */
  .questions { margin: 0; padding-left: 1.4rem; max-width: 46rem; display: grid; gap: 1.1rem; }
  .questions li::marker { font-family: var(--serif); font-style: italic; color: var(--fern); }
  .questions p { margin: 0; }
  .questions .q { font-weight: 600; }
  .questions .q-next { font-size: 0.9375rem; color: var(--ink-soft); margin-top: 0.15rem; }

  /* Action table */
  .table-scroll { overflow-x: auto; margin-top: 0.25rem; }
  table { border-collapse: collapse; width: 100%; min-width: 40rem; font-size: 0.9375rem; }
  caption { text-align: left; font-size: 0.875rem; color: var(--ink-soft); padding: 0 0 0.75rem; }
  th, td { text-align: left; vertical-align: top; padding: 0.65rem 0.75rem 0.65rem 0; border-bottom: 1px solid var(--line-soft); }
  thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); font-weight: 600; border-bottom: 1px solid var(--ink); padding-top: 0; }
  tbody th { font-weight: 500; }
  tbody th .swatch { margin-right: 0.45rem; }
  td.num, th.num { text-align: right; padding-right: 0; }
  .col-owner { width: 8rem; }
  .col-due { width: 6.5rem; white-space: nowrap; }
  .col-status { width: 10rem; }
  .status { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
  .status::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--ink-soft); flex: none; }
  .status.is-done::before { background: var(--fern); }
  .status.is-doing::before { background: var(--ink); box-shadow: inset 0 0 0 2px var(--white); border: 1px solid var(--ink); width: 0.45rem; height: 0.45rem; }
  .status.is-blocked { color: var(--blocked); }
  .status.is-blocked::before { background: var(--blocked); }
  .status.is-todo::before { background: none; border: 1px solid var(--ink-soft); width: 0.45rem; height: 0.45rem; }
  .table-note { font-size: 0.875rem; color: var(--ink-soft); margin: 0.9rem 0 0; }

  /* Parking lot */
  .parking { margin: 1.25rem 0 0; max-width: 46rem; display: grid; grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr); gap: 0.85rem 1.75rem; }
  .parking dt { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; line-height: 1.35; }
  .parking dd { margin: 0; font-size: 0.9875rem; color: var(--ink); }

  /* Next check-in */
  .next { margin-top: 3rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 1.6rem 0 1.7rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0.75rem 3rem; align-items: baseline; }
  .next h2 { font-size: 1.35rem; }
  .next .when { font-family: var(--serif); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); line-height: 1.25; margin: 0 0 0.35rem; font-weight: 500; }
  .next p { margin: 0; }
  .next .detail { color: var(--ink-soft); font-size: 0.9875rem; }

  footer .page { padding: 1.5rem 1rem 3rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; font-size: 0.85rem; color: var(--ink-soft); }
  footer .page p { margin: 0; }

  @media (max-width: 900px) {
    .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wall { grid-template-columns: 1fr; gap: 2.5rem; }
    .wall-intro { grid-template-columns: 1fr; }
    .wall-intro .key { justify-content: flex-start; }
    .decision { grid-template-columns: 1fr; gap: 0.6rem; }
    .next { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    body { font-size: 1rem; }
    .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
    .people { grid-template-columns: 1fr 1fr; }
    .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; padding-inline: 0.25rem; }
    .note { font-size: 0.9375rem; }
    .decision { padding: 1.15rem 1.15rem 1.2rem 3.2rem; }
    .decision::before { left: 1.1rem; top: 0.95rem; font-size: 1.5rem; }
    .parking { grid-template-columns: 1fr; gap: 0.25rem; }
    .parking dd { margin-bottom: 0.9rem; }
    .cluster-head { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
    .table-scroll { overflow: visible; }
    table { min-width: 0; }
    thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    tbody tr { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); gap: 0.3rem 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft); }
    tbody th, tbody td { display: block; padding: 0; border: 0; }
    tbody th { grid-column: 1 / -1; padding-bottom: 0.1rem; }
    tbody td[data-label]::before { content: attr(data-label) " "; color: var(--ink-soft); }
    .col-owner, .col-due, .col-status { width: auto; }
    .status { white-space: normal; align-items: flex-start; }
    .status::before { margin-top: 0.45em; }
    .brand-row { flex-direction: column; gap: 0.2rem; }
  }
</style>
</head>
<body>

<header class="doc-head">
  <div class="page">
    <div class="brand-row">
      <span class="wordmark">Fernhill</span>
      <p>People Ops · Internal recap · Shared with everyone who was in the room</p>
    </div>
    <div class="title-block">
      <h1>Q4 planning offsite <span class="nb">– <em>recap</em></span></h1>
      <p class="lead">What fourteen of us put on the wall on Thursday afternoon, what we decided, what we left open on purpose, and who is doing what before we meet again in October.</p>
      <dl class="facts">
        <div><dt>Date</dt><dd>Thursday 18 September 2026</dd></div>
        <div><dt>Time</dt><dd>14:00 – 17:00, three hours</dd></div>
        <div><dt>Where</dt><dd>Room Birch, second floor</dd></div>
        <div><dt>Who</dt><dd>14 people, every team</dd></div>
        <div><dt>Facilitator</dt><dd>Priya, People Ops</dd></div>
        <div><dt>Notes</dt><dd>Sam, Chief of Staff</dd></div>
      </dl>
    </div>
  </div>
</header>

<main>
  <section class="page" id="summary" aria-label="Summary">
    <p>Fourteen people, three hours, one wall. We wrote 22 notes, clustered them into four themes and spent 42 dots. We left with <strong>five decisions</strong>, five open questions and ten actions. Pricing took a third of the dots: the partner tier goes, and we test per-employee pricing in November rather than waiting for January. Next check-in is Thursday 16 October.</p>
  </section>

  <section class="page" id="context">
    <h2>Why we met</h2>
    <div class="prose">
      <p>Q4 is the last quarter before the January price change, and three teams were carrying bets that depended on each other. Pricing wanted to go from three plans to two. Support wanted headcount in place before the renewal rush, not during it. Product had four integrations in progress and none finished. Each of those had been discussed in one-to-ones for a month without moving.</p>
      <p>Jonas asked for one room and one afternoon instead of another round of one-to-ones. The rule for the session: write before you talk, vote before you argue, and every decision leaves the room with a name on it.</p>
    </div>
    <ul class="people" aria-label="Who was in the room">
      <li><b>Jonas</b><span>CEO</span></li>
      <li><b>Ana</b><span>VP Product</span></li>
      <li><b>Leo</b><span>Pricing and RevOps</span></li>
      <li><b>Mo</b><span>Head of Support</span></li>
      <li><b>Priya</b><span>People Ops, facilitator</span></li>
      <li><b>Sam</b><span>Chief of Staff, notes</span></li>
      <li><b>Wren</b><span>Design lead</span></li>
      <li><b>Tomás</b><span>Engineering lead</span></li>
      <li><b>Kai</b><span>Sales lead</span></li>
      <li><b>Ines</b><span>Marketing lead</span></li>
      <li><b>Dara</b><span>Customer Success</span></li>
      <li><b>Yuki</b><span>Finance</span></li>
      <li><b>Bea</b><span>Partnerships</span></li>
      <li><b>Oskar</b><span>Data</span></li>
    </ul>

    <figure class="agenda">
      <div class="agenda-scroll">
        <svg viewBox="0 0 720 132" role="img" aria-label="Agenda for the three-hour offsite: 20 minutes of context, then 65 minutes writing, clustering and dot voting on the wall, a 15-minute break, 55 minutes on decisions and 25 minutes on actions and the parking lot.">
          <!-- session blocks; 220 px per hour, x = 30 + minutes * 3.667 -->
          <rect class="blk-fern" x="30" y="40" width="73.3" height="42" rx="3"/>
          <rect class="blk-wall" x="105.3" y="40" width="181.4" height="42" rx="3"/>
          <rect class="blk-wall" x="288.7" y="40" width="53" height="42" rx="3"/>
          <rect class="blk-break" x="343.7" y="40.5" width="53" height="41" rx="3"/>
          <rect class="blk-white" x="398.7" y="40.5" width="198" height="41" rx="3"/>
          <rect class="blk-fern" x="598.7" y="40" width="91.3" height="42" rx="3"/>
          <!-- labels -->
          <text class="t-above" x="66" y="28" font-size="12" text-anchor="middle">Why we are here</text>
          <text class="t-in" x="196" y="65.5" font-size="12.5" text-anchor="middle">The wall: write, then cluster</text>
          <text class="t-above" x="315" y="28" font-size="12" text-anchor="middle">Dot vote</text>
          <text class="t-in" x="370" y="65.5" font-size="12" text-anchor="middle" style="font-weight:400">Break</text>
          <text class="t-in" x="497.7" y="65.5" font-size="12.5" text-anchor="middle">Decisions, one theme at a time</text>
          <text class="t-above" x="690" y="28" font-size="12" text-anchor="end">Actions, parking lot, close</text>
          <!-- time rail -->
          <line class="rail" x1="30" y1="96" x2="690" y2="96"/>
          <line class="tick" x1="30" y1="96" x2="30" y2="103"/>
          <line class="tick" x1="250" y1="96" x2="250" y2="103"/>
          <line class="tick" x1="470" y1="96" x2="470" y2="103"/>
          <line class="tick" x1="690" y1="96" x2="690" y2="103"/>
          <line class="tick" x1="105.3" y1="96" x2="105.3" y2="100"/>
          <line class="tick" x1="288.7" y1="96" x2="288.7" y2="100"/>
          <line class="tick" x1="343.7" y1="96" x2="343.7" y2="100"/>
          <line class="tick" x1="398.7" y1="96" x2="398.7" y2="100"/>
          <line class="tick" x1="598.7" y1="96" x2="598.7" y2="100"/>
          <text class="t-hour" x="30" y="121" font-size="11.5" text-anchor="middle">14:00</text>
          <text class="t-min" x="105.3" y="121" font-size="11" text-anchor="middle">14:20</text>
          <text class="t-hour" x="250" y="121" font-size="11.5" text-anchor="middle">15:00</text>
          <text class="t-min" x="288.7" y="121" font-size="11" text-anchor="middle">15:10</text>
          <text class="t-min" x="343.7" y="121" font-size="11" text-anchor="middle">15:25</text>
          <text class="t-min" x="398.7" y="121" font-size="11" text-anchor="middle">15:40</text>
          <text class="t-hour" x="470" y="121" font-size="11.5" text-anchor="middle">16:00</text>
          <text class="t-min" x="598.7" y="121" font-size="11" text-anchor="middle">16:35</text>
          <text class="t-hour" x="690" y="121" font-size="11.5" text-anchor="middle">17:00</text>
        </svg>
      </div>
      <figcaption>Figure 1 · How the three hours went. Yellow is time on the wall, white is time on decisions. We ran five minutes over on decisions and took it from the close.</figcaption>
    </figure>
  </section>

  <section class="wall-band" id="wall">
    <div class="page">
      <div class="wall-intro">
        <div class="prose">
          <h2>The wall</h2>
          <p>Ten minutes of silent writing, one thought per note. Priya clustered while we talked, and duplicates were stacked. Twenty-two notes survived. Everyone then had three dots to place. Notes are quoted as written; the dots are the votes they received.</p>
        </div>
        <ul class="key" aria-label="Colour key for the four themes">
          <li><span class="swatch sw-pricing"></span>Pricing</li>
          <li><span class="swatch sw-support"></span>Support</li>
          <li><span class="swatch sw-product"></span>Product</li>
          <li><span class="swatch sw-gtm"></span>Go-to-market</li>
        </ul>
      </div>

      <div class="wall">
        <div class="cluster c-pricing">
          <div class="cluster-head"><h3>Pricing</h3><p class="tally">6 notes · 14 dots</p></div>
          <ul class="notes">
            <li class="note"><p>partner tier = 3 customers. 40% of billing tickets</p><span class="dots"><b></b><b></b><b></b><b></b><b></b><b></b><span class="sr">6 votes</span></span></li>
            <li class="note"><p>per employee, not per admin seat</p><span class="dots"><b></b><b></b><b></b><b></b><span class="sr">4 votes</span></span></li>
            <li class="note"><p>nobody can say what Plus includes. not even us</p><span class="dots"><b></b><b></b><span class="sr">2 votes</span></span></li>
            <li class="note"><p>test in Nov. January is renewal season</p><span class="dots"><b></b><b></b><span class="sr">2 votes</span></span></li>
            <li class="note"><p>annual discount too deep? 15% → 10%?</p><span class="dots"><span class="sr">no votes</span></span></li>
            <li class="note"><p>grandfather everyone 12 months. no surprises</p><span class="dots"><span class="sr">no votes</span></span></li>
          </ul>
        </div>

        <div class="cluster c-support">
          <div class="cluster-head"><h3>Support</h3><p class="tally">5 notes · 9 dots</p></div>
          <ul class="notes">
            <li class="note"><p>first reply 9h on Mondays. 2h rest of the week</p><span class="dots"><b></b><b></b><b></b><b></b><span class="sr">4 votes</span></span></li>
            <li class="note"><p>2 people, 3 time zones</p><span class="dots"><b></b><b></b><b></b><span class="sr">3 votes</span></span></li>
            <li class="note"><p>payroll questions: not ours, still land with us</p><span class="dots"><b></b><b></b><span class="sr">2 votes</span></span></li>
            <li class="note"><p>macros are from 2024. plan names wrong</p><span class="dots"><span class="sr">no votes</span></span></li>
            <li class="note"><p>hire before the January rush, not during it</p><span class="dots"><span class="sr">no votes</span></span></li>
          </ul>
        </div>

        <div class="cluster c-product">
          <div class="cluster-head"><h3>Product</h3><p class="tally">6 notes · 12 dots</p></div>
          <ul class="notes">
            <li class="note"><p>review cycles = 60% of feature asks</p><span class="dots"><b></b><b></b><b></b><b></b><b></b><span class="sr">5 votes</span></span></li>
            <li class="note"><p>4 integrations started, 0 finished</p><span class="dots"><b></b><b></b><b></b><b></b><span class="sr">4 votes</span></span></li>
            <li class="note"><p>org chart import breaks above 2k people</p><span class="dots"><b></b><b></b><b></b><span class="sr">3 votes</span></span></li>
            <li class="note"><p>mobile app or better mobile web?</p><span class="dots"><span class="sr">no votes</span></span></li>
            <li class="note"><p>managers never open the dashboard. why?</p><span class="dots"><span class="sr">no votes</span></span></li>
            <li class="note"><p>one thing finished &gt; three things started</p><span class="dots"><span class="sr">no votes</span></span></li>
          </ul>
        </div>

        <div class="cluster c-gtm">
          <div class="cluster-head"><h3>Go-to-market</h3><p class="tally">5 notes · 7 dots</p></div>
          <ul class="notes">
            <li class="note"><p>3 launches planned. 1 team of 2</p><span class="dots"><b></b><b></b><b></b><b></b><span class="sr">4 votes</span></span></li>
            <li class="note"><p>sales needs a pricing page they can send</p><span class="dots"><b></b><b></b><span class="sr">2 votes</span></span></li>
            <li class="note"><p>webinar signups up, attendance flat</p><span class="dots"><b></b><span class="sr">1 vote</span></span></li>
            <li class="note"><p>October conference: booth, or tickets only?</p><span class="dots"><span class="sr">no votes</span></span></li>
            <li class="note"><p>case study with the 800-seat account</p><span class="dots"><span class="sr">no votes</span></span></li>
          </ul>
        </div>
      </div>

      <div class="prose wall-read">
        <p>Reading the dots: pricing took 14 of 42, product 12, support 9, go-to-market 7. Eight notes got no dots at all, and most of those went straight to the parking lot. The go-to-market cluster collapsed into a single decision once the launch count was on the table. The colours carry through the rest of this document: each decision and action shows the theme it came from.</p>
      </div>
    </div>
  </section>

  <section class="page" id="decisions">
    <h2>Decisions</h2>
    <ol class="decisions">
      <li class="decision">
        <div>
          <h3>Drop the partner tier</h3>
          <dl class="who"><dt>Owner</dt><dd>Ana</dd><dt>From</dt><dd><span class="swatch sw-pricing"></span>Pricing</dd></dl>
        </div>
        <p class="why">Three customers are on it and they generate 40% of billing tickets. All three move to Team with a twelve-month price hold, so nobody pays more before September 2027. This takes the pricing page from three plans to two before the November test, which is the only way the test reads cleanly.</p>
      </li>
      <li class="decision">
        <div>
          <h3>Price test in November</h3>
          <dl class="who"><dt>Owner</dt><dd>Leo</dd><dt>From</dt><dd><span class="swatch sw-pricing"></span>Pricing</dd></dl>
        </div>
        <p class="why">Per-employee pricing goes to new signups only, at two price points, for four weeks from 3 November. The result lands before the January change is locked. We are not testing in January because that is renewal season and the numbers would be unreadable.</p>
      </li>
      <li class="decision">
        <div>
          <h3>Hire two in support</h3>
          <dl class="who"><dt>Owner</dt><dd>Mo</dd><dt>From</dt><dd><span class="swatch sw-support"></span>Support</dd></dl>
        </div>
        <p class="why">First reply is nine hours on Mondays with two people covering three time zones. One hire sits in the earlier time zone, one is a generalist. Both are in seat by 1 December, so they are trained before the January rush rather than during it. Yuki confirmed the budget in the room.</p>
      </li>
      <li class="decision">
        <div>
          <h3>Freeze new integrations until January</h3>
          <dl class="who"><dt>Owner</dt><dd>Tomás</dd><dt>From</dt><dd><span class="swatch sw-product"></span>Product</dd></dl>
        </div>
        <p class="why">Four integrations in progress, none finished. We finish the two payroll connectors and stop the other two, and we tell the customers who asked for them. The org chart import fix, which breaks above 2,000 people, moves ahead of everything else on the roadmap.</p>
      </li>
      <li class="decision">
        <div>
          <h3>One launch in Q4, on 17 November</h3>
          <dl class="who"><dt>Owner</dt><dd>Ines</dd><dt>From</dt><dd><span class="swatch sw-gtm"></span>Go-to-market</dd></dl>
        </div>
        <p class="why">Three launches were planned for a marketing team of two. Review cycles and the payroll connectors ship together as one release on 17 November, with the webinar and the sales pricing page attached to that date. Everything else goes out quietly in the changelog.</p>
      </li>
    </ol>
  </section>

  <section class="page" id="questions">
    <h2>Open questions</h2>
    <ol class="questions">
      <li>
        <p class="q">Does the November price test include existing customers who upgrade during the test, or new signups only?</p>
        <p class="q-next">Leo and Yuki settle it in the test plan, by 10 October.</p>
      </li>
      <li>
        <p class="q">Mobile app, or better mobile web? We ran out of time on this one.</p>
        <p class="q-next">Wren brings two costed options to the 16 October check-in.</p>
      </li>
      <li>
        <p class="q">Who owns the pricing page once the partner tier is gone: marketing or sales?</p>
        <p class="q-next">Ines and Kai, by 7 October. Sales needs a page it can send before the test starts.</p>
      </li>
      <li>
        <p class="q">Do the two support hires report to Mo, or to the regional leads?</p>
        <p class="q-next">Mo and Priya decide before any offer goes out.</p>
      </li>
      <li>
        <p class="q">What do we tell the three partner-tier customers, and who calls them?</p>
        <p class="q-next">Ana and Dara, before 2 October, so the calls land ahead of the written sunset note.</p>
      </li>
    </ol>
  </section>

  <section class="page" id="actions">
    <h2>Action items</h2>
    <div class="table-scroll">
      <table>
        <caption>Ten actions from the room. Status as of Wednesday 24 September 2026.</caption>
        <thead>
          <tr>
            <th scope="col">Action</th>
            <th scope="col" class="col-owner">Owner</th>
            <th scope="col" class="col-due">Due</th>
            <th scope="col" class="col-status">Status</th>
          </tr>
        </thead>
        <tbody>
          <tr><th scope="row"><span class="swatch sw-pricing"></span>Confirm the twelve-month price hold for partner-tier accounts with Finance</th><td data-label="Owner">Yuki</td><td data-label="Due">30 Sep</td><td><span class="status is-done">Done</span></td></tr>
          <tr><th scope="row"><span class="swatch sw-support"></span>Open the two support roles</th><td data-label="Owner">Priya</td><td data-label="Due">25 Sep</td><td><span class="status is-done">Done</span></td></tr>
          <tr><th scope="row"><span class="swatch sw-pricing"></span>Write the sunset note for the three partner-tier accounts</th><td data-label="Owner">Ana</td><td data-label="Due">2 Oct</td><td><span class="status is-doing">In progress</span></td></tr>
          <tr><th scope="row"><span class="swatch sw-product"></span>Stop the two non-payroll integrations and tell the customers who asked</th><td data-label="Owner">Tomás</td><td data-label="Due">3 Oct</td><td><span class="status is-doing">In progress</span></td></tr>
          <tr><th scope="row"><span class="swatch sw-gtm"></span>Cut the launch plan to one date and share it with sales</th><td data-label="Owner">Ines</td><td data-label="Due">7 Oct</td><td><span class="status is-todo">Not started</span></td></tr>
          <tr><th scope="row"><span class="swatch sw-pricing"></span>Draft the price test plan: price points, sample, success measure</th><td data-label="Owner">Leo</td><td data-label="Due">10 Oct</td><td><span class="status is-doing">In progress</span></td></tr>
          <tr><th scope="row"><span class="swatch sw-product"></span>Bring two costed mobile options to the check-in</th><td data-label="Owner">Wren</td><td data-label="Due">16 Oct</td><td><span class="status is-todo">Not started</span></td></tr>
          <tr><th scope="row"><span class="swatch sw-support"></span>Shortlist support candidates in the earlier time zone</th><td data-label="Owner">Mo</td><td data-label="Due">17 Oct</td><td><span class="status is-todo">Not started</span></td></tr>
          <tr><th scope="row"><span class="swatch sw-support"></span>Refresh the support macros with the new plan names</th><td data-label="Owner">Dara</td><td data-label="Due">24 Oct</td><td><span class="status is-blocked">Blocked, needs plan names</span></td></tr>
          <tr><th scope="row"><span class="swatch sw-product"></span>Fix org chart import above 2,000 people</th><td data-label="Owner">Tomás</td><td data-label="Due">31 Oct</td><td><span class="status is-todo">Not started</span></td></tr>
        </tbody>
      </table>
    </div>
    <p class="table-note">The colour mark is the wall theme the action came from. Owners update their own row; Sam checks the table on Fridays.</p>
  </section>

  <section class="page" id="parking">
    <h2>Parking lot</h2>
    <div class="prose"><p>Things we chose not to decide. Each has a reason and a date it comes back.</p></div>
    <dl class="parking">
      <dt>Annual discount depth</dt>
      <dd>Stays at 15% until the price test reads out. The 10% suggestion returns in December with the test results, not before.</dd>
      <dt>Renaming Plus</dt>
      <dd>Not until the test settles what the two plans are. The name follows the plan, not the other way round.</dd>
      <dt>October conference</dt>
      <dd>We go with tickets, no booth. Bea and Kai attend. The booth question comes back for the spring event.</dd>
      <dt>Manager dashboard</dt>
      <dd>Nobody in the room could say why managers do not open it. Oskar pulls opens by role in October; any redesign waits for Q1.</dd>
      <dt>Case study with the 800-seat account</dt>
      <dd>Wanted, not yet. It waits until the review-cycle release has shipped so there is something new to show.</dd>
    </dl>
  </section>

  <section class="page" id="next">
    <div class="next">
      <h2>Next check-in</h2>
      <div>
        <p class="when">Thursday 16 October 2026, 15:00 – 16:00</p>
        <p class="detail">Room Birch, same fourteen people. Leo reports on the price test plan and Mo on hiring first. Wren brings the mobile options. One hour, no wall.</p>
      </div>
    </div>
  </section>
</main>

<footer>
  <div class="page">
    <p>Fernhill · People Ops</p>
    <p>Recap v1, sent Friday 19 September 2026</p>
    <p>Notes by Sam · Photos of the wall are in the shared drive under Offsites › 2026-09-18</p>
  </div>
</footer>

</body>
</html>

What this template is for

The recap that gets written before anyone forgets who agreed to what. The wall of sticky notes stays visible, the decisions are separated from the discussion, and every action item has an owner and a date.

The sample is Fernhill, a fictional HR-software company, after a Q4 planning offsite. The structure fits any workshop with a wall.

How teams use it

  • From wall photos to a page. The agent reads the photos and the notes, clusters the stickies, and drafts the decisions. The facilitator corrects the owners.
  • Corrected by the room. Everyone who was there opens the URL. "That was Leo, not Ana" lands as a comment, and the agent publishes v2.
  • Read back next quarter. The page keeps its address, so the next planning session starts from it.

What's inside

Session context, the sticky-note wall in four clusters, decisions with owners, open questions, an action items table, the parking lot, and the next check-in. Inline CSS, no scripts.

More templates

A URL for everything your agents make

Any agent, any model. Behind your company’s sign-in, at one flat price.

Free to start · Unlimited viewers