精選 · 開放 · 免費

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

display56px · 700
heading32px · 700
body15px · 600

所有文字使用 humanist-sans 字體。 · 內文維持 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

組件

button 具有高飽和度橙色背景和圓角的主要按鈕。
card 用於功能區塊的簡潔卡片，帶有細微陰影和圓角。
hero 全寬攝影主視覺區，帶有置中的文字覆蓋和圓角底邊。

09

文案語氣與禁用清單

語氣專業、具資訊性且清晰。
標題風格 直接且具描述性，專注於產品名稱及其主要優點。
按鈕文案 清晰且以行動為導向，使用高對比度顏色。

不要使用裝飾性或草書字體——截圖顯示使用簡潔的 humanist-sans 字體。
不要使用深色背景作為主要畫布——截圖顯示以白色背景為主。
不要使用多種顏色——截圖顯示嚴格遵循白色、黑色和單一橙色強調色的調色板。
不要使用細字重的重要文字——截圖顯示使用 600 和 700 的字重。
不要在卡片和按鈕上使用尖銳、方形的角——截圖顯示使用圓角 (18px-20px)。
不要使用複雜或花俏的背景圖案——截圖顯示使用純色或簡潔的攝影背景。
避免: 非正式用語
避免: 未經解釋的過度技術術語
避免: 雜亂的佈局

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) 的高對比度調色板。字型為 humanist-sans，基礎大小 15px，標題和導覽使用粗體字重 (600-700)。關鍵互動效果細微，在 hover 時有 0.3s 過渡效果。關鍵限制包括維持以白色為主的背景、主要表面使用圓角 (18px-20px)，以及避免使用裝飾性字體或雜亂的佈局。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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