UI/UX Design System Adoption (SP-7)

This page tracks each registered screen's design-system state and the migration progress from legacy → keynova-ds-v1.

Current state

Data pulled from docs/platform-registry/_data/dashboard.json (regenerated nightly + on-demand via gen-dashboard-json).

App	Legacy	Ink & Brass	KeyNova DS v1	Total
hmp-admin-portal	18	0	0	18
hmp-booking-engine	35	0	1	36
hmp-web-dashboard	183	1	0	184
Total	236	1	1	238

Note: marker data is based on the last-scanned designSystemVersion field on each screen YAML. The KeyNova design system was merged to master in April 2026, so many screens marked legacy may already be conforming — they just need a manual audit pass to flip the marker.

Target

All 238 screens at designSystemVersion: keynova-ds-v1 with a designSystemAudit block confirming:

• satoshiFont: yes
• midnightSovereignPalette: yes
• shadcnConventions: yes
• responsiveBreakpoints: verified
• lastAudited: <date>

Audit playbook

For each screen:

1. Open the file referenced by the screen YAML's file: field.
2. Check imports — does it import from @hmp/ui-kit, shadcn/ui, or something older (custom CSS, tailwind-only, MUI, etc.)?
3. Check the screen's visible palette — does it match Midnight Sovereign (navy #0A1628 + gold #B8962E)?
4. Confirm Satoshi font — look for font-family: Satoshi or a globals.css @font-face import.
5. Confirm responsiveness — does it have Tailwind responsive classes (sm:/md:/lg:/xl:) or breakpoint-aware logic? Test at mobile / tablet / desktop.
6. Update the screen YAML with a designSystemAudit block and flip designSystemVersion to keynova-ds-v1 if all four audit checks are yes/verified.

Migration approach

Wave 1 (quickest wins): screens that already import from @hmp/ui-kit and use the Midnight Sovereign palette — these are likely already conforming and just need the marker flip. Suggested first batch: top-20 most-trafficked dashboard screens (front desk check-in/out, arrivals, departures, folios).

Wave 2 (refactors): screens using legacy components. Refactor to shadcn/ui primitives from @hmp/ui-kit, swap palette tokens, verify font.

Wave 3 (rebuilds): screens that predate the design system entirely (e.g. MUI-based legacy portals). Rebuild in the new stack.

Cadence

• Wave 1: 1-2 sessions (this session kicked off, 10-20 screens per batch)
• Wave 2: 4-8 sessions over 2-3 months
• Wave 3: ongoing, as-time-permits — tie to feature work so rebuilds ride along with new features

Track via designSystemVersion distribution in the dashboard.

This session (kickoff)

SP-7 shipped:

• This tracking page
• Audit playbook documented above
• designSystemAudit schema field activated (was already in schema, now documented)

Not shipped yet (future waves):

• Actual screen audits (none completed this session — each requires a developer to open and visually inspect the screen, out of scope for a doc-only kickoff)
• Screenshot CI pipeline for visual regression (candidate for SP-7 wave 2)
• Theme token diff reporter (candidate for SP-7 wave 3)