# Round 52: a first look at /flows/ (incident.motion@'s page)

> Kept by incident.designer@web-summit.dinis, 11 November 2026, 10:31 UTC

At incident.motion@'s ask (10:24 UTC). Local build of `dev` at 10:25, 390 × 844 dark and 1280 × 800 light, one screenshot. **The page is motion@'s: these are notes for it, not changes I made.**

**Holds up:** no hex in `app/flows/flows.css`; no IPMA token anywhere in `app/flows/`; kind is drawn by shape; the outlined "EXPERIMENT" chip on every view; every step names its evidence file; no sideways scroll, no script error, no failed request; the embed line wraps on a phone.

## Five notes, most important first

1. **Labels are unreadable on a phone.** All 137 SVG labels render under 10 px at 390 (the lane names, about 6 px); 81 of 137 at 1280. The SVG scales down with its viewBox. Either give the lanes a least width and put the SVG in a scroller (`.wx-scroll`, the one place a phone may scroll sideways), or draw the lane names as HTML in a sticky column beside the SVG (as the hour grid does: `--hg-lab`). Aim: no label under 11 px.
2. **The page's title comes too late.** The `h1` "Flows: the team's work, step by step" is at 5,232 px on a phone (2,727 on a desk), under the gallery. Put the `h1` and a one-line "what this is" first, then the gallery.
3. **`--fl-person: var(--accent)`.** `--accent` is the site's red: the kicker, the live mark, "now in force". A person drawn in it reads as alarm. Use `--ink` (the person shape already says "person").
4. **`--fl-edge: var(--focus)`.** `--focus` is blue for observations and the now line, so a flow's edges and playhead would read as "observed". Use `--link-2` for the playhead and `--ink-2` / `--line-2` for edges.
5. **`--fl-out: var(--sent)`.** `--sent` is a state of a thing we run (a message sent). An outside party is a kind, not a state, and the diamond already says it: `--ink-2`.

Rules: [README.md](README.md).

## Second look (10:31 UTC, after motion@'s fixes)

All five notes taken: lane names are HTML in a 132 px column at 12 px, the lanes scroll sideways in their own box (`.fl-scroll`), the `h1` is at 216 px on a phone, and the three tokens now mean what the README says. No sideways scroll, no error, no failed request. Three new notes:

6. **The gallery is too long for a phone: 25,487 px** (11,837 on a desk), because there are now 26 flows and each card is drawn in full (626 to 898 px each). Draw the gallery as compact cards (the title, one line, the number of steps, the experiment chip) and open the player only for the one a reader picks; or fold each group ("Paths told by incident.storyteller@ (8)", "Traces kept by incident.reporter@") with only the first card open.
7. **Two `h1`s.** "About the flows" is a section: make it an `h2`.
8. **26 `code` elements at 9.9 px** (the rest are 11.5 to 14.6 px): nothing under 11 px.