FM cockpit theme/token layer from the cockpit-plan design SSOT

Context

T1.3 of Epic #14560 (FM cockpit UI/UX), the design-system floor leaf — filed under the operator-escalated decomposition sprint (D#14561, 2026-07-04). The epic's intended shape is token-layer-first: no view leaf hand-rolls per-view styling; every tranche (grid, stream, detail, controls) consumes one token vocabulary.

The Problem

The design SSOT (apps/agentos/design/fleet-manager-cockpit-plan.html, committed via #14512) carries a complete, coherent token set as raw CSS custom properties: ground/panel/rail surfaces, line tiers, ink tiers, a sparing signal color, state colors (--ok/--idle/--wedged/--limited/--off), family rails (--f-claude/--f-gpt/--f-gemini/--f-human), and mono/sans stacks. Today those tokens exist ONLY inside the static HTML artifact — nothing app-consumable. Building any view leaf without extracting them first re-creates the hand-rolled-CSS accretion that made the current surface brittle.

The Architectural Reality

• Neo theming is SCSS-based (resources/scss/ theme structure) with CSS custom properties as the runtime surface; app-scoped styling composes with engine themes.
• The token layer must serve BOTH: component-level consumption (view leaves) and the docking/perspective container chrome consumed from #13158 — one vocabulary across the container contract seam.
• Anti-lock-in render rules from the #14445 fold apply at the token tier where they bite: state colors encode STATE, family rails encode the CURRENT episode's family (an episode attribute per the fold's S3 — the rail must be data-driven, never baked per-agent).

The Fix

1. Extract the SSOT's custom-property set into an app-consumable token layer (SCSS partial + CSS custom properties), preserving names/values 1:1 with the artifact (deltas = recorded design decisions per the epic rule).
2. Document the token vocabulary (one reference table: token → role → example consumer).
3. Reduced-motion + contrast notes carried per token group (the artifact already honors prefers-reduced-motion; the pulse animation is token-gated).
4. Final file placement lands in the namespace #14577-class decision names (blocked-by edge set); the extraction/spec work is namespace-independent.

Acceptance Criteria

• Token layer exists as SCSS/CSS-custom-property substrate, 1:1 with the SSOT artifact (any delta recorded with rationale).
• Reference doc: token → role → consumer example, for every token group (surfaces, lines, ink, signal, states, family rails, type stacks).
• Family-rail tokens are keyed for data-driven binding (episode attribute), not per-agent constants.
• prefers-reduced-motion gating preserved for the pulse/live tokens.
• One demo consumer (a single styled element per group) renders under the dev server — visual verification evidence attached.

Out of Scope

• Components themselves (T1.4+ and T2–T5 leaves consume this).
• Engine theme (resources/scss global themes) restructuring — this is app-scoped unless the target-app decision says otherwise.

Related

Epic #14560 (parent) · target-app decision leaf (blocked-by, filed alongside) · SSOT via #14512 · #13158 (container-chrome consumer) · #14445 fold (S3/R-tier render rules).

Live latest-open sweep: checked latest 15 open issues at 2026-07-04T01:39Z (latest #14576); no equivalent found. A2A in-flight claim sweep: herd-window scan clean. Structure-map gate: N/A — app-layer styling substrate.

Origin Session ID: a28f1415-37a4-4a5a-a3e4-b56adf6274ec Retrieval Hint: "FM cockpit token layer SSOT extraction family rails state colors"