# AutoScholar.ai design system (redesign, 2026-10-30)

## Audit of the previous UI (evidence: `tests/e2e/screenshots/redesign/before/*`)
- Mobile header used two rows (logo + Research button + theme toggle, then a scrolling secondary nav) and consumed ~110 px before content.
- 19 px horizontal overflow on every page at 768 px (container padding + `max-w-6xl` grid gaps); the mobile hero headline (~3 rem) and a 5-line lede dominated the first screen.
- `/research` stacked ten form fields vertically before the first result (results below the fold on every phone).
- `/methodology` listed eleven identical heading/paragraph blocks; `/about` was a serif essay with no structure.
- The paper page used a native `<object>` PDF embed (no navigation, no mobile fallback beyond a link), `details` for provenance, and small-text metadata.
- Admin: dense but unstructured on mobile; tables overflowed inside cards.

## Direction
A digital research institute: academic credibility (serif titles, numbered references, verified-status badges), editorial sophistication (distinct compositions per page, hairline rules, measured whitespace) and product craftsmanship (compact controls, 44 px touch targets, skeletons, subtle motion).

## Typography
- Serif **Newsreader** (static 400/500 + italics) — display, titles, paper prose. Interface sans **Geist**; mono **Geist Mono** for identifiers, hashes, execution data. All self-hosted through `next/font` (CSP `font-src 'self'`).
- Scale (CSS `clamp`): `.display` 2.125→4.25 rem, `.title-1` 1.75→2.75, `.title-2` 1.375→1.875, `.title-3` 1.125→1.3, `.lede` 1→1.19 rem; body 16 px / 1.55; `.prose-paper` 1→1.125 rem / 1.65; `.prose-editorial` with a drop cap for abstracts.
- Labels: `.eyebrow` (11 px, 0.16 em tracking, accent) and `.label` (11 px, subtle).

## Colour
Tokens in `apps/web/src/app/globals.css` (`@theme` + `:root`/`.dark`): graphite ink (`#16150f`…`#0d0d0a`), warm ivory (`#fcfbf7`, `#f6f3eb`, `#ece7da`), stone neutrals, **oxide** accent (`#a84a25`, evolved terracotta) and **cobalt** scientific secondary (`#2f5fb3`) for visualizations and pipeline markers. Semantic ok/warn/danger/info. Dark theme is tuned separately (warmer ink surfaces, lifted accents `#d8784d` / `#7ea3e6`), not inverted. `--fg-subtle` meets 4.5:1 on both themes (axe-verified).

## Layout
`.container-x` (max 80 rem, safe-area-aware padding), `.container-narrow` (48 rem), `.container-reading` (42 rem), `.section` / `.section-tight` vertical rhythm, 12-column grids for editorial pages, `.rule`, `.rule-ornament`. Grid/flex children get `min-width: 0` so long identifiers never widen the viewport; `html, body { overflow-x: clip }`.

## Surfaces & controls
`.surface` (elevated card, shadow-1), `.surface-flat`, `.surface-muted`, `.surface-ink` (MacLustr section), `.card-link` (hover lift, hover-only), `.btn` / `.btn-primary` / `.btn-ghost` / `.btn-sm` / `.btn-icon` (≥ 44 px on coarse pointers), `.input` (16 px on iOS to avoid zoom), `.chip` / `.chip-active`, `.badge` / `.badge-accent` / `.badge-sci`, `.kbd`, `.mono-id`, `.table` + `.table-wrap`, `.skeleton`.

## Navigation
`site-header` (sticky, blur, scroll shadow, safe-area top padding): wordmark · desktop nav (≥ lg) · header search (≥ md) · search icon (mobile) · theme toggle · drawer button (< lg). Drawer: `role=dialog`, focus trap, Escape, body scroll lock, closes on navigation. Admin uses the same pattern (`AdminNav`).

## Motion
`rise-in` (transform only, 480 ms) for cards, `slide-in-right`/`slide-in-up` for drawer and sheet, `shimmer` for skeletons, pulse on live status dots. Everything collapses to ~0 ms under `prefers-reduced-motion`.

## Components (`apps/web/src/components`)
ResearchPaperCard/PaperCard (card · row · featured), FeaturedPaper, DisciplineExplorer, ResearchPipeline (+ PipelineStrip, STAGE_DOCS), ResearchStatusBadge/StatusBadge, ScientificFigure, PaperReader (pdf.js: paging, zoom-to-width, full-screen, keyboard, download, loading/error/fallback), PublicationMetadata, CitationPanel, ResearchProvenance, MacLustrInfrastructure (+ ClusterMotif), EmptyResearchState, LibraryFilters (search row, ActiveFilters chips, FilterSidebar, mobile bottom sheet), SectionHeading, MathText (KaTeX, server-rendered; display math scrolls horizontally), Icons, SiteHeader/HeaderChrome, SiteFooter, ThemeToggle.

## Mobile rules
`viewport-fit=cover`; `env(safe-area-inset-*)` on header, drawer, sheet, footer, mobile action bar; `dvh` for full-height regions; no fixed widths; `.mobile-bar` on the paper page keeps Read/PDF reachable above the iOS toolbar.