styles
← 갤러리

Tactile Luxury Editorial

크림-샌드 종이 위에 미세한 그레인 텍스처와 비대칭 매거진 그리드를 얹은 촉각적 럭셔리 에디토리얼 — 세리프와 산세리프가 한 면에서 만난다.

warm-paper tactileluxury-editorialwarm-papermagazine-gridserif-sans-mixgrain-textureearth-tone
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

순백이 아닌 따뜻한 크림·샌드 페이퍼를 바탕으로, 절차적 그레인·패브릭 위브 텍스처를 미세하게 깔고 그 위에 비대칭 다단 매거진 레이아웃을 펼친다. 트랜지셔널 세리프 헤드라인(Spectral)과 산세리프 본문(Inter)을 섞고, 살짝 둥근(radius 8px) 카드들이 종이가 겹친 듯 따뜻한 잉크-브라운 그림자로 떠 있다. 강조는 머스타드와 올리브 어스 톤 딱 2개로 제한하며, 두 색을 한 컴포넌트에서 동시에 쓰지 않는다.

타입 스케일

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

세리프+산세리프 혼합. 디스플레이/헤드라인은 트랜지셔널 세리프 Spectral(400~600), 리드·인용은 Source Serif 4 italic, 키커·본문·메타는 Inter. 키커는 대문자 + 넓은 자간(0.16em) 머스타드 라벨. 본문 측정 62~72자, line-height 1.72로 넉넉히.

골든 예제 (exemplar)

Volume 04 — The Warmth Issue

Paper you can almost feel.

Grain, sand, and ink — an editorial ground that reads like it was printed, not rendered.

Read the issue
Plate I — pressed cotton, natural light

Essay

The return of texture

Flatness gave way to warmth; screens learned to feel like surfaces again.

p. 012

Field Note

Two earth tones

Mustard for emphasis, olive for rules — never mixed inside one component.

p. 018

Craft

Serif meets sans

Spectral headlines, Inter body — one page, two voices in harmony.

p. 024

Do

  • 배경은 항상 크림-샌드 계열(순백 금지) + 미세한 절차적 그레인 오버레이
  • 세리프 헤드라인 + 산세리프 본문을 한 면에서 섞는다
  • 비대칭 다단 그리드 — 칼럼 폭을 단마다 다르게, 카드는 오프셋으로 어긋나게
  • 강조는 머스타드·올리브 어스 톤 2개만, 합산 면적 8% 이하로 역할 분리
  • 그림자는 잉크-브라운 톤, 카드는 radius 8px 종이 모서리

Don't

  • 순백(#ffffff) 배경 금지 — 항상 크림-샌드
  • 회색(중성 그레이) 그림자 금지 — 잉크-브라운 톤만
  • 균등 분할 반복 그리드 금지 — 비대칭·오프셋이 정체성
  • 머스타드·올리브를 한 컴포넌트에 동시 사용 금지, 강조색 3개 이상 금지
  • 큰 radius(>12px)·완전 각진(radius 0) 카드 금지 — 8px 고정
  • 글래스/블러 패널·네온·다색 그라디언트·그라디언트 텍스트·이모지·blob 금지
  • 스톡 텍스처 이미지 파일 의존 금지 — 텍스처는 SVG/CSS로 생성

컴포넌트 노트

button
base: 머스타드 솔리드(primary) 배경 + 크림 텍스트, radius 6px, padding 14px 28px, weight 600
ghost_variant: 1px solid foreground(잉크) + 잉크 텍스트, 배경 투명
hover: translateY(-1px) + 그림자 한 단계, 260ms ease-out
focus: 2px offset outline (ring=머스타드)
card
표면 card(밝은 크림), radius 8px, 1px 잉크-브라운 12% 보더, 따뜻한 다단 그림자. 안에 작은 이미지 + 머스타드 키커 + Spectral 제목 + Inter 발췌 + 올리브 1px 룰 + 페이지번호 메타. 3열로 깔되 가운데를 32px 아래로 오프셋.
input
1px 보더 + radius 6px, 크림 표면. 포커스 시 border가 머스타드(ring)로.
nav
상단 헤어라인 하단 룰. 좌측 Spectral 세리프 사이트명, 우측 Inter 대문자 키커 링크.
image
radius 8px, 위에 mix-blend-mode multiply 그레인 오버레이를 살짝 얹어 인쇄된 느낌. 채도 -8%.
footer
진한 샌드(secondary) 배경, 상단 2px 머스타드 룰. 좌측 Spectral 사이트명, 우측 Inter 대문자 메뉴 다단, balanced 패딩(64px), 하단 올리브 카피라이트.