ILLUSTRIOUS CONSULTING & DEVELOPMENT LLC · FRONT-END REFERENCE INDEX

Every render, one visual language.

Eleven interactive renders exploring one product — the governed AI workspace — in one design system: obsidian canvas, Fraunces serif, iris/magenta/gold liquid, IBM Plex Mono readouts. Three live harnesses on this machine were audited to ground every decision. The flagship (011) is backend-ready: it renders from a documented state contract, not hardcoded decoration.

11 RENDER DIRECTIONS 3 HARNESS UIs AUDITED LIVE 4 OSCILLATION LAWS IN ENGINE 1 BACKEND CONTRACT

The system, in tokens.

One palette and three typefaces govern every render — lifted from the Illustrious site identity and the Atelier Floor. Status is color-coded identically everywhere: live/clear, carded/pending, drift/breaking.

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

The liquid obeys real oscillation laws.

The LiquidCore particle engine implements four canonical oscillation patterns (derived from the matplotlib reference script) — each mapped to a governance state. Drift is not decoration; it is physics with semantics.

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

Simple harmonic — constant energy

The healthy agent: laminar particle rings, mirror surface, energy conserved. The default state of every vessel in tune.

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

Damped — governed recovery

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

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

Driven — near-resonance growth

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

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

Beats — frequency interference

Two close sources disagree (Scout's conflict [2]v[3]) and the liquid shows the beat envelope: calm-rough-calm breathing between the two claims.

→ evidence conflicts · scout vessel

The renders, eleven directions.

Each is a standalone, self-contained HTML file — open and interact. Screens marked live-verified were inspected on the machine's actual harnesses before design.

⚡8 stage vessels · 6 agent reactors

011 · Liquid Spine — flagship

The fused product: workflow spine where every stage is a particle-liquid vessel obeying the four oscillation laws; org strip of six agent reactors; governed detail panels. Driven by the backend state contract.
FLAGSHIPfusionoscillation enginebackend-ready
◎

010 · Agent Constellation

Each agent is a 3D glass sphere holding liquid; org orbit view around an ember core. Per-agent severity — in harmony the liquid is still, out of harmony it oscillates by severity.
org viewper-agent physics
〜

009 · Drift Spectrum

The original frequency visualizer in the consulting-site skin: agent channels as oscillating waves over a liquid specimen. Inject a collision, watch the room fall out of tune, damping restore it.
site-matched skinfrequency readouts
◈

004 · Flow Spine

The workflow-as-the-app concept that 011 fuses with the liquid: spine stages, goal rail, decision packet, live receipts. The IA foundation.
workflow-firstIA foundation
▤

005 · Mission Control

Fleet swimlanes: Scout → Analyst → Maker → Auditor → Owner → Oracle. Work flows left-to-right with visible handoffs and WIP limits.
fleet factoryparallel goals
≡

006 · Ledger Brief

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

007 · Operator Shell

Terminal mode: goal tree + live governance event stream + command bar (approve · changes · packet · defer). Keyboard-first power operation.
keyboard-firstphosphor
✦

008 · First Quest

4-step onboarding quest: welcome → reasoning engine → ground rules → first goal. Engine ladder with price + privacy labels.
onboardingsign-in ladder
⌘

001 · Command Deck

Dark operator console: goal inbox, decision packet, agent passports, receipts, gates & policy board. The first operator take.
darkoperator
✎

002 · Ivory Brief

Calm editorial customer view: one packet, one decision, governance disclosed on demand. The first-run direction.
editorialfirst-run
▯

003 · Phone Oversight

Approval-first mobile console: health chips, approval cards with evidence tags, fleet status, spend caps.
mobileapprovals

Grounded in what actually runs here.

Evidence pack with full inventories: ui-evidence-pack.json in the sketches folder. Every visual decision traces to one of these sources.

Run the flagship.

start "" "C:\Users\Chris\Projects\illustrious-unified-sketches\011-liquid-spine\index.html"

# 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 inside 011:  D = inject Maker drift (driven mode) · R = restore (damped envelopes)