styles
← 갤러리

Archive Library

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

archival archivelibrary-catalogindex-tableserif-mono-mixmetadata-labelspaper-beigedensehairline-rules
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

카드가 아니라 인덱스 행(번호 + 세리프 제목 + 모노 메타 컬럼)으로 콘텐츠를 나열하는 카탈로그 스타일. 종이빛 베이지 배경에 near-black 잉크, 헤어라인 룰과 짝수 행 명도 교차로 깊이를 만든다. 위계는 세리프(제목·본문)와 모노스페이스(라벨·번호·메타) 혼합으로 만들고, 강조는 테라코타 잉크 한 톤을 면적 3% 이하로만 쓴다. 그림자·둥근 모서리·그라디언트·모션은 배제하고 정보 밀도(dense)를 정체성으로 삼는다.

타입 스케일

display Ag 스타일 견본 Style Specimen
h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
h3 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
meta Ag 스타일 견본 Style Specimen

혼합 위계: 제목·본문은 Spectral(세리프), 모든 부속 데이터(번호·라벨·메타·상태)는 IBM Plex Mono(등폭). 등폭 정렬이 카탈로그의 핵심 — 메타는 0.75rem 대문자 + 0.04em 자간으로 라벨화. 두 폰트 모두 Google Fonts라 대체 매핑이 원본과 거의 동일.

골든 예제 (exemplar)

The Paper Archive

Digital Archive · Est. 2026

Records: 004

No.TitleAuthor · YearCall No.Status
001 On the Order of Things Foucault, M. · 1966 B2430.F72 Shelf
002 Cataloguing the Ephemeral Reed, J. · 2019 Z695.R43 Loan
003 Marginalia & Method Okoye, A. · 2023 PN81.O46 Shelf

Cataloguing the Ephemeral

Author:
Reed, Jonathan
Year:
2019
Call No.:
Z695.R43

Do

  • 콘텐츠를 카드가 아닌 인덱스 행/테이블로 나열한다
  • 모든 항목에 모노 대문자 메타데이터 라벨(콜론 구분)을 붙인다
  • 제목·본문은 세리프, 번호·라벨·메타는 모노로 위계를 만든다
  • 깊이는 그림자가 아니라 헤어라인 룰과 짝수 행 명도 교차로만 낸다
  • 테라코타 강조는 인덱스 번호·활성 링크에만, 면적 3% 이하

Don't

  • 둥근 모서리·박스 섀도·떠 있는 카드 금지
  • 어떤 그라디언트도 금지
  • 강조색 추가 금지 — 테라코타 한 톤만
  • 스크롤 진입 애니메이션·페이드·패럴랙스 금지
  • 넓은 여백으로 듬성하게 만들지 말 것 — dense가 정체성
  • 메타데이터를 생략하지 말 것 · 이모지·일러스트·blob 금지

컴포넌트 노트

index_row
카드가 아닌 인덱스 행. 좌측 모노 번호(001), 세리프 제목, 모노 메타 컬럼(저자·연도·분류·상태). 행마다 하단 1px 룰, 짝수 행 배경 교차(card). 호버 시 행 배경 muted로 살짝 어둡게(120ms linear).
metadata_label
대문자 모노, 콜론 구분 — 'AUTHOR: ··· / YEAR: ··· / CALL NO.: ···'. 모든 항목에 필수.
button
radius 0, 1px solid foreground, 배경 투명, 모노 대문자 라벨, padding 8px 16px. 호버 시 배경 foreground / 글자 background 반전.
input
1px solid border, radius 0, 모노 텍스트. 아카이브 검색창은 모노로 짜고 우측에 항목 수 카운터.
thumbnail
작은 정사각, 1px 헤어라인 border, 채도 -30%. 떠 있는 카드 아님.
nav
상단 좌측 정렬 세리프 사이트명 + 모노 부제(대문자). 아래 2px foreground 룰. 우측 모노 검색창 + 카운터.
footer
상단 2px 룰. 모노 라벨로 분류 인덱스를 다단 컬럼 나열. 하단 모노 카피라이트·라이선스 라인.