Zakaria/open-design
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

first-commit
ci / Validate workspace (push) Has been cancelled
Details
landing-page-ci / Validate landing page (push) Has been cancelled
Details
landing-page-deploy / Deploy landing page (push) Has been cancelled
Details
github-metrics / Generate repository metrics SVG (push) Has been cancelled
Details
refresh-contributors-wall / Refresh contributors wall cache bust (push) Waiting to run
Details

Browse Source
This commit is contained in:
Zakaria
2026-05-04 14:58:14 -04:00
commit a46764fb1b
1210 changed files with 233231 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/html-ppt-taste-editorial/SKILL.md
+60
View File
@@ -0,0 +1,60 @@
---
name: html-ppt-taste-editorial
description: 16:9 HTML deck in editorial-minimalist taste. Warm cream slides, serif display + grotesque body, hairline rules, monospace meta, generous macro-whitespace, one accent. Distilled from Leonxlnx/taste-skill `minimalist-skill`.
---
# HTML PPT — Editorial Minimalism
A 16:9 deck for the briefs that hate neon: investor updates, design reviews, internal manifestos, lecture decks. Reads like a print supplement, not a SaaS landing.
## Source
Distilled from [Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill) — `skills/minimalist-skill/SKILL.md`. The deck system follows the existing project convention from `skills/html-ppt-pitch-deck/example.html` (each `.slide` is a `100vw × 100vh` section; opened directly, slides stack vertically). See `example.html` in this directory.
## Hard rules
- **Substrate:** warm off-white `#FBFBFA` / `#F7F6F3`. Foreground off-black `#1A1A19`. Never pure white or pure black.
- **Type pairing:** display in **serif** (Instrument Serif / Newsreader / Lyon), body in **grotesque** (Inter Tight / Switzer), meta in **mono** (JetBrains Mono).
- **Display scale per slide:** title `clamp(56px, 6.5vw, 96px)` italic-capable serif, line-height `1.05`, tracking `-0.025em`.
- **Hairline only:** `1px solid #EAEAEA` — borders, dividers, table cells. No drop shadows.
- **One accent color** chosen from the muted-pastel pairs (e.g. sage `#346538` on `#EDF3EC`, or red `#9F2F2D` on `#FDEBEC`). Used sparingly — eyebrow dot, chart fill, call-out chip. Never as a slide background.
- **Slide padding:** generous (`72px 96px` minimum). Title at most 14ch wide.
- **Eyebrow:** every slide opens with a mono uppercase eyebrow `letter-spacing: 0.18em` and a section number `01 / 09`.
- **Page numbers:** mono, bottom-right corner.
## Banned
- Inter (use Inter *Tight* if you must, but prefer Switzer / SF Pro). No Roboto, Open Sans.
- Heavy drop shadows. Glow. Gradient text.
- 3-equal-card feature rows. Use uneven hairline-divided columns instead.
- Emojis in text or as bullet markers — use `—` or no marker.
- Full-bleed photography on every slide. Use one or two image slides; reserve them.
- AI-cliché copy ("Elevate", "Unleash", "Seamless", "Next-Gen").
- Slide transitions noisier than fade-in.
## Required slide archetypes (10–12 total recommended)
1. **Cover** — serif title, italic mid-sentence accent, mono meta footer.
2. **Eyebrow + thesis** — single sentence of body lede on the left; mono numbered TOC on the right.
3. **Numbered manifesto** — three or four hairline-separated theses.
4. **Bento data slide** — uneven 6-col grid with hairline gaps; one stat in serif, supporting in mono.
5. **Quote / pull-out** — single sentence at large serif, attribution mono, hairline above and below.
6. **Comparison** — two columns separated by a vertical hairline; "Doesn't / Does" or "Before / After".
7. **Table or index** — `display: grid; gap: 1px` on hairline color.
8. **Chart or breakdown** — flat horizontal bar chart with mono labels, accent fill only on the latest bar.
9. **Team / colophon** — mono key-value list, no avatars.
10. **Closing** — serif final line italic; CTA as ghost button; signature in mono.
## Motion
- Static-preview fallback: keep every slide visible (already wired by the deck base). When run as a real deck, fade-in at `400ms cubic-bezier(0.16, 1, 0.3, 1)` is plenty.
- No translate, no blur, no auto-advance.
## Pre-flight
- [ ] Substrate is warm off-white; foreground is off-black; never pure black/white
- [ ] Serif used on titles, grotesque on body, mono on meta — three families, three jobs
- [ ] One accent color, used at most three times in the whole deck
- [ ] Every slide has eyebrow + section number + page number
- [ ] At least one hairline-grid table or comparison module
- [ ] No drop shadows, no gradients, no emojis, no banned fonts
skills/html-ppt-taste-editorial/example.html
+490
View File
@@ -0,0 +1,490 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Quartz · 2026 Series A Memo</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--paper: #FBFBFA;
--paper-2: #F4F3F0;
--ink: #1A1A19;
--ink-soft: #555452;
--muted: #828079;
--hairline: #E5E3DE;
--hairline-soft: #EFEDE8;
--accent: #346538;
--accent-bg: #EDF3EC;
--accent-2: #9F2F2D;
--accent-2-bg: #FDEBEC;
--display: 'Instrument Serif', 'Newsreader', Georgia, serif;
--sans: 'Inter Tight', 'Switzer', 'SF Pro Display', system-ui, sans-serif;
--mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* Deck system (matches html-ppt convention) */
.deck { position: relative; width: 100vw; }
.slide {
position: relative;
width: 100vw; height: 100vh; min-height: 720px;
padding: 72px 96px;
display: flex; flex-direction: column;
overflow: hidden;
page-break-after: always;
}
.slide + .slide { border-top: 1px solid var(--hairline); }
/* Slide chrome */
.meta-row {
position: absolute; top: 32px; left: 96px; right: 96px;
display: flex; justify-content: space-between; align-items: baseline;
font-family: var(--mono); font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.meta-row .left { display: inline-flex; align-items: center; gap: 10px; }
.meta-row .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
.meta-row .num { color: var(--ink); }
.pagenum {
position: absolute; bottom: 32px; right: 96px;
font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.footrule {
position: absolute; bottom: 28px; left: 96px; right: 96px;
border: 0; border-top: 1px solid var(--hairline);
}
.signature {
position: absolute; bottom: 32px; left: 96px;
font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
/* Display headings */
h1.cover {
font-family: var(--display);
font-size: clamp(72px, 9vw, 132px);
font-weight: 400;
line-height: 0.98;
letter-spacing: -0.028em;
margin: 0;
max-width: 16ch;
}
h1.cover em { font-style: italic; color: var(--ink-soft); }
h2.title {
font-family: var(--display);
font-size: clamp(54px, 6.5vw, 92px);
font-weight: 400;
line-height: 1.02;
letter-spacing: -0.025em;
margin: 0;
max-width: 14ch;
}
h2.title em { font-style: italic; color: var(--ink-soft); }
h3.sub {
font-family: var(--display); font-style: italic; font-weight: 400;
font-size: 32px; line-height: 1.15; letter-spacing: -0.02em;
color: var(--ink-soft); margin: 12px 0 0;
}
.lede {
font-size: 21px; line-height: 1.5; color: var(--ink-soft);
max-width: 56ch; margin: 0;
}
/* Cover slide */
.cover-slide { justify-content: center; }
.cover-slide .lede { margin-top: 28px; max-width: 50ch; }
.cover-slide .stamp {
display: inline-block;
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--accent); background: var(--accent-bg);
padding: 4px 10px; border-radius: 999px;
margin-bottom: 28px;
}
/* TOC slide */
.toc-slide { justify-content: center; }
.toc-slide .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; padding-top: 48px; }
.toc {
list-style: none; padding: 0; margin: 0;
border-top: 1px solid var(--hairline);
}
.toc li {
display: grid; grid-template-columns: 4ch 1fr 4ch;
align-items: baseline; gap: 18px;
padding: 16px 0;
border-bottom: 1px solid var(--hairline);
font-size: 17px;
}
.toc li .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); }
.toc li .pg { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); text-align: right; }
.toc li .t { font-family: var(--display); font-size: 22px; letter-spacing: -0.012em; line-height: 1.2; }
.toc li .t em { font-style: italic; color: var(--ink-soft); }
/* Manifesto slide */
.manifesto .body {
margin-top: 48px;
display: grid; grid-template-columns: 1fr;
}
.manifesto .item {
display: grid; grid-template-columns: 6ch 1fr 14ch;
gap: 32px;
padding: 22px 0;
border-top: 1px solid var(--hairline);
align-items: baseline;
}
.manifesto .item:last-child { border-bottom: 1px solid var(--hairline); }
.manifesto .item .n {
font-family: var(--display); font-size: 44px; line-height: 0.95; letter-spacing: -0.03em;
}
.manifesto .item h4 {
font-family: var(--display); font-size: 26px; letter-spacing: -0.015em; line-height: 1.2;
margin: 0 0 6px; font-weight: 400; max-width: 32ch;
}
.manifesto .item p { margin: 0; font-size: 14.5px; color: var(--ink-soft); max-width: 56ch; }
.manifesto .item .tag {
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--muted); text-align: right;
}
/* Bento data slide */
.bento-slide .grid {
margin-top: 56px;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(180px, auto);
gap: 0;
border: 1px solid var(--hairline);
background: var(--hairline);
}
.bento-slide .cell { background: var(--paper); padding: 28px 32px; }
.cell-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; display: block; }
.cell .stat { font-family: var(--display); font-size: 64px; line-height: 1; letter-spacing: -0.03em; font-weight: 400; }
.cell .stat small { font-family: var(--sans); font-size: 14px; color: var(--muted); margin-left: 6px; }
.cell h4 { font-family: var(--display); font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 400; margin: 0 0 8px; }
.cell p { font-size: 13.5px; color: var(--ink-soft); margin: 0; max-width: 32ch; line-height: 1.55; }
.span-3 { grid-column: span 3; }
.span-2 { grid-column: span 2; }
.span-4 { grid-column: span 4; }
.row-2 { grid-row: span 2; }
.delta { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; background: var(--accent-bg); color: var(--accent); margin-top: 14px; }
.delta.down { background: var(--accent-2-bg); color: var(--accent-2); }
/* Quote slide */
.quote-slide { justify-content: center; text-align: left; }
.quote-slide blockquote {
margin: 0; padding: 38px 0;
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
font-family: var(--display); font-size: clamp(40px, 4.4vw, 64px); font-weight: 400;
letter-spacing: -0.02em; line-height: 1.12; color: var(--ink);
max-width: 26ch;
}
.quote-slide blockquote em { color: var(--ink-soft); font-style: italic; }
.quote-slide cite {
display: block; margin-top: 22px;
font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
font-style: normal;
}
/* Comparison slide */
.compare-slide .columns {
margin-top: 56px;
display: grid; grid-template-columns: 1fr 1fr;
border-top: 1px solid var(--hairline);
}
.compare-slide .col { padding: 28px 0; }
.compare-slide .col + .col { border-left: 1px solid var(--hairline); padding-left: 32px; }
.compare-slide .col h5 {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--muted); margin: 0 0 22px;
}
.compare-slide .col.against h5 { color: var(--accent-2); }
.compare-slide .col.for h5 { color: var(--accent); }
.compare-slide .col p {
font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.3; letter-spacing: -0.01em;
margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--hairline);
max-width: 28ch;
}
.compare-slide .col p:last-child { border-bottom: none; }
.compare-slide .col.against p { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 1px; }
/* Table slide */
.table-slide .data {
margin-top: 56px;
display: grid;
grid-template-columns: 4ch 1.4fr 1fr 1fr 1fr 0.9fr;
gap: 1px;
background: var(--hairline);
font-size: 14px;
}
.table-slide .data > div { background: var(--paper); padding: 14px 18px; }
.table-slide .data .head {
background: var(--ink); color: var(--paper);
font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
.table-slide .data .right { text-align: right; }
.table-slide .data .num { font-family: var(--mono); }
.table-slide .data .pos { color: var(--accent); }
.table-slide .data .neg { color: var(--accent-2); }
/* Chart slide */
.chart-slide .chart {
margin-top: 56px;
display: grid;
grid-template-columns: 12ch 1fr 8ch;
gap: 18px 24px;
align-items: center;
font-size: 14px;
}
.chart-slide .chart .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.chart-slide .chart .bar {
height: 20px; background: var(--paper-2); position: relative;
border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.chart-slide .chart .bar::after {
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
width: var(--w, 0%); background: var(--ink-soft);
}
.chart-slide .chart .bar.accent::after { background: var(--accent); }
.chart-slide .chart .v { font-family: var(--mono); font-size: 13px; text-align: right; letter-spacing: 0.02em; }
/* Colophon */
.colophon-slide .grid { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.colophon-slide dl {
margin: 0; display: grid; grid-template-columns: 14ch 1fr; gap: 12px 18px;
font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em;
line-height: 1.6;
}
.colophon-slide dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; }
.colophon-slide dd { margin: 0; color: var(--ink); }
.colophon-slide dd em { color: var(--ink-soft); font-style: normal; }
.colophon-slide dl + dl { border-top: 1px solid var(--hairline); padding-top: 22px; }
/* Closing */
.closing-slide { justify-content: center; text-align: left; }
.closing-slide h2 {
font-family: var(--display); font-style: italic; font-weight: 400;
font-size: clamp(64px, 8vw, 120px); line-height: 1;
letter-spacing: -0.025em; margin: 0; max-width: 18ch;
}
.closing-slide h2 b { font-weight: 400; font-style: normal; color: var(--ink); }
.closing-slide .row { display: flex; gap: 14px; margin-top: 38px; align-items: center; }
.ghost-cta {
font-family: var(--sans); font-weight: 500; font-size: 14px;
padding: 12px 22px; border: 1px solid var(--hairline);
border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer;
transition: background 200ms var(--ease);
}
.ghost-cta.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ghost-cta:hover { background: var(--paper-2); }
.ghost-cta.solid:hover { background: #2A2A28; }
/* Print / preview */
@media print {
.slide { height: auto; min-height: 100vh; page-break-after: always; }
}
</style>
</head>
<body>
<div class="deck">
<!-- 01 · Cover -->
<section class="slide cover-slide" data-title="Cover">
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">QUARTZ · MEMO 04 · 2026</span></span><span>SERIES A · CONFIDENTIAL</span></div>
<span class="stamp">— filed 14 may 2026</span>
<h1 class="cover">A quiet workspace, <em>handed</em> to the people who write&nbsp;the&nbsp;manuals.</h1>
<h3 class="sub">Series A memo &mdash; for an audience of three.</h3>
<p class="lede" style="margin-top: 28px;">We are raising six and a half million euros to spend the next eighteen months making documentation feel like writing again. This deck is the short version. The longer version lives in the manual.</p>
<span class="signature">Q. Albrecht · CEO · q@quartz.press</span>
<span class="pagenum">01 / 10</span>
</section>
<!-- 02 · Thesis & TOC -->
<section class="slide toc-slide" data-title="Thesis &amp; TOC">
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">02 · thesis &amp; agenda</span></span><span>q. albrecht</span></div>
<div class="columns">
<div>
<h2 class="title">The world has enough <em>note-taking</em> apps. It has too few <em>writing</em> ones.</h2>
<p class="lede" style="margin-top: 28px;">Quartz is a workspace for technical writers — the people who keep the manuals, the changelogs, the runbooks, the policy docs. They write the longest documents in any company and use the worst tools to do it.</p>
</div>
<div>
<ul class="toc">
<li><span class="n">01</span><span class="t">Cover</span><span class="pg">p. 01</span></li>
<li><span class="n">02</span><span class="t">Thesis &amp; agenda</span><span class="pg">p. 02</span></li>
<li><span class="n">03</span><span class="t">Six theses on a <em>quieter</em> doc tool</span><span class="pg">p. 03</span></li>
<li><span class="n">04</span><span class="t">Where we are, in numbers</span><span class="pg">p. 04</span></li>
<li><span class="n">05</span><span class="t">A line we believe in</span><span class="pg">p. 05</span></li>
<li><span class="n">06</span><span class="t">What it isn't / what it is</span><span class="pg">p. 06</span></li>
<li><span class="n">07</span><span class="t">Customers, in a row</span><span class="pg">p. 07</span></li>
<li><span class="n">08</span><span class="t">ARR — the long way</span><span class="pg">p. 08</span></li>
<li><span class="n">09</span><span class="t">Colophon</span><span class="pg">p. 09</span></li>
<li><span class="n">10</span><span class="t">The ask</span><span class="pg">p. 10</span></li>
</ul>
</div>
</div>
<hr class="footrule">
<span class="pagenum">02 / 10</span>
</section>
<!-- 03 · Manifesto -->
<section class="slide manifesto" data-title="Six theses">
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">03 · manifest</span></span><span>section · product</span></div>
<h2 class="title">Six theses on a <em>quieter</em> doc tool.</h2>
<div class="body">
<div class="item"><div class="n">01</div><div><h4>The page is the unit, not the block.</h4><p>If the editor reads like a database, the doc reads like one. Quartz writes Markdown to disk and treats the page as a single object — not 142 nested toggles.</p></div><div class="tag">— editor</div></div>
<div class="item"><div class="n">02</div><div><h4>Review belongs inline. Not in Slack.</h4><p>Comments anchor to a line, resolve to an audit log, never spawn a thread that nobody can find two weeks later.</p></div><div class="tag">— review</div></div>
<div class="item"><div class="n">03</div><div><h4>History is a feature, not a tab.</h4><p>Every save is a commit. Diff two revisions in three keystrokes. Roll back without writing a support ticket.</p></div><div class="tag">— history</div></div>
<div class="item"><div class="n">04</div><div><h4>Publishing is not a separate product.</h4><p>The same page is a draft, a review, and a published doc — by changing one field, not by exporting to a third-party site builder.</p></div><div class="tag">— publish</div></div>
</div>
<hr class="footrule">
<span class="pagenum">03 / 10</span>
</section>
<!-- 04 · Bento data slide -->
<section class="slide bento-slide" data-title="Where we are">
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">04 · in numbers</span></span><span>section · traction</span></div>
<h2 class="title">Where we are, in <em>numbers</em>.</h2>
<div class="grid">
<div class="cell span-3 row-2">
<span class="cell-meta">paying teams · live</span>
<div class="stat">147<small>teams</small></div>
<span class="delta">▲ +38 this quarter · +35%</span>
<p style="margin-top: 18px;">Including engineering and policy teams at four publicly-listed European companies. Median seat count is twelve; the long tail is solo writers paying out of pocket.</p>
</div>
<div class="cell span-3"><span class="cell-meta">arr · annual run rate</span><div class="stat">€842k<small>ARR</small></div><span class="delta">▲ +29% qoq</span></div>
<div class="cell span-2"><span class="cell-meta">net retention</span><div class="stat">131<small>%</small></div></div>
<div class="cell span-2"><span class="cell-meta">gross margin</span><div class="stat">88<small>%</small></div></div>
<div class="cell span-2"><span class="cell-meta">churn · monthly logo</span><div class="stat">0.7<small>%</small></div><span class="delta down">▼ from 1.4% in Jan</span></div>
</div>
<hr class="footrule">
<span class="pagenum">04 / 10</span>
</section>
<!-- 05 · Quote -->
<section class="slide quote-slide" data-title="Quote">
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">05 · pull quote</span></span><span>customer · pilot 04</span></div>
<blockquote>
We replaced four tools with Quartz. Confluence for the docs, Notion for the drafts, Google Docs for the review, and Slack for the panic <em>that the doc nobody had read was wrong.</em>
</blockquote>
<cite>— Hester Naitō, principal engineer · Pilot 04 · Munich</cite>
<hr class="footrule">
<span class="pagenum">05 / 10</span>
</section>
<!-- 06 · Comparison -->
<section class="slide compare-slide" data-title="What it isn't">
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">06 · positioning</span></span><span>section · product</span></div>
<h2 class="title">What it <em>isn't</em>. What it <em>is</em>.</h2>
<div class="columns">
<div class="col against">
<h5>— Quartz isn't</h5>
<p>A wiki you have to maintain a sidebar for.</p>
<p>A knowledge graph nobody asked for.</p>
<p>An AI that suggests the third callout on the page.</p>
<p>A static-site generator with a CMS bolted on.</p>
</div>
<div class="col for">
<h5>— Quartz is</h5>
<p>A page. A title. A column measure that the writer can trust.</p>
<p>A history of every save and a diff between any two of them.</p>
<p>A line of comments anchored to the line they critique, archived when resolved.</p>
<p>Markdown out, Markdown in. Always.</p>
</div>
</div>
<hr class="footrule">
<span class="pagenum">06 / 10</span>
</section>
<!-- 07 · Table -->
<section class="slide table-slide" data-title="Customers">
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">07 · customer index</span></span><span>section · gtm</span></div>
<h2 class="title">Customers, in <em>a row</em>.</h2>
<div class="data">
<div class="head">№</div><div class="head">team</div><div class="head">country</div><div class="head">seats</div><div class="head right">arr</div><div class="head right">since</div>
<div>01</div><div>Albrecht Press</div><div>FR</div><div>4</div><div class="right num">€ 4,720</div><div class="right num">22.04</div>
<div>02</div><div>Naitō Robotics — Eng. docs</div><div>JP / DE</div><div>18</div><div class="right num pos">€ 41,280</div><div class="right num">23.10</div>
<div>03</div><div>Andrejević Atelier</div><div>HR</div><div>3</div><div class="right num">€ 3,180</div><div class="right num">24.01</div>
<div>04</div><div>Nwachukwu Ltd. — Policy</div><div>NG / UK</div><div>11</div><div class="right num">€ 18,640</div><div class="right num">24.06</div>
<div>05</div><div>Arroyave &amp; Bros</div><div>CO</div><div>7</div><div class="right num pos">€ 9,840</div><div class="right num">25.02</div>
<div>06</div><div>Quentin Veterinary, S.A.</div><div>FR</div><div>2</div><div class="right num neg">€ 1,920</div><div class="right num">25.04</div>
</div>
<hr class="footrule">
<span class="pagenum">07 / 10</span>
</section>
<!-- 08 · Chart -->
<section class="slide chart-slide" data-title="ARR">
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">08 · arr · the long way</span></span><span>section · finance</span></div>
<h2 class="title">ARR — <em>the long way</em>.</h2>
<div class="chart">
<span class="label">Q1 / 2024</span><div class="bar" style="--w: 9%;"></div><span class="v">€ 78k</span>
<span class="label">Q2 / 2024</span><div class="bar" style="--w: 14%;"></div><span class="v">€ 121k</span>
<span class="label">Q3 / 2024</span><div class="bar" style="--w: 22%;"></div><span class="v">€ 187k</span>
<span class="label">Q4 / 2024</span><div class="bar" style="--w: 32%;"></div><span class="v">€ 274k</span>
<span class="label">Q1 / 2025</span><div class="bar" style="--w: 44%;"></div><span class="v">€ 372k</span>
<span class="label">Q2 / 2025</span><div class="bar" style="--w: 58%;"></div><span class="v">€ 491k</span>
<span class="label">Q3 / 2025</span><div class="bar" style="--w: 71%;"></div><span class="v">€ 603k</span>
<span class="label">Q4 / 2025</span><div class="bar" style="--w: 83%;"></div><span class="v">€ 706k</span>
<span class="label">Q1 / 2026</span><div class="bar accent" style="--w: 99%;"></div><span class="v">€ 842k</span>
</div>
<p class="lede" style="margin-top: 56px; max-width: 60ch; font-size: 15px;">
No paid acquisition since Q3 2024. Growth comes from word-of-mouth between docs teams; ARR adds an Albrecht Press every five working days.
</p>
<hr class="footrule">
<span class="pagenum">08 / 10</span>
</section>
<!-- 09 · Colophon -->
<section class="slide colophon-slide" data-title="Colophon">
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">09 · colophon</span></span><span>section · team</span></div>
<h2 class="title">A small press. A long&nbsp;manual.</h2>
<div class="grid">
<dl>
<dt>founder</dt><dd>Quentin Albrecht <em>· prev. lead writer, IETF working group on documentation tooling</em></dd>
<dt>co-founder</dt><dd>Hester Naitō <em>· prev. principal engineer, Naitō Robotics</em></dd>
<dt>head of design</dt><dd>Margerit Andrejević <em>· prev. typographer, Atelier Nord-Ouest</em></dd>
<dt>policy / legal</dt><dd>Pemberton Nwachukwu <em>· prev. counsel, IBM Africa</em></dd>
</dl>
<dl>
<dt>set in</dt><dd>Instrument Serif · Inter Tight · JetBrains Mono</dd>
<dt>press</dt><dd>Atelier Nord-Ouest · Bordeaux</dd>
<dt>edition</dt><dd>04 · v 2026.05 · 2,400 numbered</dd>
<dt>contact</dt><dd>q@quartz.press · +33 (0)5 56 21 47 88</dd>
<dt>auditor</dt><dd>BDO France — Q1 2026 review complete</dd>
</dl>
</div>
<hr class="footrule">
<span class="pagenum">09 / 10</span>
</section>
<!-- 10 · Closing -->
<section class="slide closing-slide" data-title="The ask">
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">10 · the ask</span></span><span>series a · 2026</span></div>
<h2><b>Six and a half million euros</b>, <em>to spend the next eighteen months making documentation feel like writing again.</em></h2>
<p class="lede" style="margin-top: 32px; max-width: 64ch;">€2.4M to ship the publishing pipeline. €1.8M to grow a sales team of four. €1.4M to extend runway to thirty months. €0.9M to ratify our SOC 2 and translate the manual.</p>
<div class="row">
<button class="ghost-cta solid">Open the manual</button>
<button class="ghost-cta">q@quartz.press</button>
<span style="font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-left: auto;">— end · 2026.05.14</span>
</div>
<hr class="footrule">
<span class="pagenum">10 / 10</span>
</section>
</div>
</body>
</html>