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.
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.
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.
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 WebAgents 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 DeckBroadcast-style vertical VU meters per agent — instantaneous level + peak-hold needle, budget burn as red segments.
broadcastpeak hold
018 · Ink & ScrollA hand-drawn document world: the workflow as an illuminated manuscript, gates as wax seals, drift as ink bleeds.
sketch modewax seals
019 · Radar SweepPolar 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.
1 · Classic Illustrious Harness 0.1.7 — live DOM capture via tokened session: 11-section nav, provider chain 6/8, resident monitors (Sentinel/Veritas/Relay/Herald), Fraunces-ivory identity. MEASURED
2 · Next Beta ASTRA 0.2.0-beta.4/5 — compiled-UI surface inventory: 3D Headquarters (WASD/E), Boardroom, Floor & Gates, Goal chat, frozen model routing, $5 metered allowance. DOCUMENTED
5 · Full evidence — ui-evidence-pack.json ships with this site; every visual decision traces to a source. DOCUMENTED
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)