Sotastack · UI/UX Mock-ups
MOCK-UPSNot production code

Multi-modal building monitoring,
from the moment it's built.

Interactive UI/UX mock-ups derived from the SapienOS Architecture Design Document v2.2 — the building-led, IAQ-first product. Sense → Edge → Cloud → Digital Twin, with a brokered agentic layer. Click any screen to explore; toggle Sand / Warm-dark any time.

ADD v2.2 · PRD v3.0 Building & SHM profile WCAG 2.2 AA · AU sovereign 13 web screens + Flutter app
Screenseach card previews its page's layout — sketches, not screenshots
Design systemthe mock-ups' own tokens and component kit — values read from styles.css
PaletteSand
Brand2026 approved
SapienOS horizontal lockup
sapienos-nav-v5.png · 560 × 130
SapienOS square mark
favicon-64-v4.png · 64 × 64

Approved 2026 lockup. Clean derivatives only, on a dark ground — never recoloured, stretched or cropped.

Operations console

Data-dense, status-driven (green / amber / red), built for monitoring. Sand by default, with a Warm-dark variant: light text on smoked glass panels, over a sand ground.

NormalWatchAnomalyInfoOffline
Typography

Manrope for UI and headline numerals, Fira Code for IDs, timestamps & table values — tabular figures so live data never shifts.

1,180ppmSOTA-Q3001
05:54:39 · 142.5 µε
Self-contained

Static HTML/CSS/JS — no build step, no application backend. This cover draws everything as inline SVG and opens straight in a browser over file://. Console pages that chart, render 3D or map load that library from a CDN, and the live pages read a SensorThings feed over HTTP.

Component kitthe real classes and helpers, in the rail / stage / detail frame · sample values, illustrative only

Stage

A lighter pane of glass on the ground — on-ground ink, the hero first

sample series
chart hero · inline SVG · illustrative valuesMock

Event ruler

24-hour window · 12 sample events
Mock-ups only · not production code · Commercial-in-Confidence Sotastack Pty Ltd · 2026