Version. v0.1 Date. 2026-04-24 Provenance. Single Claude.ai session, Loomworks project. Operator: Marvin Percival. Status. Working draft. First UI exploration for Loomworks. No prior UI work existed before this session.
A Discovery record preserving the trajectory of the first Loomworks UI exploration — the decisions made, the alternatives considered and set aside, the corrections applied, and the principles that emerged. Written so that a future reader can reconstruct not just where we landed but how and why.
The three brand artifacts (loomworks-brand-guide-v0_15.html, loomworks-design-md-v0_1.md, loomworks-logo-system-v0_1.html) were the grounding references throughout. All design decisions are traceable to the settled brand system.
Settled. The Claude Visualizer (inline show_widget) is the tool for design exploration and Operator approval. It renders mockups inline in conversation for immediate reaction. Versioned file artifacts (HTML, React) are for production surfaces once a direction is approved. The workflow is: Visualizer for "does this feel right" → file for "this is the approved surface."
Operational learning. Four-viewport mockups in a single Visualizer call exceed the output-length limit and truncate, losing fixes already applied. The working pattern that emerged: split into two calls (desktop+laptop, then tablet+mobile), or show 1:1 scale first and go to viewports after approval. Fixes must be carried forward explicitly — rebuilding from scratch each time loses settled decisions.
Settled. No email addresses as credentials. This is a DUNIN7 standard, not a Loomworks-specific decision. Identity is cryptographic — bound to the device (passkey/WebAuthn) or to the organization's identity provider (SSO).
Two paths, two handoffs:
The authenticator code step appears only on the passkey path. Org SSO bypasses it because the org already owns second-factor verification. This was surfaced as an open question and confirmed by Operator.
Settled. Vertical lockup (stamp mark above wordmark) — the "ceremonial" form per the logo system document, used "where the brand announces itself rather than merely signs." Cartridge ground. Bleached sign-in card raised one step in the paper hierarchy.
Lede text: Two lines, forced break between them, each locked with white-space: nowrap:
> Engagement memory for the agentic era. > Considered, persistent, yours.
Correction applied. An early version allowed the lines to soft-wrap; "era." orphaned onto its own line at certain viewport widths. Operator flagged this as unacceptable. Fixed by making each line a separate <span> with nowrap — they cannot break internally.
Footer. "DUNIN7 — Done In Seven LLC — Miami" in mono, brass color, clear air at the base. Early version was too close to the sign-in card body; spacing was increased after Operator correction.
Settled composition: Heading ("Sign in") and two buttons. Nothing else.
Rejected alternative: A subtitle line "Identity without credentials that travel." was included in the first version. Operator asked what it meant, which was itself the proof it wasn't working. Two options were presented: a functional one-liner ("Passkey or organizational provider. No passwords.") or clean silence. Operator chose clean silence. Rationale: "The interface becomes normal after the first or second interaction." Explanatory copy becomes noise on every subsequent sign-in.
Rejected alternative: A note below the card: "Loomworks does not use email addresses as credentials. Your identity is cryptographic — bound to your device or your organization's provider." Operator removed it. Same rationale — unnecessary explanation.
Problem surfaced. The miniaturized viewport mockups rendered button text as illegible — both the primary (light text on dark background) and secondary (dark text on light background) were washing out.
Root causes identified:
Settled treatment:
Operational correction. The fix was applied at 1:1 scale and confirmed as working, but was then lost when viewport mockups were regenerated from scratch. Operator caught this twice. The lesson: carry fixed component code forward literally, don't re-derive it.
Settled composition:
Rejected alternative: Subtitle was originally "Enter the code from your authenticator app." — nine words that risked wrapping, with "app." orphaning onto its own line at narrow widths. Shortened to "From your authenticator app." — five words, holds on a single line across all viewports. The heading already establishes context; the subtitle only needs to name the source.
Auto-submit behavior. The code auto-submits on the sixth digit. This is not narrated in the UI — no "Submits automatically on sixth digit" text. Silent behavior, not narrated behavior. The Continue button remains as a fallback for accessibility and paste scenarios.
First-time setup. An early version included hint text about first-time authenticator setup ("If you haven't set up an authenticator yet, you'll be guided through setup on first sign-in"). Removed from the sign-in card — first-time setup belongs in its own onboarding step, not squeezed into recurring UI.
Settled. Header switches from ceremonial vertical lockup to working horizontal lockup — stamp mark beside "Loomworks" in prose form (title case, not all caps, per the two-case convention). User name and avatar at right.
Body shows "Engagements" heading with engagement cards below. Operator sees a "New engagement" button to the right of the heading.
Footer: DUNIN7 line, same treatment as sign-in page.
Settled as a standing principle. No disabled buttons, no grayed-out options, no "you don't have permission" states. If you can't do it, it doesn't exist on your surface. The interface reshapes itself to the role, silently.
Consequence: A Contributor's dashboard has no "New engagement" button — not disabled, absent. Only engagements they contribute to appear. FarmGuard doesn't show if they don't contribute to it. The surface is exactly what's available, nothing more.
Settled. The four room environment colors from the DESIGN.md are introduced as badges on engagement cards:
Each badge carries a state dot from the terminal-state palette. Only rooms with activity appear on the card. An early-stage engagement (FarmGuard, seed induction in progress) shows only Memory. A mature engagement (Enrollium) shows all four rooms.
Settled treatment. Domain expertise is surfaced as a badge on engagement cards and in the header name treatment.
Badge design: Vellum background (#E8E1CE), brass border (1px, #A89B7E), IBM Plex Serif italic 500 weight for the domain label. Uses the brand's "considered" voice. The badge reads as a credential — more visual weight than the room badges, bordered treatment gives it an earned quality.
Two independent signals:
Header name treatment. When a person is a recognized domain expert, their name in the header becomes a badge (same vellum/brass treatment) with the activity dot. On hover, a tooltip appears: "Recognized domain expert — N active engagements." Private — only visible to the person themselves. A silent nod to their value.
Why this is load-bearing, not cosmetic. The compounding thesis (methodology v0.17's Maria-and-James worked case) depends on contributors being willing to pour tacit expertise into the system over years. Contributor trust is the mechanism — if domain experts don't feel recognized, they don't contribute; if they don't contribute, the compounding loop breaks. The badge and tooltip are the system saying "we see you" to the James-at-FDA contributor who comes in with deep expertise, contributes when relevant, and moves on to his next paper.
All designs were tested across four standard viewports: Desktop (1440 × 900), Laptop (1024 × 768), Tablet portrait (768 × 1024), Mobile (390 × 844).
Standing wrapping discipline: All text that appears as a deliberate single line (lede sentences, button labels, badge labels, the subtitle "From your authenticator app.") must be locked with white-space: nowrap or equivalent. Orphaned words ("era.", "app.", "passkey") on their own line are unacceptable.
Mobile-specific adjustment: Button font sizes were reduced (0.58rem) to prevent label wrapping within the constrained card width while maintaining the nowrap lock.
These are candidates for future UI exploration sessions.
DUNIN7 — Done In Seven LLC — Miami, Florida Loomworks UI discovery — Sign-in flow and engagement dashboard — v0.1 — 2026-04-24