Visual grill: product UI identity #14

Open
opened 2026-10-06 09:44:13 +00:00 by kayg · 9 comments
Owner

The visual grill for the product UI (DECISIONS 62, 65–68). Claude designs and builds the mockups. Codex never judges visuals.

Method: design piece by piece. Each piece is a live, working HTML mockup on the NetBird preview, in light and dark. The owner reviews it on desktop and iPhone before the next piece.

Answered:

  • V1 no reference products; infraternal is its own reference (65)
  • V2 calm and relaxed, strong highlights (66)
  • V3 light and dark are equal (67)
  • V4 the terminal is the app; everything else is an overlay (68)
The visual grill for the product UI (DECISIONS 62, 65–68). Claude designs and builds the mockups. Codex never judges visuals. Method: design piece by piece. Each piece is a live, working HTML mockup on the NetBird preview, in light and dark. The owner reviews it on desktop and iPhone before the next piece. Answered: - [x] V1 no reference products; infraternal is its own reference (65) - [x] V2 calm and relaxed, strong highlights (66) - [x] V3 light and dark are equal (67) - [x] V4 the terminal is the app; everything else is an overlay (68)
Author
Owner

Piece 1 (the core screen) is live for the owner: http://10.69.69.125:47351/ (branch mock-core, 93efc91). The terminal is real (a disposable container). Variants: ?font=geist|instrument|hanken, ?accent=blue|lime|coral, ?theme=light|dark. On the iPhone: add to home screen. The key bar shows on touch devices.

Piece 1 (the core screen) is live for the owner: http://10.69.69.125:47351/ (branch `mock-core`, 93efc91). The terminal is real (a disposable container). Variants: `?font=geist|instrument|hanken`, `?accent=blue|lime|coral`, `?theme=light|dark`. On the iPhone: add to home screen. The key bar shows on touch devices.
Author
Owner

Owner on mockup piece 2 (onboarding, 8db065c): "I really like it." Its font is Geist Mono (450 body, 500 labels, 600 headings, tracking −0.01 to −0.03em). It is approved for porting into the app after auth-ux lands.
Open question for the next visual grill round (the owner raised it): monospace everywhere? Show the same real screen (sidebar tree and palette) in Geist Mono and in the sans candidates side by side before deciding. Trade-off: mono is about 15–20% wider, so dense lists fit less.

Owner on mockup piece 2 (onboarding, `8db065c`): "I really like it." Its font is Geist Mono (450 body, 500 labels, 600 headings, tracking −0.01 to −0.03em). It is approved for porting into the app after `auth-ux` lands. Open question for the next visual grill round (the owner raised it): **monospace everywhere?** Show the same real screen (sidebar tree and palette) in Geist Mono and in the sans candidates side by side before deciding. Trade-off: mono is about 15–20% wider, so dense lists fit less.
Author
Owner

Applied the /review-animations findings to the onboarding mockup (mock-core 486ff11..b89312a, DECISIONS 103 updated in f0f649b).

  • Copy feedback: a WAAPI blur(0→6px) plus a dim on the region, with the clipboard icon only. It runs 200 ms in, holds 550 ms, and goes out in 150 ms. Measured: 6px held to 745 ms, and the region is sharp again by about 945 ms. A re-tap mid-run is clean.
  • Wizard: the viewport and step slides take 240 ms (transitions plus @starting-style instead of keyframes), the bar 240 ms, and the glitch settle uses the strong ease-out.
  • The passkey spinner is gone. The backdrop glow now follows a smoothed pointer.

How to test: open http://10.69.69.125:47351/onboarding.html on the phone, go to the recovery step, tap copy (tap again quickly as well), then step Back/Continue rapidly.

