docs: principal review — master gap table, fix §4.5 count, add Productivity Web, font/CI/a11y gaps
This commit is contained in:
saravanakumardb1
parent
8b51ae5b54
commit
6fdb01e281
@ -2,7 +2,7 @@
|
||||
|
||||
> **Date:** 2026-03-27 (Principal Review: 2026-03-27)
|
||||
> **Author:** Principal Product & Design Engineering Review
|
||||
> **Scope:** All 16 workspace repos — 11 product web apps, 5 iOS apps, 5 Android apps, 3 React Native/Expo apps, 3 platform dashboards, 1 UX lab
|
||||
> **Scope:** All 16 workspace repos — 12 product web apps (incl. Productivity Web), 5 iOS apps, 5 Android apps, 3 React Native/Expo apps, 3 platform dashboards, 1 UX lab
|
||||
> **Canonical Source:** `packages/design-tokens/tokens/bytelyst.tokens.json` (v1.1.0)
|
||||
> **Methodology:** Automated full-workspace scan + manual code review against industry design system maturity standards (Material 3, Radix/shadcn, Shopify Polaris, Atlassian Design System, Apple HIG, Google Material You)
|
||||
|
||||
@ -35,6 +35,90 @@ The ByteLyst ecosystem has built a **comprehensive canonical token foundation**
|
||||
|
||||
---
|
||||
|
||||
## 0. Master Status & Gap Table (Single View)
|
||||
|
||||
Every product surface scored across every design system dimension. **This is the single source of truth for where we are and what's missing.**
|
||||
|
||||
Legend: **Y** = Yes/Done | **P** = Partial | **N** = No/Missing | **—** = Not applicable
|
||||
|
||||
### Web Applications
|
||||
|
||||
| Dimension | ChronoMind | NomGap | JarvisJr | ActionTrail | FlowMonk | NoteLett | LocalMemGPT | MindLyst | Admin Dash | User Dash | Tracker Dash | LLM Lab | Prod Web |
|
||||
| ----------------------------------- | ---------- | ---------------------- | ----------------------- | ----------------------- | ----------------------- | ---------------------- | ----------- | ------------ | ---------------- | ---------------- | ---------------- | ---------- | -------- |
|
||||
| **Token prefix correct** | Y `--cm-` | P leaks `--ml-` | Y `--jj-` | Y `--at-` | Y `--fm-` | P leaks `--ml-` | Y `--lmg-` | Y `--ml-` | — (Tailwind) | — (Tailwind) | — (Tailwind) | Y `--llm-` | N (none) |
|
||||
| **Imports @bytelyst/design-tokens** | N | N | N | N | N | N | N | N | N | N | N | N | N |
|
||||
| **Tailwind CSS** | Y | Y | Y | **N** | **N** | Y | Y | **N** | Y | Y | Y | Y | Y |
|
||||
| **Hardcoded hex (0 = good)** | **0** | **117** | 7 | **0** | 29 | 4 | **0** | N/A | 8 | **0** | 10 | 31 | N/A |
|
||||
| **Components** | 16 | 13 | 1 | 4 | 1 | 16 | 7 | (API routes) | 29 | 32 | 2 | 5 | 2 |
|
||||
| **Pages** | 10 | 12 | 8 | 10 | 8 | 7 | 1 | 9 | 62 | 22 | 8 | 6 | 2 |
|
||||
| **Lucide icons** | Y | Y | Y | N | N | Y | Y | N | Y | Y | N | Y | N |
|
||||
| **shadcn/ui** | N | N | N | N | N | N | N | N | N | N | N | N | N |
|
||||
| **not-found.tsx** | Y | N | N | N | N | N | N | Y | N | N | N | N | N |
|
||||
| **error.tsx** | Y | N | N | N | N | N | N | N | N | N | N | N | N |
|
||||
| **loading.tsx** | N | N | N | N | N | N | N | N | N | N | N | N | N |
|
||||
| **Toast system** | Y | Y | N | Y | N | N | N | N | N | Y | N | N | N |
|
||||
| **Modal/Dialog** | Y (3) | Y (2) | N | N | N | Y (4) | N | N | Y | Y | N | N | N |
|
||||
| **Confirm on delete** | N | Y (3) | N | N | N | N | Y (2) | N | N | N | N | N | N |
|
||||
| **Loading/isPending** | P (1) | Y (24) | N (0) | Y (9) | Y (16) | Y (14) | P (3) | N | N | N | N | N | N |
|
||||
| **Empty states** | P (2) | N | N | P (1) | N | P (1) | P (1) | N | N | N | N | N | N |
|
||||
| **Hover states** | P (4) | P (2) | N (0) | N (0) | N (0) | N (0) | Y (14) | N | N | N | N | N | N |
|
||||
| **Focus-visible** | Y (17) | P (1) | N (0) | N (0) | N (0) | P (1) | N (0) | N | N | N | N | N | N |
|
||||
| **Semantic HTML** | Y (88) | N (7) | P (26) | P (24) | P (31) | P (43) | P (12) | N | N | N | N | N | N |
|
||||
| **ARIA labels** | Y (10) | N | P (3) | N | N | P (6) | N | N | N | N | N | N | N |
|
||||
| **Keyboard shortcuts** | Y | N | N | N | N | Y | Y | N | N | N | N | N | N |
|
||||
| **prefers-color-scheme** | Y (2) | P (1) | N | N | N | Y (2) | Y (8) | Y | N | N | N | N | N |
|
||||
| **Dark/light toggle** | Y | N | N | N | N | N | Y | Y | N | N | N | N | N |
|
||||
| **Responsive layout** | N | N | N | N | N | N | N | N | N | N | N | N | N |
|
||||
| **Animation/motion** | Y (75) | Y (22) | N | P (6) | N | N | Y (16) | N | N | N | N | N | N |
|
||||
| **Recharts/charts** | Y | Y | N | Y | N | N | N | N | Y | Y | N | N | N |
|
||||
| **Zod client validation** | Y (11) | N | N | N | N | N | N | N | N | N | N | N | N |
|
||||
| **E2E Playwright specs** | 6 | 7 | 6 | 8 | 6 | 6 | 6 | — | — | — | — | — | — |
|
||||
| **Visual regression** | N | N | N | N | N | N | N | N | N | N | N | N | N |
|
||||
| **a11y CI check** | N | N | N | N | N | N | N | N | N | N | N | N | N |
|
||||
| **Dockerfile** | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y | Y | N |
|
||||
| **Onboarding flow** | Y (1) | Y (5) | N | Y (5) | N | N | N | Y (2) | N | N | N | N | N |
|
||||
| **Success micro-copy** | Y (9) | Y (8) | P (2) | P (2) | N (1) | Y (38) | P (3) | N | N | N | N | N | N |
|
||||
| **Font stack** | Inter | `--ml-font-*` (leaked) | Space Grotesk / DM Sans | Space Grotesk / DM Sans | Space Grotesk / DM Sans | `--ml-font-*` (leaked) | system-ui | custom | Tailwind default | Tailwind default | Tailwind default | custom | Inter |
|
||||
| **Skip links / landmarks** | Y (2) | N | P (1) | N | N | Y (4) | N | N | N | N | N | N | N |
|
||||
|
||||
### Native Applications (iOS / Android / React Native)
|
||||
|
||||
| Dimension | PeakPulse iOS | ChronoMind iOS | JarvisJr iOS | MindLyst iOS | BL Auth iOS | ChronoMind Droid | JarvisJr Droid | LysnrAI Droid | MindLyst Droid | BL Auth Droid | NomGap RN | NoteLett RN | FlowMonk RN |
|
||||
| ------------------------ | ------------- | -------------- | ------------ | ------------ | ----------- | ---------------- | -------------- | ------------- | -------------- | ------------- | ----------- | ----------- | ----------- |
|
||||
| **Theme file** | Y (hand) | Y (hand) | Y (hand) | Y (gen) | N (SDK) | Y (M3) | Y (M3) | Y (M3) | Y (gen) | Y (M3) | P (6 files) | N | N |
|
||||
| **Hardcoded colors** | **0** | 46 | 20 | N/A | N/A | N/A | N/A | N/A | N/A | N/A | **337** | N/A | N/A |
|
||||
| **Platform SDK** | Y (swift) | Y (swift) | Y (swift) | Y (swift) | Y (swift) | Y (kotlin) | Y (kotlin) | Y (kotlin) | Y (kotlin) | Y (kotlin) | N | N | N |
|
||||
| **Generated tokens** | N (hand) | N (hand) | N (hand) | Y | N | N | N | N | Y | N | N | N | N |
|
||||
| **VoiceOver / TalkBack** | Y (15) | Y (8) | P (5) | N | N | N/M | N/M | N/M | N/M | N/M | N | N | N |
|
||||
| **Haptics** | Y (12) | Y (9) | N | N | N | N/M | N/M | N/M | N/M | N/M | N | N | N |
|
||||
| **Widgets** | Y (10) | Y (8) | Y (5) | N | Y | Y | N | N | N | Y | N | N | N |
|
||||
| **Live Activity** | Y | Y | Y | N | N | — | — | — | — | — | — | — | — |
|
||||
| **App Intents** | Y | Y | N | N | N | N | N | N | N | N | — | — | — |
|
||||
| **Screens** | 25 | 30 | 12 | 4 | 6 | 5 | 6 | 9 | 4 | 11 | 24 | ~8 | ~7 |
|
||||
| **Components** | 17 | 7 | 7 | 2 | 0 | M3 | M3 | M3 | M3 | M3 | 13 | ~10 | ~5 |
|
||||
| **Onboarding** | Y | N | N | N | N | N | N | N | N | N | Y | N | N |
|
||||
|
||||
### Ecosystem Infrastructure
|
||||
|
||||
| Dimension | Status | Gap |
|
||||
| ---------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| **Canonical token JSON** | Y — 211 tokens, 14 categories | 4 products missing palettes (ActionTrail, NoteLett, LocalMemGPT, LLM Lab) |
|
||||
| **CSS generation** | Only `--ml-*` | Need per-product: `--cm-*`, `--jj-*`, `--ng-*`, `--at-*`, `--fm-*`, `--nl-*`, `--lmg-*`, `--llm-*` |
|
||||
| **Swift generation** | Only `MindLystTheme.swift` | Need: `ChronoMindTheme.swift`, `PeakPulseTheme.swift`, `JarvisJrTheme.swift` |
|
||||
| **Kotlin generation** | Only `MindLystTokens.kt` | Need per-product Kotlin tokens |
|
||||
| **React Native generation** | None | Need `tokens.native.ts` with StyleSheet-ready values |
|
||||
| **Shared React component library** | **MISSING** | 0 shared components; 11 apps build everything from scratch |
|
||||
| **Shared RN theme package** | **MISSING** | NomGap has 337 hardcoded hex; NoteLett + FlowMonk have no theme |
|
||||
| **Shared hooks package** | **MISSING** | 4 apps have inline `useTheme`, `useKeyboardShortcuts`, `useDebounce` |
|
||||
| **Shared icon package** | **MISSING** | 5/7 apps use Lucide but each imports independently |
|
||||
| **Component catalog (Storybook)** | **MISSING** | 29 MDX files in UX lab but no Storybook config |
|
||||
| **CI design system checks** | **MISSING** | 0/7 repos have any design-related CI steps (no lint, no a11y, no token drift) |
|
||||
| **Visual regression** | **MISSING** | 0 Playwright screenshot tests, no Chromatic/Percy |
|
||||
| **Design review PR template** | **MISSING** | No `.github/pull_request_template.md` requiring screenshots |
|
||||
| **Font consistency** | **3+ different stacks** | Inter (ChronoMind, ProdWeb), Space Grotesk/DM Sans (JarvisJr, ActionTrail, FlowMonk), system-ui (LocalMemGPT), leaked `--ml-font-*` (NomGap, NoteLett) |
|
||||
|
||||
---
|
||||
|
||||
## 1. Design System Maturity Model
|
||||
|
||||
Industry-standard design system maturity is measured across 5 levels. ByteLyst is at **Level 2** with pockets of Level 3.
|
||||
@ -217,6 +301,10 @@ Benchmarked against Material 3, Radix/shadcn, Shopify Polaris, Atlassian Design
|
||||
4. **Zero apps use shadcn/ui** — despite AGENTS.md recommending it
|
||||
5. **JarvisJr web has only 1 component** (Sidebar.tsx) — extremely minimal UI
|
||||
6. **MindLyst web has the richest CSS** (2,485 lines) but uses vanilla CSS, not Tailwind
|
||||
7. **Productivity Web** (`learning_ai_productivity_web`) — 17 tsx files, 2 components (Navbar, ToolCard), Tailwind, no token prefix, no product palette; a lightweight tools hub that was **completely omitted from previous audit passes**
|
||||
8. **Font inconsistency** — 3+ different font stacks: Inter (ChronoMind, Prod Web), Space Grotesk/DM Sans (JarvisJr, ActionTrail, FlowMonk), system-ui (LocalMemGPT), leaked `--ml-font-*` (NomGap, NoteLett). The canonical token file defines `"display": "Space Grotesk"`, `"body": "DM Sans"`, `"mono": "IBM Plex Mono"` — but only 3/11 apps use this stack
|
||||
9. **Zero CI design system checks** — no repo has any design-related CI steps (no CSS lint, no a11y test, no token drift detection, no Lighthouse score)
|
||||
10. **Only 3/7 product web apps respect `prefers-color-scheme`** — ChronoMind (2 refs), NoteLett (2), LocalMemGPT (8); the rest ignore OS theme preference entirely
|
||||
|
||||
### 4.3 iOS Applications (5 apps)
|
||||
|
||||
@ -242,7 +330,7 @@ Benchmarked against Material 3, Radix/shadcn, Shopify Polaris, Atlassian Design
|
||||
|
||||
All Android apps use Material 3 theming and the shared `kotlin-platform-sdk`. Android is the **most consistent** platform for design system adoption.
|
||||
|
||||
### 4.5 React Native / Expo (2 apps)
|
||||
### 4.5 React Native / Expo (3 apps)
|
||||
|
||||
| App | Components | Screens | Theme Files | Hardcoded Hex (non-theme) |
|
||||
| ------------------- | ---------- | ------- | ---------------------------------------------------- | ------------------------- |
|
||||
@ -660,7 +748,7 @@ This is the **minimum UX quality bar** for any ByteLyst web surface shipping to
|
||||
|
||||
| Metric | Count |
|
||||
| ----------------------------------- | --------------------------------------------------------------------------------------- |
|
||||
| **Total web apps** | 11 (7 product + 3 dashboards + 1 LLM lab) |
|
||||
| **Total web apps** | 13 (8 product + 3 dashboards + 1 LLM lab + 1 Productivity Web) |
|
||||
| **Total iOS apps** | 5 (ChronoMind, JarvisJr, PeakPulse, MindLyst, ByteLyst Auth) |
|
||||
| **Total Android apps** | 5 (same products) |
|
||||
| **Total React Native apps** | 3 (NomGap, NoteLett, FlowMonk) |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user