diff --git a/.changes/flow-colour-views.json b/.changes/flow-colour-views.json
new file mode 100644
index 00000000..f230c864
--- /dev/null
+++ b/.changes/flow-colour-views.json
@@ -0,0 +1 @@
+{ "type": "user-facing", "releaseNoteId": "release:0.20.0" }
diff --git a/CHANGELOG.md b/CHANGELOG.md
index fc823cc2..0c4a9ffd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,17 @@ All notable Loop Studio releases, newest first. Behavioral changes are pinned
 in versioned spec documents (see the [README](README.md#technical-reference));
 this file is the narrative history, not the contract.
 
+## v0.20.0 — 2026-10-07
+
+Flow colours beyond the canvas (issue #325, the second of three parts). The contract is [`docs/flow-colour-and-compact-nodes.md`](docs/flow-colour-and-compact-nodes.md) FC-5 and FC-6.
+
+- **The minimap and the timeline.** A coloured node's minimap mark takes its colour, and a coloured Pool or Register draws its timeline line, its legend mark and its endpoint in it. Every other mark and series keeps its colour, so colouring one node never recolours another; the Register's dashed line and the Pool's solid line stay, and connection colours never reach the timeline. Under forced colours neither view draws a flow colour.
+- **Three templates in colour.** The Coffee roastery, gacha banner and early MMO templates open with three colours on their main flows: green beans, roasted beans and desserts; the gacha banner's three zones, in the colours their frames already carry; items, gold and experience. Parameters and Registers stay uncoloured. Their simulation is unchanged: the engine digest of each template is the one recorded before.
+- **Each colour once.** In the Inspector's Colour section, Recent leaves out the palette's colours, and In this document leaves out both, so the current colour's ring shows once; a row with nothing left is hidden.
+- **The phone shows a colour as one line.** The read-only Inspector on a phone shows the colour as text, a dot with the colour's name and hex (its hex alone off the palette), Default with an empty ring, Mixed with no dot, instead of the disabled editor. A locked canvas on the desktop keeps the disabled editor.
+
+**No migration.** Run results and the run CSV are unchanged for any diagram. The three templates' files now carry `accent` fields, so their content and revision digests differ from v0.19.0's. Four release-note lines in 18 languages, 16 of them without native review. The informational `meta.tool` string is now `loop-studio/0.20.0`.
+
 ## v0.19.0 — 2026-10-06
 
 Flow colours (issue #325, the first of three parts): nodes and connections can carry a colour so the flows of a large graph read apart at a glance. The contract is [`docs/flow-colour-and-compact-nodes.md`](docs/flow-colour-and-compact-nodes.md).
diff --git a/README.md b/README.md
index 22bd9e57..e4f011ab 100644
--- a/README.md
+++ b/README.md
@@ -140,7 +140,19 @@ Additional feature-specific design documents (localization, mobile, module
 system, large-graph readability, simulation playback, edge routing, data
 import, …) live under [`docs/`](docs/).
 
-## Latest — v0.19.0
+## Latest — v0.20.0
+
+Flow colours beyond the canvas.
+
+- **The minimap and the timeline** show a coloured node in its colour; a coloured Pool or
+  Register draws its timeline line in it, and every other series keeps its own
+- **Three templates in colour**: Coffee roastery, the gacha banner and early MMO open with
+  three colours on their main flows; their results are unchanged
+- **Each colour once** in the Inspector: Recent and In this document leave out the colours
+  already shown above them
+- **On a phone**, the read-only Inspector shows a colour as one line: a dot, its name and hex
+
+## v0.19.0
 
 Flow colours: give nodes and connections a colour so a large graph's flows read apart.
 
@@ -173,18 +185,8 @@ A fix release: the menus answer the keyboard the same way.
 - **On a phone**, a sheet takes focus when it opens, and Escape in a sheet opened from
   More goes back to More; the run bar and the update bar stay usable
 
-## v0.18.0
-
-The third-party open-source licenses, inside the app.
-
-- **About Loop Studio → Third-party open-source licenses** shows the full license text of
-  every third-party component the build includes, in its original English, in the same
-  dialog; Back returns to About
-- **Offline too**: the installed app has the text precached, and the single-file version
-  carries it inside the file; the web and installed builds also open it as a text file
-- **Loop Studio's own notice is unchanged**: the licenses cover the included components only
-
-See [`CHANGELOG.md`](CHANGELOG.md) for the full notes of these releases, v0.17.2 (the
+See [`CHANGELOG.md`](CHANGELOG.md) for the full notes of these releases, v0.18.0 (the
+third-party open-source licenses in the About dialog), v0.17.2 (the
 Temporary session button drawn like the menu buttons), v0.17.1 (share
 links compressed with the browser's own Compression Streams), v0.17.0
 (password-protected share links), v0.16.0 (the storage gate, temporary sessions and the
diff --git a/docs/assets/coffee-flow.png b/docs/assets/coffee-flow.png
index 68e69a0e..4a662f63 100644
Binary files a/docs/assets/coffee-flow.png and b/docs/assets/coffee-flow.png differ
diff --git a/docs/assets/gacha-overview.png b/docs/assets/gacha-overview.png
index 60712476..7c9942a5 100644
Binary files a/docs/assets/gacha-overview.png and b/docs/assets/gacha-overview.png differ
diff --git a/docs/assets/gacha-pickup-guarantee.png b/docs/assets/gacha-pickup-guarantee.png
index 52e0ec3e..0b4e55db 100644
Binary files a/docs/assets/gacha-pickup-guarantee.png and b/docs/assets/gacha-pickup-guarantee.png differ
diff --git a/docs/assets/hero-coffee.png b/docs/assets/hero-coffee.png
index 10518da6..339f6360 100644
Binary files a/docs/assets/hero-coffee.png and b/docs/assets/hero-coffee.png differ
diff --git a/docs/assets/mmo-focus.png b/docs/assets/mmo-focus.png
index 081c42b9..a4825323 100644
Binary files a/docs/assets/mmo-focus.png and b/docs/assets/mmo-focus.png differ
diff --git a/docs/flow-colour-and-compact-nodes.md b/docs/flow-colour-and-compact-nodes.md
index e03abbdf..d7789adf 100644
--- a/docs/flow-colour-and-compact-nodes.md
+++ b/docs/flow-colour-and-compact-nodes.md
@@ -190,13 +190,23 @@ The flow colour is a rest colour. Every state that restyles an element today sti
 - The browser's colour input applies on its real `change` event only: never on opening it and never on the live `input` events while its dialog is open, so opening it on Default or on a mixed selection applies nothing (in particular, never black).
 - Each swatch is a `<button>` with the colour's name (or its hex for recent and document colours) and `aria-pressed`, plus a visible pressed ring that survives forced colours. Everything works with the keyboard alone.
 - Notices (FC-3.3) sit under the controls, in a polite live region.
-- Phone: the Inspector is a read-only sheet there (`docs/mobile.md` MV-D3), inside `<fieldset disabled>`, so the section shows the current colour and every control in it is disabled. A locked desktop canvas disables it the same way. A colour set anywhere renders everywhere.
+- Each colour is offered once (PR 2): Recent leaves out the palette's colours, and In this document leaves out the palette's and Recent's, so the current colour's ring shows once. A row left empty is not shown.
+- Phone: the Inspector is a read-only sheet there (`docs/mobile.md` MV-D3), and the section is one line of read-only text, with no control (PR 2): a dot and the colour's name and hex for a palette colour (`Rose #B47599`), the dot and the hex alone for any other, **Default** with an empty ring, **Mixed** with no dot, since a dot would read as one particular colour. The hex is a `dir="ltr"` run. A locked desktop canvas keeps the editor inside `<fieldset disabled>`: every control disabled, the hex field and the colour input drawn with the disabled ink and boundary of the other read-only fields and no pointer cursor, the swatches still showing the current colour and its ring. A colour set anywhere renders everywhere.
 
 ## FC-6. Minimap, timeline and templates (PR 2)
 
-- The minimap mark of a node with a flow colour takes it; others keep the kind hue.
-- A Pool or Register series in the timeline takes its node's flow colour; others keep the current series colour. Edge colours are not passed to the timeline. The Register dashed line and the Pool solid line stay. CSV export and simulation data are unaffected.
-- Templates get restrained colours (about three per screen) on their main flows; their simulation results do not change.
+- The minimap mark of a node with a flow colour takes it; others keep the kind hue (`MinimapDock`).
+- A Pool or Register series in the timeline takes its node's flow colour, for its line, its legend mark, its endpoint dot and label; others keep their colour by index, so colouring one node never recolours another series (`TimelineChart`). Edge colours are not passed to the timeline. The Register dashed line and the Pool solid line stay. CSV export and simulation data are unaffected.
+- Under forced colours neither view draws a flow colour (FC-3.4). Both paint inline SVG `fill` / `stroke`, which the system palette does not replace, so they ask `useForcedColors()` (`src/ui/media.ts`) and fall back to the colours they draw today.
+- Templates get restrained colours, three each, on their main flows; their simulation results do not change. The colours are data in the shipped file, written by the Template's builder through `withTemplateFlowColours` (`src/engine/templateFlowColours.ts`): each listed node takes its flow's palette colour, and so does every resource edge whose two ends are in the same flow; a Parameter, a Register, a missing id or a node listed twice fails the build.
+
+| Template | Sage | Gold | Violet | Rose |
+|---|---|---|---|---|
+| Coffee roastery operations flow | green beans | roasted beans, from the roast on | — | desserts |
+| 3-zone gacha banner comparison | General / Free zone | — | Premium Standard zone | Premium Pickup zone |
+| Early MMO progression | items and loot | gold | experience and level | — |
+
+The gacha zones take the colour their frames already carry. Uncoloured: every Parameter and Register, the gacha comparison row, the MMO combat chain, encounters and upkeep. Each Template's engine digest equals the one recorded before the colours; its content and full revision digests change with them.
 
 ## FC-7. Compact nodes (PR 3)
 
@@ -211,13 +221,16 @@ Unit:
 - `src/model/flowColour.test.ts` — `serialize` → `deserialize` keeps `accent` on all eight node kinds and both edge kinds, and a file without it gains nothing; an invalid value is dropped and the element kept; a module insert keeps every colour; selection flags never reach the file; `semanticDigest` is unchanged by setting, changing and removing colours and by selection flags; the full revision digest changes and comes back; equal colours in either case give equal digests; a document with no colour projects byte-identically and the `/1` projection never emits it; a side with a surviving colour is `loop-revision/9` and its stored digest verifies; `fieldTag` is `cosmetic`; a colour-only diff is neither engine- nor advisory-affecting; a selective Apply adds, changes and removes it.
 - `src/store/graphStore.accent.test.ts` — `setAccent` over several nodes and edges is one undo entry; undo and redo restore each element's colour or its absence and never move `simulationRev`; re-applying is no entry; an invalid value changes nothing; `updateNodeData` / `setEdgeData` with only `accent` move no `simulationRev`, a real change still does; `accentTargets` follows the `selected` flags, else the Inspector's element.
 - `src/store/recentAccents.test.ts` — at most 8, newest first, de-duplicated, stored form only; memory only in a temporary session; removed by the reset.
+- `src/engine/templateFlowColours.test.ts` (PR 2) — `withTemplateFlowColours` colours the listed nodes and the resource edges inside one flow and fails closed; each Template carries exactly its builder's colours, never on a Parameter or a Register, an edge coloured exactly when it is a resource edge inside one flow; its engine digest is the one recorded before the colours (`sha256Baseline.fixture.ts`), and its content and full revision digests are pinned at their values with the colours. `src/model/sha256Baseline.test.ts` keeps the recorded #301 digests: for these three files it checks the engine digest as recorded, and an explicit legacy test removes `accent` and checks all three recorded digests.
 - `src/ui/flowColour.test.ts` — every palette colour gives no notice and passes 3:1 on the four surfaces; the measured faint colours give the right notice for the right place and theme; the state-colour notice; the DOM id fragment.
 
 End to end (Chrome; desktop, the `mobile` project, forced colours, both themes):
 
 - `e2e/flow-colour.spec.ts` — a palette colour and Default on a node; an edge's line, its own arrow (one marker per colour, no `#` in an id) and its label; one choice over a multi-selection as one undo step, and Mixed; the browser colour input applying on `change` only, also on a mixed selection; the hex field, its refused alpha, its notices and Escape; keyboard only; the step and a Monte Carlo result kept through a colour change, its undo and redo; autosave and reload, Graph JSON export, an invalid file value dropped with the element kept; a share link's codec; the four layers at once on one Register, read from the pixels; a faint colour keeping the structure line; a selected coloured edge over its underlay and a state edge still dashed; Focus mode dimming; forced colours drawing no flow colour; the pinned surface and state colours against the computed tokens of both themes, and no frame token holding a palette value.
-- `e2e/flow-colour-mobile.spec.ts` (`mobile` project) — a desktop-set colour renders on the phone; the read-only sheet shows the Colour section with every control disabled.
+- `e2e/flow-colour-mobile.spec.ts` (`mobile` project) — a desktop-set colour renders on the phone; the read-only sheet shows the colour as one line of text with no control: a palette colour's dot, name and hex, another colour's dot and hex, Default with an empty ring, Mixed with no dot.
+- `e2e/flow-colour-views.spec.ts` (PR 2) — the minimap marks and the timeline series (lines and legend) of coloured nodes take their colours while every other mark and series keeps its own, Registers stay dashed and an edge colour reaches neither; the run and its CSV are identical with and without colours; under forced colours both views equal the uncoloured graph's, and leaving forced colours brings the colours back; each colour offered once with the current one pressed once; a locked canvas showing the hex field and the colour input disabled, like the Label field, and the swatches with their colour; each of the three Templates opening with exactly its file's colours on the canvas and the minimap.
 - `e2e/flow-colour-visual.spec.ts` — baselines of every kind and both edge kinds coloured, light and dark, L2 and L0, and every state at once.
+- `e2e/flow-colour-views-visual.spec.ts` (PR 2) — baselines of the minimap and the timeline of a coloured graph, light and dark; the same two under forced colours, back on their kind and series colours; each coloured Template's fit view with its minimap, light and dark (the React Flow attribution masked in the canvas's own background). `e2e/flow-colour-mobile.spec.ts` adds the phone's one-line summary in pixels. Each colour offered once and the stored Recent order are held by DOM tests only.
 - Every existing baseline whose only difference is the new selection ring or the edge underlay is updated and listed by name in the pull request.
 - Not part of the done-when: a manual check of the browser's own colour dialog (it differs by browser and OS and cannot be opened by automation) and a manual screen-reader check.
 
diff --git a/docs/mobile.md b/docs/mobile.md
index b65d72f4..0e3b6ed6 100644
--- a/docs/mobile.md
+++ b/docs/mobile.md
@@ -108,7 +108,7 @@ The mobile layout is a **viewer + runner**. Precisely:
 | structural keyboard shortcuts (undo/redo, duplicate, select-all, nudge) | same early-return |
 | double-click / context-menu editing | `zoomOnDoubleClick={false}`; `onContextMenu` preventDefault on the canvas; no context menu wired |
 | change any node/edge property | Inspector renders every field `disabled` / `readOnly` |
-| change a flow colour (issue #325) | the Inspector's Colour section shows the current colour; its swatches, hex field and colour input are disabled with the rest of the sheet. A colour set on desktop renders on the phone (`docs/flow-colour-and-compact-nodes.md` FC-5) |
+| change a flow colour (issue #325) | the Inspector's Colour section is one line of read-only text with no control: a dot and the colour's name and hex, the hex alone off the palette, Default with an empty ring, Mixed with no dot. A colour set on desktop renders on the phone, in the minimap and the timeline too (`docs/flow-colour-and-compact-nodes.md` FC-5, FC-6) |
 
 **Allowed on mobile** (these are *not* structural graph mutations):
 
diff --git a/e2e/flow-colour-mobile.spec.ts b/e2e/flow-colour-mobile.spec.ts
index 955d45e9..4e70dc72 100644
--- a/e2e/flow-colour-mobile.spec.ts
+++ b/e2e/flow-colour-mobile.spec.ts
@@ -1,10 +1,11 @@
 import type { Locator, Page } from '@playwright/test'
-import { expect, importGraph, openApp, resetAll, test } from './support/loop'
+import { expect, importGraph, openApp, resetAll, snap, test } from './support/loop'
 
 // docs/flow-colour-and-compact-nodes.md FC-5 / docs/mobile.md — on a phone a
 // flow colour set on desktop renders, and the read-only Inspector sheet shows
-// the Colour section with every control disabled. Runs under the `mobile`
-// project (390 x 844, touch).
+// the colour as one line of text: a dot and the colour's name and hex (its hex
+// alone off the palette), Default with an empty ring, Mixed with no dot, and no
+// control at all. Runs under the `mobile` project (390 x 844, touch).
 
 const GRAPH = JSON.stringify({
   schema: 'loop-studio/graph',
@@ -12,6 +13,8 @@ const GRAPH = JSON.stringify({
   nodes: [
     { id: 'src', type: 'source', position: { x: 0, y: 40 }, data: { kind: 'source', label: 'Mint', activation: 'automatic', mode: 'pushAny', accent: '#638EA5' } },
     { id: 'gold', type: 'pool', position: { x: 200, y: 40 }, data: { kind: 'pool', label: 'Gold', activation: 'passive', initial: 10, capacity: 100, mode: 'pullAny', accent: '#B47599' } },
+    { id: 'gems', type: 'pool', position: { x: 0, y: 200 }, data: { kind: 'pool', label: 'Gems', activation: 'passive', initial: 0, capacity: 100, mode: 'pullAny' } },
+    { id: 'spend', type: 'drain', position: { x: 200, y: 200 }, data: { kind: 'drain', label: 'Spend', activation: 'automatic', mode: 'pullAny', accent: '#336699' } },
   ],
   edges: [
     { id: 'e1', type: 'loop', source: 'src', target: 'gold', sourceHandle: 'out', targetHandle: 'in', data: { kind: 'resource', flow: '3', accent: '#A78243' } },
@@ -26,66 +29,88 @@ async function tapNode(page: Page, node: Locator): Promise<void> {
   await page.mouse.up()
 }
 
-test('a desktop-set flow colour renders on the phone; the sheet shows it with every control disabled', async ({ page }) => {
+const sheet = (page: Page) => page.locator('.sheet[aria-label="Inspector — read only"]')
+const colour = (page: Page) => sheet(page).locator('.accent-field')
+/** what the Colour section shows: its line's text, its dot (if any), and whether it holds any control */
+const summary = (page: Page) =>
+  colour(page).evaluate((f) => {
+    const line = f.querySelector('.accent-field__summary') as HTMLElement | null
+    const dot = f.querySelector('.accent-field__dot') as HTMLElement | null
+    const lh = line ? parseFloat(getComputedStyle(line).lineHeight) || 18 : 0
+    return {
+      text: line?.textContent?.replace(/\s+/g, ' ').trim() ?? null,
+      oneLine: line ? line.getBoundingClientRect().height <= lh * 1.5 : false,
+      dot: dot ? { bg: getComputedStyle(dot).backgroundColor, empty: dot.classList.contains('accent-field__dot--none') } : null,
+      controls: f.querySelectorAll('button, input, select, textarea, [tabindex]').length,
+    }
+  })
+
+async function open(page: Page): Promise<void> {
   await openApp(page)
   await resetAll(page)
   await importGraph(page, GRAPH)
+  await expect(page.locator('.react-flow__node[data-id="spend"]')).toBeVisible()
+}
+
+test('a desktop-set flow colour renders on the phone', async ({ page }) => {
+  await open(page)
   const gold = page.locator('.react-flow__node[data-id="gold"]')
-  await expect(gold).toBeVisible()
   await expect(gold.locator('.nodef')).toHaveAttribute('data-accent', '#B47599')
   await expect(gold.locator('.nodef__band')).toHaveCSS('stroke', 'rgb(180, 117, 153)')
   await expect(page.locator('.react-flow__edge[data-id="e1"] path.react-flow__edge-path')).toHaveCSS('stroke', 'rgb(167, 130, 67)')
+})
 
-  await tapNode(page, gold)
-  const sheet = page.locator('.sheet[aria-label="Inspector — read only"]')
-  await expect(sheet).toBeVisible()
-  const colour = sheet.locator('.accent-field')
-  await expect(colour).toBeVisible()
-  await expect(colour.getByRole('button', { name: 'Rose', exact: true })).toHaveAttribute('aria-pressed', 'true')
-  const controls = colour.locator('button, input')
-  const n = await controls.count()
-  expect(n).toBeGreaterThan(6)
-  for (let i = 0; i < n; i++) await expect(controls.nth(i)).toBeDisabled()
+test('the read-only sheet shows the colour as one line of text, with no control', async ({ page }) => {
+  await open(page)
 
-  // the two inputs READ as disabled, like the sheet's other read-only fields
-  // (the shared disabled rule in index.css): same ink and boundary as the Label
-  // field, and the colour input loses its pointer cursor
-  const hex = colour.locator('.accent-field__hex input')
-  const picker = colour.locator('.accent-field__picker input[type="color"]')
-  await expect(hex).toBeDisabled()
-  await expect(picker).toBeDisabled()
-  const reference = sheet.getByRole('textbox', { name: 'Label', exact: true })
-  await expect(reference).toBeDisabled()
-  const look = (loc: Locator) =>
-    loc.evaluate((el) => {
-      const cs = getComputedStyle(el)
-      return { color: cs.color, border: cs.borderTopColor, cursor: cs.cursor }
-    })
-  const ref = await look(reference)
-  const hexLook = await look(hex)
-  expect(hexLook.color).toBe(ref.color)
-  expect(hexLook.border).toBe(ref.border)
-  const pickerLook = await look(picker)
-  expect(pickerLook.border).toBe(ref.border)
-  expect(pickerLook.cursor).not.toBe('pointer')
+  // a palette colour: its dot, its name and its hex
+  await tapNode(page, page.locator('.react-flow__node[data-id="gold"]'))
+  await expect(sheet(page)).toBeVisible()
+  await expect(colour(page)).toBeVisible()
+  await expect(colour(page).getByRole('heading', { name: 'Colour' })).toBeVisible()
+  expect(await summary(page)).toEqual({ text: 'Rose #B47599', oneLine: true, dot: { bg: 'rgb(180, 117, 153)', empty: false }, controls: 0 })
+  await expect(colour(page).locator('.accent-field__hexvalue')).toHaveAttribute('dir', 'ltr')
+  await sheet(page).getByRole('button', { name: /close/i }).click()
 
-  // the swatches still SHOW the current colour: full colour, the pressed ring,
-  // and no disabled boundary, for the palette and the document row alike
-  for (const name of ['Rose', '#B47599']) {
-    const s = colour.getByRole('button', { name, exact: true })
-    await expect(s).toHaveAttribute('aria-pressed', 'true')
-    const st = await s.evaluate((el) => {
-      const cs = getComputedStyle(el)
-      return { bg: cs.backgroundColor, opacity: cs.opacity, filter: cs.filter, ring: cs.boxShadow, border: cs.borderTopColor }
-    })
-    expect(st).toMatchObject({ bg: 'rgb(180, 117, 153)', opacity: '1', filter: 'none' })
-    expect(st.ring).not.toBe('none')
-    expect(st.border).not.toBe(ref.border)
-  }
+  // a colour off the palette: its dot and its hex alone
+  await tapNode(page, page.locator('.react-flow__node[data-id="spend"]'))
+  await expect(colour(page)).toBeVisible()
+  expect(await summary(page)).toEqual({ text: '#336699', oneLine: true, dot: { bg: 'rgb(51, 102, 153)', empty: false }, controls: 0 })
+  await sheet(page).getByRole('button', { name: /close/i }).click()
 
-  // a tap on a disabled swatch changes nothing
-  await colour.getByRole('button', { name: 'Slate', exact: true }).click({ force: true })
+  // no colour: Default, with an empty ring
+  await tapNode(page, page.locator('.react-flow__node[data-id="gems"]'))
+  await expect(colour(page)).toBeVisible()
+  const plain = await summary(page)
+  expect(plain).toMatchObject({ text: 'Default', oneLine: true, controls: 0 })
+  expect(plain.dot?.empty).toBe(true)
+
+  // two elements with different colours: Mixed, and no dot that would read as one colour
+  await page.evaluate(() =>
+    (window as any).__loop.graph.getState().onNodesChange([
+      { id: 'gold', type: 'select', selected: true },
+      { id: 'spend', type: 'select', selected: true },
+    ]),
+  )
+  await expect.poll(async () => (await summary(page)).text).toBe('Mixed')
+  expect(await summary(page)).toEqual({ text: 'Mixed', oneLine: true, dot: null, controls: 0 })
+
+  // nothing in the sheet changed a colour
   expect(
-    await page.evaluate(() => (window as any).__loop.graph.getState().nodes.find((x: { id: string }) => x.id === 'gold').data.accent),
-  ).toBe('#B47599')
+    await page.evaluate(() => (window as any).__loop.graph.getState().nodes.map((n: { id: string; data: { accent?: string } }) => [n.id, n.data.accent ?? null])),
+  ).toEqual([
+    ['src', '#638EA5'],
+    ['gold', '#B47599'],
+    ['gems', null],
+    ['spend', '#336699'],
+  ])
+})
+
+test('the one-line Colour summary, in pixels', async ({ page }) => {
+  await open(page)
+  await tapNode(page, page.locator('.react-flow__node[data-id="gold"]'))
+  await expect(colour(page)).toBeVisible()
+  await colour(page).scrollIntoViewIfNeeded()
+  await page.evaluate(() => (document as unknown as { fonts: { ready: Promise<unknown> } }).fonts.ready)
+  await expect(colour(page)).toHaveScreenshot(...snap(page, 'flow-views-phone-summary'))
 })
diff --git a/e2e/flow-colour-mobile.spec.ts-snapshots/flow-views-phone-summary-mobile-win32.png b/e2e/flow-colour-mobile.spec.ts-snapshots/flow-views-phone-summary-mobile-win32.png
new file mode 100644
index 00000000..011cb1fe
Binary files /dev/null and b/e2e/flow-colour-mobile.spec.ts-snapshots/flow-views-phone-summary-mobile-win32.png differ
diff --git a/e2e/flow-colour-views-visual.spec.ts b/e2e/flow-colour-views-visual.spec.ts
new file mode 100644
index 00000000..91df2a54
--- /dev/null
+++ b/e2e/flow-colour-views-visual.spec.ts
@@ -0,0 +1,95 @@
+import type { Page } from '@playwright/test'
+import { ensureTimelineOpen, expect, importGraph, openApp, resetAll, snap, test } from './support/loop'
+
+// docs/flow-colour-and-compact-nodes.md FC-6 (issue #325, PR 2) — the flow
+// colour beyond the canvas, in pixels: the minimap and the timeline of a
+// coloured graph, light and dark; the same two views under forced colours,
+// back on their kind and series colours; and each coloured Template's fit view
+// with its minimap. (Each colour offered once, and the stored Recent order, are
+// held by the DOM tests in flow-colour-views.spec.ts and flow-colour.spec.ts;
+// the phone's one-line summary by flow-colour-mobile.spec.ts.)
+
+// two Pools and two Registers, one of each coloured, and a coloured edge
+const GRAPH = JSON.stringify({
+  schema: 'loop-studio/graph',
+  version: 1,
+  nodes: [
+    { id: 'src', type: 'source', position: { x: 0, y: 40 }, data: { kind: 'source', label: 'Mint', activation: 'automatic', mode: 'pushAny', accent: '#638EA5' } },
+    { id: 'gold', type: 'pool', position: { x: 260, y: 40 }, data: { kind: 'pool', label: 'Gold', activation: 'passive', initial: 10, capacity: 100, mode: 'pullAny', accent: '#B47599' } },
+    { id: 'gems', type: 'pool', position: { x: 260, y: 200 }, data: { kind: 'pool', label: 'Gems', activation: 'passive', initial: 0, capacity: 100, mode: 'pullAny' } },
+    { id: 'sink', type: 'drain', position: { x: 520, y: 40 }, data: { kind: 'drain', label: 'Spend', activation: 'automatic', mode: 'pullAny', accent: '#A78243' } },
+    { id: 'r_col', type: 'register', position: { x: 520, y: 200 }, data: { kind: 'register', label: 'Double gold', expr: '@gold * 2', accent: '#9182A8' } },
+    { id: 'r_plain', type: 'register', position: { x: 520, y: 330 }, data: { kind: 'register', label: 'Gems plus one', expr: '@gems + 1' } },
+  ],
+  edges: [
+    { id: 'e1', type: 'loop', source: 'src', target: 'gold', sourceHandle: 'out', targetHandle: 'in', data: { kind: 'resource', flow: '3' } },
+    { id: 'e2', type: 'loop', source: 'gold', target: 'sink', sourceHandle: 'out', targetHandle: 'in', data: { kind: 'resource', flow: '1', accent: '#74906B' } },
+    { id: 'e3', type: 'loop', source: 'src', target: 'gems', sourceHandle: 'out', targetHandle: 'in', data: { kind: 'resource', flow: '2' } },
+  ],
+})
+
+const settle = async (page: Page) => {
+  await page.evaluate(() => (document as unknown as { fonts: { ready: Promise<unknown> } }).fonts.ready)
+  await page.mouse.move(2, 2)
+  await page.waitForTimeout(200)
+}
+
+/** the coloured graph after five steps, the timeline open */
+async function run(page: Page): Promise<void> {
+  await openApp(page)
+  await resetAll(page)
+  await importGraph(page, GRAPH)
+  await expect(page.locator('.react-flow__node[data-id="r_plain"]')).toBeVisible()
+  for (let i = 1; i <= 5; i++) {
+    await page.evaluate(() => (window as any).__loop.sim.getState().stepOnce())
+    await expect.poll(() => page.evaluate(() => (window as any).__loop.sim.getState().stepIndex)).toBeGreaterThanOrEqual(i)
+  }
+  await ensureTimelineOpen(page)
+  await page.evaluate(() => (window as any).__loop.rf.fitView({ duration: 0 }))
+  await expect(page.locator('.timeline__line[data-series="gold"]')).toBeVisible()
+  await settle(page)
+}
+
+for (const scheme of ['light', 'dark'] as const) {
+  test(`flow colours in the minimap and the timeline — ${scheme}`, async ({ page }) => {
+    await page.emulateMedia({ colorScheme: scheme })
+    await run(page)
+    await expect(page.locator('.react-flow__minimap')).toHaveScreenshot(...snap(page, `flow-views-minimap-${scheme}`))
+    await expect(page.locator('.timeline__panel')).toHaveScreenshot(...snap(page, `flow-views-timeline-${scheme}`))
+  })
+}
+
+test('forced colours: the minimap and the timeline keep their kind and series colours', async ({ page }) => {
+  await page.emulateMedia({ forcedColors: 'active' })
+  await run(page)
+  await expect(page.locator('.react-flow__minimap')).toHaveScreenshot(...snap(page, 'flow-views-forced-minimap'))
+  await expect(page.locator('.timeline__panel')).toHaveScreenshot(...snap(page, 'flow-views-forced-timeline'))
+})
+
+const TEMPLATES = [
+  { id: 'coffee', name: 'Coffee roastery operations flow', waitFor: 'cafe_retail_demand_kg' },
+  { id: 'gacha', name: '3-zone gacha banner comparison', waitFor: 'cmp1_hit_rate_free' },
+  { id: 'mmo', name: 'Early MMO progression (levels 1–15)', waitFor: 'char_creation' },
+]
+// the stored colours are drawn unchanged in both themes (D-1), so the dark
+// shots hold them against the dark structure lines, labels and frames
+for (const t of TEMPLATES) for (const scheme of ['light', 'dark'] as const) {
+  test(`${t.name} — its flow colours, fit to the pane, with the minimap — ${scheme}`, async ({ page }) => {
+    await page.emulateMedia({ colorScheme: scheme })
+    await openApp(page)
+    await page.locator('.toolbar__actions .menu').first().locator('> button').click()
+    await page.locator('.toolbar__actions .menu').first().locator('.menu__pop [role="menuitem"]', { hasText: t.name }).click()
+    const confirm = page.locator('.mcdlg--confirm').getByRole('button', { name: /load template/i })
+    await confirm.waitFor({ state: 'visible', timeout: 1200 }).catch(() => {})
+    if (await confirm.count()) await confirm.click()
+    await expect(page.locator(`.react-flow__node[data-id="${t.waitFor}"]`)).toBeVisible()
+    await page.evaluate(() => (window as any).__loop.rf.fitView({ duration: 0 }))
+    await settle(page)
+    // the React Flow attribution is masked in the canvas's own background, so
+    // the mask reads as empty canvas instead of the strongest colour in the shot
+    const canvas = await page.locator('.react-flow').evaluate((el) => getComputedStyle(el).backgroundColor)
+    await expect(page.locator('.react-flow')).toHaveScreenshot(
+      ...snap(page, `flow-views-template-${t.id}-${scheme}`, { mask: [page.locator('.react-flow__attribution')], maskColor: canvas }),
+    )
+  })
+}
diff --git a/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-forced-minimap-chromium-win32.png b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-forced-minimap-chromium-win32.png
new file mode 100644
index 00000000..9d3ce43a
Binary files /dev/null and b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-forced-minimap-chromium-win32.png differ
diff --git a/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-forced-timeline-chromium-win32.png b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-forced-timeline-chromium-win32.png
new file mode 100644
index 00000000..b6da6f80
Binary files /dev/null and b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-forced-timeline-chromium-win32.png differ
diff --git a/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-minimap-dark-chromium-win32.png b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-minimap-dark-chromium-win32.png
new file mode 100644
index 00000000..280f85ef
Binary files /dev/null and b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-minimap-dark-chromium-win32.png differ
diff --git a/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-minimap-light-chromium-win32.png b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-minimap-light-chromium-win32.png
new file mode 100644
index 00000000..58245b27
Binary files /dev/null and b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-minimap-light-chromium-win32.png differ
diff --git a/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-template-coffee-dark-chromium-win32.png b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-template-coffee-dark-chromium-win32.png
new file mode 100644
index 00000000..f764b34c
Binary files /dev/null and b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-template-coffee-dark-chromium-win32.png differ
diff --git a/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-template-coffee-light-chromium-win32.png b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-template-coffee-light-chromium-win32.png
new file mode 100644
index 00000000..39d3aa1b
Binary files /dev/null and b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-template-coffee-light-chromium-win32.png differ
diff --git a/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-template-gacha-dark-chromium-win32.png b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-template-gacha-dark-chromium-win32.png
new file mode 100644
index 00000000..73fee714
Binary files /dev/null and b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-template-gacha-dark-chromium-win32.png differ
diff --git a/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-template-gacha-light-chromium-win32.png b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-template-gacha-light-chromium-win32.png
new file mode 100644
index 00000000..51891b41
Binary files /dev/null and b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-template-gacha-light-chromium-win32.png differ
diff --git a/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-template-mmo-dark-chromium-win32.png b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-template-mmo-dark-chromium-win32.png
new file mode 100644
index 00000000..d5f28bc6
Binary files /dev/null and b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-template-mmo-dark-chromium-win32.png differ
diff --git a/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-template-mmo-light-chromium-win32.png b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-template-mmo-light-chromium-win32.png
new file mode 100644
index 00000000..40609188
Binary files /dev/null and b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-template-mmo-light-chromium-win32.png differ
diff --git a/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-timeline-dark-chromium-win32.png b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-timeline-dark-chromium-win32.png
new file mode 100644
index 00000000..a182ae4b
Binary files /dev/null and b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-timeline-dark-chromium-win32.png differ
diff --git a/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-timeline-light-chromium-win32.png b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-timeline-light-chromium-win32.png
new file mode 100644
index 00000000..70961eba
Binary files /dev/null and b/e2e/flow-colour-views-visual.spec.ts-snapshots/flow-views-timeline-light-chromium-win32.png differ
diff --git a/e2e/flow-colour-views.spec.ts b/e2e/flow-colour-views.spec.ts
new file mode 100644
index 00000000..8c5c0fde
--- /dev/null
+++ b/e2e/flow-colour-views.spec.ts
@@ -0,0 +1,241 @@
+import type { Locator, Page } from '@playwright/test'
+import { readFileSync } from 'node:fs'
+import { ensureTimelineOpen, expect, importGraph, openApp, resetAll, test } from './support/loop'
+
+// docs/flow-colour-and-compact-nodes.md FC-5 / FC-6 (issue #325, PR 2) — the
+// flow colour beyond the canvas: the minimap and the timeline take a node's
+// colour, the bundled Templates ship theirs, the run and the CSV never change,
+// forced colours draw none, the Inspector offers each colour once, and a
+// locked canvas shows the editor read-only.
+
+const loop = (page: Page, js: string): Promise<any> => page.evaluate(`(() => { const l = window.__loop; ${js} })()`)
+
+// two Pools and two Registers, one of each coloured, and a coloured edge
+const NODES = [
+  { id: 'src', type: 'source', position: { x: 0, y: 40 }, data: { kind: 'source', label: 'Mint', activation: 'automatic', mode: 'pushAny', accent: '#638EA5' } },
+  { id: 'gold', type: 'pool', position: { x: 260, y: 40 }, data: { kind: 'pool', label: 'Gold', activation: 'passive', initial: 10, capacity: 100, mode: 'pullAny', accent: '#B47599' } },
+  { id: 'gems', type: 'pool', position: { x: 260, y: 200 }, data: { kind: 'pool', label: 'Gems', activation: 'passive', initial: 0, capacity: 100, mode: 'pullAny' } },
+  { id: 'sink', type: 'drain', position: { x: 520, y: 40 }, data: { kind: 'drain', label: 'Spend', activation: 'automatic', mode: 'pullAny', accent: '#A78243' } },
+  { id: 'r_col', type: 'register', position: { x: 520, y: 200 }, data: { kind: 'register', label: 'Double gold', expr: '@gold * 2', accent: '#9182A8' } },
+  { id: 'r_plain', type: 'register', position: { x: 520, y: 330 }, data: { kind: 'register', label: 'Gems plus one', expr: '@gems + 1' } },
+]
+const EDGES = [
+  { id: 'e1', type: 'loop', source: 'src', target: 'gold', sourceHandle: 'out', targetHandle: 'in', data: { kind: 'resource', flow: '3' } },
+  { id: 'e2', type: 'loop', source: 'gold', target: 'sink', sourceHandle: 'out', targetHandle: 'in', data: { kind: 'resource', flow: '1', accent: '#74906B' } },
+  { id: 'e3', type: 'loop', source: 'src', target: 'gems', sourceHandle: 'out', targetHandle: 'in', data: { kind: 'resource', flow: '2' } },
+]
+const COLOURED = JSON.stringify({ schema: 'loop-studio/graph', version: 1, nodes: NODES, edges: EDGES })
+const strip = <T extends { data: Record<string, unknown> }>(xs: T[]) => xs.map((x) => ({ ...x, data: Object.fromEntries(Object.entries(x.data).filter(([k]) => k !== 'accent')) }))
+const PLAIN = JSON.stringify({ schema: 'loop-studio/graph', version: 1, nodes: strip(NODES), edges: strip(EDGES) })
+
+const ROSE = 'rgb(180, 117, 153)'
+const VIOLET = 'rgb(145, 130, 168)'
+
+async function load(page: Page, json: string): Promise<void> {
+  await resetAll(page)
+  await importGraph(page, json)
+  await expect(page.locator('.react-flow__node[data-id="r_plain"]')).toBeVisible()
+  await expect(page.locator('.react-flow__minimap')).toBeVisible()
+}
+
+/** each node's minimap mark fill, by node id (a mark sits at its node's position) */
+const minimapFills = (page: Page) =>
+  page.evaluate(() => {
+    const ns = (window as any).__loop.graph.getState().nodes as { id: string; position: { x: number; y: number } }[]
+    const out: Record<string, string> = {}
+    for (const r of document.querySelectorAll('.react-flow__minimap-node')) {
+      const n = ns.find((m) => m.position.x === +r.getAttribute('x')! && m.position.y === +r.getAttribute('y')!)
+      if (n) out[n.id] = getComputedStyle(r).fill
+    }
+    return out
+  })
+
+async function run(page: Page, steps: number): Promise<void> {
+  for (let i = 1; i <= steps; i++) {
+    await loop(page, 'l.sim.getState().stepOnce()')
+    await expect.poll(() => loop(page, 'return l.sim.getState().stepIndex')).toBeGreaterThanOrEqual(i)
+  }
+  await ensureTimelineOpen(page)
+}
+
+/** each drawn series' stroke and dash, by series id; and the legend marks */
+type TimelineLook = { lines: Record<string, { stroke: string; dash: string }>; marks: string[] }
+const timeline = (page: Page): Promise<TimelineLook> =>
+  page.evaluate(() => ({
+    lines: Object.fromEntries(
+      [...document.querySelectorAll('.timeline__line[data-series]')].map((l) => [
+        l.getAttribute('data-series'),
+        { stroke: getComputedStyle(l).stroke, dash: getComputedStyle(l).strokeDasharray },
+      ]),
+    ),
+    marks: [...document.querySelectorAll('.timeline__legend .timeline__key')].map((k) => getComputedStyle(k.querySelector('.timeline__mark')!).backgroundColor),
+  }))
+
+const series = (page: Page) => loop(page, 'return JSON.stringify(l.sim.getState().series)')
+
+async function csv(page: Page): Promise<string> {
+  const btn = page.locator('.timeline__csv').filter({ hasNotText: /▾/ }).first()
+  await expect(btn).toBeEnabled()
+  const [dl] = await Promise.all([page.waitForEvent('download'), btn.click()])
+  return readFileSync((await dl.path())!, 'utf8')
+}
+
+test.describe('flow colour — the minimap and the timeline (FC-6)', () => {
+  test.beforeEach(async ({ page }) => {
+    await openApp(page)
+  })
+
+  test('the minimap fills a coloured node’s mark with its colour; every other mark keeps its kind fill', async ({ page }) => {
+    await load(page, PLAIN)
+    const plain = await minimapFills(page)
+    expect(Object.keys(plain).sort()).toEqual(['gems', 'gold', 'r_col', 'r_plain', 'sink', 'src'])
+    await load(page, COLOURED)
+    const coloured = await minimapFills(page)
+    expect(coloured).toEqual({
+      ...plain,
+      src: 'rgb(99, 142, 165)',
+      gold: ROSE,
+      sink: 'rgb(167, 130, 67)',
+      r_col: VIOLET,
+    })
+  })
+
+  test('a coloured Pool or Register draws its series in its colour; the others keep theirs; Registers stay dashed', async ({ page }) => {
+    await load(page, PLAIN)
+    await run(page, 3)
+    const plain = await timeline(page)
+    expect(Object.keys(plain.lines).sort()).toEqual(['gems', 'gold', 'r_col', 'r_plain'])
+
+    await load(page, COLOURED)
+    await run(page, 3)
+    const coloured = await timeline(page)
+    expect(coloured.lines).toEqual({
+      ...plain.lines,
+      gold: { stroke: ROSE, dash: 'none' },
+      r_col: { stroke: VIOLET, dash: plain.lines.r_col.dash },
+    })
+    expect(plain.lines.r_col.dash).toBe('4px, 3px')
+    // the legend follows the lines; the coloured edge (Sage) reaches neither
+    expect(coloured.marks).toEqual([ROSE, plain.marks[1], VIOLET, plain.marks[3]])
+    expect([...Object.values(coloured.lines).map((l) => l.stroke), ...coloured.marks]).not.toContain('rgb(116, 144, 107)')
+  })
+
+  test('colours change neither the run nor its CSV', async ({ page }) => {
+    await load(page, PLAIN)
+    await run(page, 5)
+    const plainSeries = await series(page)
+    const plainCsv = await csv(page)
+    await load(page, COLOURED)
+    await run(page, 5)
+    expect(await series(page)).toBe(plainSeries)
+    expect(await csv(page)).toBe(plainCsv)
+  })
+
+  test('under forced colours the minimap and the timeline draw no flow colour', async ({ page }) => {
+    await page.emulateMedia({ forcedColors: 'active' })
+    await load(page, PLAIN)
+    await run(page, 3)
+    const plain = { minimap: await minimapFills(page), timeline: await timeline(page) }
+    await load(page, COLOURED)
+    await run(page, 3)
+    expect({ minimap: await minimapFills(page), timeline: await timeline(page) }).toEqual(plain)
+    // leaving forced colours brings the flow colours back, with no reload
+    await page.emulateMedia({ forcedColors: 'none' })
+    await expect.poll(async () => (await minimapFills(page)).gold).toBe(ROSE)
+    await expect.poll(async () => (await timeline(page)).lines.gold?.stroke).toBe(ROSE)
+  })
+})
+
+test.describe('flow colour — the Inspector offers each colour once (FC-5)', () => {
+  const field = (page: Page) => page.locator('.accent-field')
+  const row = (page: Page, name: string) => field(page).getByRole('group', { name, exact: true })
+  const rowSwatches = (page: Page, name: string) =>
+    row(page, name).evaluateAll((rs) => rs.flatMap((r) => [...r.querySelectorAll('.accent-swatch')].map((b) => b.getAttribute('aria-label'))))
+  const pressed = (page: Page) => field(page).locator('[aria-pressed="true"]')
+
+  test('Recent leaves out the palette’s colours; In this document leaves out both; the current colour is pressed once', async ({ page }) => {
+    await openApp(page)
+    await load(page, PLAIN)
+    // a colour only the document has
+    await loop(page, `l.graph.getState().setAccent(['r_plain'], [], '#123456')`)
+
+    // a palette colour, chosen: it stays in the palette row only
+    await page.locator('.react-flow__node[data-id="gold"]').click()
+    await field(page).getByRole('button', { name: 'Rose', exact: true }).click()
+    expect(await rowSwatches(page, 'Recent')).toEqual([])
+    await expect(row(page, 'Recent')).toHaveCount(0)
+    expect(await rowSwatches(page, 'In this document')).toEqual(['#123456'])
+    await expect(pressed(page)).toHaveCount(1)
+    await expect(field(page).getByRole('button', { name: 'Rose', exact: true })).toHaveAttribute('aria-pressed', 'true')
+
+    // a colour off the palette, typed: Recent offers it, the document row no longer
+    await page.locator('.react-flow__node[data-id="sink"]').click()
+    const hex = field(page).locator('.accent-field__hex input')
+    await hex.fill('#336699')
+    await hex.press('Enter')
+    expect(await rowSwatches(page, 'Recent')).toEqual(['#336699'])
+    expect(await rowSwatches(page, 'In this document')).toEqual(['#123456'])
+    await expect(pressed(page)).toHaveCount(1)
+    await expect(row(page, 'Recent').getByRole('button', { name: '#336699', exact: true })).toHaveAttribute('aria-pressed', 'true')
+
+    // a node with the document-only colour: pressed once, in the document row
+    await page.locator('.react-flow__node[data-id="r_plain"]').click()
+    await expect(pressed(page)).toHaveCount(1)
+    await expect(row(page, 'In this document').getByRole('button', { name: '#123456', exact: true })).toHaveAttribute('aria-pressed', 'true')
+  })
+
+  test('a locked canvas: the hex field and the colour input read as disabled; the swatches keep showing the colour', async ({ page }) => {
+    await openApp(page)
+    await load(page, COLOURED)
+    await page.locator('.react-flow__node[data-id="gold"]').click()
+    await page.locator('.react-flow__controls-button.rf-lock').click()
+    await expect(page.locator('.canvas.canvas--locked')).toBeVisible()
+    const ro = page.locator('fieldset.inspector-ro--desktop')
+    const look = (loc: Locator) =>
+      loc.evaluate((el) => {
+        const cs = getComputedStyle(el)
+        return { disabled: (el as HTMLInputElement).disabled || el.matches(':disabled'), color: cs.color, border: cs.borderTopColor, cursor: cs.cursor, bg: cs.backgroundColor, opacity: cs.opacity, ring: cs.boxShadow }
+      })
+    const ref = await look(ro.getByRole('textbox', { name: 'Label', exact: true }))
+    const hex = await look(ro.locator('.accent-field__hex input'))
+    const picker = await look(ro.locator('.accent-field__picker input[type="color"]'))
+    expect(ref.disabled && hex.disabled && picker.disabled).toBe(true)
+    expect({ color: hex.color, border: hex.border }).toEqual({ color: ref.color, border: ref.border })
+    expect(picker.border).toBe(ref.border)
+    expect(picker.cursor).not.toBe('pointer')
+    const rose = await look(ro.locator('.accent-field').getByRole('button', { name: 'Rose', exact: true }))
+    expect(rose).toMatchObject({ disabled: true, bg: ROSE, opacity: '1' })
+    expect(rose.ring).not.toBe('none')
+    expect(rose.border).not.toBe(ref.border)
+  })
+})
+
+test.describe('flow colour — the bundled Templates (FC-6)', () => {
+  const TEMPLATES = [
+    { name: 'Coffee roastery operations flow', waitFor: 'cafe_retail_demand_kg', file: 'coffee-roastery.json' },
+    { name: '3-zone gacha banner comparison', waitFor: 'cmp1_hit_rate_free', file: 'gacha-banner-zones.json' },
+    { name: 'Early MMO progression (levels 1–15)', waitFor: 'char_creation', file: 'mmo-progression.json' },
+  ]
+  for (const t of TEMPLATES) {
+    test(`${t.name}: opens with its three flow colours, on the canvas and the minimap`, async ({ page }) => {
+      const doc = JSON.parse(readFileSync(new URL(`../examples/${t.file}`, import.meta.url), 'utf8')) as { nodes: { id: string; data: { accent?: string } }[] }
+      const want = Object.fromEntries(doc.nodes.filter((n) => n.data.accent).map((n) => [n.id, n.data.accent!]))
+      expect(new Set(Object.values(want)).size).toBe(3)
+
+      await openApp(page)
+      await page.locator('.toolbar__actions .menu').first().locator('> button').click()
+      await page.locator('.toolbar__actions .menu').first().locator('.menu__pop [role="menuitem"]', { hasText: t.name }).click()
+      const confirm = page.locator('.mcdlg--confirm').getByRole('button', { name: /load template/i })
+      await confirm.waitFor({ state: 'visible', timeout: 1200 }).catch(() => {})
+      if (await confirm.count()) await confirm.click()
+      await expect(page.locator(`.react-flow__node[data-id="${t.waitFor}"]`)).toBeVisible()
+
+      // the store holds exactly the file's colours, and every coloured node is drawn with one
+      expect(await loop(page, `return Object.fromEntries(l.graph.getState().nodes.filter((n) => n.data.accent).map((n) => [n.id, n.data.accent]))`)).toEqual(want)
+      await expect(page.locator('.react-flow__node .nodef[data-accent]')).toHaveCount(Object.keys(want).length)
+      const fills = await minimapFills(page)
+      const toRgb = (hex: string) => `rgb(${parseInt(hex.slice(1, 3), 16)}, ${parseInt(hex.slice(3, 5), 16)}, ${parseInt(hex.slice(5, 7), 16)})`
+      for (const [id, hex] of Object.entries(want)) expect(fills[id], id).toBe(toRgb(hex))
+    })
+  }
+})
diff --git a/e2e/flow-colour.spec.ts b/e2e/flow-colour.spec.ts
index adddba0f..633cd3c5 100644
--- a/e2e/flow-colour.spec.ts
+++ b/e2e/flow-colour.spec.ts
@@ -148,9 +148,11 @@ test.describe('flow colour — the Colour section (FC-5)', () => {
     // a palette colour gives no notice
     await swatch(page, 'Sage').click()
     await expect(notices).toBeEmpty()
-    // recent colours: newest first
-    await expect(section(page).getByRole('group', { name: 'Recent' }).getByRole('button')).toHaveCount(2)
-    await expect(section(page).getByRole('group', { name: 'Recent' }).getByRole('button').first()).toHaveAttribute('aria-label', '#74906B')
+    // recent colours: stored newest first; the Recent row leaves out the
+    // palette's colours, which the palette row already offers (PR 2, FC-5)
+    expect(await page.evaluate(() => JSON.parse(localStorage.getItem('loop-studio:recent-accents') ?? '[]'))).toEqual(['#74906B', '#FFFF00'])
+    await expect(section(page).getByRole('group', { name: 'Recent' }).getByRole('button')).toHaveCount(1)
+    await expect(section(page).getByRole('group', { name: 'Recent' }).getByRole('button').first()).toHaveAttribute('aria-label', '#FFFF00')
   })
 
   test('keyboard only: Tab reaches the swatches, Enter and Space apply', async ({ page }) => {
diff --git a/e2e/support/snapshot-policy.ts b/e2e/support/snapshot-policy.ts
index 5039d2ff..4a1ec1ce 100644
--- a/e2e/support/snapshot-policy.ts
+++ b/e2e/support/snapshot-policy.ts
@@ -73,6 +73,23 @@ export const SNAPSHOTS: Record<string, Partial<Record<SnapshotProject, SnapshotK
   'flow-colour-dark-L2': { chromium: 'element' },
   'flow-colour-dark-L0': { chromium: 'element' },
   'flow-colour-states': { chromium: 'element' },
+  // flow-colour-views-visual.spec.ts — docs/flow-colour-and-compact-nodes.md
+  // FC-6 (PR 2): the minimap and the timeline panel, and each Template's full
+  // canvas pane with the timeline closed (980 x 662), light and dark, so `element`
+  'flow-views-minimap-light': { chromium: 'element' },
+  'flow-views-minimap-dark': { chromium: 'element' },
+  'flow-views-timeline-light': { chromium: 'element' },
+  'flow-views-timeline-dark': { chromium: 'element' },
+  'flow-views-forced-minimap': { chromium: 'element' },
+  'flow-views-forced-timeline': { chromium: 'element' },
+  'flow-views-template-coffee-light': { chromium: 'element' },
+  'flow-views-template-coffee-dark': { chromium: 'element' },
+  'flow-views-template-gacha-light': { chromium: 'element' },
+  'flow-views-template-gacha-dark': { chromium: 'element' },
+  'flow-views-template-mmo-light': { chromium: 'element' },
+  'flow-views-template-mmo-dark': { chromium: 'element' },
+  // flow-colour-mobile.spec.ts — the phone's one-line Colour summary (FC-5)
+  'flow-views-phone-summary': { mobile: 'element' },
   // model-nodes-visual.spec.ts
   'register-unit-row': { chromium: 'desktop-canvas-clip' },
   // i18n-visual.spec.ts — representative KO scenes
diff --git a/e2e/whats-new.spec.ts b/e2e/whats-new.spec.ts
index e8346563..fa530dcd 100644
--- a/e2e/whats-new.spec.ts
+++ b/e2e/whats-new.spec.ts
@@ -238,7 +238,7 @@ test.describe('closing the notice and opening the panel are different things', (
         expect(text).not.toContain('text unavailable')
       }
     }
-    expect(RELEASE_NOTES.map((n) => n.version)).toEqual(['0.19.0', '0.18.2', '0.18.1', '0.18.0', '0.17.2', '0.17.1', '0.17.0', '0.16.0', '0.15.3', '0.15.2', '0.15.1', '0.15.0', '0.14.0'])
+    expect(RELEASE_NOTES.map((n) => n.version)).toEqual(['0.20.0', '0.19.0', '0.18.2', '0.18.1', '0.18.0', '0.17.2', '0.17.1', '0.17.0', '0.16.0', '0.15.3', '0.15.2', '0.15.1', '0.15.0', '0.14.0'])
 
     await page.keyboard.press('Escape')
     await expect(panel).toHaveCount(0)
diff --git a/examples/coffee-roastery.json b/examples/coffee-roastery.json
index 3ef15934..c797d611 100644
--- a/examples/coffee-roastery.json
+++ b/examples/coffee-roastery.json
@@ -78,7 +78,8 @@
         "kind": "source",
         "label": "Green bean delivery",
         "activation": "automatic",
-        "mode": "pushAny"
+        "mode": "pushAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -94,7 +95,8 @@
         "activation": "passive",
         "initial": 90,
         "capacity": 130,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -108,7 +110,8 @@
         "kind": "drain",
         "label": "Green wholesale",
         "activation": "automatic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -122,7 +125,8 @@
         "kind": "gate",
         "label": "Roasting · 82% yield",
         "activation": "automatic",
-        "distribution": "deterministic"
+        "distribution": "deterministic",
+        "accent": "#A78243"
       }
     },
     {
@@ -138,7 +142,8 @@
         "activation": "passive",
         "initial": 30,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#A78243"
       }
     },
     {
@@ -152,7 +157,8 @@
         "kind": "drain",
         "label": "Roasting weight loss",
         "activation": "automatic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#A78243"
       }
     },
     {
@@ -166,7 +172,8 @@
         "kind": "drain",
         "label": "Online bagged-bean sales",
         "activation": "automatic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#A78243"
       }
     },
     {
@@ -180,7 +187,8 @@
         "kind": "drain",
         "label": "Cafe & retail bean use",
         "activation": "automatic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#A78243"
       }
     },
     {
@@ -194,7 +202,8 @@
         "kind": "drain",
         "label": "Staff, cupping & sampling",
         "activation": "automatic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#A78243"
       }
     },
     {
@@ -208,7 +217,8 @@
         "kind": "source",
         "label": "Dessert prep",
         "activation": "automatic",
-        "mode": "pushAny"
+        "mode": "pushAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -224,7 +234,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -238,7 +249,8 @@
         "kind": "drain",
         "label": "Dessert sales",
         "activation": "automatic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -252,7 +264,8 @@
         "kind": "drain",
         "label": "End-of-day leftover",
         "activation": "automatic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -334,7 +347,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "34"
+        "flow": "34",
+        "accent": "#74906B"
       }
     },
     {
@@ -346,7 +360,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "@green_wholesale_kg"
+        "flow": "@green_wholesale_kg",
+        "accent": "#74906B"
       }
     },
     {
@@ -370,7 +385,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "82"
+        "flow": "82",
+        "accent": "#A78243"
       }
     },
     {
@@ -382,7 +398,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "18"
+        "flow": "18",
+        "accent": "#A78243"
       }
     },
     {
@@ -394,7 +411,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "@online_orders"
+        "flow": "@online_orders",
+        "accent": "#A78243"
       }
     },
     {
@@ -406,7 +424,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "@cafe_retail_demand_kg"
+        "flow": "@cafe_retail_demand_kg",
+        "accent": "#A78243"
       }
     },
     {
@@ -418,7 +437,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "14%"
+        "flow": "14%",
+        "accent": "#A78243"
       }
     },
     {
@@ -430,7 +450,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "@dessert_prep"
+        "flow": "@dessert_prep",
+        "accent": "#B47599"
       }
     },
     {
@@ -442,7 +463,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "16"
+        "flow": "16",
+        "accent": "#B47599"
       }
     },
     {
@@ -454,7 +476,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "55%"
+        "flow": "55%",
+        "accent": "#B47599"
       }
     }
   ],
diff --git a/examples/gacha-banner-zones.json b/examples/gacha-banner-zones.json
index e74fa2ca..11eb19b7 100644
--- a/examples/gacha-banner-zones.json
+++ b/examples/gacha-banner-zones.json
@@ -82,7 +82,8 @@
         "kind": "source",
         "label": "Fund tickets",
         "activation": "onStart",
-        "mode": "pushAny"
+        "mode": "pushAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -98,7 +99,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -114,7 +116,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -169,7 +172,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -185,7 +189,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -201,7 +206,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -216,7 +222,8 @@
         "label": "Roll",
         "activation": "automatic",
         "distribution": "probabilistic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -231,7 +238,8 @@
         "label": "SSR",
         "activation": "automatic",
         "distribution": "deterministic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -246,7 +254,8 @@
         "label": "SR",
         "activation": "automatic",
         "distribution": "deterministic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -261,7 +270,8 @@
         "label": "R",
         "activation": "automatic",
         "distribution": "deterministic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -275,7 +285,8 @@
         "kind": "source",
         "label": "Fund tickets",
         "activation": "onStart",
-        "mode": "pushAny"
+        "mode": "pushAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -291,7 +302,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -307,7 +319,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -362,7 +375,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -378,7 +392,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -394,7 +409,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -409,7 +425,8 @@
         "label": "Roll",
         "activation": "automatic",
         "distribution": "probabilistic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -424,7 +441,8 @@
         "label": "SSR",
         "activation": "automatic",
         "distribution": "deterministic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -439,7 +457,8 @@
         "label": "SR",
         "activation": "automatic",
         "distribution": "deterministic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -454,7 +473,8 @@
         "label": "R",
         "activation": "automatic",
         "distribution": "deterministic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -470,7 +490,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -498,7 +519,8 @@
         "label": "Forced SSR",
         "activation": "automatic",
         "distribution": "deterministic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -514,7 +536,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -528,7 +551,8 @@
         "kind": "source",
         "label": "Fund tickets",
         "activation": "onStart",