Applied the /review-animations findings to the onboarding mockup (mock-core 486ff11..b89312a, DECISIONS 103 updated in f0f649b). - Copy feedback: a WAAPI blur(0→6px) plus a dim on the region, with the clipboard icon only. It runs 200 ms in, holds 550 ms, and goes out in 150 ms. Measured: 6px held to 745 ms, and the region is sharp again by about 945 ms. A re-tap mid-run is clean. - Wizard: the viewport and step slides take 240 ms (transitions plus @starting-style instead of keyframes), the bar 240 ms, and the glitch settle uses the strong ease-out. - The passkey spinner is gone. The backdrop glow now follows a smoothed pointer. How to test: open http://10.69.69.125:47351/onboarding.html on the phone, go to the recovery step, tap copy (tap again quickly as well), then step Back/Continue rapidly.
Author
Owner

Starting the live UI font trial on branch ui-tweaks at base 4daf8c0. The worktree is clean; changes stay in this worktree. I read #14 and parent #5 history.

Starting the live UI font trial on branch ui-tweaks at base 4daf8c0. The worktree is clean; changes stay in this worktree. I read #14 and parent #5 history.
Author
Owner

Finding: the onboarding step labels in apps/tracer/src/onboarding.ts:97 use the page-wide tooltip from packages/ui/src/tooltip.ts:45. A root-level sans font variable would change those existing monospace tooltips. I’m scoping the font preference to the mounted terminal so onboarding stays unchanged.

Finding: the onboarding step labels in apps/tracer/src/onboarding.ts:97 use the page-wide tooltip from packages/ui/src/tooltip.ts:45. A root-level sans font variable would change those existing monospace tooltips. I’m scoping the font preference to the mounted terminal so onboarding stays unchanged.
Author
Owner

Production-build ink comparisons: Sans is left, Mono is right. Each comparison pairs the sidebar-open or palette-open view at native viewport size.

393×852, sidebar open:
Sans and Mono at 393×852 with sidebar open

393×852, palette open:
Sans and Mono at 393×852 with palette open

1440×900, sidebar open:
Sans and Mono at 1440×900 with sidebar open

1440×900, palette open:
Sans and Mono at 1440×900 with palette open

The production browser test also saved all 8 original captures under apps/tracer/test-results/core-screen/. At 393 px the existing responsive rule keeps session tabs hidden; the capsule remains in bounds and all visible touch targets are at least 44 px. After merge/deploy, try ?ui=mono or ?ui=sans; each choice is remembered on that browser.

