Risograph Print
리소그래프 인쇄의 미감을 웹으로 — 형광 핑크·코발트·머스터드 스폿 잉크가 1~4px 어긋나고, 망점과 그레인이 종이빛 화면을 덮는다.
설명
등사 인쇄기(리소그래프)의 물성을 절차적 CSS로 재현하는 스타일. 재생 종이 톤 배경 위에 2~3색 스폿 잉크를 mix-blend-mode: multiply로 쌓고, 색 레이어를 의도적으로 1~4px 어긋나게(misregistration) 배치한다. 모든 색 면에는 망점(halftone) 도트와 feTurbulence 그레인이 깔리며, 잉크가 겹치는 영역에는 제3의 색(핑크+블루=보랏빛)이 생긴다. 깊이는 그림자가 아니라 어긋난 색 레이어로 만들고, 헤드라인은 채널 분리된 2색 text-shadow를 단 초굵은 디스플레이 타입이다.
타입 스케일
display Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
label Ag 스타일 견본 Style Specimen
디스플레이는 Archivo Black 900 단일 웨이트 — 잉크가 뭉친 인쇄 헤드라인. 헤드라인에는 2색 채널 분리 text-shadow(코발트 +2px, 핑크 -1px)를 단다. 라벨은 대문자 Archivo 700, 본문은 Archivo 400 (측정 60~70자).
골든 예제 (exemplar)
Do
- 모든 색 면에 망점 또는 그레인 텍스처를 깐다 — 매끈한 솔리드 면 금지
- 색 레이어를 1~4px 의도적으로 어긋나게(misregistration) — 깊이는 어긋난 잉크 레이어로
- 잉크가 겹치는 곳은 mix-blend-mode: multiply — 핑크+블루의 보랏빛 중첩은 의도된 것
- 헤드라인에 2색 채널 분리 text-shadow (코발트 +2px, 핑크 -1px)
- 한 화면에 스폿 잉크 2~3색만 운용
Don't
- 보라 그라디언트·부드러운 그라디언트 배경 금지 — 톤은 망점으로만
- 망점·그레인·misregistration 셋 중 하나라도 생략 금지 (그레인 opacity 0.12 필수)
- soft blur 박스 섀도 금지 — 깊이는 하드 오프셋 색 레이어로
- 잉크 색 4색 이상 동시 사용 금지 (한 화면 2~3색)
- 둥근 모서리 radius > 4px 금지
- 이모지·반들거리는 3D·글래스모피즘 금지
- 패럴랙스·긴 페이드 모션 금지 — 모션은 짧고 또렷하게
컴포넌트 노트
- button
- base: 잉크색 솔리드 면 + 망점 오버레이 + 종이색 텍스트, radius 2px, 보더 없음, 대문자 label 타이포, padding 12px 24pxhover: 뒤에 깔린 다른 잉크색 오프셋 레이어가 5px로 더 어긋남 + 잉크색 스왑, 140msfocus: 2px 코발트(ring) outline, offset 2pxdisabled: opacity 0.5, 망점 제거primary_variant: 형광 핑크(primary) 면 — 뒤에 코발트 오프셋 레이어
- card
- 잉크색 또는 종이색 솔리드 블록, 보더 없음, 망점 톤 + 그레인. 모서리에 작은 재단선(crop mark) 장식. 호버 시 오프셋 레이어 어긋남. padding 24~32px.
- input
- 종이색 배경 + 2px 잉크 블랙 풀 보더, radius 2px. 포커스 시 보더가 코발트로 스왑 + 1px 어긋난 핑크 라인.
- nav
- 종이색 배경 + 하단 2px 잉크 룰(살짝 misregistration 된 핑크 1px 라인 동반). 좌측 청키 로고, 우측 대문자 Archivo 라벨 링크.
- image
- grayscale(1) 후 단일 잉크색 multiply 듀오톤 + 망점 오버레이. 풀컬러 사진 원본 그대로 쓰지 않는다.