Prototype directions

Six working UI directions for the Nondominium v0.1 release, from the prototype handoff. Each one covers the whole journey: create a profile, create or join a group, declare a shared resource, then manage it (stages, rules, items and who holds them, requests, approvals, private receipts, offline). One of them gets chosen and implemented against the real hApp; the rest are archived here for reference.

A to E run on one shared mock store, so what you do in one shows up in the others: pick up a suggestion in D Signal Board, then find its trace in A Mycelium. F runs on its own mock of the real zome calls. A to E share one menu (Ctrl+K) with "Start over as a new person", "Reload the example" and "Developer details". F has no such menu: its header carries a scenario picker (with "Start from nothing" for a new person), a Reset button and its own Developer details switch.

One trade-off to keep in mind when comparing: the handoff gave each direction its own typefaces (a serif notebook for B, a different sans and mono for each of A, C, D and E). The ports use design-system tokens only, so all six are set in the design-system sans and mono. Judge layout, flow and interaction; the lettering is not the handoff's. Each card below names what it lost.

Target

No target chosen yet.

Candidates

A

Mycelium

mid fidelity

A living field of resources that glow with recent activity, with trails you can fade.

A 64px icon rail, a fluid field of NDO nodes that glow with recent activity, and a 380px detail panel. Links show use, citations and hard links, and a fade slider (1 to 90 days) sets how long trails stay visible. A status bar shows peers, the offline toggle and queued traces.

Handoff type: Instrument Sans and JetBrains Mono. Here: the same two families, self-hosted, and the handoff's own dark teal palette, scoped to this direction.

Views: Field · Signals · Traces · You

Open Start as a new person
B

Field Notes

mid fidelity

A searchable register where each resource reads like a page in a shared notebook.

A 300px searchable index grouped by group, a centre page for the NDO, and a side column for "Left here for you" and receipts. The page has four tabs: the trail, rules and items, requests, and linked resources.

Handoff type: a Newsreader serif for the notebook pages, with IBM Plex Sans and Mono. Here: the same three families, self-hosted, and the handoff's own cream paper palette, scoped to this direction.

Views: The trail · Rules & items · Requests · Linked

Open Start as a new person
C

Instrument

mid fidelity

A technical bench: one resource at a time, with everything attached to it wired in.

Every NDO in a scrolling top bar plus Browse. A spec sheet on the left (stage, ownership, type, use, rules, items with holders, needs attention, requests) and a bench diagram of everything attached to the NDO, with a 30-day activity chart below it.

Handoff type: Space Grotesk and Space Mono. Here: the same two families, self-hosted, and the handoff's own light warm-grey palette, scoped to this direction.

Views: Bench and spec sheet

Open Start as a new person
D

Signal Board

mid fidelity

A board of what needs doing, derived from the data, never assigned by anyone.

Columns for Needs hands, Available now and Needs eyes, all derived from real data, plus a "Just happened" activity column. Group scope chips for the first three groups and a select for the rest. A card opens a drawer for its resource with requests, activity and linked resources.

Handoff type: Bricolage Grotesque and DM Mono. The port now carries both, self-hosted via @fontsource, plus the original's exact palette, scoped to this direction's root.

Views: Board · Resource drawer

Open Start as a new person
E

Holarchy

mid fidelity

Zoom from the lobby into a group and into a resource, as nested rings.

Zoomable Lobby, Group and NDO rings. Groups are laid out on a grid for any number; a group with more than 12 NDOs uses two rings; scrolling down goes up a level. The NDO view shows concentric rings for identity, rules, items and linked resources, with a summary card for each ring. It opens inside the CNC machine, as the handoff does; the breadcrumbs lead up to the group and the Lobby.

Handoff type: Manrope and Fira Code. Here: the same two families, self-hosted, and the handoff's own palette, scoped to this direction.

Views: Resource level · Group level · Lobby level

Open Start as a new person
F

Flow Graph

high fidelity

The DHT itself, laid out in ValueFlows lanes, seen from the whole network or one conductor.

Eight columns in ValueFlows order (groups, people, shared resources, rules, items, promises, what happened, receipts), each card a source-chain entry and each arrow a reference. The header switches between the whole network and each of two conductors; entries that have not arrived show dashed, and private receipts appear only on their owner's conductor. Every action is a real zome call on its own mock backend.

No change: the handoff already set F in the design-system sans and mono.

Views: Whole network · Conductor a · Conductor b · runs on its own mock backend

Open Start as a new person

Current app versus target

This fills in once a direction is chosen: the current app (the app as it is) side by side with the target direction, so the gap between the two is visible in one place.

How to choose

Open the direction you want and leave a comment on it: press c. Each direction and each of its views has its own thread. Once the choice is made, the status field of that direction in src/lib/prototypes/directions.ts is flipped to 'target', and the others to 'archived'. That one field is the whole procedure: this page, the rail and the banners on each direction follow it.

The handoff's original standalone builds are not committed: they are about 10 MB of bundled React. The handoff asked for A to E to be restyled onto the design system rather than copied, so these ports use the design-system tokens and keep each direction's layout, flow and interaction; F was already built on the design system and is ported close to its original. The handoff notes, the backend map and the seven user stories are in docs/prototypes/.