Design¶

The imported design canvas for the workshop website, and the record of what changed on the way from mockup to built site.

Open the canvas

Agentic Cloud Ops Mockups →

Fifteen artboards across four design turns. Everything that moves is live state, not a GIF — give it a few seconds before judging a still frame.

What this is¶

A design canvas from claude.ai/design (project UI mockups needed), exported here verbatim so the design outlives the canvas and can be diffed against what web/ actually ships.

File	Notes
`mockups/agentic-cloud-ops-mockups.dc.html`	204,872 bytes, unmodified. Renamed from `Agentic Cloud Ops Mockups.dc.html` — content byte-identical, kebab-case only so the URL has no `%20` in it.
`mockups/support.js`	69,150 bytes, unmodified. The generated `dc-runtime`. Not ours; don't edit it.

The canvas needs React at run time and fetches it itself — React 18.3.1 from unpkg, with subresource integrity — so the page renders by opening it, but needs network the first time. Nothing else is required: no build step, no server, no local dependency.

The four turns¶

Turn	What it explored
1 (`1a`–`1g`)	Three light directions, plus dark parity, mobile, `/prepare` and `/404` of `1a`. Conventional; the baseline to beat.
2 (`2a`–`2c`)	Bolder: a 128px stacked headline with a real agent transcript as the hero image, a dark blueprint grid, and an editorial variant with a scrolling event ticker.
3 (`3a`)	`2a` + `2b` merged. The concept that won.
4 (`4a`–`4d`)	`3a` applied to every page. This is what `web/` implements.

Turn 4 — the set being built¶

	Page	Contents
`4a`	`/`	Header (live UTC clock · T−countdown · nav) → hero (120px stacked headline, outlined "Ops", dual CTA, live agent-session panel + cluster board) → hazard-tape BRING HARDWARE notice → three outlined-numeral takeaways → `120 minutes` proportional schedule with click-to-expand lab detail → Is this for me? → Prepare before Bergen → What we actually do → Instructors → footer
`4b`	`/prepare`	Sticky section nav; steps `00` Before you start, `01` Install Docker, `02` Install kubectl & kind, `03` Clone the repository, `04` Run the preflight, `05` Agent credentials; per-OS tabs; replaying preflight; troubleshooting styled as kubectl errors; day-of checklist
`4c`	—	Mobile at 375px. Not a separate page — this is `4a`'s responsive behaviour, and is built as breakpoints.
`4d`	`/404`	A kubectl `NotFound`, the agent declining to fix it — "I could create it — but prod is read-only for me" — outlined 404, links back to `/` and `/docs`

The animation¶

One state machine drives every artboard: { i, chars, hold, now, lab, t0 }, a 28 ms tick and a 1 s clock. From it derive:

an eight-step typing transcript — a deploy, an injected CrashLoopBackOff, the agent diagnosing a readiness-probe port mismatch, recovery at MTTR 41s, then the guardrail answer: "No. prod is read-only for me — I would open a PR against the Helm chart and page a human."
a 32-cell pod grid that turns orange at the injected failure and heals in sync with the transcript
an appending event log, and four counters — pods, failing, agent actions, and humans on kubectl: 0
the UTC clock and a T−countdown to 2026-10-26T09:00:00+01:00
a 16 s looping preflight replay, six rows with a spinner
the schedule block picker and a 40 s marquee ticker

That last transcript step is the argument the whole workshop makes, delivered by the hero before anyone scrolls. It is the reason this concept beat the others, and the reason the animation is ported faithfully rather than approximated.

Two things the canvas does not address

prefers-reduced-motion — the built site freezes typing, ticker, marquee and cursors at their settled end state, with no content missing. The clock keeps ticking.

Server-rendered settled state — the transcript, pod grid and counters must be complete and readable before JS runs and with JS disabled. The island hydrates and starts moving; it does not supply the content.

Design tokens¶

