# Archive Library

디지털 아카이브·도서관 카탈로그 미감 — 빽빽한 인덱스 행, 세리프+모노 혼합, 종이빛 베이지 위 검정, 모노 메타데이터 라벨.

- taxonomy: archival · archive, library-catalog, index-table, serif-mono-mix, metadata-labels, paper-beige, dense, hairline-rules · complexity=medium
- page types: docs, editorial, landing
- best for: 아카이브·카탈로그·색인 사이트, 문서·자료 라이브러리, 메타데이터가 풍부한 목록형 콘텐츠
- avoid for: 여백 중심의 미니멀 랜딩, 일러스트·이모지 중심 소비자 앱, 화려한 마케팅 히어로
- provenance: authored (design-diversity 팩 'web-archive-library' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual

## Design rules

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


## Tokens (theme.css — use these values verbatim, do not re-derive)

```css
/* Archive Library — theme.css (generated, do not edit) */
:root {
  --radius: 0px;
  --radius-selector: 0px;
  --radius-field: 0px;
  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Spectral', 'Georgia', 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  --font-display: 'Spectral', 'Georgia', serif;
  --spacing: 8px;
  --shadow: 0px 0px 0px 0px color-mix(in oklab, oklch(0.231 0.010 88.8) 0%, transparent);
  --ks-display-weight: 600;
  --ks-display-tracking: -0.01em;
  --background: oklch(0.916 0.019 90.6);
  --foreground: oklch(0.231 0.010 88.8);
  --card: oklch(0.940 0.017 91.6);
  --card-foreground: oklch(0.231 0.010 88.8);
  --popover: oklch(0.940 0.017 91.6);
  --popover-foreground: oklch(0.231 0.010 88.8);
  --primary: oklch(0.231 0.010 88.8);
  --primary-foreground: oklch(0.916 0.019 90.6);
  --secondary: oklch(0.885 0.024 90.8);
  --secondary-foreground: oklch(0.231 0.010 88.8);
  --muted: oklch(0.885 0.024 90.8);
  --muted-foreground: oklch(0.511 0.019 88.1);
  --accent: oklch(0.431 0.091 33.0);
  --accent-foreground: oklch(0.940 0.017 91.6);
  --destructive: oklch(0.431 0.091 33.0);
  --destructive-foreground: oklch(0.940 0.017 91.6);
  --border: oklch(0.777 0.026 89.2);
  --input: oklch(0.777 0.026 89.2);
  --ring: oklch(0.431 0.091 33.0);
  --chart-1: oklch(0.231 0.010 88.8);
  --chart-2: oklch(0.431 0.091 33.0);
  --chart-3: oklch(0.511 0.019 88.1);
  --chart-4: oklch(0.777 0.026 89.2);
  --chart-5: oklch(0.640 0.030 88.5);
}

.dark {
  --background: oklch(0.205 0.008 88.5);
  --foreground: oklch(0.905 0.016 90.5);
  --card: oklch(0.245 0.009 88.5);
  --card-foreground: oklch(0.905 0.016 90.5);
  --popover: oklch(0.245 0.009 88.5);
  --popover-foreground: oklch(0.905 0.016 90.5);
  --primary: oklch(0.905 0.016 90.5);
  --primary-foreground: oklch(0.205 0.008 88.5);
  --secondary: oklch(0.285 0.010 88.5);
  --secondary-foreground: oklch(0.905 0.016 90.5);
  --muted: oklch(0.285 0.010 88.5);
  --muted-foreground: oklch(0.660 0.020 88.5);
  --accent: oklch(0.585 0.098 34.0);
  --accent-foreground: oklch(0.205 0.008 88.5);
  --destructive: oklch(0.585 0.098 34.0);
  --destructive-foreground: oklch(0.205 0.008 88.5);
  --border: oklch(0.360 0.012 88.5);
  --input: oklch(0.360 0.012 88.5);
  --ring: oklch(0.585 0.098 34.0);
  --chart-1: oklch(0.905 0.016 90.5);
  --chart-2: oklch(0.585 0.098 34.0);
  --chart-3: oklch(0.660 0.020 88.5);
  --chart-4: oklch(0.360 0.012 88.5);
  --chart-5: oklch(0.520 0.024 88.5);
}
```

## Golden example (exemplar.html — match this structure and token usage)

```html
<!-- Golden snippet for "Archive Library". Fragment — assumes the style's CSS variables
     (--background, --foreground, --accent, --muted, --card, --border, --muted-foreground,
     --font-serif, --font-mono, --radius, ...) are in scope. Tokens only; no literal colors/images.
     Signature: dense index rows — mono number + serif title + mono metadata columns, hairline rules,
     alternating row backgrounds, no cards, no shadows. -->
<section style="background:var(--background); color:var(--foreground); font-family:var(--font-serif); padding:clamp(1.5rem,4vw,2.5rem); max-width:1240px; margin:0 auto;">
  <header style="display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-bottom:.75rem; border-bottom:2px solid var(--foreground);">
    <div>
      <h1 style="margin:0; font-weight:600; font-size:clamp(1.8rem,3.6vw,3rem); line-height:1.2; letter-spacing:-.01em;">The Paper Archive</h1>
      <p style="margin:.35rem 0 0; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-foreground);">Digital Archive · Est. 2026</p>
    </div>
    <p style="margin:0; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-foreground);">Records: 004</p>
  </header>

  <!-- Column header -->
  <div style="display:grid; grid-template-columns:2.5rem 5fr 3fr 2fr 1.5fr; gap:20px; padding:.6rem 0; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-foreground);">
    <span>No.</span><span>Title</span><span>Author · Year</span><span>Call No.</span><span>Status</span>
  </div>

  <!-- Index rows: even rows tinted via --card, hairline bottom rule -->
  <div style="display:grid; grid-template-columns:2.5rem 5fr 3fr 2fr 1.5fr; gap:20px; padding:.7rem 0; border-bottom:1px solid var(--border); align-items:baseline;">
    <span style="font-family:var(--font-mono); font-size:.8rem; color:var(--accent);">001</span>
    <span style="font-weight:600; font-size:1rem; line-height:1.35;">On the Order of Things</span>
    <span style="font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em; color:var(--muted-foreground);">Foucault, M. · 1966</span>
    <span style="font-family:var(--font-mono); font-size:.75rem; color:var(--muted-foreground);">B2430.F72</span>
    <span style="font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; color:var(--muted-foreground);">Shelf</span>
  </div>
  <div style="display:grid; grid-template-columns:2.5rem 5fr 3fr 2fr 1.5fr; gap:20px; padding:.7rem 0; border-bottom:1px solid var(--border); align-items:baseline; background:var(--card);">
    <span style="font-family:var(--font-mono); font-size:.8rem; color:var(--accent);">002</span>
    <span style="font-weight:600; font-size:1rem; line-height:1.35;">Cataloguing the Ephemeral</span>
    <span style="font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em; color:var(--muted-foreground);">Reed, J. · 2019</span>
    <span style="font-family:var(--font-mono); font-size:.75rem; color:var(--muted-foreground);">Z695.R43</span>
    <span style="font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; color:var(--accent);">Loan</span>
  </div>
  <div style="display:grid; grid-template-columns:2.5rem 5fr 3fr 2fr 1.5fr; gap:20px; padding:.7rem 0; border-bottom:1px solid var(--border); align-items:baseline;">
    <span style="font-family:var(--font-mono); font-size:.8rem; color:var(--accent);">003</span>
    <span style="font-weight:600; font-size:1rem; line-height:1.35;">Marginalia &amp; Method</span>
    <span style="font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em; color:var(--muted-foreground);">Okoye, A. · 2023</span>
    <span style="font-family:var(--font-mono); font-size:.75rem; color:var(--muted-foreground);">PN81.O46</span>
    <span style="font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; color:var(--muted-foreground);">Shelf</span>
  </div>

  <!-- Detail metadata block: colon-separated mono labels, thumbnail as tokened bordered box (no image) -->
  <article style="display:grid; grid-template-columns:96px 1fr; gap:20px; margin-top:2.5rem; padding-top:1rem; border-top:2px solid var(--foreground);">
    <div style="width:96px; height:96px; border:1px solid var(--border); background:var(--muted);"></div>
    <div>
      <h2 style="margin:0 0 .5rem; font-weight:600; font-size:1.35rem; line-height:1.3;">Cataloguing the Ephemeral</h2>
      <dl style="margin:0; display:grid; grid-template-columns:auto 1fr; gap:.25rem 1rem; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em; color:var(--muted-foreground);">
        <dt style="text-transform:uppercase;">Author:</dt><dd style="margin:0; color:var(--foreground);">Reed, Jonathan</dd>
        <dt style="text-transform:uppercase;">Year:</dt><dd style="margin:0; color:var(--foreground);">2019</dd>
        <dt style="text-transform:uppercase;">Call No.:</dt><dd style="margin:0; color:var(--foreground);">Z695.R43</dd>
      </dl>
    </div>
  </article>
</section>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/archive-library.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `<style>` tag and follow the exemplar's markup pattern.
- dark mode: toggle the `.dark` class (both variants are in the tokens above).
- before finishing: re-check every Don't in the Design rules section above against your output.