# JBNX Ops - Style Reference

## Kayla Universe — October 16, 2026

The Kayla surface preserves the owner's approved solar-system preview and supplied JARVIS/network references: outer space, the original panda-costume kitten as the central sun, and agents as primary planets. The existing Refero reference below continues to govern the separate Projects desk. Universe does not restyle that desk.

Human Framework: scattered components become one scoped network; selecting a component explains its role, relationships, access, observation time and available action. Unknown health remains unknown. Gold means recorded current execution, white means selection, red indicates a recorded failure/disconnection. The visual hierarchy puts exploration first, with one Talk action and a compact conversation console. Resource sharing and dependencies reflect canonical records rather than decorative links.

Desktop, tablet and 320/390px layouts retain component selection, camera controls, captions, account context and reduced-motion behavior. Touch/keyboard controls and a selector provide an alternative to precise canvas picking. Browser fixtures are explicitly labeled test data; only authenticated runtime observations appear in production.

> Steep - serif analytics on warm paper

**Theme:** light (default) - dark via `body.theme-dark`
**Source:** [Steep on Refero Styles](https://styles.refero.design/style/75fdb89f-ca64-41b3-af36-7a78bd09448e)
**Applied in:** `projects-portal/public/index.html` (`#dispatch-skin`)

The work desk reads like a product magazine: paper canvas (#fafafb), white cards on
hairline borders at 24px radius, serif display headings (Source Serif 4, weight 400,
never bold), Geist for body/UI, pill-shaped controls (999px). Color is functional
only: green = free, amber = claimed, red = broken - never decoration. One peach
TL;DR strip (#fbe1d1 / #5d2a1a) per page is the single editorial accent.

## Tokens - Colors (light)

| Token | Value | Role |
|---|---|---|
| `--bg` | `#fafafb` | Page canvas (fog) |
| `--surface` | `#ffffff` | Cards, sidebar |
| `--panel` | `#f7f7f8` | Subtle strips |
| `--sunk` | `#f2f2f3` | Input fills, mist |
| `--ink1` | `#17191c` | Type, filled buttons |
| `--ink2` | `#565b66` | Secondary text |
| `--ink3` | `#777b86` | Tertiary labels |
| `--rule` | `#ececee` | Hairlines |
| `--red` | `#b42318` | Errors and failures only |
| `--accent-bg/-ink` | `#fbe1d1` / `#5d2a1a` | TL;DR strip, max one per page |
| `--cfree-*` | `#ecfdf5` family | FREE state (green, measured 7:1+) |
| `--cheld-*` | `#fff7ed` family | CLAIMED state (amber, measured 7:1+) |
| `--cunk-*` | `#fef2f2` family | UNKNOWN/BAD state (red) |

Dark mode mirrors the same roles on #101114 with lightened inks; all state pairs
keep their hue so green/amber/red still mean free/claimed/broken.

## Type

- Display/H1: Source Serif 4, weight 400 only, tracking -0.02em (the signature).
- Body/UI: Geist 400/500/600, 14px base.
- Mono: IBM Plex Mono for data.

## Shape

- Cards 24px radius, hairline border, whisper shadow. Buttons and nav rows are pills (999px). Inputs 16px.

## Rules

1. Never collapse the status palette to monochrome. The 2026-08 "clinical blueprint"
   skin set every state color to near-black and produced unreadable ink-on-ink chips.
   Status colors are load-bearing; each pair was contrast-measured.
2. Serif stays weight 400. No bold serif, ever.
3. The peach accent appears at most once per page (the TL;DR strip).
4. Every route gets a plain-English TL;DR (see `#zen-tldr` in index.html).
5. Sidebar shows every page, grouped: Work / Projects / People & agents / Knowledge / Money / Operations. No page hidden behind a More menu.

## Project workspace — October 27, 2026

Preserve the existing Steep reference above (retrieved during implementation), paper surfaces, serif headings and functional status colours. Human Framework situation: the owner sees many events but cannot tell what remains. The useful move is to filter work by status and recorded feature, then open the task or its evidence. Separate Work, Activity, and Deployment evidence; avoid a duplicated activity wall above the tabs.

All states remain discoverable. Categories come from canonical task kinds, feature groups from assigned milestones, and unknown groups stay Uncategorized. Display groups per page explicitly. Thirty records per page keep rendering bounded; search and filters apply to the complete database result, not just the visible page. Full descriptions and evidence use task detail links; activity JSON loads on demand. Jev suggestions require an explicit action and never relabel canonical records.

Acceptance includes keyboard controls, 320px layouts, error/retry states, complete traversal beyond the former 80-event limit, timestamp ties, stale navigation responses, and authorization failures. Fixture screenshots are layout evidence, not authenticated production proof.

### Remaining-work correction

Owner feedback: the original all-status ID order buried unfinished features among completed work. The default now shows **Remaining work**, with To do, In progress, Blocked and Needs verification kept distinct. Global counts precede the checklist; the full category/milestone index expands on request so it cannot push the actual remaining list below a wall of summaries. Category buttons select the complete database result. Task rows carry explicit status, a next-step cue, dependencies, and expandable acceptance/evidence. Teaching-video readiness appears inside evidence separately from completion. Existing Steep reference, paper surfaces, status colors and responsive controls remain.