Following the axis-separation lesson (see asset-pipeline-ASK's docs/layer-disambiguation-note-v1.md), these are different artifacts on different meta-axes — not four views of one picture. Each is fixed by two orthogonal questions: what is it slicing (the whole repo, or one conceptual axis) and structure or state.

• The structure diagrams keep one axis each (axis purity) and assert no maturity. The state diagram is the one place the mixed operational whole is the right subject — "is this proven yet?" is asked of the lived surface, not an abstract single axis. On the state surface, color encodes state only.
• urban-observatory builds three, not four: there is no inheritance (Axis-B) spine, because UO has no genuine linear inheritance ladder. UO's load-bearing chain (Assumption → ImplementationSignal → ImplementationFinding → InterventionCandidate) is a runtime/process axis, not a scope/inheritance one. A fourth diagram is not manufactured just to mirror the reference set.

docs/diagrams/
├── README.md                                      this file
├── _dsa-surface/                                  VENDORED, PINNED design-system-ASK surface carriers (full set below)
│   ├── surface-panel.css                          panel material (verbatim) — index.html, the static pages' compact triggers + interactive spine
│   └── surface-treatments.css                     disclosure grammar (verbatim) — the static pages' compact triggers + interactive spine
├── _dsa-tokens/                                   VENDORED, PINNED design-system-ASK mirror
│   ├── MANIFEST.md                                upstream commit + per-file sha256
│   ├── colors_and_type.css                        Tier 1 + Tier 2 tokens (verbatim)
│   ├── spectral-state.css                         Spectral State v1.1 (verbatim) — interactive spine only
│   └── fonts/                                      Inter + JetBrains Mono (+ OFL licenses)
├── diagrams-chrome.js                             upstream responsive chrome (#169, #175) — loaded after the chrome markup, BEFORE the fit contract, verbatim, DO NOT EDIT
├── diagrams-fit.js                                upstream fit contract v3 (#77-#80, #169, #175) — loaded BEFORE the engine, verbatim, DO NOT EDIT
├── diagrams-pointer.js                            upstream shared pointer controller v2 (#173, #175) — loaded BEFORE the fit contract and the engine, verbatim, DO NOT EDIT
├── diagrams-static-H-engine.js                    upstream engine (#175) — consumed verbatim, DO NOT EDIT
├── diagrams.css                                   upstream style layer (#175) — consumed verbatim, DO NOT EDIT
├── export-png.js                                  upstream PNG export (static) — consumed verbatim, DO NOT EDIT
├── urban-observatory_architecture-tree.html       UO chrome (title · subtitle · stamp · legend)
├── urban-observatory_architecture-tree.source.js  UO data (window.TREE_ARCHITECTURE)
├── urban-observatory_ontology.html                UO chrome (legend repurposed as an Axis-A reading note)
├── urban-observatory_ontology.source.js           UO data (window.TREE_ONTOLOGY)
└── interactive/                                    Class A INTERACTIVE (diagram-interactive-spine)
    ├── diagrams-interactive-spine-engine.js        upstream engine — consumed verbatim, DO NOT EDIT
    ├── diagrams-interactive-spine.css              upstream style layer — consumed verbatim, DO NOT EDIT
    ├── diagrams-pointer.js                         upstream shared pointer controller v2 (#173, #175) — loaded BEFORE the fit contract and engine, verbatim, DO NOT EDIT
    ├── export-png.js                               upstream PNG export (interactive) — verbatim, DO NOT EDIT
    ├── urban-observatory_ia-state-spine.html       UO chrome (loads ../_dsa-tokens/)
    └── urban-observatory_ia-state-spine.data.js    UO data (window.IA_STATE_SPINE)

All three diagrams share one pinned _dsa-tokens/ mirror. The two static diagrams (architecture tree, ontology) sit at top level and load colors_and_type.css + diagrams.css, then surface-panel.css → surface-treatments.css for the responsive chrome's About and Legend triggers; they load diagrams-chrome.js after the chrome markup, then diagrams-pointer.js, both before diagrams-fit.js and the engine. On a narrow or crowded canvas the caption and legend close behind those triggers beside or above the HUD and the header's subtitle and stamp move into About; one finger pans the drawing from anywhere on it, two pinch the drawing rather than the page, and the panels keep their own taps and scrolling. The interactive IA spine sits in interactive/ and additionally loads spectral-state.css and, for the About, Legend and Inspector disclosure triggers its engine adds on a narrow or short canvas, surface-panel.css + surface-treatments.css (load order: colors_and_type.css → spectral-state.css → diagrams-interactive-spine.css, then surface-panel.css → surface-treatments.css); it references the shared mirrors one level up at ../_dsa-tokens/ and ../_dsa-surface/, and loads diagrams-pointer.js, the shared pointer controller, before ../diagrams-fit.js and its engine. The interactive surface is the only one that consumes Spectral State; color encodes state only.

• Consume by reference; no fork. The engine, diagrams.css, and export-png.js are copied verbatim from the upstream pattern and are never edited here — modifying them breaks inheritance. UO authors only source data (window.TREE_* for the static diagrams, window.IA_STATE_SPINE for the interactive one) and HTML chrome (.mark, title, subtitle, .stamp, legend, <title>, <meta>, file names).
• Pinned, offline, no CDN. _dsa-tokens/ is a pinned snapshot (MANIFEST.md records the commit SHA + per-file sha256). The diagrams inherit at generation time and freeze for audit — no runtime fetch, no font CDN.
• Tier 1 + Tier 2 only, in the diagrams. All three diagram artifacts remain Tier 1 + Tier 2; no ASK Tier 3 leaks into them. The exception is the separate live navigation surface below: index.html carries an ASK-assigned Tier-3 value for the current UO front door only. That value does not propagate into the diagrams, does not make UO ASK-the-entity, and does not come from surface-shell, which ships a mark slot and no mark. Outside this directory, the sealed review documents rendered by tools/artifact-template/ carry the ASK wordmark under an ASK assignment whose scope that template's README records; that value does not reach the diagrams either. Any future independent urban-observatory brand is a separate identity migration.
• Light + dark both work (verified for the architecture tree, both themes).
• Pin: see _dsa-tokens/MANIFEST.md for the current upstream pin (single source of truth — this README does not duplicate fast-aging pin state).
• Renderer generation. The current diagram renderer contract runs through design-system #175 for the fit helper, the H engine, the static style layer, the responsive chrome and the shared pointer controller (the static pages' copy and the interactive spine's): the H engine requires the fit helper at its v3 contract (balanced vertical placement and compact clearance, building on the panel-aware fit of #77/#79 and the dynamic interaction floor of #78) and, like the interactive spine's engine, drives the shared pointer controller (v2). The static page exporter runs through #169 (the exporter through #80 before it), and the interactive spine's engine and stylesheet through #173. Both static pages adopt diagrams-chrome.js, the responsive chrome #169 adds. Exact owner pins and propagation state live in the operator consumer ledger.

Adopted from the design-system-ASK convention Theme by embedding surface, pinned at design-system-ASK main 7921b79 (PR #49, merged 2026-06-21). This is a visual-consumption convention, not an engine/CSS/token change — it only settles which existing theme variant a surface embeds. Both -light and -dark exports are always generated and retained; the surface selects the default, and a stated local exception may override per figure.

UO default:

• Repository documentation embeds dark — these in-repo diagrams (the diagram-static-H architecture tree and ontology; the diagram-interactive-spine static export) are repository documentation and default to dark.
• Editorial / Substack embeds light — if a UO diagram is ever published in a Substack or other long-form editorial piece, that figure defaults to light.
• Both exports retained; a stated local exception may override a specific figure.

UO currently commits no rasters — the diagrams are live .html that export a poster PNG on demand (the PNG button), so there is nothing to re-select today. The default governs which export is embedded when a raster is committed or published going forward. (Convention owner: design-system-ASK; UO owns its adoption record and which render each UO surface embeds.)

Open any diagram .html directly in a browser (it loads its CSS/JS/fonts from this directory and the pinned _dsa-tokens/ mirror — no server required). Pan by dragging, zoom with the wheel or the HUD, fit with ⤢, and export a poster PNG with the PNG button.

When the upstream tokens/fonts (or, later, Spectral State) change and a refresh is wanted, re-sync the vendored carriers from the new commit and regenerate _dsa-tokens/MANIFEST.md. Then classify each consuming diagram under its own source-vN // render-vN contract: advance source-vN only for a source-generation change, and advance render-vN and regenerate any committed raster only for a rendered-output change. A pin advance alone does neither. The site build's reading pages record the sha256 of the token, panel, action and shell carriers they load in tools/read/declared.json: a re-vendor that moves any of them updates those hashes, and re-vendors the register files under tools/read/carriers/ from the same commit, in the same change, or the site build fails and nothing deploys (tools/read/README.md §Carriers). Propose changes to the tokens themselves upstream at the design-system-ASK control surface — never edit the vendored mirror or the upstream engine/CSS here.