ILLUSTRIOUS CONSULTING & DEVELOPMENT LLC · UI VISUAL REFERENCE GUIDE

Seventeen renders. One governed liquid language.

The complete front-end reference for the unified Illustrious Harness: 11 workflow-architecture concepts and 6 liquid-frequency engines, all in one design system — obsidian canvas, Fraunces serif, iris→magenta→gold liquid spectrum, IBM Plex Mono telemetry. Shared thesis: workflow health is frequency — in-tune work oscillates clean, drift reads as violent oscillation, recovery is governed damping, never a snap.

17 INTERACTIVE RENDERS 2 COLLECTIONS 4 OSCILLATION LAWS 3 LIVE HARNESS UIs AUDITED 1 BACKEND CONTRACT

The collections, pick a lane.

The product surfaces — how the harness is organized
Grounded in live audits of the three harnesses on this machine. The flagship (011 · Liquid Spine) is backend-ready: it renders from the ILLUSTRIOUS_STATE contract with an SSE adapter stub.
8 stage vessels · 6 agent reactors
011

Liquid Spine — flagship

The fused product: workflow spine where every stage is a particle-liquid vessel obeying four oscillation laws; org strip of six agent reactors; governed detail panels; approves write receipts live.
FLAGSHIPoscillation enginebackend-ready
010

Agent Constellation

Each liquid sphere IS an agent — Maker, Scout, Analyst, Auditor, Oracle, Canon — orbiting an org core in 3D perspective. Per-agent severity: calm liquid in harmony, per-agent oscillation in drift.
FLAGSHIPorg view
009

Drift Spectrum

Agent channels as oscillating waves over a liquid specimen, in the consulting-site design language. Inject a collision, watch coherence fall, governed damping restore the room.
ambient opssite-matched skin
004

Flow Spine

The workflow-as-the-app IA: Goal→Evidence→Plan→Draft→Audit→Decision→Action→Receipt spine, stage detail panels, goal rail, budget rails. The architectural foundation 011 fuses with liquid.
IA foundation
005

Mission Control

Fleet swimlanes: Scout→Analyst→Maker→Auditor→Owner→Oracle. Work flows left-to-right with visible handoffs, WIP limits, governed item drawers.
fleet factory
006

Ledger Brief

The work product as a printable broadsheet: numbered claims, scenario table, auditor note, provenance margin, rubber-stamp SEALED.
document-native
❯_
007

Operator Shell

Terminal mode: goal tree, live governance event stream, command bar — approve · changes · packet · defer. The receipt journal as primary surface.
keyboard-first
008

First Quest

4-step onboarding: welcome → reasoning engine → ground rules → first goal. Engine ladder with price + privacy labels per route.
onboarding
001

Command Deck

Dark operator console: goal inbox, decision packets, agent passports with autonomy ceilings, receipts, gates & policy board.
operator
002

Ivory Brief

Calm editorial first-run: one packet, one decision, governance disclosed on demand. Demo-tenant banner, citation viewer.
first-run
003

Phone Oversight

Approval-first mobile console: health chips, approval cards with evidence tags, fleet status, spend caps, blocked-by-policy states.
mobile
DEEP-DIVE

Visual Language Index

The original deep-dive: design tokens, per-render READMEs, evidence labels and the full audit trail behind every decision.
documentation
The reactive engines — health as pure physics
A global tension 0..1 eased per frame drives every visual property: healthy work reads as slow clean oscillation in iris, teal and phosphor; drift — tool-call storms, retry loops, budget burn, colliding handoffs — reads as violent oscillation in gold→pink heat; recovery arrives as governed damping, never a snap.

New render choices, waiting for promotion.

Four fresh directions with live animated thumbnails — canvas sketches, not stubs. Say the word and any of them gets built out to full-render status like the flagship.

016 · Constellation Web Agents as nodes in a force-graph mesh; handoffs are light-pulses traveling the edges; drift desyncs the constellation geometry.
force-graphlive edges
017 · VU Meter Deck Broadcast-style vertical VU meters per agent — instantaneous level + peak-hold needle, budget burn as red segments.
broadcastpeak hold
018 · Ink & Scroll A hand-drawn document world: the workflow as an illuminated manuscript, gates as wax seals, drift as ink bleeds.
sketch modewax seals
019 · Radar Sweep Polar fleet view: each agent a blip orbiting the goal, sweep line syncing the room, off-phase blips smear into arcs.
polarsweep

The engine obeys real oscillation laws.

The LiquidCore particle engine implements four canonical oscillation patterns (matplotlib-derived) — each mapped to a governance state. Drift is physics with semantics, not decoration.

y(t) = A·cos(ωt)

Simple harmonic — constant energy

The healthy agent: laminar particle rings, mirror surface. Default state of every in-tune vessel.

→ in-tune vessels · canon · analyst
y = A·e^(−γt)·cos(ω_d t)

Damped — governed recovery

Restore harmony and every surface decays along an exponential envelope to mirror-calm. Damping is the visible signature of governed recovery.

→ R-key recovery · auditor · held vessels
y = [sin(ω_f t)−(ω_f/ω_n)sin(ω_n t)]/(ω_n²−ω_f²)

Driven — near-resonance growth

Inject drift and the Maker enters driven mode: amplitude grows like a resonance catastrophe — budget burn feeding its own oscillation.

→ D-key drift injection · action risk
y = cos(2πf₁t)+cos(2πf₂t)

Beats — frequency interference

Two close sources disagree and the liquid shows the beat envelope: calm-rough-calm breathing between conflicting claims.

→ evidence conflicts · scout vessel

The system, in tokens.

obsidian#0a0a0f · canvas
onyx#14141a · surface
pearl#f0eee9 · ink-invert
spectrumiris→magenta→gold
gold#c9a961 · authority
live#3dbe8b · verified
teal#4fd1c5 · held
0.82 Hz
IBM Plex Monotelemetry · receipts

Grounded in what actually runs here.

Run the flagship.

open: illustrious/011-liquid-spine/index.html      ← the fused product
open: liquid/015-resonant-spine/index.html         ← the reactive-engine fusion

# backend contract (when the real harness is ready):
fetch('/api/illustrious/state').then(r=>r.json()).then(window.ILLUSTRIOUS_TICK);
new EventSource('/api/illustrious/stream').onmessage =
  e => window.ILLUSTRIOUS_TICK(JSON.parse(e.data));

# keys in 011:  D = inject Maker drift (driven mode) · R = restore harmony (damped envelopes)