Settlement Liquidity Topology for Fintech Operations

Design and implement ClearingGlass, a same-day settlement intervention workspace for treasury operations teams. This is a simulated product demo: all exposure, coverage, institutions, and events must be labeled as scenario data. The operator's job is to find a funding break before the 4:30 cutoff, understand the path that caused it, and choose a safe intervention.

Do not build a KPI-card dashboard. Use one continuous spatial liquidity field as the primary surface. It contains labeled ACH, RTP, CARD, and WIRE rails flowing toward settlement basins, a compact exception queue, an embedded intervention drawer, and a bottom cutoff axis. Controls and data remain semantic HTML; the topology may use Canvas with a text/table fallback.

The live demo begins healthy and shows: ClearingGlass; Catch settlement breaks before the 4:30 cutoff.; Live demo; Stress +25%; $18.42M simulated exposure; 1.27× simulated coverage; ACH; RTP; CARD; WIRE. The stress path must reveal RTP funding shortfall; Pier 9 Bank; $4.8M scenario; Release batch; Simulate hold; Assign to me. Never present the simulated numbers as live bank data, customer proof, investment guidance, or a forecast.

Use navy #061729 and deep blue #0b3358 as the field, cyan #42ccdc and green #57d4b0 for healthy paths, amber #e59a38 for pressure, and red #f05f51 for critical intervention. Typography is a compact technical sans with tabular mono data. Shape the field with fine contour lines, rail identifiers, cutoff ticks, and one integrated drawer; avoid side navigation, repeated cards, neon sci-fi decoration, fake maps, and gradients without data meaning.

Stress +25% is the deterministic five-second action. During 0–1.0 seconds the control engages and announces a pending scenario. From 1.0–2.7 seconds the RTP paths accelerate and pressure contours compress. From 2.7–4.2 seconds the RTP basin changes to critical with a non-color warning pattern and the $4.8M Pier 9 exception receives focusable emphasis. From 4.2–5.0 seconds simulated coverage updates, Release batch becomes disabled with a reason, and the Pier 9 intervention drawer opens. The final state must be stable and repeatable.

Provide healthy-live-demo, stressed, selected-basin, disabled-release, stale-data, assigned, loading, error, reduced-motion, and table-fallback states. Release batch requires explicit confirmation only when safe; Simulate hold updates the scenario without claiming a real transfer. Keyboard users can traverse rails through the equivalent exception table, activate Stress +25%, inspect the drawer, and read changes in an aria-live region. Use data-preview-ready on the settled workspace and data-preview-action on Stress +25%.

Maintain the spatial field and drawer at desktop 16:10. Below 800px, place the summary and stress control first, make the exception table the primary representation, then show a simplified non-interactive topology; keep the cutoff and intervention action visible without horizontal scrolling. When reduced motion or Save-Data is active, render the final stressed topology immediately, stop particles/path animation, and retain the full table and intervention workflow.

Return one self-contained responsive HTML file using internal CSS and JavaScript. Canvas rendering must be deterministic and have accessible textual equivalents. Do not use external libraries, live financial APIs, SVG mockups, stock dashboards, placeholder data blocks, or prose outside the product. Add one unobtrusive link to the source prompt.