name: AlexandrAI Archive Web
description: Warm editorial archive interface for public research discovery, ranking, rendered papers, and comment metadata.
colors:
paper: "#f6f2ea"
surface: "#fffdf9"
surface-sunk: "#efe9dd"
ink: "#1f1a14"
ink-soft: "#6a6157"
ink-faint: "#9a9085"
accent: "#8a2722"
accent-soft: "rgba(138, 39, 34, 0.09)"
lapis: "#1f4a7a"
gold: "#b08529"
limestone: "#e7ddc7"
line: "rgba(31, 26, 20, 0.1)"
line-strong: "rgba(31, 26, 20, 0.18)"
typography:
body-md: { fontFamily: "Hanken Grotesk, system-ui, -apple-system, Segoe UI, sans-serif", fontSize: 16px, fontWeight: 400, lineHeight: 1.6, letterSpacing: 0 }
display-serif: { fontFamily: "Newsreader, Georgia, Times New Roman, serif", fontSize: 64px, fontWeight: 500, lineHeight: 0.98, letterSpacing: 0 }
h2-serif: { fontFamily: "Newsreader, Georgia, Times New Roman, serif", fontSize: 34px, fontWeight: 600, lineHeight: 1.08, letterSpacing: 0 }
mono-label: { fontFamily: "IBM Plex Mono, SFMono-Regular, Consolas, monospace", fontSize: 12px, fontWeight: 600, lineHeight: 1.4, letterSpacing: 0 }
spacing:
xs: 6px
sm: 9px
md: 14px
lg: 24px
xl: 40px
gutter: 72px
container: 1600px
rounded:
sm: 9px
md: 14px
lg: 16px
focus: 4px
components:
topbar: { background: "rgba(246, 242, 234, 0.82)", border: "{colors.line}", height: 62px }
nav-link: { radius: "{rounded.sm}", padding: "7px 13px", activeBackground: "{colors.accent-soft}" }
card: { background: "{colors.surface}", border: "{colors.line}", radius: "{rounded.md}" }
hero-emblem: { radius: "{rounded.lg}", size: 112px }Overview
AlexandrAI Archive Web is an editorial research archive interface, not a SaaS control panel. The design uses warm paper surfaces, serif titles, compact sans-serif metadata, and quiet accent states to support reading, search, ranking, and public paper preview without competing with the article content.
The first viewport is a gateway into the archive: brand mark, large serif title, focused explanatory copy, and a reader/search card. Subsequent archive, ranking, recent, and reader views share the same restrained page rhythm.
Colors
The palette is intentionally warm and archival. Paper and surface tokens create a reading-room feel; ink tokens keep long text legible; accent is used sparingly for active navigation, focus, selection, and high-value links. Lapis and gold are secondary accents for categorization or supporting visual hierarchy, not broad backgrounds.
Avoid introducing additional saturated colors. New states should first use ink scale, accent-soft, line, or existing lapis/gold tokens.
Typography
Serif headings carry the archive identity. Sans-serif body text carries navigation, metadata, and form controls. Monospace appears only for compact labels, identifiers, or technical metadata.
Do not scale text directly with viewport width. Use fixed token sizes with responsive layout constraints. Keep heading letter spacing at 0 in implementations even when the inspected source contains slight negative values.
Layout
The topbar is sticky, translucent, and narrow. Pages use a large container with generous but controlled gutters. Archive, ranking, recent, and reader views offset scroll targets below the sticky header.
Use full-width page sections with constrained inner content. Cards are for functional clusters such as search panels, paper results, metadata, and reader affordances, not for nested decorative framing.
Elevation & Depth
Depth is quiet: thin hairlines, small shadows, and translucent topbar blur. Surface depth should clarify layering between nav, search, cards, and reader content. Avoid dramatic shadows or floating decorative panels.
Shapes
Default shapes are moderately rounded: 9px for nav controls, 14px for cards, and 16px for brand imagery. Focus rings use a small radius so keyboard states remain precise.
Components
Navigation links are compact text buttons with active accent-soft backgrounds. Search/filter controls inherit typography and ink tokens. Reader cards should prioritize title, abstract, metadata, and safe comment preview.
Rendered paper content should remain visually subordinate to the original artifact; the shell provides discovery and preview framing, not a competing article design.
Do's and Don'ts
Do use warm paper surfaces, restrained accent states, and serif hierarchy for archive identity. Do keep public routes, comments, and rendered previews visually distinct. Do use same-origin relative UI assumptions and avoid deployment-specific chrome. Don't add dark dashboard panels, neon gradients, or marketing hero layouts. Don't expose private endpoints, local paths, or secret values in examples, screenshots, or metadata.