큐레이션 · 오픈 · 무료

Hex

신뢰와 인사이트가 만나는 AI 기반 분석 플랫폼.

devtoolsdata
Hex 스크린샷
↓ 디자인 시스템 다운로드 (65 MB)OpenDesign 에서 열기

원본 사이트: https://hex.tech

📦 팩 내용 보기 →

01

디자인 DNA

AI 분석신뢰인사이트데이터플랫폼

editorial 우아함과 기술적 엄밀함이 어우러진 정교한 데이터 사이언스 노트북.

02

컬러

#E28C8BAccent
#31263BInk
#43394CInk soft
#FFFCFCBG
#E9E5E8BG soft
#F4F1F2BG quiet
#89828DMuted
rgba(49, 38, 59, 0.14)Line

따뜻하고 은은한 악센트를 더한, 차분하고 신뢰감 있는 중립 팔레트입니다.

03

타이포그래피

transitional-serif · geometric-sans · monospace

디스플레이 헤드라인에는 editoria 무게감을 더하기 위해 세리프를 사용합니다. · 모든 본문 및 UI 요소에는 명확성을 위해 산세리프를 사용합니다. · 코드 블록에는 모노스페이스를 엄격히 사용합니다.

04

여백

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

기본 4px 그리드를 기반으로 하며, 읽기 편한 콘텐츠를 위해 편안한 패딩을 적용합니다.

05

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

sm · 2px
md · 3px
lg · 4px
pill · 9999px

메인 잉크 컬러를 낮은 불투명도로 사용한, 은은하고 대비가 낮은 테두리입니다.

0 0 0 1px rgba(0, 0, 0, 0) · 0px 1px 1px 0px inset rgba(49, 38, 59, 0.14)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

히어로 섹션을 위한 중앙 정렬 콘텐츠 열과 제품 상세를 위한 넓은 콘텐츠 그리드를 사용합니다.

07

모션과 인터랙션

220msmicro
250mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

hover 시 부드러운 background-color 트랜지션. · focus 상태를 위한 은은한 opacity 변화. · 인터랙티브 요소를 위한 transform.

배경색 또는 opacity의 은은한 변화. · 배경 또는 테두리 트랜지션을 통한 즉각적인 시각적 피드백.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

editorial 우아함과 기술적 엄밀함을 어우르는 정교한 AI 분석 플랫폼을 디자인하세요. 정체성은 신뢰와 인사이트에 기반합니다. 색상 팔레트는 미니멀하고 따뜻합니다: 오프화이트 배경(#FFFCFC), 깊은 보라 잉크 텍스트(#31263B), 그리고 은은한 더스티 로즈 악센트(#E28C8B)입니다. 타이포그래피는 무게감을 더하기 위해 디스플레이 헤드라인에 전환형 세리프를 사용하고, 모든 UI 및 본문 텍스트에는 기하학적 산세리프를 사용합니다. 핵심 주의 사항: 네온 악센트를 사용하지 마세요, 디스플레이 헤드라인에 기하학적 산세리프를 사용하지 마세요, 무거운 섀도우 또는 3D 효과를 사용하지 마세요. 레이아웃은 읽기 용이성과 전문적인 데이터 프레젠테이션을 강조하는 중앙 정렬되고 여백이 있는 형태여야 합니다.

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

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

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

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