---
date: 2026-10-19
pr: pending
feature: Three-colour semantic system split out of the single cyan accent
impact: The chat chain's approval card, tool-change cards, assistant bubbles and context meter were re-coloured so that each colour carries exactly one meaning. `--warning` moves from yellow (hue 85) to amber (hue 68) and `--success` from a muted green to a fluorescent lime (hue 128), so the whole app changes hue together rather than only the chat view. Rendering-layer only — no store logic, no `/chat-run` payload, no markup or event wiring changed.
---

# Three-colour semantics

The app had one accent, so every emphasis in the chat chain was a shade of the
same cyan: an approval waiting on the user, a tool that had already run, a
streaming response, and an outright error all looked equally urgent. Hue was
carrying no information.

The colours are now split by meaning instead of by shade. Each one does exactly
one job and the rule is stated at the top of `variables.scss`:

| colour | means | used for |
| --- | --- | --- |
| cyan `--accent-primary` | the system itself | brand, primary buttons, current selection, user bubbles |
| amber `--warning` | needs you | approval cards, their confirm buttons, context about to fill |
| lime `--success` | the machine is working | tool execution, assistant output, streaming caret, healthy connection |
| red `--error` | something failed | errors only — deliberately *not* a fourth member of the palette |

Red staying out of the palette is the point: when failure reuses the accent
family the urgency signal disappears.

## Token changes

`--warning` moved from `oklch(0.810 0.145 85)` (yellow) to `oklch(0.780 0.155 68)`
(amber), and `--success` from `oklch(0.760 0.140 165)` to `oklch(0.860 0.190 128)`
(fluorescent lime). Six companion values were added for translucent fills and
borders: `--success-soft`, `--success-line`, `--warning-soft`, `--warning-line`,
`--error-soft`, `--error-line`. The matching Arco bridge values in `global.scss`
(`--green-*`, `--orange-*`) were updated in the same pass so solid controls —
button fills, switch tracks, progress bars — pick up the new hues rather than
staying on the old ones.

Because the hues are global, every page using `--success` or `--warning` changes
with them. That is intentional; the alternative is a chat view that disagrees with
the rest of the app.

## Chat chain surface

- **Approval card** (`MessageList.vue`) — was cyan, now amber: amber border, a
  translucent amber wash over the card, an amber outer glow, and a slow pulse on
  the icon. The pulse is the only moving part in the chain; it marks the one
  thing that is genuinely waiting.
- **Tool-change cards** (`MessageItem.vue`) — gained a 2px lime left edge meaning
  "this already ran".
- **Assistant bubbles** (`MessageItem.vue`) — same 2px lime left edge.
- **User bubbles** (`MessageItem.vue`) — 2px cyan right edge, so the two sides
  read differently without needing labels.
- **Context meter** (`ChatInput.vue`) — green under 60%, amber to 80%, red above.
  The thresholds already existed; only the colours were wrong.

## Verification

`npm run test`, `npm run build` and `npm run harness:check` pass. Styles were
checked in a browser against the six states that exercise the palette: idle,
streaming, approval, context warning, tool call, and system error.