# Visual redesign report — AutoScholar.ai (2026-10-30)

Branch redesign (worktree ~/Desktop/Cluster/autoscholar-redesign). Scope: apps/web UI only; APIs, auth, server helpers, packages and services untouched.

# Audit findings (before)

See docs/DESIGN_SYSTEM.md §Audit and tests/e2e/screenshots/redesign/before/ (375/390/430/768/1024/1440, full-page and above-the-fold). Measured: 19 px horizontal overflow at 768 px on all pages; two-row mobile header; results below the fold on /research at every phone width; identical stage blocks on /methodology; prose-only /about.

# What changed

• Design system: new tokens (graphite/ivory/stone, oxide accent, cobalt scientific secondary), separate dark theme, fluid type scale, surfaces, controls, chips, badges, skeletons, motion with reduced-motion support, safe-area and dvh handling. Fonts: Newsreader + Geist + Geist Mono, self-hosted.
• Header: one compact row on every width; accessible drawer (dialog, focus trap, Escape, scroll lock) with search; desktop inline nav + search field; sticky with scroll shadow; aria-current on the current page.
• Homepage: new hero ("Research you can check, not just read") with an abstract evidence-ledger motif, real counts only (papers from the DB, gate and stage counts from the code), featured paper + latest grid, discipline explorer with live counts, pipeline strip, principles, MacLustr section with a cluster motif, honest empty state.
• Library: search + sort row; desktop facet sidebar; mobile filter bottom sheet with active-filter count and removable chips; dense publication rows (ID, date, version, discipline, type, title, excerpt, keywords, PDF/TeX/code/data indicators, status). Plain GET forms (work without JS).
• Paper page: PublicationMetadata header on a muted band with the artifacts panel; abstract with drop cap and KaTeX; numbered key findings; methods/results/limitations; "on this page" nav; pdf.js PaperReader (page navigation, zoom-to-width, full-screen, download, keyboard paging, loading/error/fallback, version pill); figures as ScientificFigure cards; two-column numbered references; code/data/results panels; ResearchProvenance (gates summary, stages, models, digests, gate-by-gate evidence, warnings); CitationPanel; version history and notices; related papers; mobile sticky Read/PDF bar.
• Supporting pages: Methodology (intro band, three principles, vertical timeline with progressive disclosure, modes grid, standards list), About (seven numbered editorial sections with in-page nav), Infrastructure (hero + motif, five-layer architecture, MacLustr section), Transparency (numbered hard gates grid, soft-gate chips, corrections/limitations), Topics/Series (card links), legal pages (reading column), 404.
• Admin: responsive shell (sidebar on desktop, compact top bar + drawer on mobile), split-screen login, overview with status tiles, active-research progress bars, worker and security panels, horizontally scrollable tables, mobile run cards. No logic or security changes.

# Verification

• pnpm --filter @autoscholar/web build ✓ · tsc --noEmit 0 errors · pnpm exec biome check . clean.
• Playwright e2e (existing 25 tests, selectors kept): 25/25 passed against the redesigned build (axe wcag2a/aa on 11 pages: 0 serious/critical; dark mode; keyboard; search/filters/empty state; paper page, PDF route, citations, JSON-LD; feeds/sitemap/robots/headers; all admin security assertions).
• Overflow check (tests/e2e/shots.mjs): no horizontal overflow at 375/390/430/768/1024/1440 on home, research, methodology, about, paper, infrastructure (before: +19 px at 768 on every page).
• Lighthouse 12 (Playwright Chromium, mobile emulation, simulated slow 4G):

* SEO fails only is-crawlable because the local build runs with STAGING_MODE=1 (noindex). Mobile LCP is above the 2.5 s target under Lighthouse's throttling because of the serif web font swap (see UI-NOTES.md for options); CLS and TBT/INP targets are met.

# Screenshots

tests/e2e/screenshots/redesign/before/ and .../after/ — {home,research,methodology,about,paper,infrastructure}-{375,390,430,768,1024,1440}.png (full page) and -fold.png (first screen), plus admin-{overview,runs,new,maclustr}-{width}.png.

# Open issues

• Mobile-simulated LCP (font swap) — see UI-NOTES.md.
• Route-level loading.tsx skeletons were removed (they broke 404 status codes); skeleton styles remain for in-page Suspense use.
• No real paper existed locally during the redesign; the staging sample exercises every component, but figure galleries, references and code/data panels should be reviewed once a real paper is published.