Archive / Library

# Archive / Library — web 디자인 팩

## 이 스타일의 정체성
디지털 아카이브·도서관 카탈로그 미감이다. 빽빽한 표·리스트·인덱스가 화면을 채우고, 세리프와 모노스페이스가 혼합되며, 종이빛 베이지 배경에 검정 텍스트. 번호 매김, 메타데이터 라벨, 헤어라인 룰. 무엇을 보면 이 스타일임을 아는가 — 콘텐츠가 카드가 아니라 인덱스 행(번호 + 제목 + 메타 컬럼)으로 나열되고, 모노스페이스로 짠 메타데이터 라벨이 모든 항목에 붙는다.

## 색
- 배경: `#e8e3d5` (종이빛 베이지). 표면(테이블 행 교차)은 `#efebdf`와 `#e8e3d5`.
- 텍스트: `#1f1d18` (본문·제목), 메타·라벨은 `#6b665a`.
- 강조: 없음에 가까움 — 인덱스 번호와 활성 링크에 `#7a3b2e`(테라코타 잉크) 한 톤만, 면적 3% 이하.
- 룰 라인: `#bdb6a4` 헤어라인.

## 타이포그래피
- 제목/헤드라인: `Spectral`(Google Fonts, 세리프) weight 500~600, 대체 `Georgia, serif`. 헤드라인 `clamp(1.8rem, 3.6vw, 3rem)`, `letter-spacing: -0.01em`, line-height 1.2.
- 메타데이터/라벨/인덱스 번호: `IBM Plex Mono`(Google Fonts) `0.75rem`, weight 400, 대문자 가능, `letter-spacing: 0.04em`. 등폭 정렬이 카탈로그의 핵심.
- 본문: `Spectral` `1rem`, weight 400, line-height 1.6, 측정 64~74자.
- 위계는 세리프+모노 혼합(`mixed`)으로 만든다 — 제목은 세리프, 모든 부속 데이터는 모노.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭: 1240px. 좌우 패딩 모바일 16px / 데스크탑 40px.
- 브레이크포인트: 640px, 1024px.
- `strict-grid` — 12열 그리드, 거터 20px. 인덱스/카탈로그 행은 CSS 그리드 테이블: `[번호 1열][제목 5열][저자/연도 3열][분류 2열][상태 1열]`.
- 섹션 수직 리듬: 블록 간 40px(dense). 여백을 아끼고 룰로 구획.
- 좌측 고정 사이드바(필터·분류 인덱스, 240px) + 우측 메인 카탈로그 — 데스크탑.

## 형태 / 질감
- 모서리: radius `0`. 전 요소 직각.
- 보더: 헤어라인 `1px solid #bdb6a4` — 테이블 행 구분, 셀 구분은 `0.5px`. 섹션 구분은 `2px solid #1f1d18`.
- 그림자: 전면 금지. 깊이는 행 교차 명도 차로만.
- 카드 대신 인덱스 행 — 호버 시 행 배경 `#dfd9c8`로 살짝 어둡게.
- 메타데이터 라벨: 대문자 모노, 콜론 구분(`AUTHOR: ··· / YEAR: ··· / CALL NO.: ···`).
- 이미지(썸네일): 작은 정사각, 1px 헤어라인 보더, 채도 -30%.

## 모션
- `motion: none` — 카탈로그는 정적이다.
- 호버만 허용: 행 배경색 전환 `120ms linear`, 링크는 밑줄 즉시 표시.
- 스크롤 애니메이션·페이드·패럴랙스 전면 금지.

## 하지 말 것
- 보라 그라디언트·어떤 그라디언트도 금지.
- 둥근 모서리·박스 섀도·카드(떠 있는 면) 금지 — 콘텐츠는 인덱스 행/테이블.
- 강조색 추가 금지. 테라코타 잉크 한 톤, 3% 이하.
- 스크롤 진입 애니메이션·패럴랙스 금지.
- 넓은 여백으로 듬성하게 만들지 말 것 — 정보 밀도(dense)가 정체성.
- 메타데이터를 빼지 말 것 — 모든 항목에 모노 메타 라벨 필수.
- 이모지·일러스트·blob 금지.

## 적용 예
- **히어로(아카이브 헤더):** 좌측 정렬 세리프 사이트명 + 모노 부제(`DIGITAL ARCHIVE · EST. 2026`). 아래 2px 룰. 우측에 모노로 짠 검색창(1px 보더)과 항목 수 카운터.
- **카탈로그(메인):** 인덱스 행 리스트 — 각 행은 좌측 모노 번호(`001`), 세리프 제목, 모노 메타 컬럼(저자·연도·분류·상태). 행마다 하단 1px 룰, 짝수 행 배경 교차. 호버 시 행 어둡게.
- **푸터:** 상단 2px 룰. 모노 라벨로 분류 인덱스를 다단 컬럼 나열, 색 반전 없음. 하단 모노 카피라이트·라이선스 라인.