Deck 3 · Tutorial Suite

Deck Style Options

Several deck style and JS engine choices for your inspection and feedback.

ASWP Summer 2026 · Tutorial Suite · Written by Dallas Elleman and Claude Opus 4.8

Choosing a Deck Style

Decks 1 and 2 taught the method and showed it worked. This short deck is different: it lays out the two deck-building systems we now have, the trade-offs between them, and asks the team to weigh in on where we go next. Nothing here is locked — that's the point.

The choice

Two JS systems, four color palettes

On the following slides, you'll see some initial options and styles for our slide decks to follow. Feel free to copy and modify the styles — and suggest other themes.

Similarities across options
Vanilla HTML/CSS/JS · zero dependencies · runs fully offline from file:// · system fonts only — no CDNs, no build step.

Differences between options
Responsive flow (our starter/) vs a fixed 16:9 canvas (deck-stage). Everything else follows from that one choice.

Two systems, one goal

Both satisfy the hard constraints, so the decision isn't about offline-safety — it's about layout philosophy and the features each model makes easy.

O.G. System with scroll-snap

The classic

It's the theme template from Decks 1 and 2. Features:

Full-screen scroll-snap slides that reflow to any screen
A two-window presenter view — notes, timer, next-slide
Offline Markdown → HTML pipeline for embedded docs
Responsive & accessible (real text reflow / zoom)
A ~313-line engine the team can actually read and modify

Open Deck 2 (this engine) ↗

Deck 2 title slide built on the starter engine — navy and gold editorial style

System 1 — our starter

This is the engine behind Decks 1 and 2. Its strength is that it's a web document that happens to present: it reflows, it's accessible, and it's small enough to teach. The launch button opens Deck 2 so the team can feel it live.

Newcomer deck-stage System Options

3 Styles — 1 JS Engine

The following slides show three different styles with the same underlying presentation engine: author at 1920×1080 and it scales pixel-perfect to any screen, like a polished .pptx.

WYSIWYG fixed 16:9 — identical on every projector
Thumbnail rail — jump, reorder, skip, delete
Clean print → one-slide-per-page PDF
Keyboard + touch nav; three finished, distinct themes

The trade
A heavier engine (~1796 lines, shadow DOM) and — today — no built-in presenter view or Markdown pipeline. Built with Claude Design.

System 2 — deck-stage

This is shaped like the thing we're replacing: a fixed projector slide. The print-to-PDF is a real asset given our PowerPoint-fallback path and the open Chromebook/Google-Drive question. The cost is a bigger engine and features we'd have to rebuild.

deck-stage · Theme A

Slate & Gold

An editorial, academic feel — warm paper, navy ink, a single gold accent. Credible and unhurried.

Best for: formal university lectures.

Open full-screen ↗

Theme A, Slate and Gold — editorial cover with a serif title in navy and gold on warm paper

Theme A — Slate & Gold

The university-leaning option. Launch it to show the thumbnail rail, keyboard nav, and the inline SVG neural-net diagram on slide 5.

deck-stage · Theme B

Grid

A Swiss / neo-grotesque system — huge bold type, visible structure, one electric royal-blue accent. Modern and engineering-minded.

Best for: technical, high-impact talks.

Open full-screen ↗

Theme B — Grid

The starkest, most structural option. Monospace index bars, a faint column grid, 800-weight display type.

deck-stage · Theme C

Spark

A friendly, geometric system — deep indigo, rounded shapes, a warm coral / teal / gold palette. Energetic and approachable.

Best for: K-12 and intro outreach.

Open full-screen ↗

Theme C — Spark

The most approachable, K-12-leaning option. Pill labels, decorative blobs, rounded cards — playful but still professional.

The trade-off

Flow vs fixed canvas

Neither is "better" — they optimize for different things.

	Our `starter/`	`deck-stage`
Layout	Responsive flow	Fixed 16:9, scale-to-fit
Present view	Built-in (notes + timer)	Not yet
Markdown embeds	Yes (pipeline)	No
Print → PDF	No	Yes, clean
Themes ready	1 (navy/gold)	3 polished
Accessibility	Reflow + zoom	Uniform scale

Flow vs fixed canvas

The one-liner: deck-stage is PowerPoint-shaped (great for projector, PDF, the Chromebook fallback); our starter is web-document-shaped (responsive, accessible, teachable). The right answer depends on how decks actually get delivered.

The decision

Four ways forward

1 · Coexist — keep the starter as our spine; offer the three themes as a parallel style gallery. (Where we are now.)

2 · Port the look — re-theme the starter with the A/B/C design languages; keep all our features.

3 · Switch — adopt deck-stage as the engine; rebuild the presenter view + Markdown we'd lose.

4 · Targeted merge — harvest the best of deck-stage (print-to-PDF, the themes) into our engine, in stages.

Four ways forward

These aren't all-or-nothing. Option 4 is the pragmatic middle — take the wins we clearly want (print-to-PDF, the polished themes) without abandoning the engine we know. But this is the team's call.

Your input

Try both — then tell us

Open the decks, click around, and weigh in. Your preference shapes the direction we take.

Drop a comment with your pick and a sentence on why — and 👍 the options you like — on the team issue:

Open the discussion issue ↗

Try both — then tell us

The deck is a decision-support tool, not a verdict. Point everyone at the GitHub issue; comments + thumbs-up reactions give us a lightweight read on where the team leans before we commit engineering time.

Closing

The suite is yours

Deck 1 gave you the method. Deck 2, a worked example. Deck 3, a styling choice. Go build — and tell us which way to take it.

The suite is yours

Wrap-up: the three decks together are the on-ramp. The team now has the method, a worked example, and a real choice of look — plus a say in the engine we standardize on. Next step is theirs.