큐레이션 · 오픈 · 무료

Footer

대담한 타이포그래피와 에디토리얼 표현에 집중하는 큐레이션 디자인 갤러리입니다.

01

디자인 DNA

깔끔한 타이포그래피 갤러리 큐레이션 플랫폼

02

컬러

화이트스페이스와 다크 텍스트 간의 고대비를 갖춘 순수한 단색 톤

03

타이포그래피

grotesque-sans · humanist-sans

• display32px · 600

본문 텍스트는 18px 크기와 -0.54px 트래킹을 사용합니다 · 보조 텍스트는 14px 크기와 -0.42px 트래킹을 사용합니다 · 제목은 600 웨이트를 사용합니다 · 본문 텍스트는 400 웨이트를 사용합니다

04

여백

4, 8, 12, 16, 24, 40, 60의 일관된 간격 증가폭

05

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

카드와 버튼에 1px solid rgba(36,36,36,0.12) 테두리 적용

06

레이아웃

갤러리 카드를 위한 다중 열 격자 레이아웃

07

모션과 인터랙션

hover 시 은은한 페이드 전환 · 부드러운 색상 및 background-color 변화 · 상태 변화를 위한 opacity 전환

0.15초 동안의 색상 및 background-color 전환 · 표준 포인터 커서

08

컴포넌트

• button 1600px border-radius를 가진 알약 형태로, 블랙 또는 화이트 채움색 적용
• card 최소한의 테두리와 명확한 타이포그래피를 갖춘 이미지 중심 디자인
• chip 필터링을 위한 작은 둥근 태그
• hero 미세한 애니메이션이 적용된 대형 타이포그래피 소개 섹션

09

보이스와 금지 목록

• 톤 전문적이고 깔끔하며 큐레이션된
• 헤드라인 볼드하고 트래킹이 좁은, 대문자 또는 큰 글꼴 스타일
• CTA 알약 형태 버튼을 사용한 직접적이고 행동 지향적인 스타일

• 화려한 악센트 컬러를 사용하지 마세요 — 스크린샷은 순수한 단색 팔레트를 보여줍니다
• 알약 버튼 외에는 둥근 모서리를 사용하지 마세요 — 스크린샷은 카드의 날카로운 모서리를 보여줍니다
• 드롭 섀도우를 사용하지 마세요 — 스크린샷은 평평하고 테두리로 정의된 표면을 보여줍니다
• 장식용 폰트를 사용하지 마세요 — 스크린샷은 깔끔한 grotesque-sans와 humanist-sans를 사용합니다
• 밀도 높은 레이아웃을 만들지 마세요 — 스크린샷은 충분한 여백과 명확한 계층을 사용합니다
• 여러 폰트 패밀리를 사용하지 마세요 — 스크린샷은 주로 Inter를 다양한 웨이트로 활용합니다
• 피하기: 어지러운 인터페이스
• 피하기: 과도한 장식 요소
• 피하기: 모호한 표현

10

팩 안의 실제 스크린샷

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

11

System Prompt

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