큐레이션 · 오픈 · 무료

Henry Codes

덴버 기반 웹 개발자 및 디자이너를 위한 대담하고 타이포그래피 중심의 크리에이티브 포트폴리오.

01

디자인 DNA

하이 패션 에디토리얼과 언더그라운드 지네의 혼합처럼 느껴지는 대담하고 실험적인 크리에이티브 포트폴리오.

02

컬러

극도의 타이포그래피 밀도와 간헐적인 브루탈리스트 레이아웃 변화가 있는 고대비 단색 팔레트.

03

타이포그래피

transitional-serif · geometric-sans

• display77px · 400
• body16px · 400

04

여백

무거운 타이포그래피의 균형을 맞추기 위한 넉넉한 여백을 가진 엄격한 4px 기본 단위.

05

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

단순한 2px 실선 테두리 또는 테두리 없음; 구분을 위해 여백과 타이포그래피 굵기에 의존.

06

레이아웃

밝고 어두운 배경이 교차되는 풀블리드 섹션.

07

모션과 인터랙션

링크 및 인터랙티브 요소의 미묘한 hover 트랜지션

미묘한 색상 또는 너비 트랜지션. · 바운스나 스케일 효과 없이 즉각적인 반응.

08

컴포넌트

• button hover 트랜지션이 있는 절제된 텍스트 기반 링크.
• card 타이포그래피에 의존하여 계층 구조를 만드는 최소화된 테두리 없는 컨테이너.
• hero 뷰포트 전체 너비를 채우는 거대하고 지나치게 큰 타이포그래피.

09

보이스와 금지 목록

• 톤 대담하고 거침없으며 매우 개인적.
• 헤드라인 주의를 끄는 공격적이고 지나치게 큰 세리프 타이포그래피.
• CTA 콘텐츠가 말하게 두는 절제된 텍스트 기반 행동 유도.

• 부드럽고 파스텔 색상을 사용하지 마세요 — 스크린샷은 고대비 단색 팔레트를 보여줍니다.
• 장난스럽고 둥근 UI 요소를 사용하지 마세요 — 스크린샷은 날카로운 브루탈리스트 타이포그래피를 보여줍니다.
• 작고 밀집된 그리드를 사용하지 마세요 — 스크린샷은 거대한 풀블리드 타이포그래피 레이아웃을 보여줍니다.
• 미묘하고 장식적인 이미지를 사용하지 마세요 — 스크린샷은 대담한 픽셀화된 또는 추상적인 아트를 보여줍니다.
• 전통적이고 안전한 레이아웃을 사용하지 마세요 — 스크린샷은 실험적이고 겹쳐지는 텍스트를 보여줍니다.
• 단일 배경 색상을 사용하지 마세요 — 스크린샷은 순백과 극히 어두운 색 섹션이 교차합니다.
• 피하기: 일반적인 기업 언어
• 피하기: 부드럽거나 장난스러운 디자인 요소
• 피하기: 전통적인 그리드 기반 레이아웃

10

팩 안의 실제 스크린샷

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

11

System Prompt

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