큐레이션 · 오픈 · 무료

Georgehatton

크리에이티브 디렉터를 위한, 높은 수준으로 절제된 타이포그래피 중심 포트폴리오.

01

디자인 DNA

정교한 검정 글자가 새겨진, 깨끗하고 브루탈리스트적인 갤러리 벽면.

02

컬러

엄격하고 고대비의 단색 팔레트.

03

타이포그래피

grotesque-sans

• display16px · 700
• body12px · 700
• small10px · 700

타이포그래피는 전체적으로 모노스페이스 폭이거나 타이트하게 트래킹 되어 있으며, 대부분 볼드(700)로 설정됩니다. · 행간은 작은 폰트 크기에 비례하여 엄격하게 설정됩니다(1.2).

04

여백

엄격하고 미니멀한 padding과 타이트한 컬럼 간격입니다.

05

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

1px solid rgb(0, 0, 0)

06

레이아웃

멀티컬럼 텍스트 그리드.

07

모션과 인터랙션

모든 요소에 적용되는 전역 전환.

인터랙티브 텍스트 링크 위에서 커서가 포인터로 변경됩니다. · 텍스트 링크에 즉각적인 반응.

08

컴포넌트

• button 위쪽을 가리키는 대각선 화살표가 있는 텍스트 링크.
• card 보이는 카드나 컨테이너 없이 텍스트만으로 구성된 레이아웃.
• hero 좌측 정렬된, 볼드체 도입부 텍스트 덩어리.

09

보이스와 금지 목록

• 톤 전문적이고, 직접적이며, 객관적인.
• 헤드라인 3인칭 전기적 소개.
• CTA 절제된 텍스트 링크를 통한 연락처.

• 복수의 폰트 패밀리를 사용하지 마세요 — 스크린샷은 단일 grotesque-sans 패밀리를 보여줍니다.
• 강조를 위해 다른 폰트 두께를 사용하지 마세요 — 스크린샷은 균일한 볼드(700) 두께를 보여줍니다.
• 컬러 액센트나 하이라이트를 사용하지 마세요 — 스크린샷은 순백 배경의 검정 텍스트만 엄격하게 사용합니다.
• 둥근 모서리나 카드 컨테이너를 사용하지 마세요 — 스크린샷은 테두리 없는 날것의 텍스트 레이아웃을 보여줍니다.
• 드롭 섀도우나 깊이 효과를 사용하지 마세요 — 스크린샷은 완전히 평면적인 타이포그래피를 보여줍니다.
• 장식적인 아이콘을 사용하지 마세요 — 스크린샷은 링크에 단일 화살표 문자만 사용합니다.
• 피하기: 마케팅 용어
• 피하기: 콘텐츠 없는 과도한 여백
• 피하기: 장식적 요소
• 피하기: 복수의 폰트 패밀리
• 피하기: 주관적인 형용사
• 피하기: 컬러 액센트

10

팩 안의 실제 스크린샷

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

11

System Prompt

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