Channels

Four channels for shipping brand-consistent deliverables — printed media, documents, slide decks, single-file HTML.

Production

Four channels for rendering brand-consistent deliverables. Each is a capped grammar — pick the channel before the artefact.

Pick by deliverable

Start at the reader and the medium. The channel falls out.

If the deliverable is……pickBecause
A single-page leave-behind read on paper or screen — one-pager, poster, trade-show flyer.Printed MediaPrint-first CSS, fixed paper sizes, no interactivity. Company-forward vs product-forward composition encoded per artefact.
A multi-page deliverable read end-to-end — spec, report, RFP, proposal — with cover, running heads, footnotes, TOC.DocumentBrowser-native @page pagination. Two moods (spec reference-card, report magazine) share one schema.
A timed, spoken-through narrative on a projector or video call.Slide Deck1920×1080 canvas, inline runtime, required speaker notes, keyboard-driven. Two moods (pitch editorial, review diagrammatic).
A single-file HTML deliverable with live tables, filters, or charts — opened in a browser, not printed.HTML ArtifactVue 3 + Tailwind inline or via CDN. Two artefacts (dashboard scanning, interactive-report reading). No routing, no backend.

At a glance

ChannelSurfaceRuntimeArtefacts
Printed Mediaprint (A4 / Letter / A3)static HTML + CSS printone-pager, poster
Documentprint (paginated) + screenstatic HTML + CSS @page + autogen TOC JSspec, report
Slide Deckscreen (1920×1080) + print (1 slide / page)static HTML + deck-stage.js (inline)pitch, review
HTML Artifactscreen onlystatic HTML + Vue 3 + Tailwind (CDN / inline)dashboard, interactive-report

A stylebook-level change to colors, typography, or chart tokens propagates through all four channels on the next stylebook build.

Download the templates

Each channel ships a zipped reference bundle, regenerated on every build so it stays in lockstep with this docs page.

Each bundle includes an INSTRUCTIONS.md consumer guide at the root.

  • Guide → Accessibility — WCAG, legibility, and reduced-motion cross-reference shared by every channel.
  • Typography → Role Mappinghero / body / chrome / code / cta decisions consumed by every channel.
  • Colors — Palette + semantic tokens + chart cascade consumed by every channel.
  • Theme — Color-modes shade mapping that drives the html-artifact dark-mode shift.