2026-09-23-design-set-migrated-to-the-estate-standard

Decision

Aakalan's mobile design set moves to the estate standard defined in ~/git/personal/STYLE-GUIDE.md: one screen per file, a single routes.js manifest, the shared chrome bar and flow-chart gallery, and role-named tokens.

Why

The set had 19 files drawing 34 screens. Ten of them put several frames side by side in one file, which means those screens had no URL, could not be declared, could not be linked to and did not appear in any contact sheet — and a wireframe that cannot be linked to is one nobody reviews. Every screen also loaded an unpinned CDN (cdn.tailwindcss.com, lucide@latest), so the whole estate could restyle itself overnight.

The reasoning lived in a 264px prose sidebar beside each screen, competing with the thing under review, in the one place it could not be diffed.

Impact

• 19 files become 48 screens. Eight flow-level index.html files are named for what the screen IS; account/ becomes settings/ and pricing becomes store/ per the reserved vocabulary.
• routes.js, _chrome.js, _gallery.js and screenshots.html arrive; index.html becomes a React Flow chart. CORE, _chrome.js and _gallery.js are byte-identical to charades and tic-tac-toe.
• CSS variables are renamed to the estate rule — the variable is the Tailwind token path with dots as dashes. --indigo-500 → --brand-500, --text-primary → --ink, --page-bg → --page, --border → --line, --cat-food-bg → --cat-foodbg. See tokens.
• The prose moves here, one page per screen.
• Two things the migration FOUND rather than fixed: .searchfield-sync was already written against var(--brand-50) and var(--brand-700), which the old palette never declared — it had been painting nothing; and the avatar wheel in the wireframes was six hand-named people while the app hashes eight hues, so a reviewer comparing the two was comparing different sets.
• There is no home flow. See balances.

Status

Active — extended by 2026-09-23-the-bar-is-icons-and-the-sheet-is-a-journey

Sources

• ~/git/personal/STYLE-GUIDE.md
• .context/designs/mobile/routes.js