Twenty-three 16:9 layouts, authored as the <cn-deck> / <cn-slide> component library: fifteen for a session deck, plus the product / ConNext app layouts. Tokens-driven, hex motif, orange-once-per-slide. The HTML is the source of truth; the matching .odp is exported from it. The honeycomb slide background is downloadable below.
<!-- 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.
app-cover
Cobalt cover with an orange app-icon hex and a dashboard mock. Opens a product / app story.
how-it-works
Three numbered step cards with orange arrows, plus a blue takeaway band. The 1-2-3 story.
ai
Three centred cards with an orange spark hex, blue band. The "what AI does here" slide.
integrations
Two labelled rows of three cards; the required one carries the single orange dot.
competitive-field
A node row over five cards with cost footers; our option is orange-and-cobalt.
leaves-model
Leaf cards over a trunk bar, orange stem connectors. One trunk, many leaves, one data layer.
pricing-table
Comparison table with the last (our) column highlighted. Market price versus ConNext.
The honeycomb slide ground, for reuse in decks and print. One SVG holds the mesh (and, on the title variant, the left readability fade and the white Conduction-C cell). PNGs are exported at 1280×720 and 2560×1440 (@2x).
Cobalt honeycomb + left readability fade + the white Conduction-C cell (bottom-right). The title / section / quote ground.
Cobalt honeycomb, no fade and no mark. The neutral ground when you place your own content or logo.
Transparent white hex outlines, one repeat unit. Tile it over any cobalt surface with background-repeat.
