# Archive Library

## Overview
A digital archive / library-catalog aesthetic. Content is listed as dense index rows — a mono number, a serif title, and mono metadata columns — not floating cards. Warm beige paper ground, near-black ink, hairline rules, and a single restrained terracotta accent. You know it on sight when items line up as a numbered catalog and every entry carries a monospaced metadata label. Information density is the point; if a screen feels empty, add rows and metadata, not whitespace.

## Colors & Roles
Beige-paper foundation: `background` warm off-white (`#e8e3d5`), `foreground` near-black ink (`#1f1d18`), both warm (hue ~89). Surfaces separate by faint tonal step — `card`/`popover` (`#efebdf`) and `secondary`/`muted` (`#dfd9c8`) are the two row-alternation tones — never by shadow. `muted-foreground` (`#6b665a`) carries metadata text; `border`/`input` are the hairline neutral (`#bdb6a4`). `primary` is the ink, not the accent. A single chromatic `accent` (terracotta, oklch ~0.43/0.09/33) is punctuation — index numbers and active links only, ≤3% of the page. Body links get an underline, not color.

## Typography Rules
Two families in deliberate mix. Serif (Spectral → Georgia) sets display, headings, and body. Monospace (IBM Plex Mono) sets every number, label, status, and metadata field. Display is `clamp(1.8rem, 3.6vw, 3rem)`, weight 600, tracking −0.01em, line-height 1.2. Metadata is 0.75rem, uppercase, 0.04em tracking — the monospace alignment is the catalog's backbone. Body is 1rem / line-height 1.6, measure 64–74 chars. Hierarchy comes from the serif/mono contrast, not from many sizes. Scale ratio ≈ 1.25.

## Layout Principles
Max content width 1240px on a 12-column / 20px-gutter grid. Index rows are a CSS-grid table: `[number 1][title 5][author·year 3][class 2][status 1]`. Desktop pairs a fixed 240px left sidebar (filters / classification index) with the main catalog. Vertical rhythm is tight — 40px between blocks (dense). Divide with rules, not space.

## Depth & Elevation
Flat by rule. No gradients, glass, noise, or shadow. Depth is made only by alternating even-row backgrounds (`card` vs `muted`) and hairline rules.

## Shapes
Zero border-radius everywhere — rows, inputs, buttons, thumbnails. Thumbnails are small squares with a 1px hairline border and −30% saturation, never floating cards.

## Component Stylings
- **Index row**: mono number (`001`), serif title, mono metadata columns; 1px bottom rule per row; even rows tinted; hover shifts the row background to `muted` over 120ms linear.
- **Metadata label**: uppercase mono, colon-separated (`AUTHOR: … / YEAR: … / CALL NO.: …`); required on every item.
- **Button**: radius 0, 1px solid `foreground`, transparent fill, uppercase mono label, padding 8px 16px; hover inverts fill/text.
- **Input**: 1px `border`, radius 0, mono text; the search field pairs with a mono result counter.
- **Nav**: left-aligned serif site name + uppercase mono subtitle; a 2px `foreground` rule beneath; search + counter at right.
- **Footer**: 2px top rule; mono classification index in multi-column lists; mono copyright / license line.

## Motion
`motion: none` in principle. The only exception is a 120ms linear row-hover background shift and an instant link underline. No fades, parallax, or scroll-entrance animation.

## Do's and Don'ts
**Do:** list content as index rows/tables; attach a mono uppercase metadata label to every item; build hierarchy from serif+mono contrast; make depth from rules and row alternation; keep terracotta to index numbers and active links.
**Don't:** use rounded corners, box-shadows, or floating cards; use any gradient; add a second accent; use scroll/fade/parallax animation; loosen into airy whitespace; drop metadata; use emoji, illustration, or blobs.

## Responsive Behavior
The 12-column grid and index table collapse toward fewer columns on mobile — number + title + a condensed metadata line stacked below. The left sidebar moves above the catalog or into a filter drawer. Display type scales via `clamp()`. Density is preserved; rows stay tight.

## Agent Prompt Guide
> Build this in the 'Archive Library' style: a beige-paper library catalog. Near-black ink, one terracotta accent on index numbers and active links only (≤3% area). List content as dense index ROWS, not cards — a CSS-grid table of [mono number][serif title][mono author·year·class metadata][status], hairline 1px rules between rows, alternating even-row backgrounds for depth. Spectral serif for headings/body; IBM Plex Mono for every number, label, and metadata field, uppercase with 0.04em tracking, colon-separated (AUTHOR: / YEAR: / CALL NO.:). Zero border-radius, no shadows, no gradients, no scroll animation — only a 120ms linear row-hover shift. Keep it dense.

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-archive-library` (authored spec, not extracted from a live URL), so all tokens are `manual` confidence. Canonical mode is light (beige-paper-native); the dark theme is authored faithfully from the same warm-neutral + terracotta hues rather than measured. `chart-5` is a derived mid-neutral. Both Spectral and IBM Plex Mono are already Google Fonts, so the fallback mapping matches the source almost exactly.