- Increase base font sizes proportionally (not aggressively):
* text-xs: 12px → 13px
* text-sm: 14px → 15px
* text-base: 16px → 18px
* text-lg: 18px → 20px
* text-xl: 20px → 22px
* text-2xl: 24px → 26px
* text-3xl: 30px → 32px
- No responsive breakpoint classes (prevents oversizing)
- Improves readability on MacBook Pro 14" without making fonts too large
- Build verified: 6 routes, zero errors
- Upgraded color palette with enhanced contrast (5.2:1 to 15:1 ratios)
- Replaced all text-slate-* utilities with semantic color tokens
- Added Fira Code + Fira Sans typography stack
- Converted CSS variables from SCSS to direct hex values
- Updated 26 components with improved color semantics
- Added cursor-pointer and focus states (accessibility phase 1)
- Added aria-labels to 35+ icon-only buttons
- Added prefers-reduced-motion support in globals.css
WCAG AA compliance verified across all text color combinations.
Fixes invisible text issues (slate-500 4.2:1 → muted 5.2:1).
Accessibility:
- Add focus-visible indicators to all interactive elements (buttons, inputs)
- Create accessible CreateUserModal to replace window.prompt()
- Add aria-labels to icon buttons for screen readers
Colors & Theming:
- Move primary color to CSS variable (--primary)
- Remove hard-coded #3b82f6 from tailwind config
- Clean up color consistency across theme
UX:
- Replace prompt-based user creation with proper modal form
- Implement inline field validation with error messages
- Add loading state during form submission
- Improve visual hierarchy and spacing
Performance:
- Remove bootstrap-icons dependency (duplicate with lucide-react)
Design:
- Reduce backdrop-blur overuse (remove from overlay scrim, StatCard)
- Improve AdminOverlay responsive design
