큐레이션 · 오픈 · 무료

Kevin Tw

물리적 노트를 모방한 장난스러운, 손으로 그린 개인 포트폴리오 사이트.

01

디자인 DNA

개인 링크-in-바이오 페이지로 사용되는 손으로 그린 인터랙티브 종이 노트.

02

컬러

최소한의 의도적인 색상 강조를 사용한 고대비 단색 투박한 스타일.

03

타이포그래피

humanist-sans

• display50px · 700
• body20px · 600

텍스트는 표준 시스템 폰트를 사용하되, 두꺼운 마커 획을 모방하기 위해 굵은 자간과 두께로 스타일링합니다.

04

여백

레이아웃은 균일하게 간격을 둔 링크 요소의 엄격한 수직 스택으로 제한됩니다.

05

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

약간 불규칙한 손으로 그린 스타일의 2px 검은색 실선.

0px 2px 9px 0px rgba(82, 79, 79, 0.15) · 15px 15px 33px 0px rgba(27, 27, 27, 0.1)

06

레이아웃

줄이 그어진 종이를 닮은 배경 위에 놓인, 단일한 중앙 정렬 수직 열의 인터랙티브 요소.

07

모션과 인터랙션

인터랙티브 링크 버튼에 대한 hover 시 부드러운 전환.

손으로 그린 링크 버튼에 대한 미묘한 시각적 피드백으로, 약간의 색상 변화 또는 위치 이동일 수 있습니다. · 표준 링크 탐색 동작.

08

컴포넌트

• button 두꺼운 검은색 테두리와 흰색/연한 회색 채우기를 가진 손으로 그린 직각 윤곽선으로, 왼쪽 정렬된 투박한 아이콘과 중앙 정렬된 텍스트를 특징으로 합니다.
• card 전체 노트 페이지가 은은한 종이 그림자 효과를 가진 큰 카드 역할을 합니다.
• chip 보이지 않습니다.
• input 보이지 않습니다.
• hero 원형의 손으로 그린 아바타와 크고 굵은, 손으로 쓴 이름을 포함하는 단순한 레이아웃.

09

보이스와 금지 목록

• 톤 장난스럽고 개인적이며 친근합니다.
• 헤드라인 굵고, 손으로 쓰며, 표현적입니다.
• CTA 캐주얼하고 대화적이며, 단순한 링크로 제시됩니다.

• 완벽하게 직선적이고 기하학적인 선을 사용하지 마세요 — 스크린샷은 약간 불규칙한, 손으로 그린 테두리를 보여줍니다.
• 기업적이고 정돈된 타이포그래피를 사용하지 마세요 — 스크린샷은 굵고, 손으로 쓴 스타일의 헤더를 보여줍니다.
• 복잡한 색상 팔레트를 사용하지 마세요 — 스크린샷은 주로 단색에 최소한의 빨강/파랑 강조가 있습니다.
• 무겁고 사실적인 그림자를 사용하지 마세요 — 스크린샷은 미묘한 종이 리프트 효과를 보여줍니다.
• 표준적이고 균일한 아이콘을 사용하지 마세요 — 스크린샷은 맞춤 제작된, 투박하고 손으로 그린 아이콘을 특징으로 합니다.
• 표준적이고 둥근 UI 컴포넌트를 사용하지 마세요 — 스크린샷은 불규칙하고 스케치된 직사각형을 보여줍니다.
• 피하기: 격식 있는 기업 언어
• 피하기: 지나치게 복잡한 UI 패턴
• 피하기: 엄격한 격자 레이아웃

10

팩 안의 실제 스크린샷

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

11

System Prompt

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