Role	Value
Background / panel	`#0c0a09` · `#141210`
Borders	`#292524` · `#44403c`
Text	`#fafaf9` · `#d6d3d1`
Muted	`#a8a29e` · `#78716c` · `#57534e`
Accent (teal)	`#5eead4` · dim `#0f6e6b` · tint `#0f2f2d`
Alert (orange)	`#fb923c` · dark `#c2410c` · light `#fdba74` · tint `#2a1208`
Success	`#4ade80`
Blueprint grid	`rgba(94,234,212,.06)` 1px lines on a 44px pitch
Display / body	Space Grotesk 400 · 500 · 700
Mono	IBM Plex Mono 400 · 500
Headline	120px / `.86` / `-.05em`; numerals 112px, outlined `1.5px`

Where the built site deviates, and why¶

The canvas claims all text clears 4.5:1 (turn 1d says so explicitly). Measured, it does not — so the site makes three changes, all of them in service of the design's own stated intent:

Canvas	Built	Measured
`#78716c` for secondary text	`#8a8580`	4.12:1 → 5.41:1
`#57534e` for small labels and captions	`#8a8580`	2.59:1 → 5.41:1
Schedule hands-on block: `#0c0a09` on `#0f6e6b`	`#fafaf9` on `#0f6e6b`	3.26:1 → 5.81:1

#57534e is kept, unchanged, as a decorative-only token: shell $ prompts, / separators, -- markers. Never text a reader needs. #44403c (1.92:1) is borders only.

Everything else in the table above is canvas-exact.

Reconciliation: mockup versus repo¶

The mockups invent tooling this repo does not have. The rule applied:

Illustrative content stays verbatim. Actionable content uses commands that exist.

A replaying terminal is a dramatisation and may show whatever reads best. Anything a participant would actually type must work.

Mockup says	Repo has	Decision
`aco chat "deploy nginx…"`	no such CLI	Keep in the replay — narrative, not instruction
`aco doctor`	`make preflight`	Replace — it appears in prep instructions
`aco chaos inject probe-port`	`evals/scenarios/*.yaml`	Replace where actionable
`kyverno apply policies/`	RBAC ladder + Pod Security Standards	Replace — no policy engine exists
`curl -sL …/prepare.sh \\| sh`	`git clone` + `make preflight`	Replace — no script, no domain
`agentic-cloud-ops.dev`	`leffen.github.io/agentic-cloud-ops/`	Replace — no domain is registered
Schedule 15/15/25/25/25/15	12/8/5/30/35/10/5/15	Repo wins — the revised schedule, which is what we intend to run, buffers included. Not the "as submitted" table in schedule.md
`/schedule` route	—	Drop — the schedule lives on `/`
Instructors "Leif Terje Fonnes"	Lars Effenberger, Lars Søraas	Repo wins — that name appears nowhere in the repo or git history
Route `/prepare`	spec says `/forbered`	Mockup wins — all material is English
`kind`	`k3d` (also codespaces, byo)	Replace — `k3d` is the documented local path
Instructor bios	none exist	Placeholder — marked TODO on the page rather than invented

Deferred, not decided¶

tiers-and-quests.md §5.3 specifies a zinc/indigo palette forked from the MCP workshop, Inter + JetBrains Mono, and Astro SSR on Cloudflare. The canvas contradicts all three.

The canvas wins for now. Reconciling the two waits until workshop preparation is finished — the quest board and scoreboard that motivated the fork are themselves deferred. Don't relitigate this in passing; it is a real decision with a real cost either way.

What every version agrees on, and what must survive any reconciliation: the primary CTA is preparation, not registration. 4a gets this right.

Defects the design exposes¶

4b cannot be built honestly until these are settled:

make preflight does not do what its help text says. It checks for tools only — it never pre-pulls images, never exits non-zero, and prints the Norwegian MANGLER on failure. prerequisites.md claims it pre-pulls. 4b's step 04 rests entirely on this.
make agent-check is a TODO stub, yet setup.md step 5 tells participants to run it.
No per-OS content exists anywhere in the docs, but 4b is built around per-OS tabs. The macOS path is real; Linux and Windows/WSL are marked TODO rather than invented.