큐레이션 · 오픈 · 무료

Haleys

고딕 타이포그래피와 차분한 이끼 톤을 혼합한 학술적 포트폴리오.

01

디자인 DNA

어두운 오크 책상 위의 손으로 제본된 논문

02

컬러

깊은 숲 녹색 위의 고대비 파르멘트

03

타이포그래피

blackletter · transitional-serif

• display72px · 400
• h132px · 400
• body20px · 300
• caption16px · 200

04

여백

섹션과 그리드 항목 사이의 넉넉한 수직 간격

05

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

빛 바랜 파르멘트 또는 반투명 녹색의 섬세한 1px 라인

0px 2.4px 0px 0px #12332b

06

레이아웃

중앙 정렬과 넓은 마진을 가진 대칭적 그리드

07

모션과 인터랙션

hover 시 부드러운 배경색 및 테두리색 전환 · 장식용 SVG 요소의 채우기 및 스트로크 전환

내비게이션 및 프로젝트 링크의 미묘한 색상 변화와 밑줄 · 커서 포인터 상태를 통한 즉각적인 시각적 반응

08

컴포넌트

• button 미묘한 테두리와 소문자/이탤릭 스타일링을 가진 텍스트 기반 내비게이션
• card 단단한 배경 없이 텍스트 기반 프로젝트 목록
• chip 내비게이션 바의 작은 윤곽선 뱃지 (예: 'w', 'T', 'A')
• hero 세리프 문구가 양쪽에 배치된, 중앙에 정렬된 큰 블랙레터 이름

09

보이스와 금지 목록

• 톤 장인적, 학술적, 약간의 기발함
• 헤드라인 정교한 블랙레터와 트랜지셔널 세리프, 주로 중앙 정렬
• CTA 공격적인 버튼을 피하고, 미묘하게 통합

• 깔끔하고 현대적인 산세리프를 사용하지 마세요 — 스크린샷은 블랙레터와 트랜지셔널 세리프의 혼합을 보여줍니다.
• 밝거나 채도 높은 배경색을 사용하지 마세요 — 스크린샷은 깊고 차분한 숲 녹색(#12332b)을 보여줍니다.
• 고대비 행동 유도(CTA) 버튼을 사용하지 마세요 — 스크린샷은 미묘한 텍스트 기반 내비게이션 링크를 보여줍니다.
• 두꺼운 테두리가 있는 복잡한 다중 열 그리드를 사용하지 마세요 — 스크린샷은 여유롭고 대칭적인 레이아웃과 섬세한 라인을 보여줍니다.
• 장난스럽거나 기발한 색상 팔레트를 사용하지 마세요 — 스크린샷은 크림(#f8f2de)과 이끼 녹색(#5a7c6b)의 절제된 팔레트를 사용합니다.
• 공격적인 드롭 섀도우나 무거운 시각적 무게감을 사용하지 마세요 — 스크린샷은 매우 미묘하고 최소화된 그림자 효과를 보여줍니다.
• 피하기: 네온 컬러
• 피하기: 공격적인 산세리프 타이포그래피
• 피하기: 호흡할 공간 없는 밀집된 텍스트 블록
• 피하기: 높은 채도 또는 따뜻한 톤의 배경
• 피하기: 시끄러운 행동 유도(CTA)

10

팩 안의 실제 스크린샷

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

11

System Prompt

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