큐레이션 · 오픈 · 무료

Jonaspelzer

디지털 제품 분야에서 15년 이상의 작업물을 선보이는 정교한 디자인 포트폴리오입니다.

01

디자인 DNA

실시간으로 업데이트되는 케이스 스터디 카탈로그 역할을 하는 정교한 디지털 포트폴리오입니다.

02

컬러

고대비 블랙과 화이트를 기반으로 단일한 고채도 퍼플 액센트를 사용합니다.

03

타이포그래피

geometric-sans · transitional-serif

• display56px · 400

헤딩 블록 내에서 기하학적 sans와 과도기적 serif를 혼합하여 리듬감 있는 대비를 만듭니다. · 우아한 가독성을 위해 넉넉한 line-height와 tracking을 사용합니다. · 주요 내비게이션과 카테고리 레이블에는 대문자(all-caps)를 선호합니다.

04

여백

타이포그래피와 프로젝트가 숨 쉴 수 있도록 넉넉한 수직 padding과 여백을 사용합니다.

05

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

날카로운 경계를 위해 1px solid #000000; 미묘한 구분을 위해 1px solid rgb(212, 214, 221)를 사용합니다.

0px 1px 4px 2px rgba(53, 2, 255, 0.1)

06

레이아웃

중앙에 배치된 히어로 섹션 뒤에 3열 프로젝트 카드 그리드가 이어집니다.

07

모션과 인터랙션

페이지 전환과 프로젝트 카드의 hover 상태에서 부드러운 전환을 적용합니다. · 프로젝트 썸네일에서 미묘한 확대 또는 이동 효과를 적용합니다.

프로젝트 카드와 내비게이션 항목에서 미묘한 확대 또는 그림자 변화를 적용합니다. · 인터랙티브 요소에 즉각적인 시각적 피드백을 제공합니다.

08

컴포넌트

• button 활성 상태를 위해 보라색 배경의 알약 형태 내비게이션 바입니다.
• card 모서리가 둥글게(12px) 처리되고 미묘한 그림자 또는 테두리가 있는 프로젝트 썸네일입니다.
• hero sans와 serif를 혼합한 대형 타이포그래피 조합으로, 상단에 넉넉한 여백이 있습니다.

09

보이스와 금지 목록

• 톤 전문적이고 자신감 넘치며, 경험이 느껴지는 톤입니다.
• 헤드라인 직설적이고 선언적이며, 타이포그래피적으로 표현력이 풍부합니다.
• CTA 명확하고 행동을 유도하는 형태로, 내비게이션 내에서 자주 대문자로 표시됩니다.

• 내비게이션에 serif 폰트를 사용하지 마세요 — 스크린샷에는 대문자 sans-serif 레이블이 보입니다.
• 밝거나 다채로운 팔레트를 사용하지 마세요 — 스크린샷에는 블랙, 화이트, 퍼플로 엄격하게 구성된 팔레트가 보입니다.
• 모든 콘텐츠를 중앙 정렬하지 마세요 — 스크린샷에는 왼쪽 정렬된 히어로 텍스트와 구조화된 그리드가 보입니다.
• 무거운 드롭 그림자를 사용하지 마세요 — 스크린샷에는 미묘한 퍼플 box-shadow가 한 곳에만 나타납니다.
• 복잡하거나 장식적인 UI 컴포넌트를 사용하지 마세요 — 스크린샷에는 미니멀하고 텍스트 중심의 인터페이스가 보입니다.
• 다크 모드 인터페이스를 사용하지 마세요 — 스크린샷에는 밝은 배경의 디자인이 보입니다.
• 피하기: 지나치게 캐주얼하거나 장난스러운 언어를 피합니다.
• 피하기: 명확한 계층 없이 밀도 높은 텍스트 블록을 피합니다.
• 피하기: 일반적인 기업용 관용 표현을 피합니다.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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