-        "mode": "pushAny"
+        "mode": "pushAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -544,7 +568,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -560,7 +585,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -615,7 +641,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -631,7 +658,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -647,7 +675,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -663,7 +692,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -692,7 +722,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -708,7 +739,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -749,7 +781,8 @@
         "label": "Roll — normal, not owed",
         "activation": "automatic",
         "distribution": "probabilistic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -764,7 +797,8 @@
         "label": "Roll — normal, owed",
         "activation": "automatic",
         "distribution": "probabilistic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -779,7 +813,8 @@
         "label": "Roll — forced, not owed",
         "activation": "automatic",
         "distribution": "probabilistic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -794,7 +829,8 @@
         "label": "Roll — forced, owed",
         "activation": "automatic",
         "distribution": "deterministic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -809,7 +845,8 @@
         "label": "SSR split — not owed",
         "activation": "automatic",
         "distribution": "probabilistic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -824,7 +861,8 @@
         "label": "Pickup hit",
         "activation": "automatic",
         "distribution": "deterministic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -839,7 +877,8 @@
         "label": "Standard hit",
         "activation": "automatic",
         "distribution": "deterministic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -854,7 +893,8 @@
         "label": "SR",
         "activation": "automatic",
         "distribution": "deterministic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -869,7 +909,8 @@
         "label": "R",
         "activation": "automatic",
         "distribution": "deterministic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -885,7 +926,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -901,7 +943,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#B47599"
       }
     },
     {
@@ -945,7 +988,8 @@
       "data": {
         "kind": "resource",
         "flow": "@pulls_per_zone",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#74906B"
       }
     },
     {
@@ -958,7 +1002,8 @@
       "data": {
         "kind": "resource",
         "flow": "@zone1_free_w_ssr",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#74906B"
       }
     },
     {
@@ -971,7 +1016,8 @@
       "data": {
         "kind": "resource",
         "flow": "@zone1_free_w_sr",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#74906B"
       }
     },
     {
@@ -984,7 +1030,8 @@
       "data": {
         "kind": "resource",
         "flow": "@zone1_free_w_r",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#74906B"
       }
     },
     {
@@ -997,7 +1044,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#74906B"
       }
     },
     {
@@ -1010,7 +1058,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#74906B"
       }
     },
     {
@@ -1071,7 +1120,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#74906B"
       }
     },
     {
@@ -1084,7 +1134,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#74906B"
       }
     },
     {
@@ -1097,7 +1148,8 @@
       "data": {
         "kind": "resource",
         "flow": "@pulls_per_zone",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#9182A8"
       }
     },
     {
@@ -1110,7 +1162,8 @@
       "data": {
         "kind": "resource",
         "flow": "@zone2_standard_w_ssr",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#9182A8"
       }
     },
     {
@@ -1123,7 +1176,8 @@
       "data": {
         "kind": "resource",
         "flow": "@zone2_standard_w_sr",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#9182A8"
       }
     },
     {
@@ -1142,7 +1196,8 @@
             "x": 1740,
             "y": 370
           }
-        ]
+        ],
+        "accent": "#9182A8"
       }
     },
     {
@@ -1155,7 +1210,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#9182A8"
       }
     },
     {
@@ -1168,7 +1224,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#9182A8"
       }
     },
     {
@@ -1229,7 +1286,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#9182A8"
       }
     },
     {
@@ -1242,7 +1300,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#9182A8"
       }
     },
     {
@@ -1391,7 +1450,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#9182A8"
       }
     },
     {
@@ -1404,7 +1464,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#9182A8"
       }
     },
     {
@@ -1417,7 +1478,8 @@
       "data": {
         "kind": "resource",
         "flow": "@pulls_per_zone",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#B47599"
       }
     },
     {
@@ -1430,7 +1492,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#B47599"
       }
     },
     {
@@ -1443,7 +1506,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#B47599"
       }
     },
     {
@@ -1456,7 +1520,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#B47599"
       }
     },
     {
@@ -1469,7 +1534,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#B47599"
       }
     },
     {
@@ -1618,7 +1684,8 @@
       "data": {
         "kind": "resource",
         "flow": "@zone3_pickup_w_ssr",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#B47599"
       }
     },
     {
@@ -1631,7 +1698,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#B47599"
       }
     },
     {
@@ -1644,7 +1712,8 @@
       "data": {
         "kind": "resource",
         "flow": "@zone3_pickup_w_pickup",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#B47599"
       }
     },
     {
@@ -1657,7 +1726,8 @@
       "data": {
         "kind": "resource",
         "flow": "@zone3_pickup_w_standard",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#B47599"
       }
     },
     {
@@ -1670,7 +1740,8 @@
       "data": {
         "kind": "resource",
         "flow": "@zone3_pickup_w_ssr",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#B47599"
       }
     },
     {
@@ -1683,7 +1754,8 @@
       "data": {
         "kind": "resource",
         "flow": "@zone3_pickup_w_sr",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#B47599"
       }
     },
     {
@@ -1696,7 +1768,8 @@
       "data": {
         "kind": "resource",
         "flow": "@zone3_pickup_w_r",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#B47599"
       }
     },
     {
@@ -1709,7 +1782,8 @@
       "data": {
         "kind": "resource",
         "flow": "@zone3_pickup_w_sr",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#B47599"
       }
     },
     {
@@ -1722,7 +1796,8 @@
       "data": {
         "kind": "resource",
         "flow": "@zone3_pickup_w_r",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#B47599"
       }
     },
     {
@@ -1735,7 +1810,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#B47599"
       }
     },
     {
@@ -1748,7 +1824,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#B47599"
       }
     },
     {
@@ -1761,7 +1838,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#B47599"
       }
     },
     {
@@ -1774,7 +1852,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#B47599"
       }
     },
     {
@@ -1787,7 +1866,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#B47599"
       }
     },
     {
diff --git a/examples/mmo-progression.json b/examples/mmo-progression.json
index afac2ad4..44230a8c 100644
--- a/examples/mmo-progression.json
+++ b/examples/mmo-progression.json
@@ -15,7 +15,8 @@
         "activation": "passive",
         "initial": 1,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -31,7 +32,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -47,7 +49,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -63,7 +66,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": 12,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#A78243"
       }
     },
     {
@@ -123,7 +127,8 @@
         "kind": "converter",
         "label": "Hunt payout",
         "activation": "automatic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#A78243"
       }
     },
     {
@@ -137,7 +142,8 @@
         "kind": "converter",
         "label": "Quest payout",
         "activation": "automatic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#A78243"
       }
     },
     {
@@ -153,7 +159,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -169,7 +176,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -262,7 +270,8 @@
         "initial": 10,
         "capacity": null,
         "mode": "pullAny",
-        "resourceType": "currency"
+        "resourceType": "currency",
+        "accent": "#A78243"
       }
     },
     {
@@ -278,7 +287,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#A78243"
       }
     },
     {
@@ -294,7 +304,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#A78243"
       }
     },
     {
@@ -310,7 +321,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#A78243"
       }
     },
     {
@@ -326,7 +338,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#A78243"
       }
     },
     {
@@ -342,7 +355,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#A78243"
       }
     },
     {
@@ -482,7 +496,8 @@
         "kind": "converter",
         "label": "Resupply",
         "activation": "automatic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#A78243"
       }
     },
     {
@@ -559,7 +574,8 @@
         "kind": "converter",
         "label": "Repair (bill)",
         "activation": "automatic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#A78243"
       }
     },
     {
@@ -575,7 +591,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": 8,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -591,7 +608,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": 8,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -605,7 +623,8 @@
         "kind": "converter",
         "label": "Loot dispatch",
         "activation": "automatic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -619,7 +638,8 @@
         "kind": "gate",
         "label": "Loot category",
         "activation": "automatic",
-        "distribution": "probabilistic"
+        "distribution": "probabilistic",
+        "accent": "#74906B"
       }
     },
     {
@@ -635,7 +655,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": 8,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -651,7 +672,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": 8,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -667,7 +689,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": 8,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -683,7 +706,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": 8,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -699,7 +723,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -715,7 +740,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -731,7 +757,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -747,7 +774,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": null,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -761,7 +789,8 @@
         "kind": "converter",
         "label": "Equip",
         "activation": "automatic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -775,7 +804,8 @@
         "kind": "converter",
         "label": "Sell to vendor",
         "activation": "automatic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -789,7 +819,8 @@
         "kind": "converter",
         "label": "Use consumable",
         "activation": "automatic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -803,7 +834,8 @@
         "kind": "converter",
         "label": "Sell rare",
         "activation": "automatic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -966,7 +998,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": 3,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -980,7 +1013,8 @@
         "kind": "gate",
         "label": "Starter loot",
         "activation": "automatic",
-        "distribution": "probabilistic"
+        "distribution": "probabilistic",
+        "accent": "#74906B"
       }
     },
     {
@@ -995,7 +1029,8 @@
         "label": "Starter XP meter",
         "activation": "automatic",
         "distribution": "deterministic",
-        "mode": "pullAll"
+        "mode": "pullAll",
+        "accent": "#9182A8"
       }
     },
     {
@@ -1009,7 +1044,8 @@
         "kind": "converter",
         "label": "Starter level up",
         "activation": "automatic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -1113,7 +1149,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": 3,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -1127,7 +1164,8 @@
         "kind": "gate",
         "label": "Foothills loot",
         "activation": "automatic",
-        "distribution": "probabilistic"
+        "distribution": "probabilistic",
+        "accent": "#74906B"
       }
     },
     {
@@ -1142,7 +1180,8 @@
         "label": "Foothills XP meter",
         "activation": "automatic",
         "distribution": "deterministic",
-        "mode": "pullAll"
+        "mode": "pullAll",
+        "accent": "#9182A8"
       }
     },
     {
@@ -1156,7 +1195,8 @@
         "kind": "converter",
         "label": "Foothills level up",
         "activation": "automatic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -1260,7 +1300,8 @@
         "activation": "passive",
         "initial": 0,
         "capacity": 3,
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#74906B"
       }
     },
     {
@@ -1274,7 +1315,8 @@
         "kind": "gate",
         "label": "Highlands loot",
         "activation": "automatic",
-        "distribution": "probabilistic"
+        "distribution": "probabilistic",
+        "accent": "#74906B"
       }
     },
     {
@@ -1289,7 +1331,8 @@
         "label": "Highlands XP meter",
         "activation": "automatic",
         "distribution": "deterministic",
-        "mode": "pullAll"
+        "mode": "pullAll",
+        "accent": "#9182A8"
       }
     },
     {
@@ -1303,7 +1346,8 @@
         "kind": "converter",
         "label": "Highlands level up",
         "activation": "automatic",
-        "mode": "pullAny"
+        "mode": "pullAny",
+        "accent": "#9182A8"
       }
     },
     {
@@ -1550,7 +1594,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "2"
+        "flow": "2",
+        "accent": "#A78243"
       }
     },
     {
@@ -1562,7 +1607,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "2"
+        "flow": "2",
+        "accent": "#A78243"
       }
     },
     {
@@ -1610,7 +1656,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "7"
+        "flow": "7",
+        "accent": "#A78243"
       }
     },
     {
@@ -1622,7 +1669,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "7"
+        "flow": "7",
+        "accent": "#A78243"
       }
     },
     {
@@ -1778,7 +1826,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "6"
+        "flow": "6",
+        "accent": "#A78243"
       }
     },
     {
@@ -1838,7 +1887,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "6"
+        "flow": "6",
+        "accent": "#A78243"
       }
     },
     {
@@ -1887,7 +1937,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "4"
+        "flow": "4",
+        "accent": "#A78243"
       }
     },
     {
@@ -1899,7 +1950,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "4"
+        "flow": "4",
+        "accent": "#A78243"
       }
     },
     {
@@ -1963,7 +2015,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "1"
+        "flow": "1",
+        "accent": "#74906B"
       }
     },
     {
@@ -1975,7 +2028,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "1"
+        "flow": "1",
+        "accent": "#74906B"
       }
     },
     {
@@ -1987,7 +2041,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "1"
+        "flow": "1",
+        "accent": "#74906B"
       }
     },
     {
@@ -1999,7 +2054,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "all"
+        "flow": "all",
+        "accent": "#74906B"
       }
     },
     {
@@ -2011,7 +2067,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "34"
+        "flow": "34",
+        "accent": "#74906B"
       }
     },
     {
@@ -2023,7 +2080,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "40"
+        "flow": "40",
+        "accent": "#74906B"
       }
     },
     {
@@ -2035,7 +2093,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "20"
+        "flow": "20",
+        "accent": "#74906B"
       }
     },
     {
@@ -2047,7 +2106,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "6"
+        "flow": "6",
+        "accent": "#74906B"
       }
     },
     {
@@ -2059,7 +2119,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "1"
+        "flow": "1",
+        "accent": "#74906B"
       }
     },
     {
@@ -2071,7 +2132,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "1"
+        "flow": "1",
+        "accent": "#74906B"
       }
     },
     {
@@ -2095,7 +2157,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "1"
+        "flow": "1",
+        "accent": "#74906B"
       }
     },
     {
@@ -2107,7 +2170,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "1"
+        "flow": "1",
+        "accent": "#74906B"
       }
     },
     {
@@ -2155,7 +2219,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "1"
+        "flow": "1",
+        "accent": "#74906B"
       }
     },
     {
@@ -2167,7 +2232,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "1"
+        "flow": "1",
+        "accent": "#74906B"
       }
     },
     {
@@ -2227,7 +2293,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "1"
+        "flow": "1",
+        "accent": "#74906B"
       }
     },
     {
@@ -2239,7 +2306,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "1"
+        "flow": "1",
+        "accent": "#74906B"
       }
     },
     {
@@ -2448,7 +2516,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "all"
+        "flow": "all",
+        "accent": "#74906B"
       }
     },
     {
@@ -2461,7 +2530,8 @@
       "data": {
         "kind": "resource",
         "flow": "38",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#74906B"
       }
     },
     {
@@ -2487,7 +2557,8 @@
       "data": {
         "kind": "resource",
         "flow": "10",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#9182A8"
       }
     },
     {
@@ -2499,7 +2570,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "10"
+        "flow": "10",
+        "accent": "#9182A8"
       }
     },
     {
@@ -2512,7 +2584,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#9182A8"
       }
     },
     {
@@ -2714,7 +2787,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "all"
+        "flow": "all",
+        "accent": "#74906B"
       }
     },
     {
@@ -2727,7 +2801,8 @@
       "data": {
         "kind": "resource",
         "flow": "38",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#74906B"
       }
     },
     {
@@ -2753,7 +2828,8 @@
       "data": {
         "kind": "resource",
         "flow": "19",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#9182A8"
       }
     },
     {
@@ -2765,7 +2841,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "19"
+        "flow": "19",
+        "accent": "#9182A8"
       }
     },
     {
@@ -2778,7 +2855,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#9182A8"
       }
     },
     {
@@ -3032,7 +3110,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "all"
+        "flow": "all",
+        "accent": "#74906B"
       }
     },
     {
@@ -3045,7 +3124,8 @@
       "data": {
         "kind": "resource",
         "flow": "44",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#74906B"
       }
     },
     {
@@ -3071,7 +3151,8 @@
       "data": {
         "kind": "resource",
         "flow": "27",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#9182A8"
       }
     },
     {
@@ -3083,7 +3164,8 @@
       "type": "loop",
       "data": {
         "kind": "resource",
-        "flow": "27"
+        "flow": "27",
+        "accent": "#9182A8"
       }
     },
     {
@@ -3096,7 +3178,8 @@
       "data": {
         "kind": "resource",
         "flow": "1",
-        "route": "orthogonal"
+        "route": "orthogonal",
+        "accent": "#9182A8"
       }
     },
     {
diff --git a/package-lock.json b/package-lock.json
index 790bd11c..7697157d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "loop-studio",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "loop-studio",
-      "version": "0.19.0",
+      "version": "0.20.0",
       "dependencies": {
         "@fontsource/ibm-plex-mono": "^5.3.0",
         "@fontsource/ibm-plex-sans": "^5.3.0",
diff --git a/package.json b/package.json
index 51ccd1a5..ab26372d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "loop-studio",
   "private": true,
-  "version": "0.19.0",
+  "version": "0.20.0",
   "type": "module",
   "engines": {
     "node": ">=22.12.0"
diff --git a/scripts/gen-gacha-banner-zones-example.ts b/scripts/gen-gacha-banner-zones-example.ts
index 6abb8f94..235d1ffb 100644
--- a/scripts/gen-gacha-banner-zones-example.ts
+++ b/scripts/gen-gacha-banner-zones-example.ts
@@ -65,6 +65,7 @@ import { writeFileSync } from 'node:fs'
 import { fileURLToPath } from 'node:url'
 import {
   DEFAULT_TIMELINE_SERIES,
+  GACHA_BANNER_ZONES_FLOWS,
   PULLS_PER_ZONE,
   TRACKED_POOLS,
   ZONE_TITLE,
@@ -72,6 +73,7 @@ import {
   isControlNode,
   type ZoneKey,
 } from '../src/engine/gachaBannerZonesGraph'
+import { withTemplateFlowColours } from '../src/engine/templateFlowColours'
 import { serialize, type RecommendedRunConfig, type SavedFrame } from '../src/model/serialize'
 import type { LoopEdge, LoopNode } from '../src/model/types'
 
@@ -372,7 +374,11 @@ const routedEdges: LoopEdge[] = (edges as LoopEdge[]).map((e) => ({
   data: { ...e.data, route: 'orthogonal', ...(WAYPOINTS[e.id] ? { waypoints: WAYPOINTS[e.id] } : {}) },
 }))
 
-const text = serialize(positioned, routedEdges, recommendedRunConfig, undefined, undefined, 2, frames)
+// docs/flow-colour-and-compact-nodes.md FC-6 — each zone's flow colour, the
+// same as its frame's (cosmetic data, like the routing above)
+const coloured = withTemplateFlowColours(positioned, routedEdges, GACHA_BANNER_ZONES_FLOWS)
+
+const text = serialize(coloured.nodes, coloured.edges, recommendedRunConfig, undefined, undefined, 2, frames)
 
 const outPath = fileURLToPath(new URL('../examples/gacha-banner-zones.json', import.meta.url))
 writeFileSync(outPath, text + '\n')
diff --git a/src/components/AccentField.tsx b/src/components/AccentField.tsx
index 1bb3c620..eec6a22a 100644
--- a/src/components/AccentField.tsx
+++ b/src/components/AccentField.tsx
@@ -4,6 +4,7 @@ import { parseAccentInput, readAccent } from '../model/model'
 import { accentTargets, useGraphStore } from '../store/graphStore'
 import { readRecentAccents, rememberAccent } from '../store/recentAccents'
 import { accentNotices, FLOW_PALETTE, type AccentNotice } from '../ui/flowColour'
+import { useIsMobile } from '../ui/media'
 
 // docs/flow-colour-and-compact-nodes.md FC-5 — the Inspector's Colour section.
 //
@@ -15,6 +16,14 @@ import { accentNotices, FLOW_PALETTE, type AccentNotice } from '../ui/flowColour
 // The browser's colour input applies on its real `change` only — never on
 // opening it, never on the live `input` events while it is open — so opening it
 // on Default or on a mixed selection applies nothing.
+//
+// Each colour is offered once: Recent leaves out the palette's colours, and
+// In this document leaves out both, so the current colour's ring shows once.
+//
+// On the phone the Inspector is a read-only sheet (docs/mobile.md MV-D3): the
+// section is one line of read-only text there, a dot and the colour's name and
+// hex (its hex alone off the palette; Default with an empty ring; Mixed with no
+// dot), instead of the disabled editor.
 
 const NOTICE_KEY = {
   'canvas-light': 'inspector.accent.notice.canvasLight',
@@ -29,6 +38,8 @@ const noticeKey = (n: AccentNotice): MessageKey =>
 /** what the browser colour input shows while there is no single colour */
 const PICKER_NEUTRAL = '#808080'
 const DOCUMENT_MAX = 12
+const PALETTE_HEX: ReadonlySet<string> = new Set(FLOW_PALETTE.map((p) => p.hex))
+const paletteEntry = (hex: string) => FLOW_PALETTE.find((p) => p.hex === hex)
 
 export function AccentField() {
   const t = useT()
@@ -38,6 +49,7 @@ export function AccentField() {
   const selectedNodeId = useGraphStore((s) => s.selectedNodeId)
   const selectedEdgeId = useGraphStore((s) => s.selectedEdgeId)
   const setAccent = useGraphStore((s) => s.setAccent)
+  const isMobile = useIsMobile()
 
   const targets = useMemo(
     () => accentTargets({ nodes, edges, selectedNodeId, selectedEdgeId }),
@@ -55,18 +67,22 @@ export function AccentField() {
     return values.size === 1 ? { mixed: false as const, value: [...values][0] ?? null } : { mixed: true as const, value: null }
   }, [nodes, edges, targets])
 
-  // FC-2.7 — "In this document": distinct colours by first use, derived
+  const [recent, setRecent] = useState<string[]>(() => readRecentAccents())
+  // Recent without the palette's colours
+  const recentShown = useMemo(() => recent.filter((a) => !PALETTE_HEX.has(a)), [recent])
+
+  // FC-2.7 — "In this document": distinct colours by first use, derived, without
+  // the colours the palette or Recent already offer
   const documentColours = useMemo(() => {
+    const shown = new Set<string>([...PALETTE_HEX, ...recentShown])
     const out: string[] = []
     for (const el of [...nodes, ...edges]) {
       const a = readAccent((el.data as { accent?: unknown } | undefined)?.accent)
-      if (a !== undefined && !out.includes(a)) out.push(a)
+      if (a !== undefined && !shown.has(a) && !out.includes(a)) out.push(a)
       if (out.length === DOCUMENT_MAX) break
     }
     return out
-  }, [nodes, edges])
-
-  const [recent, setRecent] = useState<string[]>(() => readRecentAccents())
+  }, [nodes, edges, recentShown])
   const [hexDraft, setHexDraft] = useState<string | null>(null)
   const [hexError, setHexError] = useState<'alpha' | 'format' | null>(null)
 
@@ -113,6 +129,41 @@ export function AccentField() {
 
   if (count === 0) return null
 
+  if (isMobile) {
+    const entry = current.value ? paletteEntry(current.value) : undefined
+    return (
+      <section className="accent-field accent-field--summary" aria-labelledby={`${ids}-title`}>
+        <h3 className="field__label accent-field__title" id={`${ids}-title`}>
+          {t('inspector.accent.title')}
+        </h3>
+        <p className="accent-field__summary">
+          {/* Mixed has no dot: a dot would read as one particular colour */}
+          {current.mixed ? null : (
+            <span
+              className={`accent-field__dot${current.value ? '' : ' accent-field__dot--none'}`}
+              style={current.value ? { ['--swatch' as string]: current.value } : undefined}
+              aria-hidden="true"
+            />
+          )}
+          {current.mixed ? (
+            <span>{t('inspector.accent.mixed')}</span>
+          ) : current.value === null ? (
+            <span>{t('inspector.accent.default')}</span>
+          ) : (
+            <>
+              {/* a real space, so the text reads "Rose #B47599", not one word */}
+              {entry ? <span>{t(`canvas.frame.color.${entry.id}` as MessageKey)}</span> : null}
+              {entry ? ' ' : null}
+              <span className="accent-field__hexvalue" dir="ltr">
+                {current.value}
+              </span>
+            </>
+          )}
+        </p>
+      </section>
+    )
+  }
+
   const notices = current.value ? accentNotices(current.value, { nodes: targets.nodeIds.length > 0, edges: targets.edgeIds.length > 0 }) : []
   const pressed = (v: string | null) => !current.mixed && current.value === v
 
@@ -149,10 +200,10 @@ export function AccentField() {
         {FLOW_PALETTE.map((p) => swatch(p.hex, t(`canvas.frame.color.${p.id}` as MessageKey), `p-${p.id}`))}
       </div>
 
-      {recent.length > 0 ? (
+      {recentShown.length > 0 ? (
         <div className="accent-field__row" role="group" aria-label={t('inspector.accent.recent')}>
           <span className="accent-field__rowlabel" aria-hidden="true">{t('inspector.accent.recent')}</span>
-          {recent.map((a) => swatch(a, a, `r-${a}`))}
+          {recentShown.map((a) => swatch(a, a, `r-${a}`))}
         </div>
       ) : null}
 
diff --git a/src/components/MinimapDock.tsx b/src/components/MinimapDock.tsx
index 3ccf84a0..722ced14 100644
--- a/src/components/MinimapDock.tsx
+++ b/src/components/MinimapDock.tsx
@@ -2,8 +2,10 @@ import { useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { MiniMap, useStore } from '@xyflow/react'
 import { useT } from '../i18n'
+import { readAccent } from '../model/model'
 import type { NodeKind } from '../model/types'
 import { useUiStore } from '../store/uiStore'
+import { useForcedColors } from '../ui/media'
 
 // docs/large-graph-readability.md — the bottom-right graph minimap plus its
 // collapse control. Rendered by Canvas only when `minimapFits` (pane ≥ 640×380,
@@ -16,7 +18,9 @@ import { useUiStore } from '../store/uiStore'
 // `.minimap-toggle` in index.css against the pinned 200×150 minimap box.
 
 // minimap node fill by kind — resolved from the theme tokens (var() in an inline
-// style property stays theme-reactive)
+// style property stays theme-reactive). A node with a flow colour is filled with
+// it instead (docs/flow-colour-and-compact-nodes.md FC-6), except under forced
+// colours (FC-3.4), where every mark keeps its kind fill.
 const MINIMAP_HUE: Record<NodeKind, string> = {
   pool: 'var(--hue-pool)',
   source: 'var(--hue-source)',
@@ -62,6 +66,7 @@ export function MinimapDock() {
   const t = useT()
   const collapsed = useUiStore((s) => s.minimapCollapsed)
   const toggle = useUiStore((s) => s.toggleMinimapCollapsed)
+  const forced = useForcedColors()
 
   if (collapsed) {
     // no minimap on screen — a compact restore tile at the pane's corner
@@ -85,7 +90,10 @@ export function MinimapDock() {
         pannable
         zoomable
         ariaLabel={t('canvas.minimap')}
-        nodeColor={(n) => MINIMAP_HUE[(n.type as NodeKind) ?? 'pool'] ?? 'var(--line-strong)'}
+        nodeColor={(n) =>
+          (!forced && readAccent((n.data as { accent?: unknown } | undefined)?.accent)) ||
+          (MINIMAP_HUE[(n.type as NodeKind) ?? 'pool'] ?? 'var(--line-strong)')
+        }
         nodeStrokeColor="var(--line-strong)"
         nodeStrokeWidth={2}
         nodeBorderRadius={2}
diff --git a/src/components/TimelineChart.tsx b/src/components/TimelineChart.tsx
index 76245777..6ecab08c 100644
--- a/src/components/TimelineChart.tsx
+++ b/src/components/TimelineChart.tsx
@@ -1,12 +1,12 @@
 import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react'
-import { formatRegisterValue, registerSeriesRuns, registersOfSnapshot } from '../model/model'
+import { formatRegisterValue, readAccent, registerSeriesRuns, registersOfSnapshot } from '../model/model'
 import { resolveTimelineSeries } from '../model/timelineSeries'
 import { useGraphStore } from '../store/graphStore'
 import { currentRegisterOutcomes } from '../store/registers'
 import { useMcStore } from '../store/mcStore'
 import { useSimStore } from '../store/simStore'
 import { selectOverlay, useUiStore } from '../store/uiStore'
-import { useIsMobile } from '../ui/media'
+import { useForcedColors, useIsMobile } from '../ui/media'
 import { useT } from '../i18n'
 import { downloadCsv } from '../ui/download'
 import { buildRunCsv } from './timelineCsv'
@@ -30,6 +30,11 @@ const HUES = [
   '--hue-end',
 ]
 const colorFor = (i: number) => `var(${HUES[i % HUES.length]})`
+// docs/flow-colour-and-compact-nodes.md FC-6 — a Pool or Register with a flow
+// colour draws its series in it; every other series keeps its colour by index,
+// so colouring one node never recolours another series. No flow colour under
+// forced colours (FC-3.4). Edge colours never reach the timeline.
+const seriesColor = (accent: unknown, i: number, forced: boolean) => (!forced && readAccent(accent)) || colorFor(i)
 
 const fmt = (n: number) => (Number.isInteger(n) ? String(n) : n.toFixed(1))
 
@@ -62,6 +67,7 @@ export function TimelineChart() {
   const plotRef = useRef<HTMLDivElement>(null)
   const [size, setSize] = useState({ w: 760, h: 116 })
   const isMobile = useIsMobile()
+  const forced = useForcedColors()
   const overlay = useUiStore(selectOverlay)
   const closeOverlay = useUiStore((s) => s.closeOverlay)
 
@@ -110,14 +116,17 @@ export function TimelineChart() {
     () =>
       nodes
         .filter((n) => n.data.kind === 'pool')
-        .map((n, i) => ({ id: n.id, label: n.data.label, color: colorFor(i) })),
-    [nodes],
+        .map((n, i) => ({ id: n.id, label: n.data.label, color: seriesColor(n.data.accent, i, forced) })),
+    [nodes, forced],
   )
   // loop-model/1 §M3.5 — R(t) per committed snapshot for each Register.
   // Nothing stored: recomputed from `series[i].values` + the live graph.
   const registers = useMemo(
-    () => nodes.filter((n) => n.data.kind === 'register').map((n, i) => ({ id: n.id, label: n.data.label, color: colorFor(pools.length + i) })),
-    [nodes, pools.length],
+    () =>
+      nodes
+        .filter((n) => n.data.kind === 'register')
+        .map((n, i) => ({ id: n.id, label: n.data.label, color: seriesColor(n.data.accent, pools.length + i, forced) })),
+    [nodes, pools.length, forced],
   )
 
   // `timelineSeries` (simStore, UI-only) is the stored choice — `auto`, `'all'`
@@ -531,6 +540,7 @@ export function TimelineChart() {
                     <path
                       key={l.id}
                       className="timeline__line"
+                      data-series={l.id}
                       d={l.d}
                       fill="none"
                       style={{ stroke: l.color }}
@@ -546,6 +556,7 @@ export function TimelineChart() {
                       <path
                         key={`reg-${l.id}`}
                         className="timeline__line timeline__line--register"
+                        data-series={l.id}
                         d={l.d}
                         fill="none"
                         style={{ stroke: l.color, strokeDasharray: '4 3', opacity: 0.85 }}
diff --git a/src/engine/coffee-roastery.fixture.ts b/src/engine/coffee-roastery.fixture.ts
index 5aeb7c50..ba3625ec 100644
--- a/src/engine/coffee-roastery.fixture.ts
+++ b/src/engine/coffee-roastery.fixture.ts
@@ -1,5 +1,6 @@
 import { defaultData } from '../model/factory'
 import type { LoopEdge, LoopNode, NodeKind } from '../model/types'
+import { withTemplateFlowColours, type TemplateFlows } from './templateFlowColours'
 
 // Builder for examples/coffee-roastery.json — the "Coffee roastery operations
 // flow" Templates demo (docs/example-coffee-roastery.md, settled design,
@@ -275,9 +276,19 @@ export function buildCoffeeRoastery(): { nodes: LoopNode[]; edges: LoopEdge[] }
     ),
   )
 
-  return { nodes, edges }
+  return withTemplateFlowColours(nodes, edges, COFFEE_ROASTERY_FLOWS)
 }
 
+// docs/flow-colour-and-compact-nodes.md FC-6 — the three product flows: green
+// beans (Sage), roasted beans from the roast on (Gold), desserts (Rose). The
+// Parameters and the Forecast Registers stay uncoloured.
+export const COFFEE_ROASTERY_FLOWS: TemplateFlows = {
+  sage: ['green_delivery', 'green_stock', 'green_wholesale'],
+  gold: ['roasting', 'roasted_stock', 'roast_loss', 'online_sales', 'cafe_retail', 'roasted_bleed'],
+  rose: ['dessert_prep_src', 'dessert_stock', 'dessert_sales', 'dessert_wrapup'],
+}
+
+
 // ── the recommended run saved into the file ────────────────────────────────
 export const COFFEE_ROASTERY_MC = {
   baseSeed: 1,
diff --git a/src/engine/gachaBannerZonesGraph.ts b/src/engine/gachaBannerZonesGraph.ts
index 6b0b6573..441f1259 100644
--- a/src/engine/gachaBannerZonesGraph.ts
+++ b/src/engine/gachaBannerZonesGraph.ts
@@ -78,6 +78,7 @@
 // label — this is a scoped exception, not a reversal of note 3.
 
 import type { LoopEdge, LoopNode } from '../model/types'
+import type { TemplateFlows } from './templateFlowColours'
 
 export const PULLS_PER_ZONE = 200
 export const HARD_PITY_STANDARD = 80
@@ -584,3 +585,27 @@ export function isControlNode(id: string): boolean {
     id === 'missed_pickup_pickup'
   )
 }
+
+/** docs/flow-colour-and-compact-nodes.md FC-6 — each zone's flow nodes take
+ *  the colour its frame already carries (General / Free Sage, Premium Standard
+ *  Violet, Premium Pickup Rose), so the two say the same thing. The comparison
+ *  row, every Parameter and every Register stay uncoloured. Applied by
+ *  scripts/gen-gacha-banner-zones-example.ts, which writes the shipped JSON. */
+export const GACHA_BANNER_ZONES_FLOWS: TemplateFlows = {
+  sage: [
+    'fund_free', 'ticket_free', 'pulls_made_free', 'sr_count_free', 'r_count_free', 'ssr_count_free',
+    'roll_gate_free', 'ssr_hit_free', 'sr_hit_free', 'r_hit_free',
+  ],
+  violet: [
+    'fund_standard', 'ticket_standard', 'pulls_made_standard', 'sr_count_standard', 'r_count_standard',
+    'ssr_count_standard', 'roll_gate_standard', 'ssr_hit_standard', 'sr_hit_standard', 'r_hit_standard',
+    'pity_standard', 'forced_ssr_standard', 'ceiling_hits_standard',
+  ],
+  rose: [
+    'fund_pickup', 'ticket_pickup', 'pulls_made_pickup', 'sr_count_pickup', 'r_count_pickup', 'ssr_count_pickup',
+    'pity_pickup', 'ceiling_hits_pickup', 'missed_pickup_pickup', 'roll_normal_open_pickup',
+    'roll_normal_owed_pickup', 'roll_forced_open_pickup', 'roll_forced_owed_pickup', 'ssr_split_open_pickup',
+    'pickup_hit_pickup', 'standard_hit_pickup', 'sr_hit_pickup', 'r_hit_pickup', 'pickup_count_pickup',
+    'standard_count_pickup',
+  ],
+}
diff --git a/src/engine/mmo-progression.fixture.ts b/src/engine/mmo-progression.fixture.ts
index eaa3b97d..f88d8867 100644
--- a/src/engine/mmo-progression.fixture.ts
+++ b/src/engine/mmo-progression.fixture.ts
@@ -1,5 +1,6 @@
 import { defaultData } from '../model/factory'
 import type { LoopEdge, LoopNode, NodeKind } from '../model/types'
+import { withTemplateFlowColours, type TemplateFlows } from './templateFlowColours'
 
 // Builder for examples/mmo-progression.json — the "Early MMO progression
 // (levels 1–15)" Templates demo. Design: docs/example-mmo-progression.md
@@ -608,9 +609,31 @@ export function buildMmoProgression(): { nodes: LoopNode[]; edges: LoopEdge[] }
     }
   }
 
-  return { nodes, edges }
+  return withTemplateFlowColours(nodes, edges, MMO_PROGRESSION_FLOWS)
 }
 
+// docs/flow-colour-and-compact-nodes.md FC-6 — the three economies: items and
+// loot (Sage), gold (Gold), experience and level (Violet). The combat chain, the
+// encounters, the upkeep pools and every Register stay uncoloured.
+export const MMO_PROGRESSION_FLOWS: TemplateFlows = {
+  sage: [
+    'drop', 'loot_feed', 'loot_dispatch', 'loot_category',
+    'bucket_equip', 'bucket_vendor', 'bucket_consumable', 'bucket_rare',
+    'items_looted', 'items_equipped', 'items_sold', 'items_consumed',
+    'equip_conv', 'vendor_conv', 'consumable_conv', 'rare_conv',
+    'z1_lootroll', 'z1_loot', 'z2_lootroll', 'z2_loot', 'z3_lootroll', 'z3_loot',
+  ],
+  gold: [
+    'reward', 'hunt_payout', 'quest_payout', 'gold', 'gold_earned', 'vendor_revenue',
+    'repair_spend', 'resupply_spend', 'training_spend', 'resupply', 'repair_gold',
+  ],
+  violet: [
+    'level', 'xp', 'xp_earned', 'hunt_xp', 'quest_xp',
+    'z1_xp_meter', 'z1_xp2lvl', 'z2_xp_meter', 'z2_xp2lvl', 'z3_xp_meter', 'z3_xp2lvl',
+  ],
+}
+
+
 // ── the verified Monte-Carlo run (saved into the file, walked in the README) ─
 export const MMO_PROGRESSION_MC = {
   baseSeed: 1,
diff --git a/src/engine/templateFlowColours.test.ts b/src/engine/templateFlowColours.test.ts
new file mode 100644
index 00000000..5205b262
--- /dev/null
+++ b/src/engine/templateFlowColours.test.ts
@@ -0,0 +1,120 @@
+import { describe, expect, it } from 'vitest'
+import { deserialize } from '../model/serialize'
+import { canonicalContent, digestOfCanonical, fullContentDigest } from '../model/revision'
+import { EXAMPLE_GRAPH_DIGESTS } from '../model/sha256Baseline.fixture'
+import type { LoopEdge, LoopNode } from '../model/types'
+import { semanticDigest } from '../model/workspace'
+import { FLOW_PALETTE } from '../ui/flowColour'
+import { COFFEE_ROASTERY_FLOWS } from './coffee-roastery.fixture'
+import { GACHA_BANNER_ZONES_FLOWS } from './gachaBannerZonesGraph'
+import { MMO_PROGRESSION_FLOWS } from './mmo-progression.fixture'
+import { withTemplateFlowColours, type TemplateFlows } from './templateFlowColours'
+
+// docs/flow-colour-and-compact-nodes.md FC-6 — the bundled Templates' flow
+// colours: written by each builder into the shipped JSON, three per Template,
+// never on a Parameter or a Register, and never a model change.
+
+const EXAMPLE_TEXT = import.meta.glob('../../examples/*.json', { query: '?raw', import: 'default', eager: true }) as Record<string, string>
+const read = (file: string): string => {
+  const text = EXAMPLE_TEXT['../../examples/' + file]
+  if (text === undefined) throw new Error('missing example ' + file)
+  return text
+}
+const HEX = new Map<string, string>(FLOW_PALETTE.map((p) => [p.id, p.hex]))
+const accentOf = (el: { data?: unknown }) => (el.data as { accent?: string } | undefined)?.accent
+
+const node = (id: string, kind: LoopNode['data']['kind']): LoopNode =>
+  ({ id, type: kind, position: { x: 0, y: 0 }, data: { kind, label: id } }) as unknown as LoopNode
+const edge = (id: string, source: string, target: string, kind: 'resource' | 'state' = 'resource'): LoopEdge =>
+  ({ id, type: 'loop', source, target, data: { kind } }) as unknown as LoopEdge
+
+describe('withTemplateFlowColours', () => {
+  const nodes = [node('a', 'source'), node('b', 'pool'), node('c', 'drain'), node('p', 'parameter'), node('r', 'register')]
+  const edges = [edge('ab', 'a', 'b'), edge('bc', 'b', 'c'), edge('s', 'a', 'b', 'state')]
+
+  it('colours the listed nodes and the resource edges inside one flow, nothing else', () => {
+    const out = withTemplateFlowColours(nodes, edges, { sage: ['a', 'b'], rose: ['c'] })
+    expect(out.nodes.map(accentOf)).toEqual(['#74906B', '#74906B', '#B47599', undefined, undefined])
+    // `bc` joins two flows and `s` is a state edge: both stay uncoloured
+    expect(out.edges.map(accentOf)).toEqual(['#74906B', undefined, undefined])
+    expect(nodes.map(accentOf)).toEqual([undefined, undefined, undefined, undefined, undefined]) // inputs untouched
+  })
+
+  it('fails closed: a missing id, a Parameter, a Register, or a node under two colours', () => {
+    expect(() => withTemplateFlowColours(nodes, edges, { sage: ['nope'] })).toThrow(/no node nope/)
+    expect(() => withTemplateFlowColours(nodes, edges, { sage: ['p'] })).toThrow(/parameter/)
+    expect(() => withTemplateFlowColours(nodes, edges, { sage: ['r'] })).toThrow(/register/)
+    expect(() => withTemplateFlowColours(nodes, edges, { sage: ['a'], rose: ['a'] })).toThrow(/twice/)
+  })
+})
+
+// the current generated JSON, exactly: its engine digest equals the one recorded
+// before the colours (sha256Baseline.fixture.ts), its content and full-content
+// digests are pinned here at their values WITH the colours
+const TEMPLATES: { file: string; flows: TemplateFlows; colours: string[]; contentDigest: string; fullContentDigest: string }[] = [
+  {
+    file: 'coffee-roastery.json',
+    flows: COFFEE_ROASTERY_FLOWS,
+    colours: ['sage', 'gold', 'rose'],
+    contentDigest: 'b64fd6264bbf3aa0810ea85a86ca95be1c4bed3f3d6df290d4d222e575d79d71',
+    fullContentDigest: 'b64fd6264bbf3aa0810ea85a86ca95be1c4bed3f3d6df290d4d222e575d79d71',
+  },
+  {
+    file: 'gacha-banner-zones.json',
+    flows: GACHA_BANNER_ZONES_FLOWS,
+    colours: ['sage', 'violet', 'rose'],
+    contentDigest: '525fbb11a247b772e948ae10d6bad3c41e4de29be46821e5a210b8540c2e5e47',
+    fullContentDigest: '525fbb11a247b772e948ae10d6bad3c41e4de29be46821e5a210b8540c2e5e47',
+  },
+  {
+    file: 'mmo-progression.json',
+    flows: MMO_PROGRESSION_FLOWS,
+    colours: ['sage', 'gold', 'violet'],
+    contentDigest: '947b2fc2319b3dd1692bb1fd41cde79432828a154a6175bd23502f58d525c539',
+    fullContentDigest: '947b2fc2319b3dd1692bb1fd41cde79432828a154a6175bd23502f58d525c539',
+  },
+]
+
+describe('the bundled Templates carry their flow colours', () => {
+  for (const t of TEMPLATES) {
+    describe(t.file, () => {
+      const p = deserialize(read(t.file))
+      const doc = { nodes: p.nodes, edges: p.edges, recommendedRunConfig: p.recommendedRunConfig, frames: p.frames, dataImports: p.dataImports }
+
+      it('exactly the listed nodes, in their flow’s palette colour, as stored upper-case #RRGGBB', () => {
+        const want = new Map<string, string>()
+        for (const [id, ids] of Object.entries(t.flows)) for (const n of ids ?? []) want.set(n, HEX.get(id)!)
+        const got = new Map(p.nodes.filter((n) => accentOf(n) !== undefined).map((n) => [n.id, accentOf(n)!]))
+        expect(got).toEqual(want)
+        expect(Object.keys(t.flows).sort()).toEqual([...t.colours].sort())
+      })
+
+      it('never on a Parameter or a Register', () => {
+        expect(p.nodes.filter((n) => (n.data.kind === 'parameter' || n.data.kind === 'register') && accentOf(n) !== undefined)).toEqual([])
+      })
+
+      it('an edge is coloured exactly when it is a resource edge inside one flow', () => {
+        const colourOf = new Map(p.nodes.map((n) => [n.id, accentOf(n)]))
+        for (const e of p.edges) {
+          const inside = e.data?.kind === 'resource' && colourOf.get(e.source) !== undefined && colourOf.get(e.source) === colourOf.get(e.target)
+          expect(accentOf(e), e.id).toBe(inside ? colourOf.get(e.source) : undefined)
+        }
+      })
+
+      it('the engine digest is the one recorded before the colours: the simulation is unchanged', async () => {
+        const recorded = EXAMPLE_GRAPH_DIGESTS.find((g) => g.file === t.file)!
+        expect(await semanticDigest({ nodes: p.nodes, edges: p.edges }, p.modelVersion)).toBe(recorded.semanticDigest)
+      })
+
+      it('the content and full-content digests change with the colours, pinned at their current values', async () => {
+        const recorded = EXAMPLE_GRAPH_DIGESTS.find((g) => g.file === t.file)!
+        const content = digestOfCanonical(canonicalContent(doc, { modelVersion: p.modelVersion }))
+        const full = await fullContentDigest(doc, p.modelVersion)
+        expect(content).toBe(t.contentDigest)
+        expect(full).toBe(t.fullContentDigest)
+        expect(content).not.toBe(recorded.contentDigest)
+        expect(full).not.toBe(recorded.fullContentDigest)
+      })
+    })
+  }
+})
diff --git a/src/engine/templateFlowColours.ts b/src/engine/templateFlowColours.ts
new file mode 100644
index 00000000..fbbea03d
--- /dev/null
+++ b/src/engine/templateFlowColours.ts
@@ -0,0 +1,45 @@
+import type { LoopEdge, LoopNode } from '../model/types'
+import { FLOW_PALETTE, type FlowPaletteId } from '../ui/flowColour'
+
+// docs/flow-colour-and-compact-nodes.md FC-6 — a bundled Template's restrained
+// flow colours, written by its builder into the shipped JSON (the file is the
+// only source). Each listed node takes its flow's palette colour, and so does
+// every resource edge whose two ends sit in the same flow. Parameters and
+// Registers never take one. Cosmetic only (FC-2.4): the engine never reads it,
+// so a Template's simulation is unchanged.
+//
+// Fails closed: an id that is not in the graph, a Parameter or a Register, or a
+// node listed under two colours throws, so a builder change cannot silently
+// drop or misplace a colour.
+
+export type TemplateFlows = Partial<Record<FlowPaletteId, readonly string[]>>
+
+const HEX = new Map<string, string>(FLOW_PALETTE.map((p) => [p.id, p.hex]))
+
+export function withTemplateFlowColours(
+  nodes: LoopNode[],
+  edges: LoopEdge[],
+  flows: TemplateFlows,
+): { nodes: LoopNode[]; edges: LoopEdge[] } {
+  const kindOf = new Map(nodes.map((n) => [n.id, n.data.kind]))
+  const colourOf = new Map<string, string>()
+  for (const [id, ids] of Object.entries(flows)) {
+    const hex = HEX.get(id)!
+    for (const nodeId of ids ?? []) {
+      const kind = kindOf.get(nodeId)
+      if (kind === undefined) throw new Error(`template flow colour: no node ${nodeId}`)
+      if (kind === 'parameter' || kind === 'register') throw new Error(`template flow colour: ${nodeId} is a ${kind}`)
+      if (colourOf.has(nodeId)) throw new Error(`template flow colour: ${nodeId} is listed twice`)
+      colourOf.set(nodeId, hex)
+    }
+  }
+  return {
+    nodes: nodes.map((n) => (colourOf.has(n.id) ? ({ ...n, data: { ...n.data, accent: colourOf.get(n.id) } } as LoopNode) : n)),
+    edges: edges.map((e) => {
+      const a = colourOf.get(e.source)
+      return e.data?.kind === 'resource' && a !== undefined && colourOf.get(e.target) === a
+        ? ({ ...e, data: { ...e.data, accent: a } } as LoopEdge)
+        : e
+    }),
+  }
+}
diff --git a/src/i18n/itCopy.test.ts b/src/i18n/itCopy.test.ts
index 9fa6f623..a6418f50 100644
--- a/src/i18n/itCopy.test.ts
+++ b/src/i18n/itCopy.test.ts
@@ -205,15 +205,15 @@ const IDENTICAL_TO_EN: ReadonlyArray<readonly [string, string]> = [
 // ------------------------------------------------------------------ shape
 describe('it copy — the surfaces exist and are complete', () => {
   it('has exactly the base key set', () => {
-    expect(KEYS).toHaveLength(1023) // issue #301 decision 1: +4 (share.unavailable and the three 0.17.1 release-note lines); the session chip: +3 (the three 0.17.2 release-note lines); the licence screen: +12 (nine strings of the view and the three 0.18.0 release-note lines); the menu keyboard: +3 (the three 0.18.1 release-note lines); the tour announcement: +4 (tour.nav.announce and the three 0.18.2 release-note lines); the flow colour: +20 (the sixteen strings of the Colour section and the four 0.19.0 release-note lines)
+    expect(KEYS).toHaveLength(1027) // issue #301 decision 1: +4 (share.unavailable and the three 0.17.1 release-note lines); the session chip: +3 (the three 0.17.2 release-note lines); the licence screen: +12 (nine strings of the view and the three 0.18.0 release-note lines); the menu keyboard: +3 (the three 0.18.1 release-note lines); the tour announcement: +4 (tour.nav.announce and the three 0.18.2 release-note lines); the flow colour: +20 (the sixteen strings of the Colour section and the four 0.19.0 release-note lines); the flow colour views: +4 (the four 0.20.0 release-note lines)
     expect(Object.keys(IT).sort()).toEqual([...KEYS].sort())
   })
 
   it('covers all four runtime surfaces, at the measured sizes', () => {
     const per: Record<string, number> = {}
     for (const r of RUNTIME) per[r.surface.split('/')[0]!] = (per[r.surface.split('/')[0]!] ?? 0) + 1
-    expect(per).toEqual({ catalog: 1023, template: 196, frame: 7, module: 19 })
-    expect(RUNTIME).toHaveLength(1245)
+    expect(per).toEqual({ catalog: 1027, template: 196, frame: 7, module: 19 })
+    expect(RUNTIME).toHaveLength(1249)
   })
 
   it('EVERY row has a non-empty ENGLISH side — the vacuity guard', () => {
diff --git a/src/i18n/locales/ar/ui.ts b/src/i18n/locales/ar/ui.ts
index 9df585d0..1b188077 100644
--- a/src/i18n/locales/ar/ui.ts
+++ b/src/i18n/locales/ar/ui.ts
@@ -585,6 +585,10 @@ const ui = {
   'whatsNew.v0190.keep': 'تُحفظ ألوان التدفق مع المخطط وتبقى في الروابط وعند التراجع، ولا يعيد تغيير اللون ضبط التشغيل ولا يجعل نتيجة مونت كارلو قديمة.',
   'whatsNew.v0190.select': 'تظهر العقدة المحددة الآن بحلقة خارج حدها، ويظهر الاتصال المحدد بإبراز تحته، فيبقى التحديد واضحًا على أي لون.',
   'whatsNew.v0190.notice': 'إذا كان اللون صعب الرؤية، أو يشبه لونًا تستخدمه اللوحة للتركيز أو التحذيرات أو محاكاة قيد التشغيل، ينبهك المفتّش إلى ذلك، ويُطبَّق اللون مع ذلك.',
+  'whatsNew.v0200.views': 'تعرض الخريطة المصغّرة والخط الزمني الآن ألوان التدفق: تظهر العقدة الملوّنة بلونها في الخريطة المصغّرة، ويرسم المَجمَع أو السِّجِلّ الملوّن خطه في الخط الزمني بذلك اللون.',
+  'whatsNew.v0200.templates': 'تُفتح الآن ثلاثة من القوالب المضمّنة وتدفقاتها الرئيسية ملوّنة، ونتائجها لا تتغيّر.',
+  'whatsNew.v0200.once': 'في قسم اللون في المفتّش يظهر كل لون مرة واحدة: «الأخيرة» و«في هذا المستند» لا تعرضان الألوان الظاهرة أعلاها.',
+  'whatsNew.v0200.phone': 'على الهاتف يعرض المفتّش للقراءة فقط اللون في سطر واحد: نقطة مع اسم اللون ورمز اللون.',
 } as const
 
 export default ui
diff --git a/src/i18n/locales/de/ui.ts b/src/i18n/locales/de/ui.ts
index d56bb134..a2482be7 100644
--- a/src/i18n/locales/de/ui.ts
+++ b/src/i18n/locales/de/ui.ts
@@ -620,6 +620,10 @@ const ui = {
   'whatsNew.v0190.keep': 'Flussfarben werden mit dem Diagramm gespeichert und bleiben in Links und beim Rückgängigmachen erhalten; eine Farbänderung setzt den Lauf nie zurück und macht kein Monte-Carlo-Ergebnis veraltet.',
   'whatsNew.v0190.select': 'Ein ausgewählter Knoten zeigt jetzt einen Ring außerhalb seines Umrisses, eine ausgewählte Verbindung eine Hervorhebung darunter, sodass die Auswahl auf jeder Farbe klar bleibt.',
   'whatsNew.v0190.notice': 'Ist eine Farbe schwer zu erkennen oder ähnelt sie einer Farbe, die die Arbeitsfläche für Fokus, Warnungen oder eine laufende Simulation verwendet, weisen die Eigenschaften darauf hin; die Farbe wird trotzdem angewendet.',
+  'whatsNew.v0200.views': 'Übersichtskarte und Zeitverlauf zeigen jetzt Flussfarben: Ein farbiger Knoten erscheint in der Übersichtskarte in seiner Farbe, und ein farbiger Speicher oder berechneter Wert zeichnet seine Linie im Zeitverlauf in dieser Farbe.',
+  'whatsNew.v0200.templates': 'Drei der mitgelieferten Vorlagen öffnen sich jetzt mit farbigen Hauptflüssen; ihre Ergebnisse bleiben gleich.',
+  'whatsNew.v0200.once': 'Im Abschnitt Farbe der Eigenschaften erscheint jede Farbe nur einmal: Zuletzt verwendet und In diesem Dokument lassen die Farben weg, die schon darüber stehen.',
+  'whatsNew.v0200.phone': 'Auf dem Smartphone zeigen die schreibgeschützten Eigenschaften eine Farbe in einer Zeile: einen Punkt mit dem Namen der Farbe und ihrem Hex-Wert.',
 } satisfies Record<UiKey, string>
 
 export default ui
diff --git a/src/i18n/locales/en/ui.ts b/src/i18n/locales/en/ui.ts
index d9ff2f03..a019169f 100644
--- a/src/i18n/locales/en/ui.ts
+++ b/src/i18n/locales/en/ui.ts
@@ -529,6 +529,10 @@ const ui = {
   'whatsNew.v0190.keep': 'Flow colours are saved with the diagram and kept in links and in undo, and changing one never resets the run or makes a Monte Carlo result out of date.',
   'whatsNew.v0190.select': 'A selected node now shows a ring outside its outline, and a selected connection a highlight beneath it, so a selection stays clear on any colour.',
   'whatsNew.v0190.notice': 'If a colour would be hard to see, or looks like one the canvas uses for focus, warnings or a running simulation, the Inspector says so; the colour is still applied.',
+  'whatsNew.v0200.views': 'The minimap and the timeline now show flow colours: a coloured node’s minimap mark takes its colour, and a coloured Pool or Register draws its timeline line in it.',
+  'whatsNew.v0200.templates': 'Three of the bundled templates now open with their main flows coloured, and their results are unchanged.',
+  'whatsNew.v0200.once': 'The Inspector’s Colour section shows each colour once: Recent and In this document leave out the colours already shown above them.',
+  'whatsNew.v0200.phone': 'On a phone, the read-only Inspector shows a colour as one line: a dot with the colour’s name and hex value.',
 } as const
 
 export type UiKey = keyof typeof ui
diff --git a/src/i18n/locales/es-419/ui.ts b/src/i18n/locales/es-419/ui.ts
index 856995d8..a62f1d22 100644
--- a/src/i18n/locales/es-419/ui.ts
+++ b/src/i18n/locales/es-419/ui.ts
@@ -543,6 +543,10 @@ const ui = {
   'whatsNew.v0190.keep': 'Los colores de flujo se guardan con el diagrama y se conservan en los enlaces y al deshacer; cambiar uno nunca reinicia la ejecución ni deja desactualizado un resultado de Monte Carlo.',
   'whatsNew.v0190.select': 'Un nodo seleccionado muestra ahora un anillo fuera de su contorno, y una conexión seleccionada un resaltado debajo, de modo que la selección se ve clara sobre cualquier color.',
   'whatsNew.v0190.notice': 'Si un color se ve mal, o se parece a uno que el lienzo usa para el foco, los avisos o una simulación en curso, Propiedades lo indica; el color se aplica igualmente.',
+  'whatsNew.v0200.views': 'El minimapa y la línea de tiempo ahora muestran los colores de flujo: un nodo con color aparece en su color en el minimapa, y un depósito o un valor calculado con color dibujan su línea en ese color en la línea de tiempo.',
+  'whatsNew.v0200.templates': 'Tres de las plantillas incluidas ahora se abren con sus flujos principales en color; sus resultados no cambian.',
+  'whatsNew.v0200.once': 'En la sección Color de Propiedades, cada color aparece una sola vez: Recientes y En este documento omiten los colores que ya se muestran arriba.',
+  'whatsNew.v0200.phone': 'En un teléfono, Propiedades en modo de solo lectura muestra un color en una línea: un punto con el nombre del color y su valor hexadecimal.',
 } as const
 
 export type UiKey = keyof typeof ui
diff --git a/src/i18n/locales/es-ES/ui.ts b/src/i18n/locales/es-ES/ui.ts
index a2b7061d..6b652e85 100644
--- a/src/i18n/locales/es-ES/ui.ts
+++ b/src/i18n/locales/es-ES/ui.ts
@@ -557,6 +557,10 @@ const ui = {
   'whatsNew.v0190.keep': 'Los colores de flujo se guardan con el diagrama y se conservan en los enlaces y al deshacer; cambiar uno nunca reinicia la ejecución ni deja desactualizado un resultado de Monte Carlo.',
   'whatsNew.v0190.select': 'Un nodo seleccionado muestra ahora un anillo fuera de su contorno, y una conexión seleccionada un resaltado debajo, de modo que la selección se ve clara sobre cualquier color.',
   'whatsNew.v0190.notice': 'Si un color se ve mal, o se parece a uno que el lienzo usa para el foco, los avisos o una simulación en curso, Propiedades lo indica; el color se aplica igualmente.',
+  'whatsNew.v0200.views': 'El minimapa y la línea de tiempo ahora muestran los colores de flujo: un nodo con color aparece en su color en el minimapa, y un depósito o un valor calculado con color dibujan su línea en ese color en la línea de tiempo.',
+  'whatsNew.v0200.templates': 'Tres de las plantillas incluidas ahora se abren con sus flujos principales en color; sus resultados no cambian.',
+  'whatsNew.v0200.once': 'En la sección Color de Propiedades, cada color aparece una sola vez: Recientes y En este documento omiten los colores que ya se muestran arriba.',
+  'whatsNew.v0200.phone': 'En un teléfono, Propiedades en modo de solo lectura muestra un color en una línea: un punto con el nombre del color y su valor hexadecimal.',
 } as const
 
 export type UiKey = keyof typeof ui
diff --git a/src/i18n/locales/fr/ui.ts b/src/i18n/locales/fr/ui.ts
index e26256dc..ee755afc 100644
--- a/src/i18n/locales/fr/ui.ts
+++ b/src/i18n/locales/fr/ui.ts
@@ -614,6 +614,10 @@ const ui = {
   'whatsNew.v0190.keep': 'Les couleurs de flux sont enregistrées avec le diagramme et conservées dans les liens et l’annulation ; en changer ne réinitialise jamais l’exécution et ne rend pas un résultat Monte-Carlo obsolète.',
   'whatsNew.v0190.select': 'Un nœud sélectionné affiche désormais un anneau autour de son contour, et une connexion sélectionnée une surbrillance en dessous : la sélection reste nette sur toutes les couleurs.',
   'whatsNew.v0190.notice': 'Si une couleur est peu visible, ou ressemble à une couleur que le canevas utilise pour le focus, les avertissements ou une simulation en cours, les Propriétés le signalent ; la couleur est appliquée quand même.',
+  'whatsNew.v0200.views': 'La miniature et la chronologie affichent désormais les couleurs de flux : un nœud coloré apparaît dans sa couleur sur la miniature, et un réservoir ou une valeur calculée colorés tracent leur courbe dans cette couleur sur la chronologie.',
+  'whatsNew.v0200.templates': 'Trois des modèles fournis s’ouvrent désormais avec leurs flux principaux en couleur ; leurs résultats ne changent pas.',
+  'whatsNew.v0200.once': 'Dans la section Couleur des Propriétés, chaque couleur n’apparaît qu’une fois : Récentes et Dans ce document omettent les couleurs déjà affichées au-dessus.',
+  'whatsNew.v0200.phone': 'Sur un téléphone, les Propriétés en lecture seule affichent une couleur sur une ligne : une pastille avec le nom de la couleur et sa valeur hex.',
 } satisfies Record<UiKey, string>
 
 export default ui
diff --git a/src/i18n/locales/it/ui.ts b/src/i18n/locales/it/ui.ts
index eea9b2d2..0fbdcd65 100644
--- a/src/i18n/locales/it/ui.ts
+++ b/src/i18n/locales/it/ui.ts
@@ -559,6 +559,10 @@ const ui = {
   'whatsNew.v0190.keep': 'I colori di flusso si salvano con il diagramma e restano nei link e nell’annullamento; cambiarli non azzera mai l’esecuzione e non rende superato un risultato Monte Carlo.',
   'whatsNew.v0190.select': 'Un nodo selezionato ora mostra un anello fuori dal contorno e una connessione selezionata un’evidenziazione sotto la linea, così la selezione resta chiara con qualsiasi colore.',
   'whatsNew.v0190.notice': 'Se un colore è poco visibile, o somiglia a uno che l’area di disegno usa per lo stato attivo, gli avvisi o una simulazione in corso, l’Ispettore lo segnala; il colore viene comunque applicato.',
+  'whatsNew.v0200.views': 'La minimappa e la cronologia ora mostrano i colori del flusso: un nodo colorato appare nel suo colore nella minimappa, e un serbatoio o un valore calcolato colorati tracciano la loro linea in quel colore nella cronologia.',
+  'whatsNew.v0200.templates': 'Tre dei modelli inclusi ora si aprono con i flussi principali colorati; i loro risultati non cambiano.',
+  'whatsNew.v0200.once': 'Nella sezione Colore dell’Ispettore ogni colore compare una sola volta: Recenti e In questo documento tralasciano i colori già mostrati sopra.',
+  'whatsNew.v0200.phone': 'Sul telefono l’Ispettore in sola lettura mostra un colore su una riga: un punto con il nome del colore e il suo valore esadecimale.',
 } satisfies Record<UiKey, string>
 
 export default ui
diff --git a/src/i18n/locales/ja/ui.ts b/src/i18n/locales/ja/ui.ts
index 742be0ad..22b012d4 100644
--- a/src/i18n/locales/ja/ui.ts
+++ b/src/i18n/locales/ja/ui.ts
@@ -564,6 +564,10 @@ const ui = {
   'whatsNew.v0190.keep': 'フローの色はダイアグラムと一緒に保存され、リンクや取り消しでも保たれます。色を変えても実行がリセットされたり、モンテカルロの結果が古くなったりすることはありません。',
   'whatsNew.v0190.select': '選択したノードは輪郭の外側のリングで、選択した接続は下に敷いた強調線で示されるようになり、どの色でも選択がはっきり分かります。',
   'whatsNew.v0190.notice': '見えにくい色や、キャンバスがフォーカス、警告、実行中のシミュレーションに使う色に近い色を選ぶと、インスペクターがお知らせします。色はそのまま適用されます。',
+  'whatsNew.v0200.views': 'ミニマップとタイムラインにもフローの色が表示されるようになりました。色を付けたノードはミニマップでその色になり、色を付けたプールやレジスターはタイムラインの線がその色になります。',
+  'whatsNew.v0200.templates': '付属のテンプレートのうち 3 つが、主なフローに色を付けた状態で開くようになりました。結果は変わりません。',
+  'whatsNew.v0200.once': 'インスペクターの色の欄では、同じ色は一度だけ表示されます。「最近」と「このドキュメントの色」には、上にすでにある色は表示されません。',
+  'whatsNew.v0200.phone': 'スマートフォンの読み取り専用のインスペクターでは、色を 1 行で表示します。色の点と、色の名前と HEX 値です。',
 } satisfies Record<UiKey, string>
 
 export default ui
diff --git a/src/i18n/locales/ko/ui.ts b/src/i18n/locales/ko/ui.ts
index 3d5f7990..dac17bb2 100644
--- a/src/i18n/locales/ko/ui.ts
+++ b/src/i18n/locales/ko/ui.ts
@@ -532,6 +532,10 @@ const ui = {
   'whatsNew.v0190.keep': '흐름 색상은 다이어그램과 함께 저장되고 링크와 실행 취소에도 유지되며, 색상을 바꿔도 실행이 초기화되거나 몬테카를로 결과가 오래된 것으로 바뀌지 않습니다.',
   'whatsNew.v0190.select': '선택한 노드는 이제 윤곽선 바깥의 링으로, 선택한 연결은 아래의 강조선으로 표시되어 어떤 색상에서도 선택이 분명하게 보입니다.',
   'whatsNew.v0190.notice': '색상이 잘 보이지 않거나 캔버스가 포커스, 경고, 실행 중인 시뮬레이션에 쓰는 색상과 비슷하면 인스펙터가 알려 줍니다. 색상은 그래도 적용됩니다.',
+  'whatsNew.v0200.views': '미니맵과 타임라인에도 흐름 색상이 보입니다. 색상을 지정한 노드는 미니맵에서 그 색으로, 색상을 지정한 풀이나 레지스터는 타임라인에서 그 색의 선으로 표시됩니다.',
+  'whatsNew.v0200.templates': '기본 제공 템플릿 세 개가 주요 흐름에 색상을 입힌 채로 열리며, 결과는 이전과 같습니다.',
+  'whatsNew.v0200.once': '인스펙터의 색상 영역에서는 각 색상이 한 번만 나옵니다. 최근과 이 문서의 색상에는 위에 이미 나온 색상이 빠집니다.',
+  'whatsNew.v0200.phone': '휴대폰의 읽기 전용 인스펙터에서는 색상을 한 줄로 보여 줍니다. 색상 점과 함께 이름과 HEX 값이 표시됩니다.',
 } satisfies Record<UiKey, string>
 
 export default ui
diff --git a/src/i18n/locales/nl/ui.ts b/src/i18n/locales/nl/ui.ts
index 6a103dfb..dfd2b7a5 100644
--- a/src/i18n/locales/nl/ui.ts
+++ b/src/i18n/locales/nl/ui.ts
@@ -540,6 +540,10 @@ const ui = {
   'whatsNew.v0190.keep': 'Stroomkleuren worden met het diagram opgeslagen en blijven behouden in een gedeelde link en bij ongedaan maken; een kleur wijzigen zet de run nooit terug en maakt een Monte Carlo-resultaat niet verouderd.',
   'whatsNew.v0190.select': 'Een geselecteerd knooppunt toont nu een extra rand buiten de omtrek, en een geselecteerde verbinding een markering eronder, zodat een selectie op elke kleur duidelijk blijft.',
   'whatsNew.v0190.notice': 'Is een kleur slecht zichtbaar, of lijkt ze op een kleur die het tekengebied gebruikt voor focus, waarschuwingen of een lopende simulatie, dan meldt de Inspector dat; de kleur wordt toch toegepast.',
+  'whatsNew.v0200.views': 'De minikaart en de tijdlijn tonen nu stroomkleuren: een gekleurd knooppunt verschijnt in zijn kleur op de minikaart, en een gekleurde voorraad of berekende waarde tekent zijn lijn in de tijdlijn in die kleur.',
+  'whatsNew.v0200.templates': 'Drie van de meegeleverde sjablonen openen nu met hun hoofdstromen in kleur; hun resultaten veranderen niet.',
+  'whatsNew.v0200.once': 'In het onderdeel Kleur van de Inspector staat elke kleur maar één keer: Laatst gebruikt en In dit document laten de kleuren weg die al hoger staan.',
+  'whatsNew.v0200.phone': 'Op een telefoon toont de alleen-lezen Inspector een kleur op één regel: een stip met de naam van de kleur en de hexwaarde.',
 } as const
 
 export default ui
diff --git a/src/i18n/locales/pt-BR/ui.ts b/src/i18n/locales/pt-BR/ui.ts
index 0855bab6..4a545b42 100644
--- a/src/i18n/locales/pt-BR/ui.ts
+++ b/src/i18n/locales/pt-BR/ui.ts
@@ -545,6 +545,10 @@ const ui = {
   'whatsNew.v0190.keep': 'As cores de fluxo são salvas com o diagrama e mantidas nos links e no desfazer; mudar uma nunca reinicia a execução nem deixa um resultado de Monte Carlo desatualizado.',
   'whatsNew.v0190.select': 'Um nó selecionado agora mostra um anel fora do contorno, e uma conexão selecionada um destaque por baixo, então a seleção fica clara em qualquer cor.',
   'whatsNew.v0190.notice': 'Se uma cor ficar difícil de ver, ou parecer uma que a tela usa para foco, avisos ou uma simulação em execução, o Inspetor avisa; a cor é aplicada mesmo assim.',
+  'whatsNew.v0200.views': 'O minimapa e a linha do tempo agora mostram as cores de fluxo: um nó com cor aparece na sua cor no minimapa, e um reservatório ou um valor calculado com cor desenham a sua linha nessa cor na linha do tempo.',
+  'whatsNew.v0200.templates': 'Três dos templates incluídos agora abrem com os fluxos principais em cor; os resultados não mudam.',
+  'whatsNew.v0200.once': 'Na área Cor do Inspetor, cada cor aparece uma só vez: Recentes e Neste documento omitem as cores já mostradas acima.',
+  'whatsNew.v0200.phone': 'No celular, o Inspetor somente leitura mostra uma cor numa linha: um ponto com o nome da cor e o seu valor hexadecimal.',
 } as const
 
 export type UiKey = keyof typeof ui
diff --git a/src/i18n/locales/pt-PT/ui.ts b/src/i18n/locales/pt-PT/ui.ts
index d828f7ab..a6e26893 100644
--- a/src/i18n/locales/pt-PT/ui.ts
+++ b/src/i18n/locales/pt-PT/ui.ts
@@ -559,6 +559,10 @@ const ui = {
   'whatsNew.v0190.keep': 'As cores de fluxo são guardadas com o diagrama e mantidas nas hiperligações e ao anular; mudar uma nunca reinicia a execução nem deixa desatualizado um resultado de Monte Carlo.',
   'whatsNew.v0190.select': 'Um nó selecionado passa a mostrar um anel fora do contorno, e uma ligação selecionada um realce por baixo, pelo que a seleção fica nítida em qualquer cor.',
   'whatsNew.v0190.notice': 'Se uma cor ficar difícil de ver, ou parecer uma que a tela usa para foco, avisos ou uma simulação em execução, o Inspetor avisa; a cor é aplicada mesmo assim.',
+  'whatsNew.v0200.views': 'O minimapa e a linha do tempo agora mostram as cores de fluxo: um nó com cor aparece na sua cor no minimapa, e um reservatório ou um valor calculado com cor desenham a sua linha nessa cor na linha do tempo.',
+  'whatsNew.v0200.templates': 'Três dos templates incluídos agora abrem com os fluxos principais em cor; os resultados não mudam.',
+  'whatsNew.v0200.once': 'Na área Cor do Inspetor, cada cor aparece uma só vez: Recentes e Neste documento omitem as cores já mostradas acima.',
+  'whatsNew.v0200.phone': 'No telemóvel, o Inspetor somente leitura mostra uma cor numa linha: um ponto com o nome da cor e o seu valor hexadecimal.',
 } as const
 
 export type UiKey = keyof typeof ui
diff --git a/src/i18n/locales/ru/ui.ts b/src/i18n/locales/ru/ui.ts
index 539a97a4..3c1e6c22 100644
--- a/src/i18n/locales/ru/ui.ts
+++ b/src/i18n/locales/ru/ui.ts
@@ -613,6 +613,10 @@ const ui = {
   'whatsNew.v0190.keep': 'Цвета потоков сохраняются вместе с диаграммой, в ссылках и при отмене действий; смена цвета никогда не сбрасывает запуск и не делает результат Monte Carlo устаревшим.',
   'whatsNew.v0190.select': 'Выбранный узел теперь обведён кольцом снаружи контура, а под выбранной связью видна подсветка, поэтому выделение заметно на любом цвете.',
   'whatsNew.v0190.notice': 'Если цвет плохо видно или он похож на цвет, которым холст показывает фокус, предупреждения или идущую симуляцию, инспектор об этом скажет; цвет всё равно применится.',
+  'whatsNew.v0200.views': 'Мини-карта и шкала времени теперь показывают цвета потоков: узел с цветом отображается на мини-карте своим цветом, а накопитель или вычисляемое значение с цветом рисуют свою линию на шкале времени этим цветом.',
+  'whatsNew.v0200.templates': 'Три встроенных шаблона теперь открываются с окрашенными основными потоками; их результаты не меняются.',
+  'whatsNew.v0200.once': 'В разделе «Цвет» инспектора каждый цвет показан один раз: в «Недавних» и «В этом документе» нет цветов, уже показанных выше.',
+  'whatsNew.v0200.phone': 'На телефоне инспектор только для чтения показывает цвет одной строкой: точка с названием цвета и его шестнадцатеричным значением.',
 } as const
 
 export type UiKey = keyof typeof ui
diff --git a/src/i18n/locales/th/ui.ts b/src/i18n/locales/th/ui.ts
index 7ca5789c..b7b43183 100644
--- a/src/i18n/locales/th/ui.ts
+++ b/src/i18n/locales/th/ui.ts
@@ -605,6 +605,10 @@ const ui = {
   'whatsNew.v0190.keep': 'สีของโฟลว์บันทึกไปพร้อมแผนภาพ และคงอยู่ในลิงก์และเมื่อเลิกทำ การเปลี่ยนสีจะไม่รีเซ็ตการรันและไม่ทำให้ผล Monte Carlo ล้าสมัย',
   'whatsNew.v0190.select': 'ตอนนี้โหนดที่เลือกจะมีวงแหวนอยู่นอกเส้นขอบ และเส้นเชื่อมที่เลือกจะมีแถบเน้นอยู่ด้านล่าง การเลือกจึงเห็นชัดบนทุกสี',
   'whatsNew.v0190.notice': 'หากสีมองเห็นยาก หรือคล้ายสีที่ผืนผ้าใบใช้แสดงโฟกัส คำเตือน หรือการจำลองที่กำลังทำงาน ตัวตรวจสอบจะแจ้งให้ทราบ แต่ยังคงใช้สีนั้น',
+  'whatsNew.v0200.views': 'แผนที่ย่อและไทม์ไลน์แสดงสีของโฟลว์แล้ว โหนดที่มีสีจะแสดงเป็นสีนั้นในแผนที่ย่อ ส่วนถังพักหรือค่าที่คำนวณที่มีสีจะวาดเส้นในไทม์ไลน์เป็นสีนั้น',
+  'whatsNew.v0200.templates': 'เทมเพลตที่มาพร้อมแอปสามรายการเปิดขึ้นพร้อมโฟลว์หลักที่ใส่สีไว้แล้ว และผลลัพธ์ไม่เปลี่ยนแปลง',
+  'whatsNew.v0200.once': 'ในส่วนสีของตัวตรวจสอบ แต่ละสีจะแสดงเพียงครั้งเดียว รายการล่าสุดและในเอกสารนี้จะไม่แสดงสีที่อยู่ด้านบนแล้ว',
+  'whatsNew.v0200.phone': 'บนโทรศัพท์ ตัวตรวจสอบแบบอ่านอย่างเดียวจะแสดงสีเป็นบรรทัดเดียว คือจุดสีพร้อมชื่อสีและรหัสสี',
 } as const
 
 export type UiKey = keyof typeof ui
diff --git a/src/i18n/locales/tr/ui.ts b/src/i18n/locales/tr/ui.ts
index 54bacb52..ec183c0b 100644
--- a/src/i18n/locales/tr/ui.ts
+++ b/src/i18n/locales/tr/ui.ts
@@ -599,6 +599,10 @@ const ui = {
   'whatsNew.v0190.keep': 'Akış renkleri diyagramla birlikte kaydedilir, bağlantılarda ve geri almada korunur; bir rengi değiştirmek çalıştırmayı asla sıfırlamaz ve Monte Carlo sonucunu eskimiş yapmaz.',
   'whatsNew.v0190.select': 'Seçili bir düğüm artık dış çizgisinin dışında bir halka, seçili bir bağlantı da altında bir vurgu gösterir; böylece seçim her renkte açıkça görünür.',
   'whatsNew.v0190.notice': 'Bir renk zor görünüyorsa ya da tuvalin odak, uyarılar veya çalışan bir simülasyon için kullandığı bir renge benziyorsa İnceleyici bunu söyler; renk yine de uygulanır.',
+  'whatsNew.v0200.views': 'Mini harita ve zaman çizelgesi artık akış renklerini gösteriyor: renkli bir düğüm mini haritada kendi renginde görünür, renkli bir Havuz ya da Hesaplanan değer de zaman çizelgesindeki çizgisini o renkte çizer.',
+  'whatsNew.v0200.templates': 'Hazır şablonlardan üçü artık ana akışları renkli olarak açılıyor; sonuçları değişmiyor.',
+  'whatsNew.v0200.once': 'İnceleyici’nin Renk bölümünde her renk yalnızca bir kez görünür: Son kullanılanlar ve Bu belgede, yukarıda zaten görünen renkleri göstermez.',
+  'whatsNew.v0200.phone': 'Telefonda salt okunur İnceleyici bir rengi tek satırda gösterir: rengin adı ve onaltılık değeriyle bir nokta.',
 } as const
 
 export type UiKey = keyof typeof ui
diff --git a/src/i18n/locales/vi/ui.ts b/src/i18n/locales/vi/ui.ts
index ba1cbfe2..b15184ab 100644
--- a/src/i18n/locales/vi/ui.ts
+++ b/src/i18n/locales/vi/ui.ts
@@ -545,6 +545,10 @@ const ui = {
   'whatsNew.v0190.keep': 'Màu luồng được lưu cùng sơ đồ, giữ nguyên trong liên kết và khi hoàn tác; đổi màu không bao giờ đặt lại lượt chạy hay làm kết quả Monte Carlo trở nên lỗi thời.',
   'whatsNew.v0190.select': 'Nút đang chọn giờ có một vòng bên ngoài đường viền, liên kết đang chọn có một dải làm nổi bên dưới, nên vùng chọn luôn rõ trên mọi màu.',
   'whatsNew.v0190.notice': 'Nếu màu khó nhìn, hoặc giống màu mà khung vẽ dùng cho tiêu điểm, cảnh báo hay mô phỏng đang chạy, Bảng thuộc tính sẽ báo; màu vẫn được áp dụng.',
+  'whatsNew.v0200.views': 'Bản đồ thu nhỏ và dòng thời gian giờ cũng hiển thị màu luồng: nút có màu hiện bằng màu của nó trên bản đồ thu nhỏ, còn bể chứa hoặc giá trị tính toán có màu vẽ đường của nó trên dòng thời gian bằng màu đó.',
+  'whatsNew.v0200.templates': 'Ba mẫu có sẵn giờ mở ra với các luồng chính đã được tô màu; kết quả của chúng không thay đổi.',
+  'whatsNew.v0200.once': 'Trong mục Màu của Bảng thuộc tính, mỗi màu chỉ xuất hiện một lần: Gần đây và Trong tài liệu này bỏ qua các màu đã hiện ở phía trên.',
+  'whatsNew.v0200.phone': 'Trên điện thoại, Bảng thuộc tính chỉ đọc hiển thị màu trên một dòng: một chấm màu cùng tên màu và mã màu.',
 } satisfies Record<UiKey, string>
 
 export default ui
diff --git a/src/i18n/locales/zh-Hans/ui.ts b/src/i18n/locales/zh-Hans/ui.ts
index 3f0baf2b..4ead9f1e 100644
--- a/src/i18n/locales/zh-Hans/ui.ts
+++ b/src/i18n/locales/zh-Hans/ui.ts
@@ -537,6 +537,10 @@ const ui = {
   'whatsNew.v0190.keep': '流程颜色随图一起保存，在链接和撤销中也会保留；更改颜色不会重置运行，也不会让蒙特卡洛结果过时。',
   'whatsNew.v0190.select': '选中的节点现在在轮廓外显示一圈，选中的连线下方显示高亮，因此无论什么颜色，选中状态都清晰可见。',
   'whatsNew.v0190.notice': '如果颜色难以看清，或接近画布用于焦点、警告或运行中模拟的颜色，属性面板会提示；颜色仍会应用。',
+  'whatsNew.v0200.views': '缩略图和时间线现在也显示流程颜色：设置了颜色的节点在缩略图中显示为该颜色，设置了颜色的资源池或计算值在时间线中以该颜色绘制曲线。',
+  'whatsNew.v0200.templates': '三个内置模板现在打开时主要流程已设置颜色，结果与之前相同。',
+  'whatsNew.v0200.once': '属性面板的颜色部分中，每种颜色只出现一次：“最近”和“本文档中的颜色”不再列出上方已显示的颜色。',
+  'whatsNew.v0200.phone': '在手机上，只读属性面板用一行显示颜色：一个色点，以及颜色名称和十六进制值。',
 } satisfies Record<UiKey, string>
 
 export default ui
diff --git a/src/i18n/locales/zh-Hant/ui.ts b/src/i18n/locales/zh-Hant/ui.ts
index e73ab817..e3632721 100644
--- a/src/i18n/locales/zh-Hant/ui.ts
+++ b/src/i18n/locales/zh-Hant/ui.ts
@@ -563,6 +563,10 @@ const ui = {
   'whatsNew.v0190.keep': '流程顏色會隨圖一起儲存，在連結和復原中也會保留；變更顏色不會重設執行，也不會讓蒙地卡羅結果過時。',
   'whatsNew.v0190.select': '選取的節點現在會在輪廓外顯示一圈，選取的連線下方會顯示醒目標示，因此無論什麼顏色，選取狀態都清楚可見。',
   'whatsNew.v0190.notice': '如果顏色不易看清，或接近畫布用於焦點、警告或執行中模擬的顏色，屬性面板會提示；顏色仍會套用。',
+  'whatsNew.v0200.views': '縮圖和時間軸現在也會顯示流程顏色：設定了顏色的節點在縮圖中顯示為該顏色，設定了顏色的資源池或計算值在時間軸中以該顏色繪製曲線。',
+  'whatsNew.v0200.templates': '三個內建範本現在開啟時主要流程已設定顏色，結果與之前相同。',
+  'whatsNew.v0200.once': '屬性面板的顏色區段中，每種顏色只會出現一次：「最近」和「此文件中的顏色」不再列出上方已顯示的顏色。',
+  'whatsNew.v0200.phone': '在手機上，唯讀屬性面板以一行顯示顏色：一個色點，以及顏色名稱和十六進位值。',
 } satisfies Record<UiKey, string>
 
 export default ui
diff --git a/src/i18n/nlCopy.test.ts b/src/i18n/nlCopy.test.ts
index 2cddf603..70c43ee4 100644
--- a/src/i18n/nlCopy.test.ts
+++ b/src/i18n/nlCopy.test.ts
@@ -261,15 +261,15 @@ const IDENTICAL_TO_EN: ReadonlyArray<readonly [string, string]> = [
 // ------------------------------------------------------------------ shape
 describe('nl copy — the surfaces exist and are complete', () => {
   it('has exactly the base key set', () => {
-    expect(KEYS).toHaveLength(1023) // issue #301 decision 1: +4 (share.unavailable and the three 0.17.1 release-note lines); the session chip: +3 (the three 0.17.2 release-note lines); the licence screen: +12 (nine strings of the view and the three 0.18.0 release-note lines); the menu keyboard: +3 (the three 0.18.1 release-note lines); the tour announcement: +4 (tour.nav.announce and the three 0.18.2 release-note lines); the flow colour: +20 (the sixteen strings of the Colour section and the four 0.19.0 release-note lines)
+    expect(KEYS).toHaveLength(1027) // issue #301 decision 1: +4 (share.unavailable and the three 0.17.1 release-note lines); the session chip: +3 (the three 0.17.2 release-note lines); the licence screen: +12 (nine strings of the view and the three 0.18.0 release-note lines); the menu keyboard: +3 (the three 0.18.1 release-note lines); the tour announcement: +4 (tour.nav.announce and the three 0.18.2 release-note lines); the flow colour: +20 (the sixteen strings of the Colour section and the four 0.19.0 release-note lines); the flow colour views: +4 (the four 0.20.0 release-note lines)
     expect(Object.keys(NL).sort()).toEqual([...KEYS].sort())
   })
 
   it('covers all four runtime surfaces, at the measured sizes', () => {
     const per: Record<string, number> = {}
     for (const r of RUNTIME) per[r.surface.split('/')[0]!] = (per[r.surface.split('/')[0]!] ?? 0) + 1
-    expect(per).toEqual({ catalog: 1023, template: 196, frame: 7, module: 19 })
-    expect(RUNTIME).toHaveLength(1245)
+    expect(per).toEqual({ catalog: 1027, template: 196, frame: 7, module: 19 })
+    expect(RUNTIME).toHaveLength(1249)
   })
 
   it('EVERY row has a non-empty ENGLISH side — the vacuity guard', () => {
diff --git a/src/i18n/ptBrCopy.test.ts b/src/i18n/ptBrCopy.test.ts
index 945beadc..c70ad317 100644
--- a/src/i18n/ptBrCopy.test.ts
+++ b/src/i18n/ptBrCopy.test.ts
@@ -231,11 +231,11 @@ describe('pt-BR copy — mechanical review', () => {
     expect(missing).toEqual([])
   })
 
-  it('names the Register with one term on all ten keys that show it', () => {
+  it('names the Register with one term on all eleven keys that show it', () => {
     // English shows `Register` / `Registers` on exactly these; `Computed value`
     // is not an English UI string anywhere (docs/localization.md §L2.14).
     const REGISTER_KEYS = Object.keys(enOf).filter((k) => /\bRegisters?\b/.test(enOf[k] ?? ''))
-    expect(REGISTER_KEYS.length, 'the English surface for the Register kind').toBe(10)
+    expect(REGISTER_KEYS.length, 'the English surface for the Register kind').toBe(11)
     const wrong: string[] = []
     for (const k of REGISTER_KEYS) {
       const v = ptBR[k as Key]
diff --git a/src/i18n/ptPtCopy.test.ts b/src/i18n/ptPtCopy.test.ts
index 7b044779..f5c5715b 100644
--- a/src/i18n/ptPtCopy.test.ts
+++ b/src/i18n/ptPtCopy.test.ts
@@ -58,7 +58,7 @@ describe('pt-PT copy — the region audit over pt-BR', () => {
   // ---------------------------------------------------------------- shape
   it('has exactly the same key set as pt-BR', () => {
     expect(Object.keys(ptValues).sort()).toEqual(KEYS.slice().sort())
-    expect(KEYS).toHaveLength(1023) // issue #301 decision 1: +4 (share.unavailable and the three 0.17.1 release-note lines); the session chip: +3 (the three 0.17.2 release-note lines); the licence screen: +12 (nine strings of the view and the three 0.18.0 release-note lines); the menu keyboard: +3 (the three 0.18.1 release-note lines); the tour announcement: +4 (tour.nav.announce and the three 0.18.2 release-note lines); the flow colour: +20 (the sixteen strings of the Colour section and the four 0.19.0 release-note lines)
+    expect(KEYS).toHaveLength(1027) // issue #301 decision 1: +4 (share.unavailable and the three 0.17.1 release-note lines); the session chip: +3 (the three 0.17.2 release-note lines); the licence screen: +12 (nine strings of the view and the three 0.18.0 release-note lines); the menu keyboard: +3 (the three 0.18.1 release-note lines); the tour announcement: +4 (tour.nav.announce and the three 0.18.2 release-note lines); the flow colour: +20 (the sixteen strings of the Colour section and the four 0.19.0 release-note lines); the flow colour views: +4 (the four 0.20.0 release-note lines)
   })
 
   it('differs from pt-BR on exactly the audited keys', () => {
@@ -131,7 +131,15 @@ describe('pt-PT copy — the region audit over pt-BR', () => {
     // The tour announcement (0.18.2) moved it from 269 to 270: one of its
     // three release-note lines - `telemóvel` not `celular`; the other two
     // and the step announcement's template read the same in both.
-    expect(DELTA).toHaveLength(273)
+    // The flow colour (0.19.0) moved it from 270 to 273: three of its four
+    // release-note lines - `ligação` not `conexão`, `guardadas` not `salvas`,
+    // `hiperligações` not `links`, `anular` not `desfazer`, `passa a mostrar`
+    // not `agora mostra`; its fourth line and its sixteen Colour-section
+    // strings read the same in both.
+    // The flow colour views (0.20.0) moved it from 273 to 274: one of its four
+    // release-note lines - `telemóvel` not `celular`; the other three read the
+    // same in both.
+    expect(DELTA).toHaveLength(274)
     // and it is a real audit, not a rewrite — most of the catalog agrees.
     //
     // The password strings of issue #300 are counted apart. The word for a
@@ -175,7 +183,7 @@ describe('pt-PT copy — the region audit over pt-BR', () => {
     // outside them, the quarter bound stands as it always did
     const rest = KEYS.filter((k) => !isPasswordKey(k))
     const restDelta = DELTA.filter((k) => !isPasswordKey(k))
-    expect(restDelta).toHaveLength(245)
+    expect(restDelta).toHaveLength(246)
     expect(restDelta.length).toBeLessThan(rest.length / 4)
   })
 
diff --git a/src/i18n/ruCopy.test.ts b/src/i18n/ruCopy.test.ts
index 4623636d..81644ca3 100644
--- a/src/i18n/ruCopy.test.ts
+++ b/src/i18n/ruCopy.test.ts
@@ -43,7 +43,7 @@ describe('ru copy — the first Cyrillic catalog', () => {
   // ------------------------------------------------------------------ shape
   it('has exactly the base key set', () => {
     expect(Object.keys(ruValues).sort()).toEqual(KEYS.slice().sort())
-    expect(KEYS).toHaveLength(1023) // issue #301 decision 1: +4 (share.unavailable and the three 0.17.1 release-note lines); the session chip: +3 (the three 0.17.2 release-note lines); the licence screen: +12 (nine strings of the view and the three 0.18.0 release-note lines); the menu keyboard: +3 (the three 0.18.1 release-note lines); the tour announcement: +4 (tour.nav.announce and the three 0.18.2 release-note lines); the flow colour: +20 (the sixteen strings of the Colour section and the four 0.19.0 release-note lines)
+    expect(KEYS).toHaveLength(1027) // issue #301 decision 1: +4 (share.unavailable and the three 0.17.1 release-note lines); the session chip: +3 (the three 0.17.2 release-note lines); the licence screen: +12 (nine strings of the view and the three 0.18.0 release-note lines); the menu keyboard: +3 (the three 0.18.1 release-note lines); the tour announcement: +4 (tour.nav.announce and the three 0.18.2 release-note lines); the flow colour: +20 (the sixteen strings of the Colour section and the four 0.19.0 release-note lines); the flow colour views: +4 (the four 0.20.0 release-note lines)
   })
 
   // ----------------------------------------------------------------- script
diff --git a/src/i18n/thCopy.test.ts b/src/i18n/thCopy.test.ts
index 7242ae17..d67b5699 100644
--- a/src/i18n/thCopy.test.ts
+++ b/src/i18n/thCopy.test.ts
@@ -88,11 +88,11 @@ const englishFor = (surface: string, id: string): string => {
 describe('th copy — the first no-space script', () => {
   it('has exactly the base key set', () => {
     expect(Object.keys(TH).sort()).toEqual(KEYS.slice().sort())
-    expect(KEYS).toHaveLength(1023) // issue #301 decision 1: +4 (share.unavailable and the three 0.17.1 release-note lines); the session chip: +3 (the three 0.17.2 release-note lines); the licence screen: +12 (nine strings of the view and the three 0.18.0 release-note lines); the menu keyboard: +3 (the three 0.18.1 release-note lines); the tour announcement: +4 (tour.nav.announce and the three 0.18.2 release-note lines); the flow colour: +20 (the sixteen strings of the Colour section and the four 0.19.0 release-note lines)
+    expect(KEYS).toHaveLength(1027) // issue #301 decision 1: +4 (share.unavailable and the three 0.17.1 release-note lines); the session chip: +3 (the three 0.17.2 release-note lines); the licence screen: +12 (nine strings of the view and the three 0.18.0 release-note lines); the menu keyboard: +3 (the three 0.18.1 release-note lines); the tour announcement: +4 (tour.nav.announce and the three 0.18.2 release-note lines); the flow colour: +20 (the sixteen strings of the Colour section and the four 0.19.0 release-note lines); the flow colour views: +4 (the four 0.20.0 release-note lines)
   })
 
   it('covers all three runtime surfaces', () => {
-    expect(RUNTIME.filter(([s]) => s === 'catalog')).toHaveLength(1023)
+    expect(RUNTIME.filter(([s]) => s === 'catalog')).toHaveLength(1027)
     expect(RUNTIME.filter(([s]) => s.startsWith('template/'))).toHaveLength(196)
     expect(RUNTIME.filter(([s]) => s.startsWith('frame/'))).toHaveLength(7)
     expect(RUNTIME.filter(([s]) => s.startsWith('module/'))).toHaveLength(19)
diff --git a/src/i18n/trCopy.test.ts b/src/i18n/trCopy.test.ts
index 2a9da558..b66c90e0 100644
--- a/src/i18n/trCopy.test.ts
+++ b/src/i18n/trCopy.test.ts
@@ -30,7 +30,7 @@ const KEYS = Object.keys(EN)
 describe('tr copy — the first Turkish catalog', () => {
   it('has exactly the base key set', () => {
     expect(Object.keys(TR).sort()).toEqual(KEYS.slice().sort())
-    expect(KEYS).toHaveLength(1023) // issue #300: +33; issue #301 decision 1: +4 (share.unavailable and the three 0.17.1 release-note lines); the session chip: +3 (the three 0.17.2 release-note lines); the licence screen: +12 (nine strings of the view and the three 0.18.0 release-note lines); the menu keyboard: +3 (the three 0.18.1 release-note lines); the tour announcement: +4 (tour.nav.announce and the three 0.18.2 release-note lines); the flow colour: +20 (the sixteen strings of the Colour section and the four 0.19.0 release-note lines)
+    expect(KEYS).toHaveLength(1027) // issue #300: +33; issue #301 decision 1: +4 (share.unavailable and the three 0.17.1 release-note lines); the session chip: +3 (the three 0.17.2 release-note lines); the licence screen: +12 (nine strings of the view and the three 0.18.0 release-note lines); the menu keyboard: +3 (the three 0.18.1 release-note lines); the tour announcement: +4 (tour.nav.announce and the three 0.18.2 release-note lines); the flow colour: +20 (the sixteen strings of the Colour section and the four 0.19.0 release-note lines); the flow colour views: +4 (the four 0.20.0 release-note lines)
   })
 })
 
diff --git a/src/i18n/viCopy.test.ts b/src/i18n/viCopy.test.ts
index ed883af8..794a98be 100644
--- a/src/i18n/viCopy.test.ts
+++ b/src/i18n/viCopy.test.ts
@@ -132,11 +132,11 @@ const englishFor = (surface: string, id: string): string => {
 describe('vi copy — the first locale English hides inside', () => {
   it('has exactly the base key set', () => {
     expect(Object.keys(VI).sort()).toEqual(KEYS.slice().sort())
-    expect(KEYS).toHaveLength(1023) // issue #301 decision 1: +4 (share.unavailable and the three 0.17.1 release-note lines); the session chip: +3 (the three 0.17.2 release-note lines); the licence screen: +12 (nine strings of the view and the three 0.18.0 release-note lines); the menu keyboard: +3 (the three 0.18.1 release-note lines); the tour announcement: +4 (tour.nav.announce and the three 0.18.2 release-note lines); the flow colour: +20 (the sixteen strings of the Colour section and the four 0.19.0 release-note lines)
+    expect(KEYS).toHaveLength(1027) // issue #301 decision 1: +4 (share.unavailable and the three 0.17.1 release-note lines); the session chip: +3 (the three 0.17.2 release-note lines); the licence screen: +12 (nine strings of the view and the three 0.18.0 release-note lines); the menu keyboard: +3 (the three 0.18.1 release-note lines); the tour announcement: +4 (tour.nav.announce and the three 0.18.2 release-note lines); the flow colour: +20 (the sixteen strings of the Colour section and the four 0.19.0 release-note lines); the flow colour views: +4 (the four 0.20.0 release-note lines)
   })
 
   it('covers all four runtime surfaces', () => {
-    expect(RUNTIME.filter(([s]) => s === 'catalog')).toHaveLength(1023)
+    expect(RUNTIME.filter(([s]) => s === 'catalog')).toHaveLength(1027)
     expect(RUNTIME.filter(([s]) => s.startsWith('template/'))).toHaveLength(196)
     expect(RUNTIME.filter(([s]) => s.startsWith('frame/'))).toHaveLength(7)
     expect(RUNTIME.filter(([s]) => s.startsWith('module/'))).toHaveLength(19)
@@ -769,13 +769,13 @@ describe('one English noun, one Vietnamese term, everywhere English names it', (
   // string whose English original names a product noun carries the SAME
   // Vietnamese term, so a later rename moves all of them together.
   const GLOSSARY: [string, RegExp, string, number][] = [
-    ['Pool', /(^|[^A-Za-z])Pools?([^A-Za-z]|$)/, 'Bể chứa', 20],
+    ['Pool', /(^|[^A-Za-z])Pools?([^A-Za-z]|$)/, 'Bể chứa', 21],
     ['Source', /(^|[^A-Za-z])Sources?([^A-Za-z]|$)/, 'Nguồn', 4],
     ['Drain', /(^|[^A-Za-z])Drains?([^A-Za-z]|$)/, 'Điểm xả', 5],
     ['Gate', /(^|[^A-Za-z])Gates?([^A-Za-z]|$)/, 'Bộ chia', 5],
     ['Converter', /(^|[^A-Za-z])Converters?([^A-Za-z]|$)/, 'Bộ chuyển đổi', 4],
     ['Parameter', /(^|[^A-Za-z])Parameters?([^A-Za-z]|$)/, 'Tham số', 24],
-    ['Register', /(^|[^A-Za-z])Registers?([^A-Za-z]|$)/, 'Giá trị tính toán', 10],
+    ['Register', /(^|[^A-Za-z])Registers?([^A-Za-z]|$)/, 'Giá trị tính toán', 11],
     ['Template', /(^|[^A-Za-z])Templates?([^A-Za-z]|$)/, 'Mẫu', 3],
   ]
 
diff --git a/src/index.css b/src/index.css
index a948fc3d..265c565d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4314,6 +4314,33 @@ a.sheet__row {
   background: var(--surface-raised);
   cursor: pointer;
 }
+/* the phone's read-only summary (FC-5): one line, a dot and the name / hex */
+.accent-field__summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-primary);
+}
+.accent-field__dot {
+  flex: none;
+  width: 12px;
+  height: 12px;
+  border: 1px solid var(--line-control);
+  border-radius: 50%;
+  background: var(--swatch);
+}
+/* Default: an empty ring, so the line keeps one shape */
+.accent-field__dot--none {
+  background: transparent;
+}
+.accent-field__hexvalue {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-secondary);
+}
 @media (forced-colors: active) {
   .accent-swatch {
     border-color: ButtonText;
@@ -4328,6 +4355,14 @@ a.sheet__row {
     outline: 2px solid Highlight;
     outline-offset: 2px;
   }
+  .accent-field__dot {
+    border-color: CanvasText;
+    forced-color-adjust: none;
+    background: var(--swatch);
+  }
+  .accent-field__dot--none {
+    background: Canvas;
+  }
 }
 .field__hint {
   margin: 4px 0 0;
diff --git a/src/model/sha256Baseline.test.ts b/src/model/sha256Baseline.test.ts
index 76cc3777..a480d68b 100644
--- a/src/model/sha256Baseline.test.ts
+++ b/src/model/sha256Baseline.test.ts
@@ -60,11 +60,44 @@ describe('SHA-256 after the replacement, against what the replaced code computed
   })
 })
 
+// #325 PR 2 - these three Templates gained flow colours after the baseline was
+// recorded (docs/flow-colour-and-compact-nodes.md FC-6). A colour is cosmetic:
+// their engine digest still equals the recorded one, while their content and
+// full-content digests change, as they must, and are pinned at their current
+// values in src/engine/templateFlowColours.test.ts. The recorded #301 values
+// are kept, checked only by the explicit legacy test below.
+const COLOURED_SINCE = new Set(['coffee-roastery.json', 'gacha-banner-zones.json', 'mmo-progression.json'])
+
+/** a document's text without its flow colours: the file as it was recorded */
+const withoutFlowColours = (text: string): string => {
+  const doc = JSON.parse(text) as { nodes: { data: Record<string, unknown> }[]; edges: { data?: Record<string, unknown> }[] }
+  for (const el of [...doc.nodes, ...doc.edges]) if (el.data) delete el.data.accent
+  return JSON.stringify(doc)
+}
+
+const docOf = (p: ReturnType<typeof deserialize>) => ({
+  nodes: p.nodes,
+  edges: p.edges,
+  recommendedRunConfig: p.recommendedRunConfig,
+  frames: p.frames,
+  dataImports: p.dataImports,
+})
+
 describe('the digests of real documents are unchanged', () => {
   for (const g of EXAMPLE_GRAPH_DIGESTS.filter((x) => x.graph)) {
+    if (COLOURED_SINCE.has(g.file)) {
+      it(`examples/${g.file}: the semantic digest (a flow colour is not a model change)`, async () => {
+        const p = deserialize(read(g.file))
+        expect(p.modelVersion).toBe(g.modelVersion)
+        expect(await semanticDigest({ nodes: p.nodes, edges: p.edges }, p.modelVersion)).toBe(g.semanticDigest)
+        expect(digestOfCanonical(canonicalContent(docOf(p), { modelVersion: p.modelVersion }))).not.toBe(g.contentDigest)
+        expect(await fullContentDigest(docOf(p), p.modelVersion)).not.toBe(g.fullContentDigest)
+      })
+      continue
+    }
     it(`examples/${g.file}: semantic, content and full-content digests`, async () => {
       const p = deserialize(read(g.file))
-      const doc = { nodes: p.nodes, edges: p.edges, recommendedRunConfig: p.recommendedRunConfig, frames: p.frames, dataImports: p.dataImports }
+      const doc = docOf(p)
       expect(p.modelVersion).toBe(g.modelVersion)
       expect(await semanticDigest({ nodes: p.nodes, edges: p.edges }, p.modelVersion)).toBe(g.semanticDigest)
       expect(digestOfCanonical(canonicalContent(doc, { modelVersion: p.modelVersion }))).toBe(g.contentDigest)
@@ -72,6 +105,19 @@ describe('the digests of real documents are unchanged', () => {
     })
   }
 
+  it('legacy (#301 baseline): the three coloured Templates without their flow colours give the recorded digests', async () => {
+    const legacy = EXAMPLE_GRAPH_DIGESTS.filter((g) => COLOURED_SINCE.has(g.file))
+    expect(legacy.map((g) => g.file).sort()).toEqual([...COLOURED_SINCE].sort())
+    for (const g of legacy) {
+      const p = deserialize(withoutFlowColours(read(g.file)))
+      const doc = docOf(p)
+      expect(p.modelVersion, g.file).toBe(g.modelVersion)
+      expect(await semanticDigest({ nodes: p.nodes, edges: p.edges }, p.modelVersion), g.file).toBe(g.semanticDigest)
+      expect(digestOfCanonical(canonicalContent(doc, { modelVersion: p.modelVersion })), g.file).toBe(g.contentDigest)
+      expect(await fullContentDigest(doc, p.modelVersion), g.file).toBe(g.fullContentDigest)
+    }
+  })
+
   for (const r of EXAMPLE_REVISION_READS) {
     it(`examples/${String(r.file)}: the import reader gives the same outcome`, () => {
       const text = read(String(r.file))
diff --git a/src/releaseNotes/releaseNotes.ts b/src/releaseNotes/releaseNotes.ts
index 7201ac08..cd894b10 100644
--- a/src/releaseNotes/releaseNotes.ts
+++ b/src/releaseNotes/releaseNotes.ts
@@ -38,6 +38,16 @@ export const releaseNoteIdFor = (version: string): ReleaseNoteId => `release:${v
  * mechanics, no test counts, no pull-request numbers.
  */
 export const RELEASE_NOTES: readonly ReleaseNote[] = [
+  {
+    // issue #325 PR 2 - flow colours in the minimap, the timeline and three
+    // bundled templates, each colour offered once in the Inspector, and a
+    // one-line colour summary on the phone; the date is the day it is
+    // deployed, set right before the merge
+    id: 'release:0.20.0',
+    version: '0.20.0',
+    date: '2026-10-07',
+    items: ['whatsNew.v0200.views', 'whatsNew.v0200.templates', 'whatsNew.v0200.once', 'whatsNew.v0200.phone'],
+  },
   {
     // issue #325 PR 1 - flow colours on nodes and edges, and a selection that
     // stays clear on any colour; the date is the day it is deployed, set right
diff --git a/src/ui/media.ts b/src/ui/media.ts
index 1cd47224..ff5e50aa 100644
--- a/src/ui/media.ts
+++ b/src/ui/media.ts
@@ -13,19 +13,34 @@ import { useSyncExternalStore } from 'react'
 export const MOBILE_MEDIA_QUERY =
   '(max-width: 720px), (max-height: 500px) and (max-width: 950px) and (pointer: coarse)'
 
-function subscribe(onChange: () => void): () => void {
-  if (typeof window === 'undefined' || !window.matchMedia) return () => {}
-  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)
-  mql.addEventListener('change', onChange)
-  return () => mql.removeEventListener('change', onChange)
+/** a `matchMedia` query in `useSyncExternalStore` form. SSR-safe. */
+function mediaQuery(query: string) {
+  return {
+    subscribe(onChange: () => void): () => void {
+      if (typeof window === 'undefined' || !window.matchMedia) return () => {}
+      const mql = window.matchMedia(query)
+      mql.addEventListener('change', onChange)
+      return () => mql.removeEventListener('change', onChange)
+    },
+    getSnapshot(): boolean {
+      if (typeof window === 'undefined' || !window.matchMedia) return false
+      return window.matchMedia(query).matches
+    },
+  }
 }
 
-function getSnapshot(): boolean {
-  if (typeof window === 'undefined' || !window.matchMedia) return false
-  return window.matchMedia(MOBILE_MEDIA_QUERY).matches
-}
+const mobile = mediaQuery(MOBILE_MEDIA_QUERY)
+const forcedColors = mediaQuery('(forced-colors: active)')
 
 /** `true` while the viewport is in the mobile view/run layout. SSR-safe. */
 export function useIsMobile(): boolean {
-  return useSyncExternalStore(subscribe, getSnapshot, () => false)
+  return useSyncExternalStore(mobile.subscribe, mobile.getSnapshot, () => false)
+}
+
+/** `true` under forced colours (Windows contrast themes). An inline SVG `fill`
+ *  or `stroke` is not replaced by the system palette, so a view that paints a
+ *  flow colour inline asks this instead (docs/flow-colour-and-compact-nodes.md
+ *  FC-3.4: no flow colour under forced colours). SSR-safe. */
+export function useForcedColors(): boolean {
+  return useSyncExternalStore(forcedColors.subscribe, forcedColors.getSnapshot, () => false)
 }