# Idea Map

A concept map set in type on a cool layout sheet: each term stands on its own underline, which runs on as the line to the next term, drawn to say the relation.

## Essence, and what it is not

- Every term is typeset on a rule; its lines leave and arrive along the rule, so a relation reads as the underline running on.
- The stroke is the relation, never the colour: solid arrow causes, dashed contributes, chevrons lead to, dots to a ring are part of, a T-bar blocks, a double line opposes.
- A verb sits in a gap cut in its line, in italic.
- Pictures before words: a line pictogram over a word or two, acting out what is said; few glosses.
- A line comes before the term it reaches. One red for what matters now.

Closest is Lab Notebook, handwriting and drawings on squared paper; here words are typeset, lines ruled, and what is drawn is relations. Not Evidence Board (no cards, pins or thread), not a mind-map app (no bubbles, radial branches or colour coding).

## Ground and material

`sheet.tsx`: a cool off-white sheet (`bg`) with a faint cross every 160 px (`faint`) under one camera, between the running head (y 200) and the captions (y 900). Rules 3 px, 6 for an event, doubled for a root cause. A term may be a large pictogram (`kind: picture`) that multiplies, bursts, spins, beats or fills (`act`); carry a small one, a framed `image` or ruled `items`; be a figure or a quote; or be struck out.

## Colour roles

- `text`: every term, rule and line. `muted`: glosses, indices, sources. `border`: a dimmed term.
- `op`: the one red: the active term or line, a root tab, a bracket, a share's heavy run, a chart's marked bar.
- `data`: figures, in ink. `panel`: the locator's card.
- `grad`, `good`, `bad`, `warn` are unused: kinds are told by stroke.

## Type and captions

Hanken Grotesk (`sans`) for terms (46 to 80 px) and figures; Newsreader italic (`display`) for glosses and verbs (40 to 42); JetBrains Mono (`mono`) for indices and sources. Chinese: Noto Sans SC terms, Noto Serif SC 500 upright glosses, broken between words, a thin space beside Latin and digits. The caption sits on the sheet: Hanken 36 with a short red rule at its left.

## Motion

Grow the map with `grow`, a step per term on its word: the line runs out with a red nib (0.8 to 1.5 s), its verb appearing as the nib passes; the term's rule runs out, its pictogram draws stroke by stroke, the word stands, then it acts. A new cause is reached by a line run back out of the map. A `flow` line carries marks along it. Views change over 1.2 to 1.8 s; riding a line the crosses streak. Figures count up; units and bars draw in turn. Nothing bounces.

## Composition and framing

Let the map lay itself out (`flow`, wrapped into rows; `down`; `cycle`), and vary it from map to map; `beside`, `rank`, `order`, x and y last. Frame shots with `views` (and `grow` for what stands beside terms), never a computed camera. Under zoom 0.8 only terms and lines show. A condition sits above the stage it feeds, a part below its whole.

## Sound

Optional: a tick, a pen line, a marimba.

## Components

- **compare** — Two branches (`react/parts/compare.tsx`): Two terms side by side, points under each, joined by one relation; one side marked. Fits: two outcomes of one cause; before and after; two options
- **data** — Ruled chart (`react/parts/chart.tsx`): Bars ruled from zero, or one line on a valued scale with a reference mark; an estimate drawn open. Fits: a value and its forecast; a few groups; a series against a target
- **data** — Figure on a rule (`react/parts/figure.tsx`): A large figure on its rule beside a term, counted up, its source under it; a share as a heavy run. Fits: what a cause cost; a share of a whole
- **data** — Unit chart (`react/parts/units.tsx`): A share as a row of pictograms counted in, the share in red: three in ten without a sentence. Fits: one in three prescriptions; four in five households; nine in ten species
- **ground** — Sheet and camera (`react/parts/sheet.tsx`): A cool layout sheet with faint registration crosses, under one camera. Fits: every scene; the map inside is in map pixels
- **link** — Key of relations (`react/parts/key.tsx`): A sample of each kind of line the map uses, and what it means. Fits: the first time two kinds of relation meet
- **link** — Relation (`react/parts/relation.tsx`): A line run on from a term's rule; its stroke is the relation, its verb sits in a gap. Fits: a cause; a stage turning into the next; a part; a fix that blocks
- **mark** — Bracket (`react/parts/bracket.tsx`): A red square bracket along a group of terms, with a short note. Fits: the loop in a cycle; the root causes; the part a fix touches
- **mark** — Pictogram (`react/parts/pictogram.tsx`): A large line pictogram drawn stroke by stroke, then acting: multiplying, bursting, turning, beating, filling. Fits: bacteria multiplying; a cell bursting; a machine running; a heart beating; a reservoir filling
- **steps** — Idea map (`react/parts/map.tsx`): A map laid out from its terms and relations (flow, down, cycle), grown line before term, under a camera. Fits: a cycle; a chain of causes; a hierarchy; a root-cause review; a process
- **term** — Term on its rule (`react/parts/term.tsx`): A term typeset on its rule: with a gloss, index, pictogram (acting), picture or points; a large pictogram, a figure, a quote, or struck out. Fits: a stage; a cause; a person or a place; a count; a failure; a fix
- **title** — Running head (`react/parts/heading.tsx`): The map's question at the head of the sheet: a mono kicker by a red square, the title, a short rule. Fits: the question a lesson answers; the incident under review
- **transition** — Locator (`react/parts/locator.tsx`): The whole map in miniature, the frame a red box moving over it. Fits: a ride along a line; a close look at a large map

## Native moves

- **Run the rule on.** A term's underline keeps going as the line to the next, its verb in the gap. *Fits content like:* a stage into the next; a cause and its effect; a decision and its result.
- **Ride the line.** The camera follows the nib to a term off frame, the locator showing where. *Fits content like:* a gene making its enzyme; a policy reaching a group; an order passed down.
- **Close the loop.** The last line returns to the first term, chevrons showing the way round, a bracket naming it. *Fits content like:* the water cycle; a vicious circle; a feedback loop in a product.
- **Name the stroke.** Two kinds of relation meet and the key draws each. *Fits content like:* deep causes and a trigger; parts and effects; help and harm.
- **Block the cause.** An action sends a T-bar line into the cause it stops. *Fits content like:* a fix in a review; a vaccine; a law against a loophole.
- **A figure on its rule.** A large figure stands beside the term it measures, counted up, source under it; or bars rule out from zero, a forecast drawn open. *Fits content like:* deaths a cause led to; a share that failed; now and in 2050.
- **Lay a second sheet.** A sheet over the map sets two branches side by side. *Fits content like:* two outcomes; before and after a reform; two options.
- **Pull back to the view.** From close in, the camera moves out to the terms now discussed. *Fits content like:* the whole loop; all causes of an incident.
- **Act it out.** A pictogram multiplies, bursts or turns as said. *Fits content like:* bacteria dividing; a cell bursting; a mill.

## Avoid: pitfalls

- A verb laid on its line. Fix: give the relation a label; it finds its gap.
- A term standing before its line. Fix: `grow`.
- Every term red. Fix: one red per thought.
- A rounded figure, or a bar not from zero. Fix: values as said, sourced; bars from zero.

## Freedom in each work

Three structures: a cycle, then broken by a fix; a root-cause review from the incident back to the root, ending on its fixes; a cascade read top to bottom, then two outcomes compared.