큐레이션 · 오픈 · 무료

Sharp Type

글로벌 디지털 타이포파운리를 위한 정교하고 타이포그래피 중심의 웹사이트.

01

디자인 DNA

프리미엄 서체를 위한 정제된 갤러리 카탈로그.

02

컬러

미니멀리스트 흑백에 서체 분류를 위한 고채도의 다양한 점 표시기.

03

타이포그래피

geometric-sans · humanist-sans · monospace

• display40px · 700
• body21px · 400
• caption14px · 400

굵은 두께(700)는 제목과 특정 강조 단어에만 엄격히 사용합니다. · 큰 전시용 텍스트에는 좁은 자간(음수 값)을 유지합니다. · 모든 본문 및 내비게이션 요소에는 표준 두께(400)를 사용합니다.

04

여백

여백, 간격 및 마진에 일관되게 7px 기본 단위가 사용됩니다.

05

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

주요 구분선에는 얇은 1px 검은색 선이 사용되며, 보조 테두리에는 밝은 회색(rgb(189, 189, 189))이 사용됩니다.

rgb(128, 128, 128) 0px 0px 5px 0px

06

레이아웃

모바일에서 단일 컬럼에서 서체 카탈로그를 위한 3열 그리드로 전환되는 유동적 레이아웃입니다.

07

모션과 인터랙션

모든 요소에 `all 0.3s`를 통해 전환이 적용됩니다. · 내비게이션 메뉴와 같은 인터랙티브 요소는 오른쪽 위치 슬라이딩 패널을 사용할 가능성이 높습니다.

모든 인터랙티브 요소에 표준 포인터 커서(pointer)가 사용됩니다. · 표준 웹 인터랙션을 위한 포인트-다운 시 즉각적인 반응.

08

컴포넌트

• button 2px 파란색 테두리, 둥근 끝, 대문자 파란색 텍스트가 있는 고스트 버튼.
• card 서체 목록을 위한 미니멀 카드 유형 행으로, 얇은 선으로 구분됩니다.
• chip 서체 이름 옆에 배치된 작고 원형의 색상 표시기(점).
• input 제공된 스크린샷에서 보이지 않음.
• hero 혼합된 글꼴 두께와 단일 색상 점이 있는 크고 설명적인 헤드라인을 특징으로 하는 미니멀리스트 히어로.

09

보이스와 금지 목록

• 톤 전문적, 권위적, 그리고 미니멀리스트.
• 헤드라인 명확하고 설명적이며, 서체의 기술적 범위를 강조합니다.
• CTA 단순하며, 색상과 테두리를 통해 시각적으로 돋보이는 대문자.

• 큰 배경에 지배적인 고크로마 악센트 색상을 사용하지 마세요 — 스크린샷에서 색상은 작고 채도 높은 점 표시기에만 엄격히 사용됩니다.
• 다크 모드 또는 유색 배경을 사용하지 마세요 — 스크린샷에서 엄격히 흰색(#FFFFFF) 배경을 보여줍니다.
• 모든 요소에 두꺼운 드롭 섀도우를 사용하지 마세요 — 스크린샷에서 특정 요소에만 단 하나의 미세한 섀도우가 사용됩니다.
• 메인 UI 또는 내비게이션에 세리프 글꼴을 사용하지 마세요 — 스크린샷에서 이러한 요소에는 sans-serif 서체(humanist-sans로 분류됨)가 사용됩니다.
• 내비게이션 또는 목록에 중앙 정렬 텍스트를 사용하지 마세요 — 스크린샷에서 모든 내비게이션 및 서체 목록은 엄격히 좌측 정렬입니다.
• 단일 구성 요소에 동시에 여러 악센트 색상을 사용하지 마세요 — 스크린샷에서 서체 항목당 하나의 색상이 사용됩니다.
• 피하기: 복잡한 그라데이션이나 두꺼운 드롭 섀도우를 사용하지 마세요.
• 피하기: 지나치게 장난스럽거나 캐주얼한 언어를 피하세요.
• 피하기: 서체 자체에서注意力을 빼앗는 복잡한 레이아웃이나 과도한 이미지를 피하세요.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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