- Add skip-to-main-content link and main content ID target
- Add prefers-reduced-motion media queries for all animations
- Enhance visible focus indicators (2px offset, high-contrast ring)
- Replace ~160 text-surface-500 instances with text-surface-600/dark:text-surface-400
for 4.5:1+ contrast ratio compliance
- Add aria-hidden="true" to ~30+ decorative SVG icons across sidebars/widgets
- Convert facepile containers from div to semantic ul/li with role="list"
- Add aria-label to icon-only buttons (share, sort controls)
- Add sr-only labels to form inputs (webmention, search)
- Add aria-live="polite" to dynamically loaded webmentions
- Add aria-label with relative+absolute date to time-difference component
- Add keyboard handlers (Enter/Space) to custom interactive elements
- Add aria-label to nav landmarks (table of contents)
- Fix modal focus trap and dialog accessibility
- Fix lightbox keyboard navigation and screen reader announcements
Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
Replace the entire color system with a design-driven warm palette:
- Surface tokens: cold zinc grays → warm stone (#faf8f5 to #0f0e0d)
- Accent tokens: cold teal → warm amber (#fffbeb to #451a03)
- All bg-white → bg-surface-50 across templates (warm cream instead of pure white)
- Critical CSS: all hardcoded hex values updated to warm palette
- Prism code blocks: cold gray backgrounds → warm stone
- Pagefind search UI: blue buttons/links → amber interactive colors
- Dark mode: warm dark surfaces with amber accents throughout
Design system documented in .interface-design/system.md
Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
- Make all headings responsive (text-2xl sm:text-3xl pattern)
- Make all section headings responsive (text-xl sm:text-2xl)
- Add responsive margins (mb-6 sm:mb-8 pattern)
- Fix flex layouts to stack on mobile (flex-col sm:flex-row)
- Make images responsive (w-20 sm:w-24 pattern)
- Add responsive padding (p-4 sm:p-6)
- Improve grid gaps for mobile (gap-3 sm:gap-4)
- Add CSS utilities for table overflow and touch scrolling
- Restyle 404 page with proper responsive design
Files updated: 22 template and CSS files across all pages
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
