Design System Foundation

Files reviewed directly: _ds/qr-setu-design-system-.../readme.md, tokens/colors.css, tokens/typography.css, prototype/admin-panel/ds-base.js, ui_kits/merchant-console-v2/CONTRACTS.md, ui_kits/merchant-console-v2/manifest.js. Status: 🔴 Findings logged · Last reviewed: 2026-07-19.

Confirmed strong — do not rebuild these

• Semantic, dual-theme tokens. Three-layer model (primitive → semantic → component-consumed), full :root[data-theme="dark"] set with its own surfaces/content/border/accent/status values and a documented dark-mode shadow strategy (near-black shadow + inset hairline instead of a dark drop shadow). This directly satisfies the mandatory light+dark rule and should be lifted close to as-is.
• CONTRACTS.md's module/tenant/entitlement model (Account → Workspace(tenant) → Member(role), computeNav, PLAN_RANK/ROLE_RANK) is a real, data-driven registry, not prose — confirmed runnable in manifest.js, not just described.

Finding — the artifact structure doesn't match design-to-code-workflow.md

See the section index for the full note. Summary: no tokens.json (CSS files instead), no /components gallery, no .mobile.dc.html/.desktop.dc.html pairing (device-split folders instead, the root cause of the merchant console divergence), SCREENS.md instead of a machine-readable manifest.json with a status field, and no React Native artifacts anywhere. Tracked as QRS-045; this is a process fix, not a per-screen prompt.

Finding — icon duplication instead of a single icon system

Icons are hand-authored inline SVG path data, duplicated per folder (icons.js in mobile-console/, plus inline ICON/SOCIAL maps inside ServiceCard.dc.html). The design system's own readme.md states the convention matches Lucide and names it as the intended substitution. The production app already depends on lucide-react.

Design-fixable — copy-paste prompt for Claude Designs

Across this project, icons are hand-drawn inline SVG path data duplicated per folder (icons.js in
mobile-console, inline ICON/SOCIAL maps in ServiceCard.dc.html, and likely similar maps in other folders).
Please consolidate onto a single, named icon set matching the Lucide icon library's naming and geometry
(24x24 viewBox, stroke-width 2, round caps/joins) since that's already the stated convention in this project's
own design-system readme. Reference icons by their Lucide name in every screen going forward, and replace the
duplicated per-folder path data with references to one shared icon module. Do not change any icon's visual
appearance if it already matches an existing Lucide icon; only consolidate the source of the path data.

Finding — self-hosted, subset fonts not yet addressed

Plus Jakarta Sans and JetBrains Mono load via a Google Fonts @import per tokens/fonts.css (per the project's own readme). This is render-blocking and works against the production Web-Vitals budget. Bunya (brand wordmark) is TTF-only across 5 weights; only the weights actually used in "QR setu" lockups need shipping.

Design-fixable — copy-paste prompt for Claude Designs

tokens/fonts.css currently loads Plus Jakarta Sans and JetBrains Mono via a Google Fonts @import. For the
production handoff, note in this file (as a comment or in the readme) that these should be self-hosted rather
than loaded via a render-blocking @import, and that only the Bunya font weights actually used for the "QR setu"
wordmark lockup need to ship, not all five. This doesn't require a visual change, just a note so it isn't lost
before implementation.