Sixteen 16:9 layouts, authored as the <cn-deck> / <cn-slide> component library. Tokens-driven, hex motif, orange-once-per-slide. The HTML is the source of truth; the matching .odp is exported from it. Hit Present for fullscreen, or print to PDF.
<!-- one stylesheet, one script, no build step --> <link rel="stylesheet" href="cn-deck.css"> <cn-deck total="16"> <cn-slide layout="title" eyebrow="Conduction · startsessie"> <h1>Een architectuur die voor Baarn werkt.</h1> <p class="sub">Sessie 1: doel, wensen en planning.</p> </cn-slide> <!-- ...more slides... --> </cn-deck> <script src="cn-deck.js"></script>
The deck auto-numbers every slide (03 / 16), draws the eyebrow top-left, and injects each layout's hex decoration. <cn-deck> adds a Present button: fullscreen, arrow / space / PageUp-Down to navigate, Esc to exit. Opt out of a decoration with nodeco. Set the dark surface manually on any layout with class="is-dark".
title
Cobalt honeycomb ground, one orange hex, headline + sub + meta row. Opens the deck.
intro
Hex monogram plus name, role, "background / nu / vraag mij over" labels. The presenter is a person.
agenda
Numbered hex bullets with time estimates, active item orange. 3 to 6 items.
content
The workhorse. H2 + lead paragraph + hex-orange bullets, one claim per line.
stats
Three numbers in cards, the anchor one accented (dark + orange). Real numbers, not "ongeveer veel".
quote
Customer voice on cobalt, orange serif quote-mark. Used sparingly, never two in a row.
section
Big mono number, section title, hex cluster. Resets attention between chapters.
horizons
Two carded columns with mono kickers and orange accent. Now / straks, met / zonder.
spotlight
Hex glyph or monogram left, name + tagline + bullets right. One per app or solution.
comparison
Mint vs terracotta, check / cross bullets. Honest, not gloating, equal weight.
columns
Three card columns with top bars, middle accented. Role split, options, pillars.
questions
Numbered hex items in two columns. Open questions, checklists, six-up grids.
image
Full-bleed honeycomb, heading + lede, hex cluster, footer kicker. The "loud" layout.
timeline
Five hex nodes on a connector, cards below, first step active. Plan, roadmap, phases.
contact
Three next-step cards plus a hex-avatar contact. Closes with a calendar invite, not "thank you".
logo-wall
Eight to twelve marks on white, greyscale by default, one featured in colour.