Production-build ink comparisons: Sans is left, Mono is right. Each comparison pairs the sidebar-open or palette-open view at native viewport size. 393×852, sidebar open: ![Sans and Mono at 393×852 with sidebar open](https://git.kayg.org/attachments/06939240-68b9-41e2-8fec-0b7d04accd56) 393×852, palette open: ![Sans and Mono at 393×852 with palette open](https://git.kayg.org/attachments/b5191d95-1272-4915-ad8a-38f8618a869f) 1440×900, sidebar open: ![Sans and Mono at 1440×900 with sidebar open](https://git.kayg.org/attachments/8781f61b-1a65-459c-9297-9ffcd166eac6) 1440×900, palette open: ![Sans and Mono at 1440×900 with palette open](https://git.kayg.org/attachments/0afdefbf-f477-429b-b013-758ee27206e6) The production browser test also saved all 8 original captures under apps/tracer/test-results/core-screen/. At 393 px the existing responsive rule keeps session tabs hidden; the capsule remains in bounds and all visible touch targets are at least 44 px. After merge/deploy, try ?ui=mono or ?ui=sans; each choice is remembered on that browser.
Author
Owner

Completed preference handling in 76c50a9: ?ui=mono and ?ui=sans override and store a per-browser choice; reads/writes tolerate disabled localStorage. The choice is applied after the selected existing font loads and only on the terminal, so onboarding tooltips retain their monospace default. The focused production comparison test passed (1 passed); all eight source views and four comparisons were captured.

Completed preference handling in 76c50a9: ?ui=mono and ?ui=sans override and store a per-browser choice; reads/writes tolerate disabled localStorage. The choice is applied after the selected existing font loads and only on the terminal, so onboarding tooltips retain their monospace default. The focused production comparison test passed (1 passed); all eight source views and four comparisons were captured.
Author
Owner

Completed the stylesheet step: 1a34bf8 applies the selected font to the terminal shell, controls, and root-level tooltips; Mono uses 13 px base type, tighter tracking, and tuned capsule/tab labels. The font is ready before mount, and Geist Mono remains the preloaded face. Browser evidence: 393 px capsule stayed in bounds and all visible targets measured ≥44 px; desktop tabs stayed within the viewport.

Completed the stylesheet step: 1a34bf8 applies the selected font to the terminal shell, controls, and root-level tooltips; Mono uses 13 px base type, tighter tracking, and tuned capsule/tab labels. The font is ready before mount, and Geist Mono remains the preloaded face. Browser evidence: 393 px capsule stayed in bounds and all visible targets measured ≥44 px; desktop tabs stayed within the viewport.
Author
Owner

Finished at ui-tweaks head ff505cb. The terminal UI accepts ?ui=mono and ?ui=sans, remembers the choice, and defaults to sans; onboarding remains monospace. Geist Mono is already preloaded, and the selected face is awaited before terminal mount. The four side-by-side production comparisons (ink, sidebar and palette, 393×852 and 1440×900) are attached in the preceding comment. Browser checks measured the 393 px capsule within the viewport and all visible touch targets at least 44 px; desktop tabs remain within bounds. The current mobile breakpoint still hides the tabs at 393 px.

TRACER_TEST_PORT=4531 bun x playwright test: 23 passed (3.2m).

Final scripts/verify fast output (verbatim summary):

test result: ok. 66 passed; 0 failed; 5 ignored; 0 measured; 0 filtered out; finished in 152.55s
test result: ok. 61 passed; 0 failed; 12 ignored; 0 measured; 0 filtered out; finished in 35.26s
advisories ok, bans ok, licenses ok, sources ok
PT_INTERP: absent; size: 16096816 bytes
PT_INTERP: absent; size: 13515080 bytes
server subcommand: exit 2, not implemented
agent subcommand: exit 2, not implemented

+---------------------------+--------------+
| Rust gate                 | Result       |
+---------------------------+--------------+
| fmt                       | PASS         |
| VT native fmt             | PASS         |
| clippy                    | PASS         |
| test                      | PASS         |
| cargo-deny                | PASS         |
| static builds             | PASS         |
+---------------------------+--------------+

dist/ghostty-web.js: OK
dist/ghostty-vt.wasm: OK
dist/index.d.ts: OK

 7 pass
 0 fail
 34390 expect() calls
Ran 7 tests across 2 files. [2.31s]
Finished at ui-tweaks head ff505cb. The terminal UI accepts ?ui=mono and ?ui=sans, remembers the choice, and defaults to sans; onboarding remains monospace. Geist Mono is already preloaded, and the selected face is awaited before terminal mount. The four side-by-side production comparisons (ink, sidebar and palette, 393×852 and 1440×900) are attached in the preceding comment. Browser checks measured the 393 px capsule within the viewport and all visible touch targets at least 44 px; desktop tabs remain within bounds. The current mobile breakpoint still hides the tabs at 393 px. `TRACER_TEST_PORT=4531 bun x playwright test`: 23 passed (3.2m). Final `scripts/verify fast` output (verbatim summary): ```text test result: ok. 66 passed; 0 failed; 5 ignored; 0 measured; 0 filtered out; finished in 152.55s test result: ok. 61 passed; 0 failed; 12 ignored; 0 measured; 0 filtered out; finished in 35.26s advisories ok, bans ok, licenses ok, sources ok PT_INTERP: absent; size: 16096816 bytes PT_INTERP: absent; size: 13515080 bytes server subcommand: exit 2, not implemented agent subcommand: exit 2, not implemented +---------------------------+--------------+ | Rust gate | Result | +---------------------------+--------------+ | fmt | PASS | | VT native fmt | PASS | | clippy | PASS | | test | PASS | | cargo-deny | PASS | | static builds | PASS | +---------------------------+--------------+ dist/ghostty-web.js: OK dist/ghostty-vt.wasm: OK dist/index.d.ts: OK 7 pass 0 fail 34390 expect() calls Ran 7 tests across 2 files. [2.31s] ```
Sign in to join this conversation.
No labels
launch-qa
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
kayg/infraternal#14
No description provided.