styles
← 갤러리

News Journal Grid

신문 1면을 웹으로 옮긴 미감 — 다단 밀집 그리드, 굵은 세리프 헤드라인, 가는 룰 라인 구획, 빨강 한 점.

print-editorial newspaper-front-pagedense-gridserif-headlinesrule-dividerskicker-labelsmonochrome-plus-red
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

브로드시트 신문·저널 1면의 조판 문법을 그대로 따르는 스타일. 한 화면에 기사 블록이 6개 이상 빽빽이 들어차고, 모든 구획은 배경색·그림자 없이 검정 룰 라인(0.5px/1px/3px 위계)으로만 나뉜다. 헤드라인은 굵은 세리프(Playfair Display), 본문은 읽기용 세리프(Source Serif 4), 키커·바이라인은 작은 산세리프(Archivo) 대문자. 흑백 위주에 빨강 #c8102e 단 하나를 카테고리 키커와 속보 배지에만 5% 이하로 쓴다. 밀집(dense)이 곧 권위 — 여백을 아끼고 룰 라인으로 호흡을 만든다.

타입 스케일

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

3서체 분업 — 헤드라인은 Playfair Display 700~900(display~h3, 세리프 전용), 본문은 Source Serif 4 400(측정 60~72자), 키커·메타·바이라인은 Archivo 산세리프(키커는 대문자+빨강, 데이트라인은 대문자). 헤드라인 크기 4단계가 기사 중요도 위계를 만든다.

골든 예제 (exemplar)

Saturday, July 12, 2026World · Business · Science · Opinion

The Daily Ledger

World

Twelve Columns, One Gutter Treaty

Delegates agreed the lead takes seven and the sidebar five.

Opinion

Against the Rounded Corner

A right angle never apologized, and neither should a layout.

Culture

One Red, Well Spent

Restraint, critics write, is the loudest color on the page.

Do

  • 구획은 오직 룰 라인으로 — 두께 위계 0.5px(기사 내)/1px(블록)/3px(섹션)를 지킨다
  • 헤드라인 크기 4단계(3.4rem→1.6rem→1.2rem→1rem)로 기사 중요도를 드러낸다
  • 빨강은 카테고리 키커·속보 배지·핵심 링크에만, 면적 5% 이하
  • 한 화면에 기사 블록 6개 이상 — 밀집(dense)이 정체성
  • 키커·바이라인은 Archivo 산세리프 대문자, 데이트라인도 대문자

Don't

  • 보라 그라디언트 포함 어떤 그라디언트도 금지
  • 둥근 모서리·박스 섀도·카드 배경색 금지 — 구획은 룰 라인뿐
  • 빨강 외 강조색 추가 금지, 빨강도 5% 이하
  • 스크롤 진입 애니메이션·패럴랙스·페이드 금지 — 신문은 정적이다
  • 큰 여백으로 듬성하게 만들지 말 것
  • 산세리프를 헤드라인에 쓰지 말 것 — 헤드라인은 세리프 전용
  • 이모지·일러스트·블롭 도형 금지

컴포넌트 노트

masthead
상단에 큰 세리프 사이트명(Playfair 800) 중앙 또는 좌측 + 좌측 날짜·우측 섹션 메뉴(Archivo 메타), 아래 3px 룰(더블 룰 허용: 3px 위에 0.5px 헤어라인).
card
기사 블록 = 룰 라인 구획(배경·그림자·radius 없음). 구성 순서: 키커(빨강 대문자) → 세리프 헤드라인 → 2줄 발췌 → 바이라인(메타). 그리드 셀 사이 1px 룰.
button
radius 0, 1px solid foreground, 배경 투명, Archivo 대문자 0.75rem, padding 10px 20px. 호버 시 잉크 채움 반전(즉시). primary 변형 = 잉크 채움.
input
1px solid input 풀 보더, radius 0, 배경 background. 포커스 시 보더 유지 + 2px ring 아웃라인. 언더라인 전용 변형 허용.
nav
마스트헤드 하단 룰에 붙는 섹션 링크 행(Archivo 대문자 소형). 스티키 아님. 호버 = 빨강 100ms.
badge
'속보' 배지 = accent 채움 + 대문자 키커 타이포, radius 0. 페이지당 1개 수준.
pullquote
좌측 3px 빨강 세로 룰 + 큰 세리프 인용(h1 크기).
image
흑백 또는 채도 -40%(filter: grayscale/saturate), 보더 없음, 캡션 0.72rem 메타 폰트 하단.