# 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.