# 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.