nexu-io--open-design
wehub-resource-sync
1187 行
68 KiB
HTML
1187 行
68 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Write an Investor Pitch Book like a Growth-Equity Analyst - Fundraising pitch</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=Source+Serif+4:ital,opsz,wght@0,8..60,300..600;1,8..60,300..600&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--paper: oklch(98.5% 0.008 80);
|
||
--paper-warm: oklch(96% 0.012 78);
|
||
--ink: oklch(18% 0.012 70);
|
||
--ink-mid: oklch(36% 0.010 70);
|
||
--ink-soft: oklch(41% 0.008 70);
|
||
--rule: oklch(86% 0.008 75);
|
||
--accent: oklch(48% 0.18 28); /* deep red ribbon, single accent */
|
||
--neg: oklch(48% 0.16 28);
|
||
--pos: oklch(45% 0.10 165);
|
||
--serif: 'Source Serif 4', 'Iowan Old Style', 'Charter', Georgia, serif;
|
||
--sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
--mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html, body {
|
||
height: 100%; background: var(--ink); color: var(--ink);
|
||
font-family: var(--sans); font-size: 14px; -webkit-font-smoothing: antialiased;
|
||
overflow: hidden;
|
||
}
|
||
/* ──────────────────────────────────────────────────────────────────────────
|
||
Deck framework — horizontal swipe, slide counter, keyboard nav, print
|
||
────────────────────────────────────────────────────────────────────────── */
|
||
.deck {
|
||
width: 100vw; height: 100vh; overflow: hidden; position: relative;
|
||
background: oklch(17% 0.012 70);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.demo-banner {
|
||
flex: 0 0 auto;
|
||
z-index: 50;
|
||
padding: 9px 18px;
|
||
font-size: 11px;
|
||
line-height: 1.35;
|
||
letter-spacing: 0.02em;
|
||
text-align: center;
|
||
font-family: var(--sans);
|
||
color: oklch(90% 0.02 85);
|
||
background: oklch(22% 0.04 55);
|
||
border-bottom: 1px solid oklch(35% 0.03 70);
|
||
}
|
||
.demo-banner strong { color: oklch(96% 0.03 85); font-weight: 600; }
|
||
.demo-pill {
|
||
display: inline-flex;
|
||
width: max-content;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-top: 18px;
|
||
padding: 8px 11px;
|
||
border: 1px solid color-mix(in oklch, var(--accent) 45%, var(--rule));
|
||
background: color-mix(in oklch, var(--accent) 8%, var(--paper));
|
||
color: var(--accent);
|
||
font-family: var(--mono);
|
||
font-size: 10.5px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
.demo-pill::before {
|
||
content: "";
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
}
|
||
.stage {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
width: 100%;
|
||
display: flex; transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
|
||
will-change: transform;
|
||
}
|
||
.slide {
|
||
/* 100% of the stage, not 100vh: the demo banner above the stage
|
||
was pushing every slide down and clipping the footer */
|
||
min-width: 100vw; height: 100%;
|
||
background: var(--paper);
|
||
display: grid; place-items: stretch;
|
||
position: relative; overflow: hidden;
|
||
}
|
||
.slide-inner {
|
||
width: min(1320px, 92vw);
|
||
/* size against the slide (banner already subtracted), not the viewport */
|
||
height: min(820px, calc(100% - 36px));
|
||
margin: auto;
|
||
padding: clamp(30px, 4.6vh, 56px) clamp(36px, 5vw, 64px) clamp(24px, 3.8vh, 48px);
|
||
display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
|
||
background: var(--paper);
|
||
box-shadow: 0 30px 80px -30px rgba(0,0,0,0.35), 0 6px 18px -8px rgba(0,0,0,0.25);
|
||
position: relative;
|
||
border-top: 6px solid var(--ink);
|
||
}
|
||
/* Magazine masthead */
|
||
.mast {
|
||
display: flex; align-items: baseline; justify-content: space-between;
|
||
padding-bottom: 14px; border-bottom: 1px solid var(--rule);
|
||
font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
|
||
color: var(--ink-mid);
|
||
}
|
||
.mast .brand {
|
||
font-family: var(--serif); font-weight: 500; font-size: 16px;
|
||
letter-spacing: 0.04em; color: var(--ink); text-transform: none;
|
||
}
|
||
.mast .brand i { color: var(--accent); font-style: normal; }
|
||
.mast .meta { display: flex; gap: 22px; }
|
||
.mast .meta span::before { content: "· "; color: var(--rule); margin-right: 6px; }
|
||
.mast .meta span:first-child::before { content: ""; margin: 0; }
|
||
|
||
/* Footer */
|
||
.foot {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
padding-top: 14px; border-top: 1px solid var(--rule);
|
||
font-family: var(--mono); font-size: 10.5px; color: var(--ink-soft);
|
||
letter-spacing: 0.02em;
|
||
}
|
||
.foot .conf {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
font-family: var(--sans); letter-spacing: 0.18em; text-transform: uppercase;
|
||
color: var(--accent); font-weight: 500; font-size: 10.5px;
|
||
}
|
||
.foot .conf::before {
|
||
content: ""; width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
|
||
}
|
||
|
||
/* Body region (per slide overrides this); overflow guard keeps dense
|
||
tables from painting over the footer when the viewport runs short */
|
||
.body { padding: clamp(14px, 2.6vh, 28px) 0 clamp(10px, 2vh, 22px); min-height: 0; overflow: hidden; }
|
||
|
||
/* ──────────────────────────────────────────────────────────────────────────
|
||
Chrome — counter, nav, print badge
|
||
────────────────────────────────────────────────────────────────────────── */
|
||
.chrome {
|
||
position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
|
||
display: flex; gap: 10px; align-items: center;
|
||
background: oklch(98% 0.005 80 / 0.94); backdrop-filter: blur(8px);
|
||
border: 1px solid oklch(80% 0.008 75); border-radius: 2px;
|
||
padding: 6px 8px; box-shadow: 0 8px 24px -10px rgba(0,0,0,0.35);
|
||
z-index: 50;
|
||
}
|
||
.chrome button {
|
||
width: 28px; height: 28px; border: 0; border-radius: 2px;
|
||
background: transparent; cursor: pointer; color: var(--ink);
|
||
display: grid; place-items: center;
|
||
}
|
||
.chrome button:hover { background: oklch(92% 0.012 78); }
|
||
.chrome .counter {
|
||
font-family: var(--mono); font-size: 11px; padding: 0 10px; color: var(--ink-mid);
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.chrome .counter .now { color: var(--ink); font-weight: 500; }
|
||
|
||
.agent-stamp {
|
||
position: fixed; top: 46px; right: 18px;
|
||
background: oklch(98% 0.005 80 / 0.94); backdrop-filter: blur(6px);
|
||
border: 1px solid oklch(80% 0.008 75); border-radius: 2px;
|
||
padding: 8px 12px;
|
||
font-family: var(--sans); font-size: 11px; color: var(--ink-mid);
|
||
display: flex; gap: 10px; align-items: center;
|
||
z-index: 50;
|
||
}
|
||
.agent-stamp b { color: var(--ink); font-weight: 600; }
|
||
.agent-stamp .dot {
|
||
width: 7px; height: 7px; border-radius: 1px; background: var(--accent);
|
||
}
|
||
|
||
/* ──────────────────────────────────────────────────────────────────────────
|
||
Typography
|
||
────────────────────────────────────────────────────────────────────────── */
|
||
.eyebrow {
|
||
font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em;
|
||
text-transform: uppercase; color: var(--accent); font-weight: 600;
|
||
}
|
||
h1.display {
|
||
font-family: var(--serif); font-weight: 400;
|
||
font-size: clamp(48px, 6.4vw, 92px); line-height: 0.94;
|
||
letter-spacing: -0.02em; color: var(--ink);
|
||
}
|
||
h1.display em { font-style: italic; color: var(--accent); }
|
||
h2.section {
|
||
font-family: var(--serif); font-weight: 500;
|
||
font-size: clamp(30px, 3.6vw, 44px); line-height: 1.04; letter-spacing: -0.012em;
|
||
color: var(--ink);
|
||
text-wrap: balance;
|
||
}
|
||
h2.section em { font-style: italic; font-weight: 400; color: var(--accent); }
|
||
h3 {
|
||
font-family: var(--serif); font-weight: 500; font-size: 22px;
|
||
line-height: 1.15; letter-spacing: -0.005em; color: var(--ink);
|
||
}
|
||
.lede {
|
||
font-family: var(--serif); font-weight: 300; font-size: 22px;
|
||
line-height: 1.42; color: var(--ink-mid); max-width: 62ch;
|
||
}
|
||
.body-text {
|
||
font-family: var(--sans); font-size: 13.5px; line-height: 1.55;
|
||
color: var(--ink-mid); max-width: 64ch;
|
||
}
|
||
.kicker {
|
||
font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em;
|
||
text-transform: uppercase; color: var(--ink-soft); font-weight: 500;
|
||
}
|
||
.num {
|
||
font-family: var(--serif); font-weight: 400;
|
||
font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
|
||
}
|
||
.mono { font-family: var(--mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
|
||
|
||
/* ──────────────────────────────────────────────────────────────────────────
|
||
Slide 1 — COVER
|
||
────────────────────────────────────────────────────────────────────────── */
|
||
.cover .body {
|
||
display: grid;
|
||
grid-template-columns: 1.3fr 1fr;
|
||
gap: 48px;
|
||
align-items: end;
|
||
padding: 24px 0 16px;
|
||
}
|
||
.cover .ribbon {
|
||
display: inline-block; background: var(--accent); color: var(--paper);
|
||
padding: 6px 14px; font-family: var(--sans); font-size: 11px;
|
||
letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
|
||
margin-bottom: 28px;
|
||
}
|
||
.cover h1.display { font-size: clamp(64px, 7.6vw, 116px); }
|
||
.cover .subhead {
|
||
font-family: var(--serif); font-style: italic; font-weight: 300;
|
||
font-size: 28px; color: var(--ink-mid); margin-top: 18px; line-height: 1.2;
|
||
}
|
||
.cover-meta {
|
||
border-left: 2px solid var(--ink); padding-left: 22px;
|
||
display: grid; gap: 18px;
|
||
}
|
||
.cover-meta .row { display: grid; gap: 4px; }
|
||
.cover-meta .row .k {
|
||
font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.2em;
|
||
text-transform: uppercase; color: var(--ink-soft);
|
||
}
|
||
.cover-meta .row .v {
|
||
font-family: var(--serif); font-size: 18px; color: var(--ink); line-height: 1.3;
|
||
}
|
||
.cover .marque {
|
||
position: absolute; right: 64px; top: 118px;
|
||
font-family: var(--serif); font-style: italic;
|
||
font-size: 11px; color: var(--ink-mid); letter-spacing: 0.04em;
|
||
transform: rotate(-2deg);
|
||
}
|
||
.cover .marque::before {
|
||
content: ""; display: block; width: 60px; height: 1px; background: var(--accent);
|
||
margin-bottom: 6px; transform: rotate(2deg);
|
||
}
|
||
|
||
/* ──────────────────────────────────────────────────────────────────────────
|
||
Slide 2 — TOC
|
||
────────────────────────────────────────────────────────────────────────── */
|
||
.toc .body {
|
||
display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start;
|
||
padding-top: 36px;
|
||
}
|
||
.toc .lede { margin-top: 18px; }
|
||
.toc ol {
|
||
list-style: none; counter-reset: toc;
|
||
border-top: 1px solid var(--rule);
|
||
}
|
||
.toc ol li {
|
||
counter-increment: toc;
|
||
display: grid; grid-template-columns: auto 1fr auto;
|
||
gap: 18px; align-items: baseline;
|
||
padding: clamp(8px, 1.4vh, 14px) 0; border-bottom: 1px solid var(--rule);
|
||
}
|
||
.toc ol li::before {
|
||
content: counter(toc, decimal-leading-zero);
|
||
font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.06em;
|
||
}
|
||
.toc ol li .t { font-family: var(--serif); font-size: 20px; color: var(--ink); }
|
||
.toc ol li .pg { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
|
||
.toc ol li .sub {
|
||
grid-column: 2 / -1;
|
||
font-family: var(--sans); font-size: 12px; color: var(--ink-soft);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* ──────────────────────────────────────────────────────────────────────────
|
||
Slide 3 — MARKET CONTEXT
|
||
────────────────────────────────────────────────────────────────────────── */
|
||
.market .body {
|
||
display: grid;
|
||
grid-template-rows: auto auto minmax(0, 1fr);
|
||
gap: 16px;
|
||
padding-top: 20px;
|
||
}
|
||
.kpi-grid {
|
||
display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
|
||
border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
|
||
}
|
||
.kpi {
|
||
padding: 12px 14px; display: grid; gap: 3px;
|
||
border-right: 1px solid var(--rule);
|
||
}
|
||
.kpi:last-child { border-right: 0; }
|
||
.kpi .k {
|
||
font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.16em;
|
||
text-transform: uppercase; color: var(--ink-soft);
|
||
}
|
||
.kpi .v {
|
||
font-family: var(--serif); font-size: 31px; line-height: 1; color: var(--ink);
|
||
margin-top: 2px;
|
||
}
|
||
.kpi .v small { font-size: 16px; color: var(--ink-mid); margin-left: 2px; }
|
||
.kpi .delta {
|
||
font-family: var(--mono); font-size: 10.5px; margin-top: 4px; letter-spacing: 0.02em;
|
||
}
|
||
.kpi .delta.up { color: var(--accent); }
|
||
.kpi .delta.down { color: var(--neg); }
|
||
.market-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px; min-height: 0; }
|
||
.chartbox {
|
||
border: 1px solid var(--rule); padding: 14px 16px 12px; display: grid; gap: 6px;
|
||
background: var(--paper-warm);
|
||
}
|
||
.chartbox .title { display: flex; justify-content: space-between; align-items: baseline; }
|
||
.chartbox .title h3 { font-size: 16px; }
|
||
.chartbox .title .src { font-family: var(--mono); font-size: 10px; color: var(--ink-soft); }
|
||
.chart svg { width: 100%; height: 150px; display: block; }
|
||
.legend {
|
||
display: flex; gap: 16px; font-family: var(--sans); font-size: 11px;
|
||
color: var(--ink-mid);
|
||
}
|
||
.legend .sw { display: inline-flex; align-items: center; gap: 6px; }
|
||
.legend .sw i { width: 10px; height: 10px; display: inline-block; border-radius: 2px; font-style: normal; }
|
||
.pull {
|
||
border-left: 3px solid var(--accent); padding: 4px 0 4px 16px;
|
||
font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.32;
|
||
}
|
||
.market .body-text { font-size: 12.8px; line-height: 1.48; }
|
||
.market .kicker { font-size: 9.5px; letter-spacing: 0.12em; }
|
||
.market .num { line-height: 1.05; }
|
||
|
||
/* ──────────────────────────────────────────────────────────────────────────
|
||
Tables
|
||
────────────────────────────────────────────────────────────────────────── */
|
||
table.fin {
|
||
width: 100%; border-collapse: collapse;
|
||
font-family: var(--sans); font-size: 12px;
|
||
}
|
||
table.fin th {
|
||
font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.14em;
|
||
text-transform: uppercase; color: var(--ink-soft); font-weight: 600;
|
||
text-align: right; padding: clamp(6px, 1.1vh, 10px) 8px; border-bottom: 1px solid var(--ink);
|
||
}
|
||
table.fin th:first-child, table.fin td:first-child { text-align: left; }
|
||
table.fin td {
|
||
font-family: var(--mono); font-size: 12px; color: var(--ink);
|
||
padding: clamp(5px, 1vh, 10px) 8px; text-align: right; border-bottom: 1px solid var(--rule);
|
||
font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
|
||
white-space: nowrap;
|
||
}
|
||
table.fin td:first-child { white-space: normal; }
|
||
table.fin td:first-child {
|
||
font-family: var(--serif); font-size: 13.5px; color: var(--ink); font-weight: 400;
|
||
}
|
||
table.fin tr.target td {
|
||
background: oklch(96% 0.04 78); font-weight: 500;
|
||
}
|
||
table.fin tr.target td:first-child::before {
|
||
content: "▸ "; color: var(--accent); font-weight: 700;
|
||
}
|
||
table.fin tr.summary td {
|
||
border-top: 1px solid var(--ink); border-bottom: 0;
|
||
color: var(--ink-mid); font-style: italic;
|
||
}
|
||
table.fin tr.summary td:first-child { font-style: italic; color: var(--ink-mid); }
|
||
|
||
/* ──────────────────────────────────────────────────────────────────────────
|
||
Slide 4 — TRADING COMPS
|
||
────────────────────────────────────────────────────────────────────────── */
|
||
.comps .body { display: grid; grid-template-columns: 1fr 2.4fr; gap: 36px; padding-top: 28px; }
|
||
.col-narrative h2 { margin-bottom: 14px; }
|
||
.col-narrative .body-text { margin-top: 14px; }
|
||
.col-narrative .criteria { margin-top: 22px; display: grid; gap: 8px; }
|
||
.col-narrative .criteria .t { font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
|
||
.col-narrative .criteria ul { list-style: none; display: grid; gap: 6px; }
|
||
.col-narrative .criteria li {
|
||
font-family: var(--sans); font-size: 12px; color: var(--ink); line-height: 1.4;
|
||
padding-left: 14px; position: relative;
|
||
}
|
||
.col-narrative .criteria li::before {
|
||
content: "■"; color: var(--accent); position: absolute; left: 0; font-size: 9px; top: 4px;
|
||
}
|
||
|
||
/* ──────────────────────────────────────────────────────────────────────────
|
||
Slide 5 — PRECEDENT TRANSACTIONS
|
||
────────────────────────────────────────────────────────────────────────── */
|
||
.precedents .body { display: grid; grid-template-rows: auto 1fr; gap: 22px; padding-top: 28px; }
|
||
|
||
/* ──────────────────────────────────────────────────────────────────────────
|
||
Slide 6 — FOOTBALL FIELD
|
||
────────────────────────────────────────────────────────────────────────── */
|
||
.football .body { display: grid; grid-template-columns: 1fr 1.6fr; gap: 36px; padding-top: 28px; }
|
||
.ff-chart { display: grid; gap: 14px; padding: 12px 0; }
|
||
.ff-row { display: grid; grid-template-columns: 200px 1fr 90px; gap: 16px; align-items: center; }
|
||
.ff-row .label {
|
||
font-family: var(--serif); font-size: 14px; color: var(--ink); line-height: 1.2;
|
||
}
|
||
.ff-row .label small {
|
||
display: block; font-family: var(--sans); font-size: 10.5px;
|
||
color: var(--ink-soft); letter-spacing: 0.06em; margin-top: 2px;
|
||
}
|
||
.ff-track {
|
||
height: 22px; background: oklch(94% 0.008 75); position: relative;
|
||
}
|
||
.ff-bar {
|
||
position: absolute; top: 0; bottom: 0; background: var(--ink);
|
||
}
|
||
.ff-bar.alt { background: var(--accent); }
|
||
.ff-bar.alt2 { background: oklch(56% 0.008 70); }
|
||
.ff-tick {
|
||
position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--accent);
|
||
}
|
||
.ff-row:first-child .ff-tick::after {
|
||
content: "demo scale"; position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
|
||
font-family: var(--mono); font-size: 10px; color: var(--accent); white-space: nowrap;
|
||
}
|
||
.ff-row .range {
|
||
font-family: var(--mono); font-size: 11.5px; color: var(--ink); text-align: right;
|
||
}
|
||
.ff-axis {
|
||
display: grid; grid-template-columns: 200px 1fr 90px; gap: 16px;
|
||
border-top: 1px solid var(--rule); padding-top: 6px; margin-top: 4px;
|
||
}
|
||
.ff-axis .ticks {
|
||
display: flex; justify-content: space-between;
|
||
font-family: var(--mono); font-size: 10px; color: var(--ink-soft);
|
||
}
|
||
|
||
/* ──────────────────────────────────────────────────────────────────────────
|
||
Slide 7 — DCF + SENSITIVITY
|
||
────────────────────────────────────────────────────────────────────────── */
|
||
.dcf .body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; padding-top: 28px; }
|
||
.dcf table.sens {
|
||
width: 100%; border-collapse: collapse;
|
||
font-family: var(--mono); font-size: 11.5px;
|
||
}
|
||
.dcf table.sens th, .dcf table.sens td {
|
||
border: 1px solid var(--rule); padding: 8px 6px; text-align: center;
|
||
font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
|
||
}
|
||
.dcf table.sens th {
|
||
background: var(--paper-warm); font-weight: 600; color: var(--ink-mid);
|
||
font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.06em;
|
||
}
|
||
.dcf table.sens td.h { color: var(--accent); font-weight: 600; }
|
||
.dcf table.sens td.center { background: oklch(96% 0.04 78); font-weight: 600; color: var(--ink); }
|
||
.dcf-asm { display: grid; gap: clamp(4px, 0.9vh, 10px); }
|
||
.dcf-asm .row {
|
||
display: grid; grid-template-columns: 1fr auto;
|
||
border-bottom: 1px dashed var(--rule); padding: clamp(4px, 0.8vh, 8px) 0;
|
||
align-items: baseline;
|
||
}
|
||
.dcf-asm .row .k {
|
||
font-family: var(--sans); font-size: 12px; color: var(--ink-mid);
|
||
}
|
||
.dcf-asm .row .v {
|
||
font-family: var(--mono); font-size: 13px; color: var(--ink); font-weight: 500;
|
||
}
|
||
|
||
/* ──────────────────────────────────────────────────────────────────────────
|
||
Slide 8 — STRATEGIC ALTERNATIVES MATRIX
|
||
────────────────────────────────────────────────────────────────────────── */
|
||
.alts .body { display: grid; grid-template-rows: auto 1fr; gap: 18px; padding-top: 28px; }
|
||
.alts-grid {
|
||
display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
|
||
gap: 14px;
|
||
}
|
||
.alt {
|
||
border: 1px solid var(--rule); padding: clamp(12px, 2vh, 22px) clamp(14px, 1.8vw, 24px);
|
||
display: grid; grid-template-rows: auto auto auto 1fr; gap: clamp(6px, 1.1vh, 12px);
|
||
background: var(--paper-warm);
|
||
min-height: 0; overflow: hidden;
|
||
}
|
||
.alt.recommended {
|
||
background: var(--ink); color: var(--paper);
|
||
border-color: var(--ink);
|
||
}
|
||
.alt .badge {
|
||
font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
|
||
color: var(--ink-soft); display: flex; gap: 8px; align-items: center;
|
||
}
|
||
.alt.recommended .badge { color: oklch(82% 0.025 78); }
|
||
.alt h3 { font-size: 24px; }
|
||
.alt.recommended h3 { color: var(--paper); }
|
||
.alt .stat { display: flex; gap: 24px; align-items: baseline; }
|
||
.alt .stat .v { font-family: var(--serif); font-size: 28px; }
|
||
.alt .stat .k { font-family: var(--sans); font-size: 11px; color: var(--ink-soft); letter-spacing: 0.1em; text-transform: uppercase; }
|
||
.alt.recommended .stat .v { color: var(--paper); }
|
||
.alt.recommended .stat .k { color: oklch(72% 0.012 75); }
|
||
.alt .pc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
|
||
.alt .pc .col h4 {
|
||
font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.16em;
|
||
text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px;
|
||
}
|
||
.alt.recommended .pc .col h4 { color: oklch(72% 0.012 75); }
|
||
.alt .pc ul { list-style: none; display: grid; gap: 4px; }
|
||
.alt .pc li {
|
||
font-family: var(--sans); font-size: 11.5px; color: var(--ink); line-height: 1.4;
|
||
padding-left: 12px; position: relative;
|
||
}
|
||
.alt.recommended .pc li { color: var(--paper); }
|
||
.alt .pc li::before {
|
||
content: "+"; color: var(--pos); position: absolute; left: 0; font-weight: 600;
|
||
}
|
||
.alt .pc .col:nth-child(2) li::before { content: "−"; color: var(--neg); }
|
||
|
||
/* ──────────────────────────────────────────────────────────────────────────
|
||
Slide 9 — RECOMMENDATION
|
||
────────────────────────────────────────────────────────────────────────── */
|
||
.reco .body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; padding-top: 28px; }
|
||
.reco .pull {
|
||
font-size: 28px; font-family: var(--serif); font-weight: 400;
|
||
line-height: 1.25; color: var(--ink); border-left-width: 4px;
|
||
}
|
||
.reco .pull em { color: var(--accent); font-style: italic; }
|
||
.reco .next { display: grid; gap: 14px; margin-top: 22px; }
|
||
.reco .next .step {
|
||
display: grid; grid-template-columns: auto 1fr auto;
|
||
gap: 18px; align-items: baseline;
|
||
padding: clamp(8px, 1.4vh, 14px) 0; border-bottom: 1px solid var(--rule);
|
||
}
|
||
.reco .next .step .n {
|
||
font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.06em;
|
||
}
|
||
.reco .next .step .t { font-family: var(--serif); font-size: 17px; color: var(--ink); }
|
||
.reco .next .step .when { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
|
||
.timeline { padding: 14px 0; }
|
||
.timeline svg { width: 100%; height: 200px; display: block; }
|
||
|
||
/* ──────────────────────────────────────────────────────────────────────────
|
||
Slide 10 — DISCLAIMER / APPENDIX
|
||
────────────────────────────────────────────────────────────────────────── */
|
||
.disc .body { display: grid; gap: 22px; padding-top: 28px; }
|
||
.disc .grid {
|
||
display: grid; grid-template-columns: 2fr 1fr; gap: 56px;
|
||
}
|
||
.disc .body-text { font-size: 12.5px; max-width: none; line-height: 1.65; }
|
||
.disc .body-text p + p { margin-top: 10px; }
|
||
.disc h3 { margin-bottom: 8px; }
|
||
.disc .stamp {
|
||
border: 1px solid var(--ink); padding: 18px;
|
||
background: var(--paper-warm);
|
||
display: grid; gap: 10px;
|
||
}
|
||
.disc .stamp .lab { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
|
||
.disc .stamp .who { font-family: var(--serif); font-size: 18px; color: var(--ink); }
|
||
.disc .stamp .det { font-family: var(--sans); font-size: 12px; color: var(--ink-mid); }
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.stage { transition: none; }
|
||
}
|
||
|
||
@media print {
|
||
html, body, .deck { height: auto; overflow: visible; background: white; }
|
||
.stage { display: block; transform: none !important; transition: none; }
|
||
.slide { page-break-after: always; height: 100vh; }
|
||
.chrome, .agent-stamp, .demo-banner { display: none; }
|
||
.slide-inner { box-shadow: none; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="agent-stamp">
|
||
<span class="dot"></span>
|
||
Generated with <b>Open Design</b> · plugin: <b>ib-pitch-book</b>
|
||
</div>
|
||
|
||
<div class="deck" id="deck">
|
||
<div class="demo-banner" role="note" aria-label="Sample deck disclaimer">
|
||
<strong>Open Design sample deck.</strong> A Series B fundraising-pitch template: headline OSS figures follow the project README (60K+ stars · 300+ contributors · 217+ plugins); round terms, ARR, and chart values marked demo are illustrative.
|
||
</div>
|
||
<div class="stage" id="stage">
|
||
|
||
<!-- ─────────────────────────────────────────────────────────────────────────
|
||
SLIDE 1 — COVER
|
||
─────────────────────────────────────────────────────────────────────────── -->
|
||
<section class="slide cover">
|
||
<div class="slide-inner">
|
||
<header class="mast">
|
||
<div class="brand">Open <i>·</i> Design — Series B Materials</div>
|
||
<div class="meta"><span>Apache-2.0</span><span>Runs Locally</span><span>BYOK</span></div>
|
||
</header>
|
||
<div class="body">
|
||
<div>
|
||
<span class="ribbon">Growth-Equity Fundraising — Discussion Materials</span>
|
||
<h1 class="display">Open <em>Design</em></h1>
|
||
<div class="subhead">The open-source, agent-native design platform — raising a Series B to build the enterprise and cloud layer atop a 60K+-star open core.</div>
|
||
<div class="demo-pill">Sample deck · round terms and growth curves are demo data</div>
|
||
</div>
|
||
<div class="cover-meta">
|
||
<div class="row"><span class="k">The raise</span><span class="v">$28M Series B, led by Vantage Peak Capital, at a $180M pre-money valuation</span></div>
|
||
<div class="row"><span class="k">The moat</span><span class="v">217+ community plugins, 21 auto-detected coding agents, Apache-2.0 — switching costs compound with every workspace</span></div>
|
||
<div class="row"><span class="k">Date</span><span class="v">July 2026</span></div>
|
||
<div class="row"><span class="k">Headline figures</span><span class="v">60K+ GitHub Stars · 300+ Contributors · 217+ Plugins · 129 Design Systems · 21 Coding Agents</span></div>
|
||
<div class="row"><span class="k">Sample status</span><span class="v">Template deck: headline OSS metrics follow the project README; round terms, ARR, and growth curves are illustrative demo data.</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="marque">July 2026</div>
|
||
<footer class="foot">
|
||
<span class="conf">Open Design — sample deck</span>
|
||
<span>Page 1 / 10 · github.com/nexu-io/open-design</span>
|
||
</footer>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────────────────────────────────────
|
||
SLIDE 2 — TABLE OF CONTENTS
|
||
─────────────────────────────────────────────────────────────────────────── -->
|
||
<section class="slide toc">
|
||
<div class="slide-inner">
|
||
<header class="mast">
|
||
<div class="brand">Open <i>·</i> Design</div>
|
||
<div class="meta"><span>Open Design</span><span>Series B Materials</span><span>02 / 10</span></div>
|
||
</header>
|
||
<div class="body">
|
||
<div>
|
||
<span class="eyebrow">Contents</span>
|
||
<h2 class="section">The case for investing, <em>argued</em> in eight chapters</h2>
|
||
<p class="lede">From open-source traction to the enterprise layer we're building next — the full growth-equity case for Open Design's Series B.</p>
|
||
</div>
|
||
<ol>
|
||
<li><span class="t">Market pain</span><span class="pg">p.03</span><span class="sub">Enterprise AI design tools are closed, expensive, and lock in your data</span></li>
|
||
<li><span class="t">The solution</span><span class="pg">p.04</span><span class="sub">21+ coding agents, BYOK, zero lock-in — the open alternative</span></li>
|
||
<li><span class="t">Traction</span><span class="pg">p.05</span><span class="sub">60K+ stars, 300+ contributors, 217+ plugins — and paying pilots</span></li>
|
||
<li><span class="t">The wedge</span><span class="pg">p.06</span><span class="sub">Installs, plugins, and design systems compound into one flywheel</span></li>
|
||
<li><span class="t">Unit economics</span><span class="pg">p.07</span><span class="sub">$500 → ~$73 per seat per month — the BYOK economics we underwrite</span></li>
|
||
<li><span class="t">The moat</span><span class="pg">p.08</span><span class="sub">Four ways to build AI design tools, one compounds faster</span></li>
|
||
<li><span class="t">The ask</span><span class="pg">p.09</span><span class="sub">$28M Series B to build the enterprise and cloud layer</span></li>
|
||
<li><span class="t">Get in touch</span><span class="pg">p.10</span><span class="sub">Round terms, data room access, and how to reach the team</span></li>
|
||
</ol>
|
||
</div>
|
||
<footer class="foot">
|
||
<span class="conf">Open Design — sample deck</span>
|
||
<span>02 / 10 · plugin: ib-pitch-book · github.com/nexu-io/open-design</span>
|
||
</footer>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────────────────────────────────────
|
||
SLIDE 3 — MARKET CONTEXT
|
||
─────────────────────────────────────────────────────────────────────────── -->
|
||
<section class="slide market">
|
||
<div class="slide-inner">
|
||
<header class="mast">
|
||
<div class="brand">Open <i>·</i> Design</div>
|
||
<div class="meta"><span>Open Design · §1</span><span>Market Pain</span><span>03 / 10</span></div>
|
||
</header>
|
||
<div class="body">
|
||
<div>
|
||
<span class="eyebrow">Section 1 · Market pain</span>
|
||
<h2 class="section">Enterprise AI design is closed, expensive, and <em>locks up your data</em>.</h2>
|
||
</div>
|
||
<div class="kpi-grid">
|
||
<div class="kpi"><span class="k">Cloud AI design seat</span><span class="v num">$500<small>/mo</small></span><span class="delta down">no BYOK, no self-host</span></div>
|
||
<div class="kpi"><span class="k">Enterprise design tool spend</span><span class="v num">$9.4<small>B</small></span><span class="delta up">+21% YoY</span></div>
|
||
<div class="kpi"><span class="k">Teams citing data lock-in</span><span class="v num">61<small>%</small></span><span class="delta down">as a purchase blocker</span></div>
|
||
<div class="kpi"><span class="k">Model lock-in</span><span class="v num">1<small> agent</small></span><span class="delta down">no agent choice</span></div>
|
||
<div class="kpi"><span class="k">Open Design cost</span><span class="v num">~$73<small>/mo</small></span><span class="delta up">−80%+ per seat</span></div>
|
||
</div>
|
||
<div class="market-cols">
|
||
<div class="chartbox">
|
||
<div class="title">
|
||
<h3>Open Design installs — cumulative growth (demo curve)</h3>
|
||
<div class="src">Shape illustrative · headline: 60K+ stars</div>
|
||
</div>
|
||
<div class="chart">
|
||
<svg viewBox="0 0 600 180" preserveAspectRatio="none">
|
||
<g stroke="oklch(86% 0.008 75)" stroke-width="1">
|
||
<line x1="0" y1="40" x2="600" y2="40"/>
|
||
<line x1="0" y1="80" x2="600" y2="80"/>
|
||
<line x1="0" y1="120" x2="600" y2="120"/>
|
||
<line x1="0" y1="160" x2="600" y2="160"/>
|
||
</g>
|
||
<g font-family="ui-monospace, SF Mono, Menlo, monospace" font-size="9" fill="oklch(50% 0.008 70)">
|
||
<text x="2" y="38">60K</text>
|
||
<text x="2" y="78">40K</text>
|
||
<text x="2" y="118">20K</text>
|
||
<text x="2" y="158">0</text>
|
||
</g>
|
||
<path d="M 0 130 L 50 122 L 100 138 L 150 124 L 200 110 L 250 96 L 300 100 L 350 88 L 400 76 L 450 82 L 500 70 L 560 62 L 600 58 L 600 180 L 0 180 Z" fill="oklch(48% 0.18 28)" fill-opacity="0.07"/>
|
||
<path d="M 0 130 L 50 122 L 100 138 L 150 124 L 200 110 L 250 96 L 300 100 L 350 88 L 400 76 L 450 82 L 500 70 L 560 62 L 600 58" fill="none" stroke="oklch(48% 0.18 28)" stroke-width="2"/>
|
||
<line x1="0" y1="100" x2="600" y2="100" stroke="oklch(38% 0.010 70)" stroke-dasharray="4 4" stroke-width="1"/>
|
||
<text x="540" y="96" font-family="system-ui, -apple-system, Segoe UI, sans-serif" font-size="10" fill="oklch(38% 0.010 70)">30K mark</text>
|
||
</svg>
|
||
</div>
|
||
<div class="legend">
|
||
<span class="sw"><i style="background:oklch(48% 0.18 28)"></i> Cumulative installs (demo)</span>
|
||
<span class="sw"><i style="background:oklch(38% 0.010 70)"></i> 30K reference line</span>
|
||
</div>
|
||
</div>
|
||
<div style="display:grid;gap:18px;align-content:start;">
|
||
<div class="pull">"Every enterprise design team we talk to says the same thing: the cloud AI design tools that finally work are the ones they're least allowed to use."</div>
|
||
<p class="body-text">Three constraints define the market we're selling into. (i) Cloud AI design platforms are locked to one model — no agent choice, no self-hosting, no BYOK — which is a hard no for regulated buyers. (ii) Design happens on the desktop: local files, Figma exports, and code repos need an agent with full terminal power, not a cloud sandbox that can't see them. (iii) The coding agents buyers already pay for — Claude Code, Codex, Cursor — sit unused for design because nothing wires them into a complete workflow. Open Design is the open alternative built for exactly that gap.</p>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid var(--rule);padding-top:12px;">
|
||
<div><div class="kicker">License</div><div class="num" style="font-size:22px;">Apache-2.0</div></div>
|
||
<div><div class="kicker">Where it runs</div><div class="num" style="font-size:22px;">Locally</div></div>
|
||
<div><div class="kicker">Keys</div><div class="num" style="font-size:22px;">BYOK</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<footer class="foot">
|
||
<span class="conf">Open Design — sample deck</span>
|
||
<span>03 / 10 · market sizing illustrative · headline figures from README</span>
|
||
</footer>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────────────────────────────────────
|
||
SLIDE 4 — TRADING COMPARABLES
|
||
─────────────────────────────────────────────────────────────────────────── -->
|
||
<section class="slide comps">
|
||
<div class="slide-inner">
|
||
<header class="mast">
|
||
<div class="brand">Open <i>·</i> Design</div>
|
||
<div class="meta"><span>Open Design · §2</span><span>The Solution</span><span>04 / 10</span></div>
|
||
</header>
|
||
<div class="body">
|
||
<div class="col-narrative">
|
||
<span class="eyebrow">Section 2 · The solution</span>
|
||
<h2 class="section">21+ coding agents, <em>zero</em> config.</h2>
|
||
<p class="body-text">Open Design doesn't rebuild agents — it plugs in the ones already on your machine. Installed CLIs are <strong>auto-detected from PATH</strong>, and any <strong>OpenAI / Azure / Google-compatible endpoint</strong> connects through BYOK. The agent gets full terminal power: local files, Figma exports, and code repos are directly readable. This is the product wedge the raise is built to scale.</p>
|
||
<div class="criteria">
|
||
<div class="t">How agents connect</div>
|
||
<ul>
|
||
<li>Auto-detection of installed CLIs on PATH — no setup screens</li>
|
||
<li>BYOK: Anthropic / OpenAI / Azure / Google + 14 media providers</li>
|
||
<li>Full terminal execution — not a cloud sandbox</li>
|
||
<li>Same workflow surface for every agent: prototypes, slides, video</li>
|
||
<li>Apache-2.0: fork, self-host, commercial use all allowed</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<table class="fin">
|
||
<thead>
|
||
<tr>
|
||
<th>Agent</th><th>Detection</th><th>Keys</th><th>Prototypes</th><th>Slides</th><th>Dashboards</th><th>Images</th><th>HTML Video</th><th>Config</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="target"><td>Claude Code</td><td>PATH</td><td>BYOK</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>zero</td></tr>
|
||
<tr><td>Codex CLI</td><td>PATH</td><td>BYOK</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>zero</td></tr>
|
||
<tr><td>Cursor Agent</td><td>PATH</td><td>BYOK</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>zero</td></tr>
|
||
<tr><td>OpenClaw</td><td>PATH</td><td>BYOK</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>zero</td></tr>
|
||
<tr><td>Hermes Agent</td><td>PATH</td><td>BYOK</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>zero</td></tr>
|
||
<tr><td>Deepseek TUI</td><td>PATH</td><td>BYOK</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>zero</td></tr>
|
||
<tr><td>Kimi</td><td>PATH</td><td>BYOK</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>zero</td></tr>
|
||
<tr><td>Qoder</td><td>PATH</td><td>BYOK</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>zero</td></tr>
|
||
<tr><td>Copilot CLI</td><td>PATH</td><td>BYOK</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>zero</td></tr>
|
||
<tr><td>Gemini CLI</td><td>PATH</td><td>BYOK</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>zero</td></tr>
|
||
<tr><td>Kiro CLI</td><td>PATH</td><td>BYOK</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>zero</td></tr>
|
||
<tr><td>Mistral Vibe</td><td>PATH</td><td>BYOK</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>zero</td></tr>
|
||
<tr class="summary"><td>…and more — 21 agents in total</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td></tr>
|
||
<tr class="summary"><td>Any compatible endpoint via BYOK</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<footer class="foot">
|
||
<span class="conf">Open Design — sample deck</span>
|
||
<span>04 / 10 · 21 coding agents · auto-detected from PATH</span>
|
||
</footer>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────────────────────────────────────
|
||
SLIDE 5 — PRECEDENT TRANSACTIONS
|
||
─────────────────────────────────────────────────────────────────────────── -->
|
||
<section class="slide precedents">
|
||
<div class="slide-inner">
|
||
<header class="mast">
|
||
<div class="brand">Open <i>·</i> Design</div>
|
||
<div class="meta"><span>Open Design · §3</span><span>Traction</span><span>05 / 10</span></div>
|
||
</header>
|
||
<div class="body">
|
||
<div>
|
||
<span class="eyebrow">Section 3 · Traction</span>
|
||
<h2 class="section">Six artifact families, <em>already earning</em> their keep.</h2>
|
||
<p class="body-text" style="margin-top:10px;">The agent reads full context and produces real runnable files — previewed and edited in a sandbox, exported to engineering, or turned straight into a marketing video with HyperFrames. Every output family below is already in active use across our design-partner pilots, the proof point behind this raise.</p>
|
||
</div>
|
||
<table class="fin">
|
||
<thead>
|
||
<tr>
|
||
<th>Output</th><th>What it is</th><th>Typical use</th><th>Format</th><th>Sandbox preview</th><th>Editable</th><th>Git-diffable</th><th>Handoff</th><th>Video-ready</th><th>Plugins</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>Prototype</td><td>High-fidelity mobile & web prototypes</td><td>Product design</td><td>HTML/CSS/JS</td><td>✓</td><td>✓</td><td>✓</td><td>To engineering</td><td>via HyperFrames</td><td>✓</td></tr>
|
||
<tr><td>Live Artifact</td><td>Interactive dashboards & live briefs</td><td>Ops & reporting</td><td>HTML + data</td><td>✓</td><td>✓</td><td>✓</td><td>Share as page</td><td>via HyperFrames</td><td>✓</td></tr>
|
||
<tr><td>Slides</td><td>Creative decks & research reports</td><td>Storytelling</td><td>HTML deck</td><td>✓</td><td>✓</td><td>✓</td><td>Print / PDF</td><td>via HyperFrames</td><td>✓</td></tr>
|
||
<tr><td>Image</td><td>Posters, illustrations, product mockups</td><td>Marketing</td><td>PNG / SVG</td><td>✓</td><td>✓</td><td>✓</td><td>Asset export</td><td>as footage</td><td>✓</td></tr>
|
||
<tr class="target"><td>HyperFrames</td><td>HTML-to-MP4 marketing shorts & demos</td><td>Launch video</td><td>HTML → MP4</td><td>✓</td><td>✓</td><td>✓</td><td>MP4 render</td><td>—</td><td>✓</td></tr>
|
||
<tr><td>Video</td><td>Cinematic generative footage</td><td>Brand film</td><td>MP4</td><td>✓</td><td>—</td><td>—</td><td>MP4 render</td><td>—</td><td>✓</td></tr>
|
||
<tr class="summary"><td>One workflow</td><td colspan="2">idea → direction → artifact</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>217+</td></tr>
|
||
<tr class="summary"><td>One memory</td><td colspan="2">every choice feeds the next run</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>129 DS</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<footer class="foot">
|
||
<span class="conf">Open Design — sample deck</span>
|
||
<span>05 / 10 · six artifact families in active pilot use · 217+ plugins</span>
|
||
</footer>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────────────────────────────────────
|
||
SLIDE 6 — FOOTBALL FIELD
|
||
─────────────────────────────────────────────────────────────────────────── -->
|
||
<section class="slide football">
|
||
<div class="slide-inner">
|
||
<header class="mast">
|
||
<div class="brand">Open <i>·</i> Design</div>
|
||
<div class="meta"><span>Open Design · §4</span><span>The Wedge</span><span>06 / 10</span></div>
|
||
</header>
|
||
<div class="body">
|
||
<div>
|
||
<span class="eyebrow">Section 4 · The wedge</span>
|
||
<h2 class="section">A flywheel that <em>compounds</em>.</h2>
|
||
<p class="body-text" style="margin-top:14px;">Six dimensions of the Open Design footprint, anchored on <b>60K+ GitHub stars</b> under Apache-2.0. Each dimension reinforces the next: more installs draw more plugin authors, more plugins draw more design systems, and more design systems raise the switching cost for every workspace that adopts one. Bars indicate relative ecosystem scale (demo); the figures on the right are the headline numbers from the project README.</p>
|
||
<div class="pull" style="margin-top:18px;">"This isn't a feature moat, it's a compounding one — every workspace that plugs in makes the next one cheaper to win."</div>
|
||
</div>
|
||
<div>
|
||
<div class="ff-chart">
|
||
<div class="ff-row">
|
||
<div class="label">GitHub Stars<small>Apache-2.0 open source</small></div>
|
||
<div class="ff-track"><div class="ff-bar" style="left:18%;width:32%;"></div><div class="ff-tick" style="left:24%;"></div></div>
|
||
<div class="range">60K+</div>
|
||
</div>
|
||
<div class="ff-row">
|
||
<div class="label">Contributors<small>community-built</small></div>
|
||
<div class="ff-track"><div class="ff-bar" style="left:24%;width:30%;"></div><div class="ff-tick" style="left:24%;"></div></div>
|
||
<div class="range">300+</div>
|
||
</div>
|
||
<div class="ff-row">
|
||
<div class="label">Plugins<small>prototypes · slides · posters · dashboards</small></div>
|
||
<div class="ff-track"><div class="ff-bar alt" style="left:36%;width:34%;"></div><div class="ff-tick" style="left:24%;"></div></div>
|
||
<div class="range">217+</div>
|
||
</div>
|
||
<div class="ff-row">
|
||
<div class="label">Design Systems<small>GitHub / Figma / local import</small></div>
|
||
<div class="ff-track"><div class="ff-bar alt" style="left:30%;width:36%;"></div><div class="ff-tick" style="left:24%;"></div></div>
|
||
<div class="range">129</div>
|
||
</div>
|
||
<div class="ff-row">
|
||
<div class="label">Coding Agents<small>auto-detected · zero config</small></div>
|
||
<div class="ff-track"><div class="ff-bar alt2" style="left:22%;width:28%;"></div><div class="ff-tick" style="left:24%;"></div></div>
|
||
<div class="range">21</div>
|
||
</div>
|
||
<div class="ff-row">
|
||
<div class="label">Monthly cost<small>vs. cloud AI design · $500 → ~$73</small></div>
|
||
<div class="ff-track"><div class="ff-bar" style="left:14%;width:24%;background:oklch(56% 0.008 70);"></div><div class="ff-tick" style="left:24%;"></div></div>
|
||
<div class="range">−80%</div>
|
||
</div>
|
||
<div class="ff-axis">
|
||
<div></div>
|
||
<div class="ticks"><span>0%</span><span>25%</span><span>50%</span><span>75%</span><span>100%</span></div>
|
||
<div></div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:18px;border-top:1px solid var(--ink);padding-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;">
|
||
<div><div class="kicker">Stars</div><div class="num" style="font-size:22px;">60K+</div></div>
|
||
<div><div class="kicker">Plugins</div><div class="num" style="font-size:22px;">217+</div></div>
|
||
<div><div class="kicker">Cost vs. cloud</div><div class="num" style="font-size:22px;">−80%</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<footer class="foot">
|
||
<span class="conf">Open Design — sample deck</span>
|
||
<span>06 / 10 · bar widths illustrative · figures from README</span>
|
||
</footer>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────────────────────────────────────
|
||
SLIDE 7 — DCF + SENSITIVITY
|
||
─────────────────────────────────────────────────────────────────────────── -->
|
||
<section class="slide dcf">
|
||
<div class="slide-inner">
|
||
<header class="mast">
|
||
<div class="brand">Open <i>·</i> Design</div>
|
||
<div class="meta"><span>Open Design · §5</span><span>Unit Economics</span><span>07 / 10</span></div>
|
||
</header>
|
||
<div class="body">
|
||
<div>
|
||
<span class="eyebrow">Section 5 · Unit economics</span>
|
||
<h2 class="section">BYOK economics that <em>do the work</em>.</h2>
|
||
<p class="body-text" style="margin-top:14px;">With Open Design, teams bring their own keys — Anthropic, OpenAI, Azure, or Google — and pay providers directly, with no platform markup. Compared to a closed cloud AI design subscription, one pilot engineering team reported their monthly bill dropping from $500 to ~$73: over 80% less for the same design output, with zero infrastructure cost on our side to serve it.</p>
|
||
<div class="dcf-asm" style="margin-top:18px;">
|
||
<div class="row"><span class="k">Cloud AI design baseline</span><span class="v">$500 / mo</span></div>
|
||
<div class="row"><span class="k">Open Design + BYOK</span><span class="v">~$73 / mo</span></div>
|
||
<div class="row"><span class="k">Monthly cost reduction</span><span class="v">−80%+</span></div>
|
||
<div class="row"><span class="k">Platform fee</span><span class="v">$0</span></div>
|
||
<div class="row"><span class="k">Sign-up required</span><span class="v">None</span></div>
|
||
<div class="row"><span class="k">License</span><span class="v">Apache-2.0</span></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 style="margin-bottom:10px;">Illustrative monthly bill — usage × provider mix (demo grid)</h3>
|
||
<table class="sens">
|
||
<thead>
|
||
<tr>
|
||
<th colspan="2" rowspan="2"></th>
|
||
<th colspan="5">Team usage intensity</th>
|
||
</tr>
|
||
<tr>
|
||
<th>Light</th><th>Casual</th><th>Typical</th><th>Heavy</th><th>Studio</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th rowspan="5">Setup</th>
|
||
<th>Cloud seat ×1</th><td>$500</td><td>$500</td><td>$500</td><td>$500</td><td>$500</td>
|
||
</tr>
|
||
<tr><th>Cloud seat ×2</th><td>$1,000</td><td>$1,000</td><td>$1,000</td><td>$1,000</td><td>$1,000</td></tr>
|
||
<tr><th>OD + BYOK</th><td>$22</td><td>$45</td><td class="center">~$73</td><td>$110</td><td>$160</td></tr>
|
||
<tr><th>OD + local agent</th><td>$0</td><td>$0</td><td>$0</td><td>$0</td><td>$0</td></tr>
|
||
<tr><th>Savings vs. cloud</th><td>−96%</td><td>−91%</td><td>−80%+</td><td>−78%</td><td>−68%</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<p class="kicker" style="margin-top:14px;">Highlighted cell = reported case ($500 → ~$73) · other cells illustrative demo values</p>
|
||
<div style="margin-top:18px;border-top:1px solid var(--ink);padding-top:12px;">
|
||
<div class="kicker">What BYOK buys you</div>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--ink-mid);">
|
||
<span>✓ No platform markup</span>
|
||
<span>✓ Provider of your choice</span>
|
||
<span>✓ Keys stay on your machine</span>
|
||
<span>✓ 14 media providers</span>
|
||
<span>✓ Self-host allowed</span>
|
||
<span>✓ No sign-up</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<footer class="foot">
|
||
<span class="conf">Open Design — sample deck</span>
|
||
<span>07 / 10 · reported case: $500 → ~$73 / mo · grid illustrative</span>
|
||
</footer>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────────────────────────────────────
|
||
SLIDE 8 — STRATEGIC ALTERNATIVES MATRIX
|
||
─────────────────────────────────────────────────────────────────────────── -->
|
||
<section class="slide alts">
|
||
<div class="slide-inner">
|
||
<header class="mast">
|
||
<div class="brand">Open <i>·</i> Design</div>
|
||
<div class="meta"><span>Open Design · §6</span><span>The Moat</span><span>08 / 10</span></div>
|
||
</header>
|
||
<div class="body">
|
||
<div>
|
||
<span class="eyebrow">Section 6 · The moat</span>
|
||
<h2 class="section">Four ways to build AI design tools, <em>one</em> compounds faster.</h2>
|
||
</div>
|
||
<div class="alts-grid">
|
||
|
||
<div class="alt">
|
||
<div class="badge">Option A · Cloud AI design</div>
|
||
<h3>Closed-source, paid, cloud-only platforms</h3>
|
||
<div class="stat"><span class="v num">$500</span><span class="k">Indicative / month</span></div>
|
||
<div class="pc">
|
||
<div class="col"><h4>For</h4><ul>
|
||
<li>Proved an LLM can truly design</li>
|
||
<li>Polished hosted experience</li>
|
||
<li>Nothing to install</li>
|
||
</ul></div>
|
||
<div class="col"><h4>Against</h4><ul>
|
||
<li>Locked to one model — no agent choice</li>
|
||
<li>No self-hosting, no BYOK</li>
|
||
<li>Your files leave your machine</li>
|
||
</ul></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="alt recommended">
|
||
<div class="badge">Option B · Recommended</div>
|
||
<h3>Open Design — open, local, agent-driven</h3>
|
||
<div class="stat"><span class="v num">~$73</span><span class="k">Indicative / month</span></div>
|
||
<div class="pc">
|
||
<div class="col"><h4>For</h4><ul>
|
||
<li>21 coding agents, auto-detected, zero config</li>
|
||
<li>Full BYOK — over 80% lower monthly cost</li>
|
||
<li>Apache-2.0: fork, self-host, commercial use</li>
|
||
</ul></div>
|
||
<div class="col"><h4>Against</h4><ul>
|
||
<li>You bring your own keys and agents</li>
|
||
<li>Desktop-first — designed for your machine, not a hosted SaaS</li>
|
||
</ul></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="alt">
|
||
<div class="badge">Option C · Classic design tools</div>
|
||
<h3>Canvas tools without an agent workflow</h3>
|
||
<div class="stat"><span class="v num">Manual</span><span class="k">Every iteration</span></div>
|
||
<div class="pc">
|
||
<div class="col"><h4>For</h4><ul>
|
||
<li>Mature ecosystems and muscle memory</li>
|
||
<li>Precise hand control of every pixel</li>
|
||
</ul></div>
|
||
<div class="col"><h4>Against</h4><ul>
|
||
<li>No idea-to-artifact generation</li>
|
||
<li>Output isn't runnable code</li>
|
||
<li>No memory that compounds across runs</li>
|
||
</ul></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="alt">
|
||
<div class="badge">Option D · DIY agent scripts</div>
|
||
<h3>Hand-rolled prompts and one-off pipelines</h3>
|
||
<div class="stat"><span class="v num">High</span><span class="k">Maintenance cost</span></div>
|
||
<div class="pc">
|
||
<div class="col"><h4>For</h4><ul>
|
||
<li>Total flexibility</li>
|
||
<li>Uses agents you already pay for</li>
|
||
</ul></div>
|
||
<div class="col"><h4>Against</h4><ul>
|
||
<li>No design systems — token drift everywhere</li>
|
||
<li>No sandbox preview or editing surface</li>
|
||
<li>Every workflow rebuilt from scratch</li>
|
||
</ul></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<footer class="foot">
|
||
<span class="conf">Open Design — sample deck</span>
|
||
<span>08 / 10 · cost figures: reported case · others qualitative</span>
|
||
</footer>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────────────────────────────────────
|
||
SLIDE 9 — RECOMMENDATION & TIMELINE
|
||
─────────────────────────────────────────────────────────────────────────── -->
|
||
<section class="slide reco">
|
||
<div class="slide-inner">
|
||
<header class="mast">
|
||
<div class="brand">Open <i>·</i> Design</div>
|
||
<div class="meta"><span>Open Design · §7</span><span>The Ask</span><span>09 / 10</span></div>
|
||
</header>
|
||
<div class="body">
|
||
<div>
|
||
<span class="eyebrow">Section 7 · The ask</span>
|
||
<h2 class="section">$28M Series B to build the <em>enterprise & cloud layer</em>.</h2>
|
||
<p class="pull" style="margin-top:24px;">We're raising <em>$28M</em> at a <em>$180M pre-money</em> valuation to convert a 60K-star open core into a durable enterprise business — without ever taking the option to close the source away from the community that built it.</p>
|
||
<p class="body-text" style="margin-top:18px;">Prior rounds: a $4M seed (2024) and a $14M Series A (2025) funded the open-source core and the first 217+ plugins. This round funds hosted sync, enterprise SSO/audit, and a managed plugin marketplace — the paid layer enterprises ask for on top of a product they already trust.</p>
|
||
</div>
|
||
<div>
|
||
<h3>Use of proceeds</h3>
|
||
<div class="next">
|
||
<div class="step"><span class="n">01</span><span class="t">Enterprise & cloud layer — hosted sync, SSO, audit logs</span><span class="when">45%</span></div>
|
||
<div class="step"><span class="n">02</span><span class="t">Plugin marketplace & ecosystem grants — fund top community authors</span><span class="when">30%</span></div>
|
||
<div class="step"><span class="n">03</span><span class="t">Enterprise support & security — SOC 2, dedicated success team</span><span class="when">25%</span></div>
|
||
<div class="step"><span class="n">04</span><span class="t">Runway — 30 months to next milestone raise or default-alive</span><span class="when">Target</span></div>
|
||
<div class="step"><span class="n">05</span><span class="t">12-month goal — $12M ARR run-rate across enterprise pilots</span><span class="when">Milestone</span></div>
|
||
<div class="step"><span class="n">→</span><span class="t">Open core stays Apache-2.0 — the raise funds the paid layer, not a license change</span><span class="when">Commitment</span></div>
|
||
<div class="step"><span class="n">∞</span><span class="t">Every enterprise dollar reinvests in the open ecosystem it depends on</span><span class="when">Flywheel</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<footer class="foot">
|
||
<span class="conf">Open Design — sample deck</span>
|
||
<span>09 / 10 · $28M Series B · $180M pre-money · illustrative terms</span>
|
||
</footer>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────────────────────────────────────
|
||
SLIDE 10 — DISCLAIMERS / APPENDIX
|
||
─────────────────────────────────────────────────────────────────────────── -->
|
||
<section class="slide disc">
|
||
<div class="slide-inner">
|
||
<header class="mast">
|
||
<div class="brand">Open <i>·</i> Design</div>
|
||
<div class="meta"><span>Open Design · Closing</span><span>Get In Touch</span><span>10 / 10</span></div>
|
||
</header>
|
||
<div class="body">
|
||
<div>
|
||
<span class="eyebrow">Closing</span>
|
||
<h2 class="section">Back the open core, fund <em>the enterprise layer</em>.</h2>
|
||
</div>
|
||
<div class="grid">
|
||
<div>
|
||
<h3>Why now, why this round</h3>
|
||
<div class="body-text">
|
||
<p>Open Design is the open-source, local, agent-driven design platform. From idea to prototypes, web pages, slides, and HTML video — the full product-design workflow runs on the buyer's own machine, with the coding agents they already use.</p>
|
||
<p><strong>Open.</strong> Apache-2.0 from the first commit: fork it, self-host it, build a business on it. 300+ contributors have shaped the platform, and a 217+ plugin ecosystem covers prototypes, slides, posters, dashboards, and more — a distribution engine no closed competitor can replicate at this cost.</p>
|
||
<p><strong>Local.</strong> No sign-up, no upload. Local files, Figma exports, and code repos are directly readable in place, and API keys never leave the user's machine — full-stack BYOK across Anthropic, OpenAI, Azure, Google, and 14 media providers. This is why regulated enterprises can finally say yes.</p>
|
||
<p><strong>Agent-native.</strong> 21 coding agents are auto-detected from PATH with zero config, and 129 design systems keep every artifact on brand. This raise turns that adoption into a durable, recurring enterprise business.</p>
|
||
<p>This is a sample artifact: headline OSS metrics follow the project README; round terms, ARR, and cost grids marked demo are illustrative. Regenerate it with your own content using the ib-pitch-book plugin.</p>
|
||
</div>
|
||
</div>
|
||
<div style="display:grid;gap:14px;">
|
||
<div class="stamp">
|
||
<a class="lab" href="https://open-design.ai/" target="_blank" rel="noreferrer noopener" style="text-decoration:none;color:inherit;">Data room & diligence access</a>
|
||
<div class="who">Available on signed NDA</div>
|
||
<div class="det">Repo & traction: github.com/nexu-io/open-design</div>
|
||
</div>
|
||
<div class="stamp">
|
||
<div class="lab">Community & distribution</div>
|
||
<div class="det" style="font-family:var(--mono);font-size:11px;">discord.gg/mHAjSMV6gz · x.com/nexudotio · 60K+ stars · 300+ contributors</div>
|
||
</div>
|
||
<div class="stamp">
|
||
<div class="lab">Generated with</div>
|
||
<div class="det" style="font-family:var(--mono);font-size:11px;">Open Design · plugin: ib-pitch-book · Apache-2.0 · runs locally · BYOK · no sign-up</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<footer class="foot">
|
||
<span class="conf">Open Design — sample deck · End of document</span>
|
||
<span>10 / 10 · github.com/nexu-io/open-design · Apache-2.0</span>
|
||
</footer>
|
||
</div>
|
||
</section>
|
||
|
||
</div><!-- /stage -->
|
||
|
||
<div class="chrome">
|
||
<button id="prev" aria-label="Previous slide">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
|
||
</button>
|
||
<span class="counter"><span class="now" id="now">01</span> / <span id="total">10</span></span>
|
||
<button id="next" aria-label="Next slide">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||
</button>
|
||
<button id="print" aria-label="Print as PDF" title="Print / save as PDF">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9V2h12v7M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 14h12v8H6z"/></svg>
|
||
</button>
|
||
</div>
|
||
|
||
</div><!-- /deck -->
|
||
|
||
<script>
|
||
(function(){
|
||
const stage = document.getElementById('stage');
|
||
const slides = stage.querySelectorAll('.slide');
|
||
const total = slides.length;
|
||
const now = document.getElementById('now');
|
||
document.getElementById('total').textContent = String(total).padStart(2,'0');
|
||
let i = 0;
|
||
function go(n){
|
||
i = Math.max(0, Math.min(total-1, n));
|
||
stage.style.transform = `translateX(-${i*100}vw)`;
|
||
now.textContent = String(i+1).padStart(2,'0');
|
||
}
|
||
document.getElementById('prev').onclick = () => go(i-1);
|
||
document.getElementById('next').onclick = () => go(i+1);
|
||
document.getElementById('print').onclick = () => window.print();
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') { e.preventDefault(); go(i+1); }
|
||
if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); go(i-1); }
|
||
if (e.key === 'Home') go(0);
|
||
if (e.key === 'End') go(total-1);
|
||
});
|
||
let touchX = 0;
|
||
stage.addEventListener('touchstart', (e) => { touchX = e.touches[0].clientX; }, {passive:true});
|
||
stage.addEventListener('touchend', (e) => {
|
||
const dx = e.changedTouches[0].clientX - touchX;
|
||
if (Math.abs(dx) > 60) go(i + (dx < 0 ? 1 : -1));
|
||
}, {passive:true});
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|