큐레이션 · 오픈 · 무료

Pad Dotincorp

촉각적 점자 디스플레이 장치를 위한 깔끔하고 전문적인 제품 쇼케이스입니다.

HardwareProductCleanCalmRefined
Pad Dotincorp 스크린샷
↓ 디자인 시스템 다운로드 (24 MB)OpenDesign 에서 열기

원본 사이트: https://pad.dotincorp.com

📦 팩 내용 보기 →

01

디자인 DNA

접근성촉각적점자보조 기술하드웨어

깔끔하고 프리미엄 기술 문서 사이트 같은 매끄러운 하드웨어 제품 페이지입니다.

02

컬러

#FF5A2FAccent
#1F1F1FInk
#333333Ink soft
#FFFFFFBG
#F5F5F5BG soft
#707070Muted
rgba(229, 231, 235, 1)Line

하드웨어 제품을 강조하기 위한 고대비와 깔끔한 여백.

03

타이포그래피

humanist-sans

모든 텍스트에 humanist sans-serif를 사용합니다. · 본문 텍스트의 기본 크기를 15px로 유지합니다. · 강조와 제목에 볼드 두께(600-700)를 사용합니다.

04

여백

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

주요 레이아웃 섹션에 40px와 60px 간격을 일관되게 사용합니다.

05

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

sm · 8px
md · 18px
lg · 20px
pill · 100px

1px solid rgba(229, 231, 235, 1)

0px 4px 10px rgba(0, 0, 0, 0.25) · 0px 5.87px 17.6px rgba(25, 33, 61, 0.06)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

전체 폭 히어로 배너 뒤에 다중 열 기능 격자가 옵니다.

07

모션과 인터랙션

150msmicro
300mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

콘텐츠 트랜지션을 위한 opacity 페이드 · hover 상태를 위한 transform

인터랙티브 요소에서 미묘한 opacity 또는 배경색 변경. · 모든 인터랙티브 요소에 표준 포인터 커서.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

이 디자인은 보조 기술 장치를 위한 깔끔하고 전문적인 제품 쇼케이스입니다. 흰색(#FFFFFF), 근접 검정(#1F1F1F), 단일 고채도 오렌지 강조색(#FF5A2F)의 고대비 팔레트를 사용합니다. 타이포그래피는 15px 기본 크기의 humanist sans-serif이며, 제목과 네비게이션에 볼드 두께(600-700)를 사용합니다. 주요 인터랙션은 미묘하며, hover 시 0.3s 트랜지션이 적용됩니다. 주요 제약 사항은 주로 흰색 배경을 유지하고, 주요 표면에 둥근 모서리(18px-20px)를 사용하며, 장식적 글꼴이나 지저분한 레이아웃을 피하는 것이 포함됩니다.

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

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

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

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