forked from bots-garden/ori
| ✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme | 1 | # House style |
| 2 | ||
| 3 | ## Palette | |
| 4 | ||
| 5 | The one from the Marp theme in the slide headers — do not introduce a colour. | |
| 6 | ||
| 7 | | token | value | where | | |
| 8 | |---|---|---| | |
| 9 | | ink | `#15202b` | dark boxes, borders, human-flow arrows and their labels | | |
| 10 | | paper | `#fdfdfb` | white fills, text on dark, label backgrounds (`opacity 0.92`) | | |
| 11 | | sage | `#e8ebda` | `accent` fills — the things handed to the model | | |
| 12 | | blue | `#0062FF` | `intent` boxes, dashed arrows, their labels | | |
| 13 | ||
| 14 | Boxes: `rx=10`, `stroke-width=2`. Node text 17 px (15 px for `note`), edge labels 14 px, | |
| 15 | Helvetica Neue / Helvetica / Arial. Every box except `box` and `note` is bold. | |
| 16 | ||
| 17 | ## Sizing arithmetic | |
| 18 | ||
| 19 | The renderer does not measure text, so **you** size the boxes. Rough advance width per | |
| 20 | character at 17 px: **9.4 px bold**, **8.6 px regular**. Rule of thumb: | |
| 21 | ||
| 22 | ``` | |
| 23 | box width >= longest_line_chars * 9.4 + 40 (20 px of air on each side) | |
| 24 | box height = lines * 21 + 45 | |
| 25 | ``` | |
| 26 | ||
| 27 | Edge labels get an opaque background rect of `chars * 7.6 + 14` wide and `lines * 17 + 8` high, | |
| 28 | centred on the longest segment of the route. So: | |
| 29 | ||
| 30 | - leave a **gap of at least `label_width + 40`** between two boxes an edge links, or the label | |
| 31 | swallows the whole arrow; | |
| 32 | - two labels on parallel edges must not overlap horizontally — that is what `fromAt` / `toAt` | |
| 33 | are for (put one vertical edge at 1/3 of the width, the other at 2/3). | |
| 34 | ||
| 35 | When a line still overflows after widening, rewrite it shorter. Three lines of six words each | |
| 36 | beat one line of eighteen on a slide seen from row twelve. | |
| 37 | ||
| 38 | ## Standard layouts | |
| 39 | ||
| 40 | **The flow line** (`function-calling.json`): User → LLM → tool, left to right at one height, | |
| 41 | return paths routed above (tool → LLM, `y` above the boxes) and below (LLM → user), both via | |
| 42 | `waypoints`. Best when the story is a loop. | |
| 43 | ||
| 44 | **The T** (`tool-detection.json`): the same left-to-right line, with what the model *consults* | |
| 45 | sitting above the LLM and linked by two short vertical edges — one down ("sent with the | |
| 46 | prompt"), one dashed up ("compared against"). Best when the point is *what the model reads* | |
| 47 | before it answers. Keep the two vertical edges at different `x`, and reserve ~90 px of vertical | |
| 48 | gap for their labels. | |
| 49 | ||
| 50 | Common to both: a `note` band at the bottom, full width, holding the single sentence the slide | |
| 51 | exists for. Canvas margin 20 px all round. | |
| 52 | ||
| 53 | ## Geometry cheat-sheet | |
| 54 | ||
| 55 | - Vertical gap between two rows of boxes: 85–95 px (two-line edge label + air). | |
| 56 | - Horizontal gap between two linked boxes: 150–190 px. | |
| 57 | - A return path routed around the boxes sits 50 px outside them (`y = box_bottom + 50`). | |
| 58 | - Arrows stop 6 px short of the target and start 2 px outside the source: the renderer does it, | |
| 59 | do not compensate in the spec. |