# Phase 7.2 — diagrams

Eight diagrams, one visual language, light and dark in one file each.

Authored 2026-10-26. Source of truth is the SVG files themselves: each one is
self-contained, with no external font, image or script reference.

## The language

| Part | Rule |
|---|---|
| Canvas | `viewBox="0 0 960 540"`, `width`/`height` set so a bare file view is 1× |
| Type | 19 px section title · 15 px heading · 13 px label · 12 px caption, all `ui-sans-serif` system stack |
| Boxes | `rx=7`, 1.4 px stroke, four semantic tones: neutral, accent (the thing being described), teal (store / gateway), amber (guard, failure, limit) |
| Arrows | solid = data or control flow, dashed = trust boundary or approximate relationship |
| Colour | greys carry structure; one blue accent, one teal, one amber, nothing else |
| Text | every `<text>` is real text in the SVG, so it scales, selects and reads to a screen reader |

Every file carries a **byte-identical `<style>` block**. That is the whole of the
consistency guarantee: there is one palette, defined once, repeated verbatim.
A check that compares the eight style blocks and finds one distinct value is the
evidence that the eight diagrams share a language.

## Both themes in one file

The `<style>` block defines the light palette, then repeats the same selectors
inside `@media (prefers-color-scheme: dark)`. No duplicated files, no theme
toggle needed in the page, no chance of a light and a dark copy drifting apart.

If the site later grows a manual theme toggle, the SVG must be inlined into the
page (not `<img>`) so page CSS can override the custom properties. Until then
`<img>` is correct: the file follows the reader's operating system.

| Role | Light | Dark |
|---|---|---|
| ink (text) | `#1b222b` | `#e7edf4` |
| panel (box fill) | `#f4f6f8` | `#182028` |
| muted (labels) | `#5b6673` | `#98a4b3` |
| accent | `#1a6bc4` | `#5aa2f0` |
| teal | `#0f766e` | `#38b3a6` |
| amber | `#b45309` | `#d98b3f` |
| box stroke | `#c3ccd6` | `#35424f` |

## Mobile

A 960 px schematic cannot be read at 360 px. The presentation contract is:

- wrap the figure in a horizontally scrollable container
- `svg { display:block; width:100%; min-width:900px; height:auto }`

At 1× (container ≥ 960 px) the type renders at 15 px / 13 px. At the 900 px
minimum inside a 390 px container it renders at 14.1 px / 12.2 px — the same
order as body text, and the figure scrolls rather than shrinking into
illegibility. A figure that is scaled to 360 px instead reaches 5 px type and is
not readable; that is why the contract is a requirement and not a suggestion.

## Accessibility

Each file carries `role="img"` and both `<title>` and `<desc>`. The `<desc>` is
the alternative text — 190–285 characters, describing what the diagram asserts
rather than naming its parts. If a template sets `alt=""` on the `<img>`, the
`<title>`/`<desc>` are not read out; the template must supply `alt` from the
manifest's `alt:` field.

## Files

| # | File | Area | Answers |
|---|---|---|---|
| 1 | `01-homelab-topology.svg` | platform | where it runs, and where the trust boundaries are |
| 2 | `02-agent-architecture.svg` | ai | how agents are organised and why one gateway |
| 3 | `03-rag-pipeline.svg` | ai | which side of the pipeline is AI and which side is not |
| 4 | `04-edge-architecture.svg` | edge | why devices never talk to each other |
| 5 | `05-distributed-audio.svg` | edge | how eight speakers stay in sync, and how voice gets in |
| 6 | `06-media-pipeline.svg` | products | where the human gate sits in a media pipeline |
| 7 | `07-cost-resource-engineering.svg` | platform | the memory ceiling, drawn to scale |
| 8 | `08-era-timeline.svg` | history | five platform shifts and what survived them |

Facts behind them come from `reference/stack.md`, `reference/content-map.md` and
`docs/phase-3-deploy.md`. Diagram 7 is numbers from a measurement, not an
illustration: if the caps change, the bars change.