Template

Pitch deck template

A seed pitch deck as an HTML page – problem, product, traction, market, team, ask – scroll-snap slides in one file. Publish it to a URL in one click, no account.

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

Publishing this from your own stack? See display.dev for HTML presentations.

Already chatting with an agent?

Or publish it as-is

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ferrous – seed pitch</title>
<style>
  :root {
    color-scheme: light dark;
    --bg: oklch(0.99 0.004 85);
    --card: oklch(1 0 0);
    --fg: oklch(0.16 0.006 85);
    --muted: oklch(0.5 0.008 85);
    --line: oklch(0.92 0.006 85);
    --accent: oklch(0.48 0.18 145);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: oklch(0.15 0.005 85);
      --card: oklch(0.19 0.006 85);
      --fg: oklch(0.97 0.004 85);
      --muted: oklch(0.65 0.008 85);
      --line: oklch(0.3 0.006 85);
      --accent: oklch(0.68 0.18 145);
    }
  }
  * { box-sizing: border-box; }
  html { scroll-snap-type: y mandatory; }
  body {
    margin: 0; background: var(--bg); color: var(--fg);
    font-family: ui-sans-serif, system-ui, sans-serif; line-height: 1.5;
  }
  .slide {
    min-height: 100vh; scroll-snap-align: start;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(2rem, 6vw, 5rem);
    border-bottom: 1px solid var(--line);
  }
  .slide-inner { max-width: 860px; margin: 0 auto; width: 100%; }
  .kicker { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin: 0 0 0.75rem; }
  h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 1rem; }
  h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; margin: 0 0 1rem; }
  p.lead { font-size: clamp(1.0625rem, 2vw, 1.3125rem); color: var(--muted); max-width: 54ch; margin: 0; }
  p.lead strong { color: var(--fg); font-weight: 650; }
  ul.points { font-size: clamp(1rem, 1.8vw, 1.1875rem); padding-left: 1.25rem; margin: 0; }
  ul.points li { margin-bottom: 0.625rem; }
  .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; margin-top: 1.5rem; }
  .stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.25rem; }
  .stat .n { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
  .stat .n em { font-style: normal; color: var(--accent); }
  .stat .l { font-size: 0.8125rem; color: var(--muted); }
</style>
</head>
<body>

<section class="slide">
  <div class="slide-inner">
    <p class="kicker">Ferrous · seed round · July 2026</p>
    <h1>Compliance evidence, collected while you work</h1>
    <p class="lead">Ferrous turns the audit scramble into a byproduct of
    normal engineering. Sample company and numbers – replace with your own.</p>
  </div>
</section>

<section class="slide">
  <div class="slide-inner">
    <p class="kicker">Problem</p>
    <h2>Audits are a quarter of stolen engineering time</h2>
    <ul class="points">
      <li>Mid-size B2B teams spend 6–10 engineer-weeks per audit assembling screenshots and exports by hand.</li>
      <li>Evidence goes stale the day it's collected – auditors ask again anyway.</li>
      <li>The tooling assumes a compliance team; 50–300-person companies don't have one.</li>
    </ul>
  </div>
</section>

<section class="slide">
  <div class="slide-inner">
    <p class="kicker">Product</p>
    <h2>Agents collect the evidence where it lives</h2>
    <p class="lead">Ferrous connects to the tools engineering already uses
    and keeps an <strong>always-current evidence ledger</strong> – every
    control mapped to live proof, refreshed on change, exportable in the
    auditor's format.</p>
  </div>
</section>

<section class="slide">
  <div class="slide-inner">
    <p class="kicker">Traction</p>
    <h2>Nine months in</h2>
    <div class="stat-row">
      <div class="stat"><div class="n">31</div><div class="l">paying companies</div></div>
      <div class="stat"><div class="n">€24k</div><div class="l">MRR, +19% m/m for 5 months</div></div>
      <div class="stat"><div class="n">9 <em>days</em></div><div class="l">median audit prep, was 7 weeks</div></div>
      <div class="stat"><div class="n">0</div><div class="l">logo churn to date</div></div>
    </div>
  </div>
</section>

<section class="slide">
  <div class="slide-inner">
    <p class="kicker">Market</p>
    <h2>Compliance spend is moving down-market</h2>
    <ul class="points">
      <li>SOC 2 and ISO 27001 requests now reach companies at Series A – earlier every year.</li>
      <li>The incumbent tooling prices for enterprises; the growth is under it.</li>
      <li>Wedge: audit evidence. Expansion: continuous controls monitoring.</li>
    </ul>
  </div>
</section>

<section class="slide">
  <div class="slide-inner">
    <p class="kicker">Team</p>
    <h2>Built the last generation of this</h2>
    <ul class="points">
      <li>CEO – led compliance engineering at a 400-person fintech through 4 audits.</li>
      <li>CTO – ex-platform lead, built the internal evidence pipeline the fintech still runs.</li>
      <li>Founding engineer – security tooling, two previous developer-tool startups.</li>
    </ul>
  </div>
</section>

<section class="slide">
  <div class="slide-inner">
    <p class="kicker">Ask</p>
    <h2>€1.8M to own the wedge</h2>
    <ul class="points">
      <li>18 months of runway at planned burn.</li>
      <li>Hiring: 3 engineers, 1 founding GTM.</li>
      <li>Milestone: €100k MRR and 100 companies by end of 2027.</li>
    </ul>
  </div>
</section>

</body>
</html>

Preview

What it looks like published

View live on display.dev →

Source – pitch-deck.html

Open raw file

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ferrous – seed pitch</title>
<style>
  :root {
    color-scheme: light dark;
    --bg: oklch(0.99 0.004 85);
    --card: oklch(1 0 0);
    --fg: oklch(0.16 0.006 85);
    --muted: oklch(0.5 0.008 85);
    --line: oklch(0.92 0.006 85);
    --accent: oklch(0.48 0.18 145);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: oklch(0.15 0.005 85);
      --card: oklch(0.19 0.006 85);
      --fg: oklch(0.97 0.004 85);
      --muted: oklch(0.65 0.008 85);
      --line: oklch(0.3 0.006 85);
      --accent: oklch(0.68 0.18 145);
    }
  }
  * { box-sizing: border-box; }
  html { scroll-snap-type: y mandatory; }
  body {
    margin: 0; background: var(--bg); color: var(--fg);
    font-family: ui-sans-serif, system-ui, sans-serif; line-height: 1.5;
  }
  .slide {
    min-height: 100vh; scroll-snap-align: start;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(2rem, 6vw, 5rem);
    border-bottom: 1px solid var(--line);
  }
  .slide-inner { max-width: 860px; margin: 0 auto; width: 100%; }
  .kicker { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin: 0 0 0.75rem; }
  h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 1rem; }
  h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; margin: 0 0 1rem; }
  p.lead { font-size: clamp(1.0625rem, 2vw, 1.3125rem); color: var(--muted); max-width: 54ch; margin: 0; }
  p.lead strong { color: var(--fg); font-weight: 650; }
  ul.points { font-size: clamp(1rem, 1.8vw, 1.1875rem); padding-left: 1.25rem; margin: 0; }
  ul.points li { margin-bottom: 0.625rem; }
  .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; margin-top: 1.5rem; }
  .stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.25rem; }
  .stat .n { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
  .stat .n em { font-style: normal; color: var(--accent); }
  .stat .l { font-size: 0.8125rem; color: var(--muted); }
</style>
</head>
<body>

<section class="slide">
  <div class="slide-inner">
    <p class="kicker">Ferrous · seed round · July 2026</p>
    <h1>Compliance evidence, collected while you work</h1>
    <p class="lead">Ferrous turns the audit scramble into a byproduct of
    normal engineering. Sample company and numbers – replace with your own.</p>
  </div>
</section>

<section class="slide">
  <div class="slide-inner">
    <p class="kicker">Problem</p>
    <h2>Audits are a quarter of stolen engineering time</h2>
    <ul class="points">
      <li>Mid-size B2B teams spend 6–10 engineer-weeks per audit assembling screenshots and exports by hand.</li>
      <li>Evidence goes stale the day it's collected – auditors ask again anyway.</li>
      <li>The tooling assumes a compliance team; 50–300-person companies don't have one.</li>
    </ul>
  </div>
</section>

<section class="slide">
  <div class="slide-inner">
    <p class="kicker">Product</p>
    <h2>Agents collect the evidence where it lives</h2>
    <p class="lead">Ferrous connects to the tools engineering already uses
    and keeps an <strong>always-current evidence ledger</strong> – every
    control mapped to live proof, refreshed on change, exportable in the
    auditor's format.</p>
  </div>
</section>

<section class="slide">
  <div class="slide-inner">
    <p class="kicker">Traction</p>
    <h2>Nine months in</h2>
    <div class="stat-row">
      <div class="stat"><div class="n">31</div><div class="l">paying companies</div></div>
      <div class="stat"><div class="n">€24k</div><div class="l">MRR, +19% m/m for 5 months</div></div>
      <div class="stat"><div class="n">9 <em>days</em></div><div class="l">median audit prep, was 7 weeks</div></div>
      <div class="stat"><div class="n">0</div><div class="l">logo churn to date</div></div>
    </div>
  </div>
</section>

<section class="slide">
  <div class="slide-inner">
    <p class="kicker">Market</p>
    <h2>Compliance spend is moving down-market</h2>
    <ul class="points">
      <li>SOC 2 and ISO 27001 requests now reach companies at Series A – earlier every year.</li>
      <li>The incumbent tooling prices for enterprises; the growth is under it.</li>
      <li>Wedge: audit evidence. Expansion: continuous controls monitoring.</li>
    </ul>
  </div>
</section>

<section class="slide">
  <div class="slide-inner">
    <p class="kicker">Team</p>
    <h2>Built the last generation of this</h2>
    <ul class="points">
      <li>CEO – led compliance engineering at a 400-person fintech through 4 audits.</li>
      <li>CTO – ex-platform lead, built the internal evidence pipeline the fintech still runs.</li>
      <li>Founding engineer – security tooling, two previous developer-tool startups.</li>
    </ul>
  </div>
</section>

<section class="slide">
  <div class="slide-inner">
    <p class="kicker">Ask</p>
    <h2>€1.8M to own the wedge</h2>
    <ul class="points">
      <li>18 months of runway at planned burn.</li>
      <li>Hiring: 3 engineers, 1 founding GTM.</li>
      <li>Milestone: €100k MRR and 100 companies by end of 2027.</li>
    </ul>
  </div>
</section>

</body>
</html>

What this template is for

The classic seed arc – problem, product, traction, market, team, ask – as a page instead of a PDF. Stat cards carry the traction slide; the copy discipline is one claim per slide, numbers over adjectives.

Because it's HTML, iterating is a text edit: your agent updates the MRR figure the morning of the meeting and the link you already sent shows the current version.

How teams use it

Drafted from your own materials. Point the agent at your metrics, your customer list, and your notes; it fills the arc, you own the narrative slide by slide.
Shared with exact people. Publish on display.dev and share with the investors' email addresses – you control who opens it, and the page stays current as the round progresses.
A working draft before design. Nail the argument in this format first; hand it to design when the story stops changing.

More templates

Slide deck template

An HTML slide deck – scroll-snap slides, stat cards, and a one-point-per-slide structure in a single file with no dependencies. Publish it to a URL in one click, no account.

HTML

Publish your first artifact in 15 seconds.

Free tier. No credit card. One-time password auth on free, Google + Microsoft SSO on Pro (€49/month flat).

Get started free →See pricing