# Skeleton deck

> The starting file for every MakoDeck deck: a complete six-slide native deck with brand tokens, every layout, cards, a chart, a table, speaker notes and the manifest — markup and CSS only, because MakoDeck runs the slides.

Start from an exact copy — download it, don't retype it: fetch this page raw and copy the HTML block below, or use the Agent Skill's `assets/skeleton/index.html`. Save it as your deck's `index.html`. Then:

- Replace the values in the BRAND TOKENS block with the client's brand kit, or keep them — they are MakoDeck's default look (https://makodeck.com/ai/brand-and-design.md).
- Replace every slide's content (the company, people and numbers are fictional), add or remove `<section class="slide …">` elements, and renumber the footers. Delete CSS the deck doesn't use.
- Keep the structure and the manifest's shape, and add no navigation script, `is-active` class or print CSS: MakoDeck shows, scales, moves and prints the slides (https://makodeck.com/ai/format.md).

Opened on its own, the file shows every slide one after another. To see it as the site shows it, put the site's own script, `mako-preview.js`, first in its `<head>` (https://makodeck.com/ai/interactive.md).

```html
<!doctype html>
<!--
  MakoDeck skeleton deck. Copy this file as index.html, put the client's brand kit in the BRAND TOKENS
  (no brand kit: keep them, they are MakoDeck's default look), and replace every name, number and sentence.
  Keep the structure: <html data-mako-deck>, one .deck, one <section class="slide slide--…"> per slide,
  speaker notes in <aside class="notes">. MakoDeck shows, scales, moves and prints the slides: add no
  navigation script, is-active class or print CSS. Delete CSS the deck doesn't use (cards, table…).
-->
<html lang="en" data-mako-deck>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quarterly review | Fieldstone Supply</title>
<script type="application/json" id="mako-manifest">
{
  "title": "Quarterly review",
  "dataAsOf": "2026-09-30",
  "sources": [{ "system": "Sample data", "detail": "Invented for the skeleton deck" }]
}
</script>
<style>
  /* ===== BRAND TOKENS: replace with the client's brand kit ===== */
  :root {
    /* The client's fonts go FIRST. Inter is supplied by the site; a Google font can be named here too. */
    --brand-font: "Inter", system-ui, sans-serif;          /* body text */
    --brand-heading-font: "Inter", system-ui, sans-serif;  /* titles and big numbers */
    --brand-accent: #235fbc;        /* the brand colour as a FILL: highlighted bars, shapes, rules */
    --brand-accent-strong: #184d9f; /* the brand colour as TEXT: kickers, key numbers (4.5:1 on paper and soft) */
    --brand-accent-tint: #eaf2ff;   /* soft fill behind accent content */
    --brand-ink: #202b3a;           /* body text */
    --brand-muted: #4a5870;         /* labels, captions, footer */
    --brand-rule: #dbe2eb;          /* hairlines, chart axes */
    --brand-quiet: #b3bfcd;         /* de-emphasised chart marks */
    --brand-soft: #f6f8fb;          /* card backgrounds */
    --brand-paper: #ffffff;         /* slide background */
    --brand-dark: #112a52;          /* section slide background */
    --brand-on-dark: #ffffff;
    /* Status colours. Always pair them with a word: never colour alone. */
    --status-good: #086231;  --status-good-tint: #e3f7e7;
    --status-watch: #6e4906; --status-watch-tint: #feefdc;
    --status-risk: #912325;  --status-risk-tint: #ffecea;
  }

  /* ===== Slides: each a 1920 x 1080 frame (MakoDeck sizes, scales and shows them) ===== */
  * { box-sizing: border-box; }
  body { background: #eef1f5; } /* around the slides when the window isn't 16:9 */
  .slide {
    display: flex; flex-direction: column; padding: 72px 96px 56px;
    background: var(--brand-paper); color: var(--brand-ink);
    font: 24px/1.35 var(--brand-font);
    -webkit-font-smoothing: antialiased;
  }
  .slide :is(h1, h2, h3, p, ul, ol) { margin: 0; }

  /* ===== Slide parts: header, body, footer ===== */
  .kicker { font-size: 20px; line-height: 24px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-accent-strong); }
  .header { flex: none; margin-bottom: 40px; }
  .header .kicker { margin-bottom: 12px; }
  :is(h1, h2, h3, .stat-value) { font-family: var(--brand-heading-font); }
  .header h2 { font-size: 52px; line-height: 1.1; font-weight: 680; letter-spacing: -.03em; }
  .body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 32px; } /* about 1728 x 750 px */
  .body--center { justify-content: center; }
  .footer {
    flex: none; display: flex; justify-content: space-between; gap: 24px; margin-top: 24px; padding-top: 16px;
    border-top: 1px solid var(--brand-rule); font-size: 18px; line-height: 23px; color: var(--brand-muted);
  }
  .page { font-variant-numeric: tabular-nums; }
  .logo { height: 40px; width: auto; }

  /* ===== Title, section and closing slides ===== */
  .slide--title, .slide--closing { justify-content: center; }
  .slide--title h1 { max-width: 1500px; margin-top: 20px; font-size: 96px; line-height: 1.05; font-weight: 680; letter-spacing: -.035em; }
  .slide--title .subtitle { max-width: 1300px; margin-top: 32px; font-size: 32px; line-height: 1.35; color: var(--brand-muted); }
  .slide--title .footer, .slide--closing .footer { position: absolute; left: 96px; right: 96px; bottom: 56px; }
  .slide--section { justify-content: center; background: var(--brand-dark); color: var(--brand-on-dark); }
  .slide--section .kicker { color: inherit; opacity: .8; }
  .slide--section h2 { margin-top: 20px; font-size: 80px; line-height: 1.05; font-weight: 680; letter-spacing: -.035em; }
  .slide--closing h2 { font-size: 72px; line-height: 1.05; font-weight: 680; letter-spacing: -.035em; }
  .slide--closing ol { margin-top: 40px; padding-left: 1.2em; font-size: 32px; line-height: 1.4; }
  .slide--closing li + li { margin-top: 16px; }

  /* ===== Content building blocks ===== */
  .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .card { min-height: 420px; padding: 48px 48px 56px; background: var(--brand-soft); border-radius: 12px; }
  .card .num { font-size: 24px; font-weight: 650; color: var(--brand-accent-strong); }
  .card h3 { margin-top: 28px; font-size: 40px; line-height: 1.15; font-weight: 650; letter-spacing: -.02em; }
  .card p { margin-top: 20px; font-size: 26px; line-height: 1.45; color: var(--brand-muted); }
  .split { flex: 1; min-height: 0; display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 72px; align-items: center; }
  .stat + .stat { margin-top: 48px; }
  .stat-value { font-size: 88px; line-height: 1; font-weight: 680; letter-spacing: -.03em; color: var(--brand-accent-strong); font-variant-numeric: tabular-nums; }
  .stat-label { margin-top: 12px; font-size: 24px; color: var(--brand-muted); }
  .chart { width: 100%; height: auto; font-family: inherit; }
  .chart text { fill: var(--brand-ink); font-size: 22px; }
  .chart .axis { stroke: var(--brand-rule); stroke-width: 2; }
  .chart .bar { fill: var(--brand-quiet); }
  .chart .bar--highlight { fill: var(--brand-accent); }
  .caption { font-size: 20px; color: var(--brand-muted); }
  table.data { width: 100%; border-collapse: collapse; font-size: 24px; font-variant-numeric: tabular-nums; }
  table.data th { padding: 14px 20px; text-align: left; font-size: 20px; font-weight: 650; color: var(--brand-accent-strong); background: var(--brand-accent-tint); }
  table.data td { padding: 16px 20px; border-bottom: 1px solid var(--brand-rule); vertical-align: top; }
  table.data .n { text-align: right; }
  .status { display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 20px; font-weight: 650; }
  .status--good { color: var(--status-good); background: var(--status-good-tint); }
  .status--watch { color: var(--status-watch); background: var(--status-watch-tint); }
  .status--risk { color: var(--status-risk); background: var(--status-risk-tint); }
</style>
</head>
<body>
<main class="deck">

  <section class="slide slide--title" id="cover" aria-roledescription="slide" aria-labelledby="cover-title">
    <p class="kicker">Quarterly review · Q3 2026</p>
    <h1 id="cover-title">Fieldstone Supply: a stronger quarter, and what comes next</h1>
    <p class="subtitle">Results, open risks and three decisions for the leadership team.</p>
    <div class="footer"><span>Prepared for the Fieldstone leadership team</span><span>30 September 2026</span></div>
  </section>

  <section class="slide slide--section" id="results" aria-roledescription="slide" aria-labelledby="results-title">
    <p class="kicker">Part 1</p>
    <h2 id="results-title">Where the quarter landed</h2>
  </section>

  <section class="slide slide--content" id="takeaways" aria-roledescription="slide" aria-labelledby="takeaways-title">
    <div class="header">
      <p class="kicker">Summary</p>
      <h2 id="takeaways-title">Three things to take away</h2>
    </div>
    <div class="body body--center">
      <div class="cards">
        <div class="card"><p class="num">01</p><h3>Orders grew 18%</h3><p>Every region grew; the north led with new wholesale accounts.</p></div>
        <div class="card"><p class="num">02</p><h3>Delivery got faster</h3><p>Median time to deliver fell from 14 days to 11.</p></div>
        <div class="card"><p class="num">03</p><h3>One risk to watch</h3><p>A single supplier holds 40% of packaging volume.</p></div>
      </div>
    </div>
    <div class="footer"><span>Fieldstone Supply · Quarterly review</span><span class="page">3</span></div>
    <aside class="notes">Lead with growth, then speed. Save the supplier risk for the table on slide 5.</aside>
  </section>

  <section class="slide slide--content" id="orders" aria-roledescription="slide" aria-labelledby="orders-title">
    <div class="header">
      <p class="kicker">Volume</p>
      <h2 id="orders-title">August was the strongest month of the year</h2>
    </div>
    <div class="body">
      <div class="split">
        <div>
          <div class="stat"><div class="stat-value">4,800</div><div class="stat-label">orders shipped in August</div></div>
          <div class="stat"><div class="stat-value">11 days</div><div class="stat-label">median time from order to delivery</div></div>
        </div>
        <svg class="chart" viewBox="0 0 960 560" role="img" aria-labelledby="orders-chart-title orders-chart-desc">
          <title id="orders-chart-title">Orders shipped per month, May to August</title>
          <desc id="orders-chart-desc">May 2,200; June 2,850; July 3,600; August 4,800.</desc>
          <line class="axis" x1="0" y1="500" x2="960" y2="500"/>
          <rect class="bar" x="40" y="317" width="170" height="183"/>
          <rect class="bar" x="280" y="263" width="170" height="237"/>
          <rect class="bar" x="520" y="200" width="170" height="300"/>
          <rect class="bar bar--highlight" x="760" y="100" width="170" height="400"/>
          <g text-anchor="middle">
            <text x="125" y="540">May</text><text x="365" y="540">June</text><text x="605" y="540">July</text><text x="845" y="540">August</text>
            <text x="125" y="300" font-weight="650">2,200</text><text x="365" y="246" font-weight="650">2,850</text>
            <text x="605" y="183" font-weight="650">3,600</text><text x="845" y="83" font-weight="650">4,800</text>
          </g>
        </svg>
      </div>
    </div>
    <div class="footer"><span>Source: order system, 30 September 2026</span><span class="page">4</span></div>
    <aside class="notes">August includes the two new wholesale accounts that started on the 4th.</aside>
  </section>

  <section class="slide slide--content" id="projects" aria-roledescription="slide" aria-labelledby="projects-title">
    <div class="header">
      <p class="kicker">Open work</p>
      <h2 id="projects-title">Four projects in flight, one at risk</h2>
    </div>
    <div class="body">
      <table class="data">
        <thead><tr><th>Project</th><th>Owner</th><th class="n">Units</th><th>Due</th><th>Status</th></tr></thead>
        <tbody>
          <tr><td>Wholesale starter kits</td><td>Dana Ortiz</td><td class="n">1,500</td><td>2 Oct</td><td><span class="status status--good">On track</span></td></tr>
          <tr><td>Retail welcome packs</td><td>Sam Lee</td><td class="n">900</td><td>14 Oct</td><td><span class="status status--good">On track</span></td></tr>
          <tr><td>Event kits</td><td>Priya Nair</td><td class="n">600</td><td>20 Oct</td><td><span class="status status--watch">Watch</span></td></tr>
          <tr><td>Packaging supplier switch</td><td>Alex Kim</td><td class="n">—</td><td>3 Nov</td><td><span class="status status--risk">At risk</span></td></tr>
        </tbody>
      </table>
      <p class="caption">Status is written as a word on every row, so it reads without colour.</p>
    </div>
    <div class="footer"><span>Fieldstone Supply · Quarterly review</span><span class="page">5</span></div>
  </section>

  <section class="slide slide--closing" id="next" aria-roledescription="slide" aria-labelledby="next-title">
    <p class="kicker">Decisions</p>
    <h2 id="next-title">Three decisions for this meeting</h2>
    <ol>
      <li>Approve a second packaging supplier before 15 October.</li>
      <li>Keep the north region's wholesale team at its current size.</li>
      <li>Review delivery times again at the December meeting.</li>
    </ol>
    <div class="footer"><span>Fieldstone Supply · Quarterly review</span><span class="page">6</span></div>
  </section>

</main>
</body>
</html>
```
