Html Ppt Taste Editorial
- 165 installs
- 83.7k repo stars
- Updated August 5, 2026
- nexu-io/open-design
Build editorial-style HTML slide decks for thought-leadership talks, content launches, and magazine-inspired product narratives.
About
Open-design skill generating editorial-taste HTML presentations with magazine-like type hierarchy, whitespace, and narrative slide flow for content-led SaaS pitches from nexu-io/open-design.
- Editorial typography
- Magazine-inspired slides
- HTML deck output
- Content launch fit
- Taste preset
Html Ppt Taste Editorial by the numbers
- 165 all-time installs (skills.sh)
- +1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Ranked #988 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/nexu-io/open-design --skill html-ppt-taste-editorialAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 165 |
|---|---|
| repo stars | ★ 83.7k |
| Last updated | August 5, 2026 |
| Repository | nexu-io/open-design ↗ |
What it does
Build editorial-style HTML slide decks for thought-leadership talks, content launches, and magazine-inspired product narratives.
Files
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 — skills/minimalist-skill/SKILL.md. The deck system follows the project deck convention: each .slide is a 100vw × 100vh section, the active slide carries .active / .is-active, and the baked example owns keyboard, wheel, touch, and dot navigation inside the gallery iframe. No-script and print fallbacks keep every slide visible. 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-height1.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
#346538on#EDF3EC, or red#9F2F2Don#FDEBEC). Used sparingly — eyebrow dot, chart fill, call-out chip. Never as a slide background. - Slide padding: generous (
72px 96pxminimum). Title at most 14ch wide. - Eyebrow: every slide opens with a mono uppercase eyebrow
letter-spacing: 0.18emand a section number01 / 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
- Runtime navigation: keyboard, wheel / trackpad, touch swipe, and dot buttons must all update the same active slide state. Keep the fade at roughly
400ms cubic-bezier(0.16, 1, 0.3, 1). - Static / print fallback: keep every slide visible when the runtime has not booted or the document is printed.
- 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
- [ ] Keyboard, wheel / trackpad, touch swipe, and dot navigation all move one slide and keep the active dot / active slide in sync
<!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); }
body.deck-nav-ready { overflow: hidden; }
body.deck-nav-ready .deck {
height: 100vh;
overflow: hidden;
}
body.deck-nav-ready .slide {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 420ms var(--ease);
}
body.deck-nav-ready .slide.active {
opacity: 1;
pointer-events: auto;
}
body.deck-nav-ready .slide + .slide { border-top: 0; }
.deck-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2px;
z-index: 40;
background: var(--hairline-soft);
}
.deck-progress span {
display: block;
width: 0;
height: 100%;
background: var(--accent);
transition: width 220ms var(--ease);
}
#deck-nav {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
z-index: 40;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 11px;
border: 1px solid rgba(26, 26, 25, 0.12);
border-radius: 999px;
background: rgba(251, 251, 250, 0.72);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
#deck-nav .dot {
width: 7px;
height: 7px;
border: 0;
border-radius: 999px;
padding: 0;
background: rgba(26, 26, 25, 0.24);
cursor: pointer;
transition: width 220ms var(--ease), background 220ms var(--ease), transform 220ms var(--ease);
}
#deck-nav .dot:hover { transform: scale(1.2); background: rgba(26, 26, 25, 0.42); }
#deck-nav .dot.active {
width: 22px;
background: var(--accent);
}
#deck-nav .dot:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
/* 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; }
body.deck-nav-ready { overflow: visible; }
body.deck-nav-ready .deck { height: auto; overflow: visible; }
body.deck-nav-ready .slide {
position: relative;
inset: auto;
opacity: 1;
pointer-events: auto;
}
.deck-progress,
#deck-nav { display: none; }
}
</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 the manuals.</h1>
<h3 class="sub">Series A memo — 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 & TOC">
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">02 · thesis & 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 & 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 & 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 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>
<div class="deck-progress" id="deck-progress" aria-hidden="true"><span></span></div>
<nav id="deck-nav" aria-label="Slide navigation"></nav>
<script>
(function () {
var deck = document.querySelector('.deck');
if (!deck) return;
var slides = Array.prototype.filter.call(deck.children, function (el) {
return el.classList && el.classList.contains('slide');
});
var nav = document.getElementById('deck-nav');
var progress = document.querySelector('#deck-progress span');
if (!slides.length || !nav || !progress) return;
var idx = 0;
var wheelAcc = 0;
var wheelTimer = null;
var touchX = 0;
var touchY = 0;
document.body.classList.add('deck-nav-ready');
document.body.setAttribute('tabindex', '-1');
document.body.style.outline = 'none';
slides.forEach(function (_, i) {
var dot = document.createElement('button');
dot.className = 'dot';
dot.type = 'button';
dot.setAttribute('aria-label', 'Go to slide ' + (i + 1));
dot.addEventListener('click', function () { go(i); });
nav.appendChild(dot);
});
function clamp(n) {
return Math.max(0, Math.min(slides.length - 1, n));
}
function go(n) {
idx = clamp(n);
slides.forEach(function (slide, i) {
var active = i === idx;
slide.classList.toggle('active', active);
slide.classList.toggle('is-active', active);
slide.setAttribute('aria-hidden', active ? 'false' : 'true');
});
Array.prototype.forEach.call(nav.querySelectorAll('.dot'), function (dot, i) {
var active = i === idx;
dot.classList.toggle('active', active);
if (active) dot.setAttribute('aria-current', 'true');
else dot.removeAttribute('aria-current');
});
progress.style.width = (((idx + 1) / slides.length) * 100) + '%';
}
function shouldIgnoreKeyTarget(target) {
if (!target || !target.tagName) return false;
var tag = target.tagName.toLowerCase();
return tag === 'input' || tag === 'textarea' || tag === 'select' || target.isContentEditable;
}
function onKey(e) {
if (e.__tasteDeckHandled || shouldIgnoreKeyTarget(e.target)) return;
var next = null;
if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === 'PageDown' || e.key === ' ') next = idx + 1;
else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp' || e.key === 'PageUp') next = idx - 1;
else if (e.key === 'Home') next = 0;
else if (e.key === 'End') next = slides.length - 1;
if (next === null) return;
e.__tasteDeckHandled = true;
e.preventDefault();
go(next);
}
function onWheel(e) {
var delta = e.deltaY + e.deltaX;
if (Math.abs(delta) < 1) return;
e.preventDefault();
wheelAcc += delta;
if (Math.abs(wheelAcc) > 60) {
go(idx + (wheelAcc > 0 ? 1 : -1));
wheelAcc = 0;
}
clearTimeout(wheelTimer);
wheelTimer = setTimeout(function () { wheelAcc = 0; }, 150);
}
function onTouchStart(e) {
if (!e.touches || !e.touches.length) return;
touchX = e.touches[0].clientX;
touchY = e.touches[0].clientY;
}
function onTouchEnd(e) {
if (!e.changedTouches || !e.changedTouches.length) return;
var dx = e.changedTouches[0].clientX - touchX;
var dy = e.changedTouches[0].clientY - touchY;
if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)) {
go(idx + (dx < 0 ? 1 : -1));
}
}
function focusDeck() {
try {
window.focus();
document.body.focus({ preventScroll: true });
} catch (_) {}
}
window.addEventListener('keydown', onKey, true);
document.addEventListener('keydown', onKey, true);
window.addEventListener('wheel', onWheel, { passive: false });
window.addEventListener('touchstart', onTouchStart, { passive: true });
window.addEventListener('touchend', onTouchEnd, { passive: true });
document.addEventListener('mousedown', focusDeck);
window.addEventListener('load', focusDeck);
go(0);
focusDeck();
})();
</script>
</body>
</html>
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k