CEQA.ai UI/UX Revamp

Baseline snapshot

• Build run: npm run build (Eleventy + TS compile)
• Dev run: npm run dev (watchers + Express on :3000); initial EADDRINUSE cleared after restart
• Notes: baseline used Tailwind CDN and large inline style blocks in layout/page templates

UX audit summary

Information architecture clarity

• Navigation listed every page equally; no grouping for reading vs. live vs. reference content.
• Home lacked a clear "explore" map for new visitors.
• Live feed entry points were not connected to saved Library flows.

Readability + long-form support

• Typography and line-length were not optimized for long reads.
• Posts lacked reading progress, TOC, or heading anchors.
• Inline styles fragmented the prose system and reduced consistency.

Navigation complexity

• Desktop and mobile nav were duplicated without shared components.
• Mobile menu lacked focus management and escape handling.
• Sticky header could obscure focus/anchor targets.

Live feed usability

• Status feedback for live vs. reconnecting was minimal.
• Loading states did not reserve space (risk of layout shift).
• Actions were present but needed clearer grouping and keyboard affordances.

Library UX

• No search, sorting, or view toggles.
• Empty state did not explain local storage and export value clearly.

New design direction

"AI research journal" + "environmental intelligence lab":

• Editorial-first layout with stronger typographic hierarchy.
• Minimal cyber/terminal cues (subtle, not dominant).
• Dark default with muted neutrals, red accent, and measured secondary highlights.
• Dense but calm surfaces; clear spatial rhythm and intentional motion.

IA improvements (no route changes)

• Group nav into Read (Blog/Guides), Live (News/Publications), Reference (Use Cases/AI Governance/Library), and About.
• Add command palette to jump directly to posts, guides, use cases, and governance sections.
• Add a home "Explore" bento grid to reinforce site map.
• Reinstate live feed + static digest pairing for progressive enhancement.

Design system + CSS pipeline

• Tailwind moved off CDN; compiled and purged CSS built into public/styles/site.css.
• Tokenized colors, typography scale, spacing, radii, and shadows in src/styles/main.css.
• Theme support via data-theme and prefers-color-scheme.
• Fonts optimized via preload and font-display: swap.

Component inventory + page mapping

• Global: header, grouped nav, mobile drawer, command palette.
• Home: hero, bento explore grid, live previews.
• Blog: filters + tag chips, improved list cards.
• Post: reading progress, sticky TOC, copy heading links, related/next/prev.
• Guides: card layout for index, optional TOC on long guides.
• Use Cases: bento grid with better hierarchy.
• AI Governance: TOC + readability upgrades.
• News/Publications: live controls, status pill, skeleton loaders, action menu, saved views, digest fallback.
• Library: search + sort, view toggle, cards + table, exports.

Accessibility checklist

• Skip link present and visible on focus.
• Sticky header does not obscure focus/anchor targets.
• Mobile drawer: aria-expanded/controls, focus trap, escape closes.
• Command palette: dialog semantics + keyboard navigation.
• Prefers-reduced-motion respected (scan lines, shimmer, transitions).
• Live feed status and new items announced with aria-live.
• All interactive controls have accessible names.

Performance + SEO checklist

• Tailwind CDN removed; compiled + purged CSS shipped.
• LCP/INP/CLS: reserve space for dynamic feed cards/skeletons.
• JS only where needed; feed JS loaded only on feed pages.
• Lighthouse mobile target: 90+ for Performance/Accessibility/Best Practices/SEO on:
  • Home
  • Blog
  • Post
  • News live
  • Publications live

Screenshots (before/after)

• Home: docs/screenshots/home-before.png, docs/screenshots/home-after.png
• Blog: docs/screenshots/blog-before.png, docs/screenshots/blog-after.png
• Post: docs/screenshots/post-before.png, docs/screenshots/post-after.png
• News (Live): docs/screenshots/news-live-before.png, docs/screenshots/news-live-after.png
• Publications (Live): docs/screenshots/publications-live-before.png, docs/screenshots/publications-live-after.png

Assumptions / open items

• Magic21st builder timed out; inspiration data used to guide skeleton + card layouts.
• "Before" screenshots in docs/screenshots/*-before.png are placeholders (duplicated from the current build). Replace them with captures from the pre-revamp commit or prior deploy.