ByteLyst Ecosystem — Design System & UI/UX Audit
Date: 2026-03-27
Scope: All 16 workspace repos — 11 product web apps, 5 iOS apps, 5 Android apps, 2 React Native apps, 3 dashboards
Canonical Source: packages/design-tokens/tokens/bytelyst.tokens.json (v1.1.0)
Executive Summary
Overall Design System Completeness: 41%
The ByteLyst ecosystem has a solid canonical token source (bytelyst.tokens.json) with an automated generation pipeline producing CSS, TypeScript, Kotlin, and Swift outputs. However, adoption is deeply uneven — only 2 of 11 web apps fully consume generated tokens, native apps vary from excellent (PeakPulse) to poor (NomGap mobile with 337 hardcoded hex values), and critical UX infrastructure (shared component library, accessibility, responsive design, form validation) is largely absent.
| Dimension |
Score |
Notes |
| Token Foundation |
75% |
Rich JSON source, 4-platform generator, 8 product-specific palettes |
| Token Adoption (Web) |
35% |
Only 2/11 apps fully tokenized; 5 have correct prefix but hand-written |
| Token Adoption (Mobile) |
30% |
iOS themes exist but diverge; Android uses SDK; RN has 337+ hardcoded hex |
| Component Library |
15% |
Zero shared components; every app has bespoke UI; no shadcn/ui adoption |
| Accessibility |
10% |
Near-zero ARIA labels; minimal VoiceOver; no WCAG compliance |
| Responsive Design |
5% |
Essentially zero responsive breakpoints in product web apps |
| Dark/Light Theme |
30% |
Only ChronoMind + LocalMemGPT have functional theme switching |
| Animation/Motion |
35% |
ChronoMind excellent; most others minimal or zero |
| UX Patterns |
40% |
Sidebar nav consistent; forms, toasts, modals inconsistent |
| E2E / Visual Testing |
45% |
Playwright specs exist in all 7 product webs; no visual regression |
1. Design Token Foundation
1.1 Canonical Source: bytelyst.tokens.json
| Category |
Token Count |
Status |
| Color Palette (neutral 11 + brand 10) |
21 |
Complete |
| Semantic Colors (dark 16 + light 16) |
32 |
Complete |
| Product Palettes (7 products) |
66 |
Complete |
| Typography (families 3, weights 4, sizes 7, lineHeights 3, letterSpacing 3) |
20 |
Complete |
| Spacing (8pt grid, 12 steps) |
12 |
Complete |
| Radius (6 levels) |
6 |
Complete |
| Elevation (4 levels) |
4 |
Complete |
| Motion (4 durations + 3 easings) |
7 |
Complete |
| Breakpoints (4 levels) |
4 |
Complete |
| Layout (5 values) |
5 |
Complete |
| z-Index (9 levels) |
9 |
Complete |
| Icon Sizes (6 levels) |
6 |
Complete |
| Grid (columns, gutter, breakpoints) |
8 |
Complete |
| Opacity (11 levels) |
11 |
Complete |
| TOTAL |
~211 |
|
Product-specific palettes defined:
- MindLyst (brain gradients: 5), JarvisJr (9), PeakPulse (10), ChronoMind (10), NomGap (10), LysnrAI (7), FlowMonk (20)
- Missing: ActionTrail, NoteLett, LocalMemGPT, Local LLM Lab — no product-specific palette in canonical JSON
1.2 Generation Pipeline
| Output |
File |
Target |
| CSS |
generated/tokens.css (79 lines) |
Web — --ml-* namespace |
| TypeScript |
generated/tokens.ts (317 lines) |
Web — full JSON export |
| Kotlin |
generated/MindLystTokens.kt (138 lines) |
KMP shared module |
| Swift |
generated/MindLystTheme.swift (89 lines) |
iOS SwiftUI |
Critical Issue: The generator outputs only --ml-* (MindLyst) CSS namespace. It does NOT generate --cm-*, --jj-*, --ng-*, --at-*, --fm-*, --nl-*, --lmg-*, --llm-* per-product CSS files. Every other product hand-writes its own CSS custom properties.
2. Per-App Design System Audit
2.1 Web Applications (11 total)
| App |
Repo |
CSS Lines |
Prefix |
Tailwind |
Components |
Pages |
Hardcoded Hex |
Token Source |
| ChronoMind |
learning_ai_clock |
109 |
--cm- |
Yes |
16 |
10 |
0 |
Hand-written |
| JarvisJr |
learning_ai_jarvis_jr |
58 |
--jj- |
Yes |
1 |
8 |
7 |
Hand-written |
| NomGap |
learning_ai_fastgap |
198 |
--ng- + --ml- |
Yes |
13 |
12 |
117 |
Hand-written (leaks --ml-) |
| ActionTrail |
learning_ai_trails |
88 |
--at- |
No |
4 |
10 |
0 |
Hand-written |
| FlowMonk |
learning_ai_flowmonk |
102 |
--fm- |
No |
1 |
8 |
29 |
Hand-written |
| NoteLett |
learning_ai_notes |
157 |
--nl- + --ml- |
Yes |
16 |
7 |
4 |
Hand-written (leaks --ml-) |
| LocalMemGPT |
learning_ai_local_memory_gpt |
155 |
--lmg- |
Yes |
7 |
1 |
0 |
Hand-written |
| MindLyst |
learning_multimodal_memory_agents |
2,485 |
--ml- |
No |
~33 API routes |
9 |
N/A |
Most comprehensive |
| Admin Dashboard |
learning_ai_common_plat |
126 |
Tailwind |
Yes |
29 |
62 |
8 |
Tailwind defaults |
| User Dashboard |
learning_voice_ai_agent |
126 |
Tailwind |
Yes |
32 |
22 |
0 |
Tailwind defaults |
| Tracker Dashboard |
learning_ai_common_plat |
99 |
Tailwind |
Yes |
2 |
8 |
10 |
Tailwind defaults |
| Local LLM Lab |
learning_ai_local_llms |
182 |
--llm- |
Yes |
5 |
6 |
31 |
Hand-written |
Key Web Findings
- No app imports
@bytelyst/design-tokens — every single web app hand-writes its CSS custom properties
- NomGap web has 117 hardcoded hex colors in components — worst offender
- FlowMonk + ActionTrail have no Tailwind — plain CSS only
- Zero apps use shadcn/ui — despite AGENTS.md recommending it
- JarvisJr web has only 1 component (Sidebar.tsx) — extremely minimal UI
- MindLyst web has the richest CSS (2,485 lines) but uses vanilla CSS, not Tailwind
2.2 iOS Applications (5 apps)
| App |
Swift Files |
Screens/Views |
Components |
Theme File |
Hardcoded Colors |
a11y Refs |
| PeakPulse |
98 |
25 |
17 |
PeakPulseTheme.swift |
0 |
15 |
| ChronoMind |
89 |
30 |
7 |
ChronoMindTheme.swift |
46 |
8 |
| JarvisJr |
64 |
12 |
7 |
JarvisJrTheme.swift + JarvisJrColors.swift |
20 |
5 |
| MindLyst |
32 |
4 |
2 |
MindLystTheme.swift (generated) |
N/A |
N/A |
| ByteLyst Auth |
17 |
6 |
0 |
None (uses SDK) |
N/A |
N/A |
Best iOS app: PeakPulse — zero hardcoded colors, most a11y references, richest component library (17 components), proper theme file.
2.3 Android Applications (5 apps)
| App |
Screens |
Theme File |
Uses kotlin-platform-sdk |
| ChronoMind |
5 |
Theme.kt (Material 3) |
Yes |
| JarvisJr |
6 |
Theme.kt (Material 3) |
Yes |
| LysnrAI |
9 |
Theme.kt (Material 3) |
Yes |
| MindLyst |
4 |
MindLystTheme.kt |
Yes |
| ByteLyst Auth |
11 |
Theme.kt (Material 3) |
Yes |
All Android apps use Material 3 theming and the shared kotlin-platform-sdk. Android is the most consistent platform for design system adoption.
2.4 React Native / Expo (2 apps)
| App |
Components |
Screens |
Theme Files |
Hardcoded Hex (non-theme) |
| NomGap (Expo) |
13 |
24 |
6 (colors, typography, spacing, ThemeContext, index) |
337 |
| NoteLett (Expo) |
~10 |
~8 |
0 (no theme dir) |
N/A |
| FlowMonk (Expo) |
~5 |
~7 |
0 (no theme dir) |
N/A |
NomGap mobile is the worst offender in the entire ecosystem — 337 hardcoded hex colors outside the theme directory. The theme files exist but are not being consumed by most screen/component code.
3. UX Pattern Audit
3.1 Navigation Patterns
| Pattern |
Web Apps |
Status |
| Sidebar navigation |
All 11 |
Consistent — every web app has Sidebar.tsx |
| Tab navigation (mobile) |
NomGap, NoteLett, FlowMonk |
Consistent — Expo Router tabs |
| Tab navigation (iOS) |
ChronoMind, PeakPulse, JarvisJr |
5-tab SwiftUI TabView |
| Bottom nav (Android) |
ChronoMind, LysnrAI, JarvisJr |
Material 3 BottomNavigationBar |
Score: 80% — Navigation is the most consistent UX pattern across the ecosystem.
3.2 Feedback & Notifications
| Pattern |
Apps With |
Apps Without |
Score |
| Toast notifications |
ChronoMind, NomGap, ActionTrail |
JarvisJr, FlowMonk, NoteLett, LocalMemGPT |
43% |
| Modal dialogs |
ChronoMind (3), NomGap (2), NoteLett (4) |
JarvisJr, ActionTrail, FlowMonk, LocalMemGPT |
43% |
| Loading states |
NomGap, ActionTrail, FlowMonk, LocalMemGPT |
ChronoMind, JarvisJr, NoteLett |
57% |
| Error boundaries |
MindLyst web |
All others |
9% |
| Empty states |
Minimal across all |
— |
~20% |
3.3 Data Visualization
| Pattern |
Apps With |
Score |
| Recharts charts |
ChronoMind, NomGap, ActionTrail, Admin Dashboard, User Dashboard |
36% |
| Canvas visualization |
NomGap web (BodyCanvas), NomGap mobile (Skia) |
Niche |
| Stats/metric cards |
ChronoMind, NomGap, ActionTrail, FlowMonk |
~36% |
3.4 Form & Input Patterns
| Pattern |
Apps With |
Score |
| Zod client-side validation |
ChronoMind (11 refs) |
9% |
| react-hook-form |
None |
0% |
| Form error messages |
Minimal |
~10% |
| Input masking |
None |
0% |
Score: 5% — Forms are the weakest UX area. No shared form components, no validation library adoption beyond ChronoMind.
3.5 Accessibility
| Dimension |
Score |
Evidence |
| ARIA labels (web) |
5% |
Only ChronoMind (10), NoteLett (6), JarvisJr (3) have any |
| VoiceOver (iOS) |
10% |
PeakPulse (15), ChronoMind (8), JarvisJr (5) |
| Dynamic Type (iOS) |
~5% |
Minimal |
| Keyboard navigation (web) |
15% |
4/7 apps have keyboard shortcut files |
| Color contrast |
Unknown |
No automated contrast checking |
| Screen reader testing |
0% |
No evidence |
3.6 Responsive Design
Score: 5% — Essentially zero @media queries or responsive breakpoints in any product web app, despite the token file defining 4 breakpoints. All apps are fixed-width sidebar+content layouts.
3.7 Dark/Light Theme
| App |
Dark |
Light |
Toggle |
Score |
| LocalMemGPT |
Yes |
Yes |
Yes (use-theme.ts) |
Full |
| ChronoMind |
Yes |
Partial |
Yes (use-theme.ts) |
80% |
| NomGap web |
Yes |
No |
No |
30% |
| MindLyst web |
Yes |
Yes |
data-theme |
70% |
| All others |
Dark only |
No |
No |
20% |
3.8 Animation & Motion
| App |
Refs |
Quality |
| ChronoMind |
75 |
Excellent — CountdownRing, AlarmOverlay, transitions |
| NomGap |
22 |
Good — body visualization, stage transitions |
| LocalMemGPT |
16 |
Decent — chat message animations |
| ActionTrail |
6 |
Minimal |
| Others |
0-2 |
None/trivial |
4. Shared Infrastructure Gaps
4.1 What EXISTS
| Asset |
Location |
Status |
| Canonical token JSON |
packages/design-tokens/tokens/bytelyst.tokens.json |
Complete (211 tokens) |
| Token generator |
packages/design-tokens/scripts/generate.ts |
Works (4 outputs) |
| Generated CSS |
packages/design-tokens/generated/tokens.css |
MindLyst only (--ml-) |
| Generated TypeScript |
packages/design-tokens/generated/tokens.ts |
Full JSON export |
| Generated Kotlin |
packages/design-tokens/generated/MindLystTokens.kt |
MindLyst only |
| Generated Swift |
packages/design-tokens/generated/MindLystTheme.swift |
MindLyst only |
| MindLyst design-system |
design-system/ in MindLyst repo |
5 files (CSS, tokens, component specs) |
| kotlin-platform-sdk |
packages/kotlin-platform-sdk/ |
13 components, all 5 Android apps |
| swift-platform-sdk |
packages/swift-platform-sdk/ |
13 components, all 5 iOS apps |
4.2 What is MISSING
| Gap |
Impact |
Priority |
| Per-product CSS generation |
Every web app hand-writes tokens |
P0 |
Shared React component library (@bytelyst/ui) |
Zero reusable UI; 11 apps build from scratch |
P0 |
| shadcn/ui adoption |
Recommended in AGENTS.md but zero apps use it |
P0 |
| Per-product Swift theme generation |
Only MindLyst gets generated Swift; others hand-write |
P1 |
| Per-product Kotlin token generation |
Only MindLyst gets generated Kotlin; others hand-write |
P1 |
| Shared Sidebar component |
Every app has its own Sidebar.tsx (~11 copies) |
P1 |
| Shared Toast/notification component |
3/11 apps have toasts, all different |
P1 |
| Shared Modal/Dialog component |
3/11 apps have modals, all different |
P1 |
| Form validation library |
1/11 apps uses Zod client-side |
P2 |
| Responsive breakpoint utilities |
Token file defines 4 breakpoints; zero apps use them |
P2 |
| Accessibility audit tooling |
No automated a11y testing |
P2 |
| Visual regression testing |
No Chromatic/Percy/Playwright screenshot tests |
P2 |
| Design system documentation site (Storybook/Cosmos) |
No component catalog |
P3 |
| React Native shared theme package |
NomGap has 337 hardcoded hex values |
P1 |
5. Per-Product Completeness Scorecard
| Product |
Web |
iOS |
Android |
Mobile (RN) |
Token Adoption |
UX Richness |
Overall |
| ChronoMind |
65% |
60% |
50% |
— |
55% |
70% |
60% |
| NomGap |
40% |
— |
— |
25% |
20% |
55% |
35% |
| PeakPulse |
— |
75% |
— |
— |
70% |
60% |
68% |
| MindLyst |
55% |
35% |
40% |
— |
60% |
50% |
48% |
| LocalMemGPT |
55% |
— |
— |
— |
55% |
50% |
53% |
| NoteLett |
50% |
— |
— |
30% |
40% |
45% |
41% |
| JarvisJr |
20% |
45% |
45% |
— |
35% |
30% |
35% |
| ActionTrail |
40% |
— |
— |
— |
45% |
40% |
42% |
| FlowMonk |
30% |
— |
— |
25% |
30% |
30% |
29% |
| LysnrAI |
45% |
50% |
50% |
— |
40% |
45% |
46% |
| Local LLM Lab |
40% |
— |
— |
— |
35% |
35% |
37% |
| Admin Dashboard |
60% |
— |
— |
— |
50% |
55% |
55% |
| User Dashboard |
55% |
— |
— |
— |
50% |
50% |
52% |
| ByteLyst Auth |
— |
30% |
40% |
— |
30% |
25% |
31% |
Scoring Methodology
- Web: Components, pages, Tailwind, token usage, loading states, modals, toasts, a11y, keyboard shortcuts
- iOS: Swift files, screens, components, theme file, hardcoded colors, accessibility, platform SDK
- Android: Screens, theme, kotlin-platform-sdk, Material 3 compliance
- Mobile (RN): Components, screens, theme files, hardcoded colors
- Token Adoption: Correct prefix, imports from generated tokens, no hardcoded hex
- UX Richness: Charts, animations, dark/light, responsive, forms, feedback, empty states
6. Rankings: Best to Worst UX/Design
Tier 1 — Good Foundation (55-70%)
- PeakPulse iOS (68%) — Best native app. Zero hardcoded colors, proper theme, 17 components, 15 a11y refs, gamification UI (badges, streaks, XP), map integration, charts.
- ChronoMind (60%) — Best web app. 16 components, 75 animation refs, countdown rings, alarm overlays, Pomodoro UI, PWA support, dark/light theme, Zod validation.
- Admin Dashboard (55%) — Most pages (62), 29 components, Recharts, Tailwind, shadcn-like patterns.
Tier 2 — Moderate (40-55%)
- LocalMemGPT (53%) — Clean single-page app, dark/light toggle, 7 components, markdown rendering, code syntax highlighting.
- User Dashboard (52%) — 32 components, 22 pages, Tailwind, clean Recharts integration.
- MindLyst (48%) — Richest CSS (2,485 lines), KMP shared tokens, but web uses vanilla CSS with no Tailwind.
- LysnrAI (46%) — Comprehensive iOS platform wrappers, 3 theme files, but web dashboard is the user-dashboard (shared).
- ActionTrail (42%) — Clean token system (
--at-*), SSE real-time, 4 components, but no Tailwind.
- NoteLett (41%) — 16 components, 4 modals, keyboard shortcuts, but CSS leaks
--ml-* prefix.
Tier 3 — Minimal (25-40%)
- Local LLM Lab (37%) — 5 components, 31 hardcoded hex,
--llm-* tokens exist but not fully adopted.
- NomGap (35%) — Rich mobile visualization (Skia canvas), but 337 hardcoded hex in mobile and 117 in web. Theme files exist but unused.
- JarvisJr (35%) — Web has only 1 component (Sidebar). iOS is richer (64 swift files, 12 screens) but 20 hardcoded hex.
- FlowMonk (29%) — 1 web component, no Tailwind, 29 hardcoded hex, minimal mobile.
- ByteLyst Auth (31%) — Thin auth companion, no theme file on iOS, relies on SDK.
7. Critical Recommendations
P0 — Immediate (Sprint 1-2)
- Extend token generator for all products —
generate.ts should output --cm-*, --jj-*, --ng-*, --at-*, --fm-*, --nl-*, --lmg-*, --llm-* CSS files (not just --ml-*)
- Adopt shadcn/ui in at least ChronoMind + NomGap + Admin Dashboard as pilot
- Fix NomGap hardcoded hex — 337 mobile + 117 web = 454 violations; route through theme tokens
- Fix NomGap + NoteLett
--ml-* prefix leaks — should be --ng-* and --nl-* only
P1 — Near-term (Sprint 3-5)
- Create
@bytelyst/ui — shared React component package: Sidebar, Toast, Modal, StatusBadge, EmptyState, LoadingSpinner, StatCard
- Extend Swift/Kotlin generators for PeakPulse, ChronoMind, JarvisJr, LysnrAI (not just MindLyst)
- Create
@bytelyst/react-native-theme — shared RN theme package consumed by NomGap, NoteLett, FlowMonk mobile
- Add responsive breakpoint utilities — CSS container queries or Tailwind responsive classes
P2 — Medium-term (Sprint 6-8)
- Accessibility pass — add ARIA labels to all web apps, VoiceOver labels to all iOS apps
- Form validation library — adopt
react-hook-form + Zod across all web apps with forms
- Dark/light theme in all web apps (currently only 2/11 have toggles)
- Visual regression testing — Playwright screenshot tests or Chromatic
P3 — Long-term
- Design system documentation site — Storybook or similar component catalog
- Design review process — PR template for UI changes requiring screenshot comparison
- Responsive web apps — make all apps work on tablet/mobile viewports
8. Metrics Summary
| Metric |
Count |
| Total web apps |
11 (7 product + 3 dashboards + 1 LLM lab) |
| Total iOS apps |
5 (ChronoMind, JarvisJr, PeakPulse, MindLyst, ByteLyst Auth) |
| Total Android apps |
5 (same products) |
| Total React Native apps |
3 (NomGap, NoteLett, FlowMonk) |
| Total web components |
~122 (across all 11 apps) |
| Total web pages |
~163 |
| Total iOS Swift files |
~300 |
| Total iOS screens/views |
~77 |
| Total E2E spec files |
45 |
| Canonical design tokens |
211 |
| Product-specific color palettes |
7 of 11 products |
| Hardcoded hex violations |
~620+ (NomGap 454, FlowMonk 29, LLM Lab 31, JarvisJr 27, ChronoMind iOS 46, others ~33) |
| Apps with zero hardcoded hex |
3 web (ChronoMind, ActionTrail, LocalMemGPT), 1 iOS (PeakPulse) |
| Apps with shadcn/ui |
0 |
| Apps with responsive design |
~0 |
| Apps with accessibility |
3 partial (ChronoMind, PeakPulse, NoteLett) |
Appendix A: Token Namespace Registry
| Product |
Web CSS Prefix |
iOS Theme |
Android Theme |
RN Theme |
| MindLyst |
--ml-* |
MindLystTheme.swift (gen) |
MindLystTheme.kt |
— |
| ChronoMind |
--cm-* |
ChronoMindTheme.swift |
Theme.kt |
— |
| JarvisJr |
--jj-* |
JarvisJrTheme.swift |
Theme.kt |
— |
| NomGap |
--ng-* |
— |
— |
src/theme/ (6 files) |
| ActionTrail |
--at-* |
— |
— |
— |
| FlowMonk |
--fm-* |
— |
— |
— |
| NoteLett |
--nl-* |
— |
— |
— |
| LocalMemGPT |
--lmg-* |
— |
— |
— |
| LysnrAI |
(user-dashboard) |
Theme/ (3 files) |
Theme.kt |
— |
| PeakPulse |
— |
PeakPulseTheme.swift |
— |
— |
| Local LLM Lab |
--llm-* |
— |
— |
— |
| Admin Dashboard |
Tailwind |
— |
— |
— |
| User Dashboard |
Tailwind |
— |
— |
— |
| Tracker Dashboard |
Tailwind |
— |
— |
— |
Appendix B: File Counts by Surface
| Surface |
Globals.css Lines |
Components |
Pages |
E2E Specs |
| ChronoMind web |
109 |
16 |
10 |
6 |
| JarvisJr web |
58 |
1 |
8 |
6 |
| NomGap web |
198 |
13 |
12 |
7 |
| ActionTrail web |
88 |
4 |
10 |
8 |
| FlowMonk web |
102 |
1 |
8 |
6 |
| NoteLett web |
157 |
16 |
7 |
6 |
| LocalMemGPT web |
155 |
7 |
1 |
6 |
| MindLyst web |
2,485 |
(API routes) |
9 |
— |
| Admin Dashboard |
126 |
29 |
62 |
— |
| User Dashboard |
126 |
32 |
22 |
— |
| Tracker Dashboard |
99 |
2 |
8 |
— |
| Local LLM Lab |
182 |
5 |
6 |
— |
Generated by Windsurf Cascade — full workspace scan of 16 repos.
