toor
a623398fe8
The app had a single cyan accent, so every emphasis in the chat chain was a shade of the same hue. An approval waiting on the user, a tool that had already run, a streaming response and an outright error all looked equally urgent — the hue carried no information at all. The colours are now split by meaning rather than by shade, and the rule is documented at the top of variables.scss so it survives future edits: cyan the system itself brand, primary buttons, selection, user bubbles amber needs you approval cards, context about to fill lime the machine works tool execution, assistant output, streaming red something failed errors only — deliberately not a palette member Red staying out is the load-bearing part: when failure reuses the accent family the urgency signal disappears entirely. `--warning` moves from yellow (hue 85) to amber (hue 68) and `--success` from a muted green to fluorescent lime (hue 128). Because both are global tokens, every page using them changes hue in the same pass; the Arco `--green-*` / `--orange-*` bridges are updated with them so solid controls follow instead of staying behind. Six translucent companions (`--success-soft`, `--warning-line`, …) were added for fills and borders. On the chat surface: the approval card goes amber with a slow pulse on its icon — the only moving part in the chain, marking the one thing that is genuinely waiting. Tool-change cards and assistant bubbles take a 2px lime left edge meaning "already ran"; user bubbles get a cyan right edge so the two sides read apart without labels. The context meter is green under 60%, amber to 80%, red above; those thresholds already existed and only the colours were wrong. Rendering-layer only. No store logic, no /chat-run payload, no markup or event wiring.
3.3 KiB
date, pr, feature, impact
| date | pr | feature | impact |
|---|---|---|---|
| 2026-10-19 | pending | Three-colour semantic system split out of the single cyan accent | 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.