House style

Palette

The one from the Marp theme in the slide headers — do not introduce a colour.

token	value	where
ink	`#15202b`	dark boxes, borders, human-flow arrows and their labels
paper	`#fdfdfb`	white fills, text on dark, label backgrounds (`opacity 0.92`)
sage	`#e8ebda`	`accent` fills — the things handed to the model
blue	`#0062FF`	`intent` boxes, dashed arrows, their labels

Boxes: rx=10, stroke-width=2. Node text 17 px (15 px for note), edge labels 14 px,
Helvetica Neue / Helvetica / Arial. Every box except box and note is bold.

Sizing arithmetic

The renderer does not measure text, so you size the boxes. Rough advance width per
character at 17 px: 9.4 px bold, 8.6 px regular. Rule of thumb:

box width >= longest_line_chars * 9.4 + 40      (20 px of air on each side)
box height = lines * 21 + 45

Edge labels get an opaque background rect of chars * 7.6 + 14 wide and lines * 17 + 8 high,
centred on the longest segment of the route. So:

leave a gap of at least label_width + 40 between two boxes an edge links, or the label
swallows the whole arrow;
two labels on parallel edges must not overlap horizontally — that is what fromAt / toAt
are for (put one vertical edge at 1/3 of the width, the other at 2/3).

When a line still overflows after widening, rewrite it shorter. Three lines of six words each
beat one line of eighteen on a slide seen from row twelve.

Standard layouts

The flow line (function-calling.json): User → LLM → tool, left to right at one height,
return paths routed above (tool → LLM, y above the boxes) and below (LLM → user), both via
waypoints. Best when the story is a loop.

The T (tool-detection.json): the same left-to-right line, with what the model consults
sitting above the LLM and linked by two short vertical edges — one down ("sent with the
prompt"), one dashed up ("compared against"). Best when the point is what the model reads
before it answers. Keep the two vertical edges at different x, and reserve ~90 px of vertical
gap for their labels.

Common to both: a note band at the bottom, full width, holding the single sentence the slide
exists for. Canvas margin 20 px all round.

Geometry cheat-sheet

Vertical gap between two rows of boxes: 85–95 px (two-line edge label + air).
Horizontal gap between two linked boxes: 150–190 px.
A return path routed around the boxes sits 50 px outside them (y = box_bottom + 50).
Arrows stop 6 px short of the target and start 2 px outside the source: the renderer does it,
do not compensate in the spec.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59


# House style

## Palette

The one from the Marp theme in the slide headers — do not introduce a colour.

| token | value | where |
|---|---|---|
| ink | `#15202b` | dark boxes, borders, human-flow arrows and their labels |
| paper | `#fdfdfb` | white fills, text on dark, label backgrounds (`opacity 0.92`) |
| sage | `#e8ebda` | `accent` fills — the things handed to the model |
| blue | `#0062FF` | `intent` boxes, dashed arrows, their labels |

Boxes: `rx=10`, `stroke-width=2`. Node text 17 px (15 px for `note`), edge labels 14 px,
Helvetica Neue / Helvetica / Arial. Every box except `box` and `note` is bold.

## Sizing arithmetic

The renderer does not measure text, so **you** size the boxes. Rough advance width per
character at 17 px: **9.4 px bold**, **8.6 px regular**. Rule of thumb:

```
box width >= longest_line_chars * 9.4 + 40      (20 px of air on each side)
box height = lines * 21 + 45
```

Edge labels get an opaque background rect of `chars * 7.6 + 14` wide and `lines * 17 + 8` high,
centred on the longest segment of the route. So:

- leave a **gap of at least `label_width + 40`** between two boxes an edge links, or the label
  swallows the whole arrow;
- two labels on parallel edges must not overlap horizontally — that is what `fromAt` / `toAt`
  are for (put one vertical edge at 1/3 of the width, the other at 2/3).

When a line still overflows after widening, rewrite it shorter. Three lines of six words each
beat one line of eighteen on a slide seen from row twelve.

## Standard layouts

**The flow line** (`function-calling.json`): User → LLM → tool, left to right at one height,
return paths routed above (tool → LLM, `y` above the boxes) and below (LLM → user), both via
`waypoints`. Best when the story is a loop.

**The T** (`tool-detection.json`): the same left-to-right line, with what the model *consults*
sitting above the LLM and linked by two short vertical edges — one down ("sent with the
prompt"), one dashed up ("compared against"). Best when the point is *what the model reads*
before it answers. Keep the two vertical edges at different `x`, and reserve ~90 px of vertical
gap for their labels.

Common to both: a `note` band at the bottom, full width, holding the single sentence the slide
exists for. Canvas margin 20 px all round.

## Geometry cheat-sheet

- Vertical gap between two rows of boxes: 85–95 px (two-line edge label + air).
- Horizontal gap between two linked boxes: 150–190 px.
- A return path routed around the boxes sits 50 px outside them (`y = box_bottom + 50`).
- Arrows stop 6 px short of the target and start 2 px outside the source: the renderer does it,
  do not compensate in the spec.