큐레이션 · 오픈 · 무료

Heylow

목적 지향적 조직을 위한 디자인 & 코드 파트너로, 그들의 작업만큼이나 세심하게 존재할 수 있도록 돕습니다.

AgencyCleanBold TypographyPremiumCalm
Heylow 스크린샷
↓ 디자인 시스템 다운로드 (10 MB)OpenDesign 에서 열기

원본 사이트: https://heylow.world

📦 팩 내용 보기 →

01

디자인 DNA

디자인코드파트너목적 지향적저탄소오래도록 구축

클리어리티, 우아함, 지속가능성을 디지털 실행과 디자인 양方方面에서 중시하는 하이엔드, 목적 지향적 크리에이티브 스튜디오입니다.

02

컬러

#faf8f3Ink
#a8a3a1Ink soft
#0f0e0cBG
#4a4643Muted
rgba(74, 70, 67, 1.0)Line

명확성과 집중을 위한 높은 대비의 텍스트를 적용한 어둡고 따뜻하며 흙빛의 단색 팔레트입니다.

03

타이포그래피

humanist-sans

대형 전시 텍스트에는 좁은 자간(tracking)을 사용하여 정교하고 현대적인 느낌을 연출합니다. · 본문 텍스트에는 읽기 용이성을 위해 넉넉한 행간(1.6)을 유지합니다. · 내비게이션과 작은 라벨에는 넓은 자간을 적용한 대문자(uppercase)를 사용합니다. · 모든 타이포그래피는 차분하고 통일된 느낌을 위해 일관된 두께(400)를 유지합니다.

04

여백

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

모든 간격에 일관된 4px 기본 격자를 사용하여 구조적이고 예측 가능한 레이아웃 리듬을 제공합니다.

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

두꺼운 시각적 부담 없이 레이아웃을 구조화하고 상호작용 영역을 정의하기 위해 얇은 1px 테두리를 사용하며, 흙빛 톤(#4a4643 또는 #faf8f3)을 적용합니다.

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

강하고 명시적인 격자 구조가 점선 테두리를 통해 드러나며, 건축적 정밀함을 강조합니다.

07

모션과 인터랙션

200msmicro
200mssmall
500msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing

hover 시 은은한 불투명도 전환. · 메뉴 상호작용 시 부드러운 페이드 인/아웃. · 내용에서 주의를 산만하게 하지 않는 최소한의 목적 있는 움직임.

상호작용 가능성을 나타내기 위한 은은한 불투명도 변화. · 최소한의 애니메이션으로 즉각적인 피드백 제공.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

이것은 Heylow라는 디자인 & 코드 파트너 에이전시의 포트폴리오 웹사이트입니다. 디자인은 차분하고 정교하며 세심한 미학을 특징으로 합니다. 주요 색상은 깊고 따뜻한 블랙(#0f0e0c) 배경에 밝고 따뜻한 오프화이트(#faf8f3) 텍스트와 은은한 그레이 악센트(#a8a3a1, #4a4643)입니다. 타이포그래피는 다양한 두께의 깔끔한 휴머니스트 산세리프 폰트 패밀리를 사용하며, 워드마크를 위한 굵고 과장된 전시 타입에 강하게 집중합니다. 레이아웃은 넉넉하고 격자 기반이며 구조적 선명함이 드러납니다. 중요 점검 사항: 밝고 채도 높은 악센트 컬러를 사용하지 마세요; 장식적이거나 스크립트 폰트를 사용하지 마세요; 불필요한 요소나 무거운 시각 효과로 인터페이스를 복잡하게 하지 마세요; 본문 텍스트에 대문자를 사용하지 마세요; 두꺼운 드롭 섀도우를 사용하지 마세요; 복잡하고 분주한 레이아웃을 사용하지 마세요.

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

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

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

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