큐레이션 · 오픈 · 무료

Kevinbrenkman

크리에이티브 파트너를 위한 디자인 중심 웹 개발 실천.

AgencyPortfolioCleanTypographyStudio
Kevinbrenkman 스크린샷
↓ 디자인 시스템 다운로드 (12 MB)OpenDesign 에서 열기

원본 사이트: https://www.kevinbrenkman.com

📦 팩 내용 보기 →

01

디자인 DNA

디자인 중심웹 개발실천크리에이티브 파트너

작업이 스스로 말하게 하는, 세련되고 미니멀한 스튜디오 포트폴리오입니다.

02

컬러

#000000Ink
#3B3B3BInk soft
#FFFFFFBG
#F8F8F8BG soft
#DFDFDFMuted
rgba(0, 0, 0, 0.1)Line

프로젝트 이미지에 완전히 양보하는 고대비 단색 기반입니다.

03

타이포그래피

grotesque-sans · monospace

모든 기본 텍스트에 grotesque-sans를 사용합니다. · 모든 요소에 걸쳐 균일한 400 웨이트를 유지합니다. · 모든 본문 및 디스플레이 텍스트에 0.25px의 일관된 자간을 적용합니다.

04

여백

4px
8px
16px
24px
32px
48px
64px
96px

텍스트 요소 주위에 타이트하고 일관된 padding을 적용한 4px 기본 단위를 엄격히 따릅니다.

05

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

sm · 2px
md · 0px
lg · 0px
pill · 999px

미세한 구분을 위한 rgba(59, 59, 59, 0.3)의 1px 얇은 실선 테두리입니다.

없음

06

레이아웃

1440container
12columns
24pxgutter
768 / 1024breakpoints

프로젝트 이미지가 전체 뷰포트 너비를 차지하고 텍스트는 편안한 읽기 폭으로 제한되는 전체 너비의 끝에서 끝까지 레이아웃입니다.

07

모션과 인터랙션

220msmicro
400mssmall
800msmedium
cubic-bezier(0.215, 0.61, 0.355, 1)easing

hover 상태에서 padding과 opacity를 위한 전환. · 인터랙티브 요소를 위한 transform 애니메이션.

상호작용을 나타내는 미세한 padding 또는 opacity 전환. · 복잡한 상태 변경 없이 즉각적인 응답.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Kevinbrenkman — 桌面首屏（hero）
桌面首屏（hero）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 移动首屏
移动首屏

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

11

System Prompt

크리에이티브 스튜디오를 위한 깨끗하고 전문적인 포트폴리오 웹사이트를 디자인하세요. 흰색 배경(#FFFFFF), 검은색 텍스트(#000000), 그리고 은은한 그레이(#F8F8F8, #DFDFDF)를 사용한 고대비 단색 팔레트를 사용하세요. 기본 타이포그래피를 grotesque sans-serif 카테고리로 설정하고 균일한 400 웨이트와 일관된 0.25px 자간을 적용하세요. 레이아웃은 전체 너비와 끝에서 끝까지 이어지며, 프로젝트 이미지가 중심을 차지하고 미니멀하고 절제된 UI 요소를 사용해야 합니다. 중요 금지 사항: 밝고 채도 높은 강조색을 절대 사용하지 마세요; 굵거나 두꺼운 폰트 웨이트를 절대 사용하지 마세요; 복잡한 그림자나 장식적인 UI 요소를 절대 추가하지 마세요; 공격적인 호출-to-행동을 절대 사용하지 마세요; 미니멀한 2px 반지름 이상의 둥근 모서리를 절대 사용하지 마세요; 장식적인 타이포그래피를 절대 사용하지 마세요.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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