15 · Figure index
All twenty-one illustrations in the pack, with what each shows, where it appears, and whether it depicts Anthropic's material or ours. Every figure is a standalone file you can lift straight into a deck.
Each figure is an independent .svg in site/assets/figures/. They carry no external references and no webfonts, so a single file is the whole illustration — drag one into Keynote, Figma, a doc or another web page and it works. Each embeds its own prefers-color-scheme block, so it follows the viewer's light or dark setting without any page-level CSS.
documented means the figure depicts Anthropic's own model, with their wording. synthesis means the structure or framing is ours — see §14. Check the tag before you put one in front of an audience and attribute it to Anthropic.
Foundations
Configuration & control
Risk & decision
Adoption & fluency
Synthesis
These five carry the pack's original argument. They are the ones to redraw first if you rebuild this in your own visual language.
Manifest
| Fig | File | Height | Used in | Attribution |
|---|---|---|---|---|
| 2.1 | shared-engine.svg | 364 | §02 | documented |
| 3.1 | agentic-loop.svg | 220 | §03 | documented |
| 3.2 | execution-model.svg | 310 | §03 | documented |
| 4.1 | away-from-desk.svg | 324 | §04 | documented |
| 6.1 | config-units.svg | 296 | §06 | documented |
| 6.2 | context-loading.svg | 340 | §06 | documented |
| 6.3 | request-vs-guarantee.svg | 384 | §06 | documented |
| 7.1 | permission-modes.svg | 404 | §07 | documented |
| 8.1 | two-condition-risk.svg | 316 | §08 | documented |
| 10.1 | decision-tree.svg | 340 | §10 | synthesis |
| 10.2 | surface-selection.svg | 276 | §10 | documented |
| 12.1 | maturity-ladder.svg | 422 | §12 | mixed |
| 12.2 | adoption-roadmap.svg | 328 | §12 | documented |
| 13.2 | four-d-loops.svg | 372 | §13 | mixed — nesting unsupported, see §13 |
| 13.1 | three-modes.svg | 262 | §13 | mixed |
| 14.1 | decision-grid.svg | 454 | §14 | synthesis |
| 14.2 | who-judges.svg | 266 | §14 | synthesis |
| 14.3 | reversibility-spectrum.svg | 244 | §14 | synthesis |
| 14.4 | failure-modes.svg | 344 | §14 | synthesis |
| 14.5 | trust-vs-capability.svg | 414 | §14 | synthesis |
| 14.6 | concept-map.svg | 324 | §14 | synthesis |
Technical contract
All conform to the mechanical rules in site/assets/figures/SPEC.md, verified programmatically. The spec's legibility guidance ("~12 text elements") is deliberately relaxed for the text-dense figures, which carry class="dense" instead. If you add a figure, match the mechanical rules.
| Rule | Value |
|---|---|
| Canvas | viewBox="0 0 720 H"; no width/height on <svg>, so page CSS sizes it |
| Accessibility | role="img" plus <title> and <desc>, referenced by aria-labelledby; alt text supplied at the embed site |
| Theming | Embedded stylesheet with a prefers-color-scheme: dark block; background always transparent |
| Palette | Matches style.css. Rust = Cowork or emphasis · green = Claude Code or safe · ink = shared · amber = partial · red = blocked or irreversible |
| Type | System font stack, px sizes only, manual line breaks (SVG does not wrap) |
| Self-containment | No scripts, webfonts, external images or xlink:href. No gradients, shadows or filters |
| IDs | Every id namespaced with the filename slug, so several figures can coexist on one page |
| Narrow screens | Text-dense figures carry class="dense" on the <figure>: below 640px they scroll horizontally rather than shrinking type below legibility |
The five synthesis figures are the ones carrying an argument rather than reporting a fact, so they are where your own visual language will pay off most. The documented ones are closer to transcription — redraw them for house style if you like, but check the wording against §16 before changing a single label, because several are verbatim quotes.