ILLUSTRIOUS CONSULTING & DEVELOPMENT LLC · UI VISUAL REFERENCE GUIDE

Twenty-two 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.

22 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.

Three 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.

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 vault — concepts waiting for a seed sketch

022 · Seismograph Receipt RibbonPer-agent strip-chart seismographs on ruled tape; receipts print at event points; drift reads as 9.0 tremors.
driven
023 · Spectral Heat WallContribution-graph heat grid of workflow events over hours/days; cascade failure walks across columns as an infection wave.
shm
026 · Tuner Dial BoardAnalog radio dial; agent needles locked on station = in-tune; drift wobbles off-channel; R gently retunes.
shm
027 · Broadcast Test CardTV test pattern per agent; drift rolls the bars and bursts static; recovery re-locks SMPTE bars.
driven
028 · Moiré Evidence GridTwo agents' line-grids overlay; agreement = still field; conflicting claims produce moiré beating.
beats
029 · Particle Flow FieldSimplex-noise flow field; laminar streams = coherence; turbulence = drift; R straightens the field.
shmdamped
030 · Orrery of ResonanceJupiter-moon style orbital resonance (1:2:4); agents as moons; drift breaks the ratio; damping restores it.
shm
031 · Hourglass Spend FieldSand hourglass per agent; budget burn = sand rate; flip = budget reset; run-out = held state.
driven
032 · Governance AutomatonCellular automaton; auditor rules keep stable still-lifes; drift explodes the population; R rewinds generations.
damped
033 · Data-Mosh RecoveryDatamosh artifacting floods the frame on drift; governed damping re-resolves pixels to clarity.
driven
034 · Lava-Lamp Ambient FleetSlow lava-lamp blobs as an ambient ops backdrop; pitch-perfect calm mode for the Ivory Brief skin.
shm
035 · String-Phone NetworkCups-and-string handoff network; taut string vibrates clean, slack = broken handoff; playful sketch mode.
beats

5 promoted renders · 3 live promo cards · 0 sketchs · 12 in vault. Edit ideas/vault.json and run generate_vault.py to reshape this block.

The four sketch choices, now full renders — Chladni nodal locking, ferrofluid spike physics, an ASCII telemetry stream, and a pendulum phase wall. Driven live from the 036 · Harness Mock.

020 · Chladni Governance Plate Beats law: sand relaxes into nodal figures; drift detunes and scatters; R re-crystallizes.
beatspromoted
021 · Ferrofluid Spikes Driven law: spike growth encodes drift severity; damping restores the mirror.
drivenpromoted
024 · ASCII Telemetry Field SHM: the whole render as a live Plex Mono glyph stream — density is tension.
shmpromoted
025 · Pendulum Wave Wall SHM + damped: fifteen workflows phase-shifting; friction restores the lock.
shmpromoted
016 · Constellation Web — synaptic Beats law: neurons fire action potentials along the mesh; drift misfires; governed recovery re-locks.
beatspromotedsynaptic

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)