큐레이션 · 오픈 · 무료

Counter Print

디자인 전문가를 위한 미니멀리스트, 이미지 우선의 큐레이션 서점입니다.

01

디자인 DNA

그래픽 디자인 문학을 위한 디지털 갤러리

02

컬러

다채로운 도서 표지가 주요 시각적 관심사가 될 수 있도록 엄격한 단색 캔버스를 사용합니다.

03

타이포그래피

grotesque-sans

• display63px · 700
• body15px · 400

디스플레이 크기에서는 임팩트를 높이기 위해 좌우 자간을 타이트하게 조정합니다. · 색상이 아닌 굵기와 크기만으로 엄격한 시각적 위계를 유지합니다.

04

여백

넓은 수직 패딩으로 콘텐츠 블록을 분리하고, 좁은 수평 간격으로 관련 항목을 그룹화합니다.

05

표면 (라운드 / 그림자 / 경계선)

1px solid rgb(229,231,235)

06

레이아웃

대형 고품질 사진으로 캔버스를 채우는 간단한 격자 기반 레이아웃입니다.

07

모션과 인터랙션

인터랙티브 요소에서 부드러운 불투명도 및 변환 트랜지션.

트랜지션 속성으로 표시되는, 불투명도나 변환에서의 미세한 시각적 변화입니다. · 표준 커서 포인터 피드백으로 즉각적인 반응을 제공합니다.

08

컴포넌트

• button '전체 보기'와 같은 보조 작업에 사용되는, 필 모양의 border-radius를 가진 고스트/아웃라인 버튼입니다.
• card 격자 열 내에서 제품 사진을 강조하기 위해 가장자리까지 확장된 이미지 카드입니다.
• hero 대형 제품 사진과 대담하고 미니멀한 텍스트 분류를 특징으로 하는 이중 열 분할 레이아웃입니다.

09

보이스와 금지 목록

• 톤 전문적이고 미니멀리스트적이며, 높은 수준으로 큐레이션된 톤입니다.
• 헤드라인 대담하고, 자간이 타이트하며, 설명적입니다.
• CTA 과장되지 않으며, 명확하고 기능적인 언어와 필 모양의 아웃라인 버튼을 사용합니다.

• UI 요소에 장식용 또는 세리프 폰트를 사용하지 마세요 — 스크린샷은 엄격한 기하학적/고트릭스 산세리프 체계를 보여줍니다.
• 버튼이나 강조에 밝은 강조색을 사용하지 마세요 — 스크린샷은 지배적인 강조색이 없는 엄격한 단색 UI를 보여줍니다.
• 무거운 드롭 섀도우나 부드러운 글로우를 적용하지 마세요 — 스크린샷은 그림자 사용이 없는 완전히 평평한 표면을 보여줍니다.
• 주요 콘텐츠 카드에 둥근 모서리를 사용하지 마세요 — 스크린샷은 제품 이미지와 레이아웃 블록에 날카로운 모서리를 보여줍니다.
• 양쪽 정렬 텍스트나 밀도 높은 문단을 사용하지 마세요 — 스크린샷은 충분한 수직 간격을 가진 왼쪽 정렬 텍스트를 보여줍니다.
• 불필요한 테두리나 구분선을 추가하지 마세요 — 스크린샷은 섹션을 분리하기 위해 여백과 격자 정렬을 사용합니다.
• 피하기: 지나치게 과장된 홍보성 언어
• 피하기: 복잡하고 지저분한 레이아웃
• 피하기: 장식용 폰트

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko