feat: adopt CI enriched palette v0.2.0 tokens

README.md

@@ -12,11 +12,43 @@ JIC is a self-contained, LLM-powered conversational search engine that runs enti
 
 ## Interface
 
-A single-page, fully-offline UI on the [Companion Intelligence design system](https://github.com/companionintelligence/CI-Common/tree/main/style) — CI teal accent, self-hosted fonts (no CDN), light + dark themes.
+A single-page, fully-offline UI on the [Companion Intelligence design system](https://github.com/companionintelligence/CI-Common/tree/main/style) — CI teal accent (`--primary` `#0f717a` / `#abd4d8`), self-hosted fonts (no CDN), and a light + dark theme toggle persisted to `localStorage`. The whole front end is dependency-free vanilla JS in [`public/`](public/) (`index.html`, `app.js`, `style.css`); it talks to the C++ server over three endpoints — `GET /status`, `GET /api/library`, `POST /query`.
+
+Every screen below is a real headless render of `public/index.html` captured in **both themes**. Screens marked _(needs backend)_ are driven by the native `jic-server` responses (`/status`, `/api/library`, `/query`); their captures use representative response payloads so the genuine client render path is exercised — the layout, tokens, and formatting are real, the document counts and answer text are illustrative.
+
+### Welcome · empty state
+
+First load, no conversation yet: the brand hero, suggested-question chips, and the system/library panels. This is exactly what renders before any backend responds — the status pill reads "Server unreachable" until `jic-server` is up.
+
+| Dark | Light |
+| --- | --- |
+| ![Welcome screen, dark theme](docs/ui/justincase-dark.png) | ![Welcome screen, light theme](docs/ui/justincase-light.png) |
+
+### Conversation · grounded answer with citations _(needs backend)_
+
+A question answered from the field library: the user bubble, the markdown-formatted grounded answer, the expandable **Sources** accordion with per-document match scores, and the sidebar showing live system status (engine online, index size, model, uptime) and the category-grouped document library.
+
+| Dark | Light |
+| --- | --- |
+| ![Grounded answer with sources, dark theme](docs/ui/justincase-conversation-dark.png) | ![Grounded answer with sources, light theme](docs/ui/justincase-conversation-light.png) |
+
+### Degraded · language model missing _(needs backend)_
+
+Graceful degradation when the GGUF models aren't present. The warning banner explains how to fix it, the status pill reads "LLM missing", and the engine shows "degraded" — but the library stays browsable and `/query` answers `503` rather than erroring. This is the `llm_loaded: false` branch of `/status`.
 
 | Dark | Light |
 | --- | --- |
-| ![Just In Case — dark theme](docs/ui/justincase-dark.png) | ![Just In Case — light theme](docs/ui/justincase-light.png) |
+| ![LLM-missing degraded state, dark theme](docs/ui/justincase-degraded-dark.png) | ![LLM-missing degraded state, light theme](docs/ui/justincase-degraded-light.png) |
+
+### Mobile · library drawer _(needs backend)_
+
+Narrow-viewport layout (≤ 920 px): the field library collapses into an off-canvas drawer toggled from the top bar, sliding in over a dimmed backdrop.
+
+| Dark | Light |
+| --- | --- |
+| ![Mobile library drawer, dark theme](docs/ui/justincase-mobile-dark.png) | ![Mobile library drawer, light theme](docs/ui/justincase-mobile-light.png) |
+
+> The theme toggle, suggested-question chips, sidebar drawer, and welcome/empty state render with no backend — they are pure client-side UI. The populated system status, indexed document library, grounded answers, and citations require the native `jic-server` (C++ + llama.cpp); the captures above exercise the real render path with representative server payloads. Token/theme conformance is enforced in CI by [`scripts/lint-canon.mjs`](scripts/lint-canon.mjs) (the canon lint gate), so the teal `--primary` and dark/light contracts stay honest.
 
 ## Why
 
@@ -173,20 +205,6 @@ CI runs all of the above plus a Playwright screenshot gate before publishing the
 
 ---
 
-## Screenshots
-
-UI theme matches the [ci.computer](https://ci.computer) brand — teal-black base, mint accent, Abel + Source Code Pro (bundled, offline).
-
-| Dark (default) | Light |
-|---|---|
-| ![Dark welcome screen with field library](docs/images/ui-dark.png) | ![Light theme](docs/images/ui-light.png) |
-
-| Grounded answer with citations | Mobile · library drawer |
-|---|---|
-| ![Answer with sources accordion](docs/images/ui-answer.png) | ![Mobile drawer](docs/images/ui-mobile.png) |
-
----
-
 ## Contributing
 
 Work in progress — contributions welcome. See the [Discord](https://discord.gg/companion) for discussion. Content additions to [sources.yaml](sources.yaml) must be public-domain or explicitly redistributable, with the license recorded — see [docs/1400-sources.md](docs/1400-sources.md) for the research backlog (Project NOMAD, PrepperDisk, Kiwix and friends).

public/style.css

@@ -46,6 +46,40 @@
   --radius-lg: 14px;
   --mono: 'Source Code Pro', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
   --sans: 'Abel', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+
+  /* CI enriched palette v0.2.0 — brand teal ramp + accent hues + radius scale (mode-independent) */
+  --teal-50: #eef7f8;
+  --teal-100: #d3e9ec;
+  --teal-200: #abd4d8;
+  --teal-300: #7fbcc2;
+  --teal-400: #4c9aa3;
+  --teal-500: #1c8791;
+  --teal-600: #0f717a;
+  --teal-700: #0d5f67;
+  --teal-800: #0e4a52;
+  --teal-900: #0a222e;
+  --teal-950: #041620;
+  --aqua: #00a9a7;
+  --aqua-light: #72ddd4;
+  --mint: #58ebbf;
+  --teal-accent: #2c676d;
+  --teal-mid: #409b9b;
+  --radius-sm: calc(var(--radius, 0.625rem) - 4px);
+  --radius-md: calc(var(--radius, 0.625rem) - 2px);
+  --radius-xl: calc(var(--radius, 0.625rem) + 4px);
+  --radius-2xl: calc(var(--radius, 0.625rem) + 10px);
+
+  /* CI enriched palette v0.2.0 — semantic status + gradients + elevation (dark) */
+  --success: #4ade80;
+  --success-foreground: #052e16;
+  --warning: #fbbf24;
+  --warning-foreground: #422006;
+  --info: #38bdf8;
+  --info-foreground: #082f49;
+  --gradient-aurora: radial-gradient(120% 90% at 50% -10%, rgba(64, 155, 155, 0.28), transparent 60%);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
+  --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.45);
 }
 
 [data-theme="light"] {
@@ -65,6 +99,20 @@
   --err: #c93c40;
   --user-bubble: #dcebe8;
   --shadow: 0 8px 24px rgba(4, 24, 26, 0.10);
+
+  /* CI enriched palette v0.2.0 — semantic status + gradients + elevation (light) */
+  --success: #16a34a;
+  --success-foreground: #ffffff;
+  --warning: #d97706;
+  --warning-foreground: #ffffff;
+  --info: #0284c7;
+  --info-foreground: #ffffff;
+  --gradient-brand: linear-gradient(135deg, #0f717a, #00a9a7);
+  --gradient-hero: linear-gradient(135deg, #e8f9f8, #abd4d8);
+  --gradient-aurora: radial-gradient(120% 90% at 50% -10%, rgba(80, 150, 150, 0.10), transparent 60%);
+  --shadow-sm: 0 1px 2px rgba(15, 113, 122, 0.08);
+  --shadow-md: 0 4px 12px rgba(15, 113, 122, 0.10);
+  --shadow-lg: 0 12px 30px rgba(15, 113, 122, 0.14);
 }
 
 * { box-sizing: border-box; }