精选 · 开放 · 免费

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

所有文本使用人文主义无衬线字体。 · 正文基准字号为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

内容过渡使用透明度淡入淡出 · 悬停状态使用变换效果

交互元素在悬停时发生细微的透明度或背景色变化。 · 所有交互元素使用标准指针光标。

08

组件

button 带有高饱和度橙色背景和圆角的主按钮。
card 用于功能展示的、带有细微阴影和圆角的清洁卡片。
hero 全宽摄影主视觉，文字居中叠加，底部采用圆角。

09

文案语气与禁用清单

语气专业、信息丰富且清晰。
标题风格 直接且描述性，聚焦产品名称及其主要优势。
按钮文案 清晰且行动导向，使用高对比度颜色。

不要使用装饰性或手写字体——截图显示的是清洁的人文主义无衬线字体。
不要以深色背景作为主画布——截图显示的是以白色为主的背景。
不要使用多种颜色——截图显示的是严格的白、黑及单一橙色点缀的配色。
不要对重要文本使用细字体——截图显示的是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）。字体为基准15px的人文主义无衬线字体，标题和导航使用粗体（600-700）。关键交互效果细腻，悬停时使用0.3s过渡。关键约束包括：保持以白色为主的背景，主要表面使用圆角（18px-20px），并避免装饰性字体或繁忙的布局。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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