PACO.IO

Obsidian Vault Portal v2.0
guest@paco.io:~$cat "docs/ux-baseline-2026-08-12.md"

PACO.IO UX Baseline — 2026-08-12

Status: P1.1 baseline complete; P1.2 mobile Explorer complete; P1.3 responsive-content verification complete; P1.4 typography decision complete

This is a bounded steady-state product-development baseline. It does not reopen the completed EI modernization program.

Governing UX principle

Preserve intentional friction. Remove accidental friction.

PACO.IO remains a technology publication built around a visible personal knowledge system and a retro-computing interface.

Repository baseline

Baseline head inspected: feb0b490608e29938725416c6b8102abafec6c05 (Center main content panel like paco.org).

Primary implementation surfaces inspected:

  • _layouts/default.html
  • assets/css/style.scss
  • .github/workflows/deploy.yml
  • .github/workflows/publication-quality.yml

Findings

Already in good condition

  • CRT is OFF by default.
  • Theme and CRT state are initialized in <head> from localStorage before normal body rendering, reducing theme flash.
  • prefers-reduced-motion handling exists for CRT/cursor/tree transitions.
  • Main content is centered on wide screens with a balanced grid.
  • Images/video already use responsive max-width and automatic height rules.
  • Code/pre blocks and mobile tables already have bounded horizontal overflow.
  • Mobile controls already target 44px minimum touch height.
  • Vault tree folder controls use buttons and expose aria-expanded.
  • Main content has a stable id="main" target.
  • Print Paper already removes glow/scanline colors at the token level.
  • Existing local vault search filters titles/paths without an external service.

P1 defects / opportunities

  1. Mobile Vault Explorer remained expanded by default at baseline. P1.2 corrected this with a CSS-first collapsed mobile state and accessible toggle.
  2. No visible skip-to-main link is present. The #main target exists, so this remains a bounded P1.6 accessibility addition.
  3. Long-form article typography was evaluated in P1.4. IBM Plex Mono was explicitly selected for production, preserving the existing reading model and interface identity.
  4. Print Paper is primarily a palette treatment. It should be evaluated as a high-legibility reading presentation and aligned with actual print CSS in P1.6.
  5. Search is title/path filtering in the Vault Explorer. Rich contextual search is Phase 2 work; do not overload P1 with it.
  6. Backlink UI exists, but current relationship discovery is limited. Structured relationship work belongs in Phase 2.
  7. Some responsive rules are duplicated between inline layout CSS and style.scss. Avoid broad cleanup during P1 unless a specific defect requires it; newer working layout behavior must not be overwritten.

P1.2 result — Mobile Vault Explorer

Commit afd038a51206585c0c8ef7ff796a8fd7a778e9ad introduced a mobile-only VAULT EXPLORER control. Below 860px the Explorer is collapsed in CSS before JavaScript runs, expands to a bounded internally scrollable area, exposes aria-expanded/aria-controls, and moves focus into the Explorer on open. Desktop behavior is unchanged.

The publication-quality and deployment workflows passed for this change.

P1.3 result — Responsive Content Hardening

P1.3 was executed as a verification sprint against the current production CSS rather than by manufacturing redundant rules.

Verified protections already present:

  • page-level horizontal overflow is suppressed while vertical document scrolling remains available;
  • .markdown-body text, list items, blockquotes, table cells, and headings can wrap long content;
  • images and video retain intrinsic aspect ratio and are constrained to the reading width;
  • iframes are constrained to the content width;
  • pre blocks use internal horizontal scrolling rather than widening the page;
  • mobile tables use their own horizontal overflow container;
  • mobile content removes desktop scroll-container assumptions;
  • recent responsive fixes already remove image maximum-height restrictions on mobile;
  • the centered wide-screen content grid remains intact.

No additional P1.3 CSS change was justified by the inspected current state. This is intentional: steady-state maintenance should not duplicate working rules merely to produce a code diff.

P1.4 result — Typography Laboratory

Commit 8726f6e136d2046dfb951c86b3321f9394cdbb7b added a hidden production-shell typography laboratory comparing IBM Plex Mono, IBM Plex Sans, and Space Grotesk against representative PACO.IO/PTIR prose.

Decision: A — IBM Plex Mono.

IBM Plex Mono remains the production long-form reading typeface. No site-wide typography replacement is required. The comparison laboratory remains an experimental/reference surface and is not part of Vault Explorer navigation.

Phase 1 execution constraints

  • Typography is now decided: retain IBM Plex Mono for production prose.
  • Do not add terminal audio, a large sticky header, always-visible graph, or another Article Mode toggle.
  • Do not modify idtprof/portal / firg.xyz.

Phase 1 gate

Before Phase 2:

  • mobile article content is immediately reachable;
  • no ordinary content causes page-level horizontal scrolling;
  • typography choice has explicit approval — complete: IBM Plex Mono;
  • keyboard/focus/contrast behavior is verified;
  • Print Paper and print behavior are coherent;
  • CRT remains off by default;
  • no material performance regression is introduced.