# Direction 1, Panels: notes (2026-09-27)

Files: `situation.html`, `now.html`, `scripts/shots.cjs`, `scripts/palette_cvd.py`, `palette-cvd.txt`, `shots/`. Grades: everything below is C (design judgement) unless marked.

## (a) The direction, and what it keeps from A

The SPRING situation as a calm grid of panels. Each panel holds one chart, one readout and one caption, in A's dark ice-blue palette, and one moment slider above the charts drives all of them. Kept from A: the dark ground, ice blue `#72C3E6` as the only accent, A's semantic families (orange for weakening, crimson for safety, chalk for you, hatch for unknown), one state word, provenance kept as a quiet caption ("tape · 12 s"), and the reading order: state, since you looked, waiting for, charts, evidence, notes.

## (b) What changes, mapped to Thomas's points

| Thomas said | What this direction does |
|---|---|
| Too terminal-like; courier font not smooth | No monospace anywhere except the contract address. Inter for everything, with tabular figures. Radii of 10 px, two surface steps, a soft glow on the hero only. |
| Too much text, internal information | Zero ids, rule names, "illus." tags or "fixture" in the visible layer (grep below). Every sentence is under 20 words. Only the About drawer has paragraphs, and it is collapsed. |
| Hierarchy does not make sense | The hero panel is the largest and the only raised, glowing surface. It is the only place with the state word and 36 px numbers. Everything else is one step darker. |
| The v1 wireframes felt organised; money in and out looked better | This is the v1 grid, skinned: S6 money flow comes back as bars above and below zero, S7 as the holders lines, S8 as the attention lane, S4's money-before-talk bracket as the lag bracket. |
| The clock chart takes staring | The fused strip is gone. There are four separate charts on one shared x axis (16:27Z to now), and each draws the moment line at the same x. |
| A slider that moves across all the charts | One slider panel above the charts, draggable from any chart, with keyboard support. Every readout, the hero numbers, the state word, the sentence and the since-you-looked list follow it (see e). |
| Collapsed text you can peek at | Five evidence drawers (money open by default) and one About this data drawer. |

**Folding (my call, as the brief allowed):** *Money out* is the negative side of the money chart: a hatched lane below zero reading "out: not read yet", and no invented bars. *You* is not a chart. It is a chalk tick labelled "your last look" on the slider axis, which is where the reader's hand already is. That gives 7 panels above the evidence (hero, since you looked, slider, price, money, holders, attention), under the cap of 8. Safety is one line of text under the charts, as the brief asks.

**Phone deviation:** the hero's three numbers are hidden on the phone because each one repeats a chart readout. Showing them would break the fold budget (token line, state word, sentence, three since-you-looked lines, first chart). The waiting-for line sits under the since-you-looked list on the phone instead of at the slider's right end.

## (c) Type

Inter, weights 400 to 700, with `tnum` and `cv11` on the body. It is the closest free face to SF Pro, which Apple Stocks uses. Its tabular figures are true fixed-width, so readouts do not jitter while scrubbing. It is on Google Fonts, with fallback `"SF Pro Text", system-ui, -apple-system, Segoe UI, Roboto`. IBM Plex Mono 400 is used for the contract address only.

| Role | Desktop | Phone |
|---|---|---|
| State word | 26 px / 650, ice blue (ink when Developing) | 24 px |
| Hero number | 36 px / 600 (wallets), 28 px for price and top-20 | hidden (in chart readouts) |
| Moment readout | 28 px / 600 | 22 px |
| Chart readout | 20 px / 600 | 20 px |
| Sentence | 17 px | 15.5 px |
| Body | 14 px / 1.45 | 13.5 to 14 px |
| Caption, panel title | 12 px, ink 52% | 12 px |

## (d) Palette and CVD

Ground `#090C0F`, panel `#11161B`, hero `#18212A` plus a 10% ice radial glow, ink `#E7ECF0`, neutral at ink 70%, unknown and captions at ink 52%. The hues are A's, unchanged. Output of `python3 scripts/palette_cvd.py` (full text in `palette-cvd.txt`; maths imported from `scripts/t7_palette_cvd.py`, Machado 2009 plus CIEDE2000, grade A for the method via T7):

```
ground #090C0F  surface #11161B  ink #E7ECF0
  ink               on surface 15.29     unknown/caption (ink 52%) on surface 4.90
  evidence+ #72C3E6 on surface  9.24     weakening #C8742E on surface 5.19
  safety #D6336C    on surface  3.94     user #E9E3A4 on surface 13.85
  (hero surface #18212A: caption 4.69, weakening 4.65, safety 3.53)
                           normal protan deutan tritan
  evidence+  vs weakening   46.8   46.1   46.7   58.4
  evidence+  vs neutral     17.1   13.7   15.0   21.1
  weakening  vs safety      34.4   33.5   16.2   10.5
  worst pair, any vision type: dE 10.5 (weakening vs safety, tritan)
```

