- Remove packages/design-system/ directory (superseded by SUMI tokens
in apps/web/src/index.css, confirmed no imports exist)
- Update package.json keywords from kodo-design-system to sumi-design-system
- Create docs/STORYBOOK_CONTRACT.md defining mandatory story structure:
Default, Loading, Error, Empty states for feature components
- Typography audit: SUMI utility classes defined in index.css, codebase
correctly uses Tailwind classes with SUMI tokens via @theme — no
migration needed
Co-authored-by: Cursor <cursoragent@cursor.com>
- Created COMMENTED_CODE_AUDIT.md documenting findings
- Found ~4,329 commented lines total (mostly documentation)
- Actual commented-out code blocks are minimal
- Excluded generated files and documentation comments
- Ready for manual review in Cleanup 9
- Cleanup 8: Complete
- Expanded basic checklist into comprehensive implementation guide
- Added detailed sections: Color (80/20 rule), Spacing (8px grid), Interactions, Visual Elements
- Added component-specific checks: Buttons, Cards, Navigation, Forms, Pages
- Included specific Tailwind classes and values for each check
- Added 'keep vs remove' guidance for hover effects and visual elements
- Added final validation section for overall assessment
- Provides actionable, step-by-step guidance for applying Surgical Minimalism
- Action 11.5.1.2 complete
- Created comprehensive design direction document
- Defined 6 core principles: 80/20 color rule, increased whitespace, subtle interactions, gradients used sparingly, 8px grid system, text color hierarchy
- Documented design tokens and color usage guidelines
- Added implementation checklist for applying principles
- Included good vs avoid examples with code snippets
- Documented migration path and references to audit documents
- Aligns with all completed aesthetic improvement actions
- Serves as foundation for future design work
- Action 11.5.1.1 complete
- Created verification document documenting all remaining gradients
- Verified 12 remaining gradients are appropriate:
- 6 in hero/featured sections (DiscoverView, ProfileView, SocialView, LiveView)
- 1 functional overlay for text readability
- 5 decorative elements (icon containers, visualizations)
- Confirmed no gradients on card backgrounds
- All gradients used sparingly and appropriately, aligning with Surgical Minimalism
- Action 11.4.2.2 complete
- Created comprehensive contrast test report
- Tested all text color combinations (white, dim, opacity variants)
- Tested on all 5 background colors (void, ink, graphite, slate, steel)
- All combinations exceed 4.5:1 ratio requirement
- Primary text: 15.9:1 to 20.6:1 (excellent)
- Secondary text: 6.1:1 to 7.8:1 (good)
- Text with opacity: 11.8:1 to 16.2:1 (excellent)
- No violations found - all text meets WCAG AA
- Action 11.1.1.3 complete
- Audited all files with view mode toggle (6 files total)
- Found list view is actively used and is default in 3 contexts:
- SearchPageView: List is default for search results
- FileManagerView: List is default for file browsing
- CloudFileBrowser: List is default for cloud files
- Grid view is default in track browsing contexts (LibraryPage, LibraryManager, ProfileView)
- Recommendation: Keep list view - serves different purposes than grid view
- Created comprehensive audit report: apps/web/docs/LIST_VIEW_USAGE_AUDIT.md
- Includes context-specific analysis and recommendations
- Scanned 166 files with button elements
- Identified 30+ high-priority custom button implementations
- Documented locations, line numbers, and recommended Button variants
- Created comprehensive audit report: apps/web/docs/CUSTOM_BUTTONS_AUDIT.md
- High priority: Live stream, Dashboard, Social, Admin, Studio, File Manager, Modals
- Includes migration strategy and next steps
- Created comprehensive TAILWIND_COLORS_AUDIT.md documenting all Tailwind default colors
- Found 1,492 instances across 235 files
- Most common: text-gray-* (992), bg-gray-* (146), border-gray-* (107)
- Documented color distribution, top 20 classes, and mapping guide
- Identified top 20 files requiring migration
- Created migration priority guide (High/Medium/Low)
- Documented special cases (test files, component libraries)
- Ready for Action 9.1.1.3 (migration to Kodo colors)
- Added cursor-pointer to view mode toggles (LibraryPage)
- Added cursor-pointer and transition-colors to FeedView buttons
- Added cursor-pointer to logout buttons (Sidebar, Header)
- Added cursor-pointer to Dashboard time period buttons
- Added cursor-pointer to Collapsible trigger button
- Button component already has cursor-pointer built-in
- Navigation links already have hover states
- Updated audit document with progress
- High-priority areas complete, remaining elements can be addressed incrementally
- Task 8.2.1.3 complete
- Created comprehensive audit document: apps/web/docs/INTERACTIVE_ELEMENTS_AUDIT.md
- Identified 10 categories of interactive elements
- Found 500+ interactive elements across codebase
- Documented patterns: good, needs improvement, missing
- Prioritized areas for hover/focus state improvements
- Task 8.2.1.2 complete
- Created complete spacing system guide in apps/web/docs/SPACING_GUIDE.md
- Documented numeric and semantic spacing scales with full value tables
- Included usage guidelines, best practices, and common patterns
- Added migration guide for replacing arbitrary values
- Documented ESLint enforcement and related documentation
- Task 7.2.1.7 complete
- Standardized 9 paragraphs without explicit sizes
- Added text-sm to secondary/description text (7 instances)
- Added text-base to body text (2 instances)
- Established standard: text-base for body, text-sm for secondary
- Verified 490 paragraphs across 207 files follow type scale
- Created standardization plan document
- Task 7.1.2.4 complete
- Standardized h2 elements: 19 instances from text-3xl/text-xl to text-2xl
- Standardized h3 elements: 4 instances from text-2xl to text-xl
- Established consistent hierarchy: h1(text-3xl), h2(text-2xl), h3(text-xl)
- Preserved special cases: demo pages, responsive patterns, stat value displays
- Created standardization plan document
- Task 7.1.2.3 complete
- Audited 55 h1 elements across 52 files
- Documented size distribution: text-3xl (26), text-2xl (16), text-4xl (10), etc.
- Identified inconsistencies: 6 different sizes used for h1 elements
- Found 11+ files with text-2xl h1 that should be text-3xl for consistency
- Documented responsive patterns and special cases
- Provided recommendations for standardization
- Created comprehensive audit report in apps/web/docs/H1_ELEMENTS_AUDIT_REPORT.md
- Action 7.1.2.1 complete
- Documented all remaining arbitrary text sizes (9px, 10px, 11px instances)
- Noted that 99.8% of text already uses scale correctly
- Documented edge cases for design review
- Guide now complete with full inventory
- Replaced text-[9px] with text-xs in WishlistView.tsx
- Replaced font-size: 11px with var(--text-xs) in badge-avatar.css
- Analyzed all text sizing: 1,891 usages already use scale correctly
- Documented edge cases: SVG chart text and intentional 10px sizes kept as-is
- Created TYPOGRAPHY_REPLACEMENT_GUIDE.md with full analysis
- 99.8% of text already uses scale - only 2 safe replacements made
- Action 7.1.1.4 complete