Safety fails 4.5:1 as text, so it appears only as a filled block with dark text (the Now card). Colour never carries direction: money out is placed below zero and drawn as hollow outlines in the same ice blue.

## (e) How the slider behaves

- Range 16:27Z to 17:27Z in one-minute steps. It starts at now. `window.setMoment('16:57Z')` or `setMoment(30)` sets it from a script.
- Input: drag on the slider axis or on any chart (pointer events, so touch works too). Arrow keys move 1 min, Shift+arrow 5, PageUp and PageDown 10, Home and End. The handle is `role=slider` with an `aria-valuetext` clock. A "Back to now" button appears when the slider is off now.
- Every chart draws a white moment line at the same x and dims everything after it. Readouts show the last read at or before the moment, with its time ("read at 16:57Z", or "last read 16:42Z, 8 min before"). They never show an interpolated value. Before 16:32Z they read "Not read yet · first read 16:32Z".
- The state word is Developing before 16:32Z and Money first after. The sentence changes at 16:32Z and at 17:08Z (the Fomo entry). The attention lag bracket is drawn up to the moment. Since-you-looked lines after the moment dim to 28%.
- `prefers-reduced-motion` removes every transition; the slider still works (the 16:57Z shot is taken with reduced motion on).
- On the phone the slider panel is sticky at the top of the chart run while the charts scroll.

## (f) Illustrative list (these look real on the page; also listed in the About drawer)

- Last look at 16:57Z.
- Market cap $2.66M (assumes 1B supply) and liquidity $84K, in the Market drawer.
- Telegram preview every 5 min.
- Source ages "tape · 12 s" and "Fomo · 19 min".
- On the Now page: every row except SPRING and AGRIPPA's two figure pairs (LUMEN, MARLIN, KESTREL, OBOL are wholly illustrative). All since-you-looked counts except SPRING's 3. Every sparkline shape except SPRING's, which is the four real intervals spread across 5-minute buckets.
- Not drawn: the 6-minute price gap (16:44Z to 16:50Z), which the fixture marks illustrative. The dotted line between reads already says "not observed".

## (g) How this goes wrong, and the guard

It goes wrong as a dashboard of equal boxes where nothing is first, or as Grafana with nicer corners. Guards in the build:

- The hero is the only raised, glowing panel and the only home of the state word and the 36 px number.
- There is exactly one state word per page.
- There are 7 panels above the evidence.
- Chart readouts are capped at 20 px.
- Captions are 12 px at ink 52%.
- Chart titles are 13 px.

A second risk is specific to this layout: on desktop the charts sit two per row, so the eye has to jump to follow the moment line. The shared tick grid and the identical plot heights within a row make the jump short. Direction 2's full-width stacking avoids it entirely, which is the trade-off to judge when combining.

## (h) What I did not do

- No hover tooltips.
- No play or scrub animation.
- No true phone touch-event test. Pointer drag was tested at 390 px with a mouse, and pointer events cover touch.
- No Board, Market or Record pages.
- No wordmark or logo work beyond a dot and letter-spaced text.
- No light theme.
- No live data: everything is SPRING at 17:27Z.

## Verification (run 2026-09-27)

- `NODE_PATH=/home/botbox/node_modules node scripts/shots.cjs`: all five shots have scrollWidth ok (1280 and 390) and no overflowing elements. Inter loaded (Plex Mono loaded on the situation page). Sizes: situation desktop 150 KB, phone 110 KB, 16:57Z 140 KB; now desktop 78 KB, phone 64 KB. All are under 500 KB.
- The 16:57Z shot's readouts: moment 16:57Z, state Money first, price $0.00168 "read at 16:57Z", wallets 861, top-20 0.57, since-you-looked lines dimmed 3 of 3 (all three are after 16:57Z). This matches the brief.
- Drag and keyboard test (`/tmp` script, not kept):
  - drag to 16:42Z gives $0.00106 "read at 16:42Z";
  - 11 steps left gives 16:31Z, Developing, "Not read yet";
  - End returns to 17:27Z.
  - Same results at 1280 and 390.
- Text checks:
  - U+2014: 0 hits in every file.
  - Banned words (smart money, alpha, edge, buy, sell, bullish, score, AI confidence): 0 hits.
  - Internal strings in body text: 0 hits, except the heading "Illustrative on this page" inside the About drawer, which carries no ids.
- Every number has a caption, or sits in a chart whose caption line covers it.
- Nothing after 17:27Z appears.
- The phone fold at 844 px holds the token line, state word, sentence, three since-you-looked lines, waiting for, the slider and the whole price chart.

Status: DONE