精选 · 开放 · 免费
Dyson
一个高端硬件电商网站，通过简洁的排版和富有冲击力的产品摄影，展现工程创新。
hardwareproduct
01
设计气质 DNA
工程高端创新精密极简主义
如同精密、冷峻的高端硬件展厅
02
色彩
#0066ccAccent
#333333Ink
#999999Ink soft
#ffffffBG
#f5f5f5BG soft
#fcfcfcBG quiet
#919191Muted
rgba(51, 51, 51, 1.0)Line
高对比度基础：黑色页眉与白色内容区域，仅用一个蓝色强调色用于交互元素
03
字体
humanist-sans
- display
56px · 300 - heading-lg
36px · 300 - heading-md
24px · 400 - body
16px · 400 - caption
14px · 400
大型展示文本使用轻字重（300） · 正文使用常规字重（400） · 除特定强调外，切勿使用粗体
04
间距
4px
8px
12px
16px
20px
24px
32px
48px
8px基础节奏，章节间垂直内边距宽松
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 4px
lg · 8px
pill · 999px
输入框使用1px solid rgb(51, 51, 51)边框，卡片使用细微边框
0 0 0 1px rgba(51, 51, 51, 1) inset · 0 0 18px 0 rgba(0, 0, 0, 0.2)
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
全宽英雄区内容左对齐，下方接基于网格的产品卡片
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.68, 0.03, 0.26, 1.02)easing
所有过渡默认启用 · 平滑的图像揭示效果
交互元素在悬停时发生微妙的颜色过渡 · 通过颜色状态变化提供即时的视觉反馈
08
组件
- button 纯色填充按钮，圆角极小，文字大写，浅色背景配深色文字
- card 简洁卡片，展示产品图像，边框最小化，留白充足
- chip 内联标签，样式极简，带细微边框
- input 简洁的文本输入框，底部边框，集成搜索图标
- hero 全出血产品摄影，文字叠加在深色或富有戏剧性的图像上，文字颜色较浅
09
文案语气与禁用清单
- 语气 技术权威感，低调而自信
- 标题风格 轻字重、大尺寸的产品名称和主张
- 按钮文案 直接使用“立即购买”并配箭头指示，文字大写
- 不要使用装饰元素——截图展示了干净、功能化的布局，无任何装饰
- 不要使用圆角容器——截图显示边框圆角极小（最大2-8px）
- 不要到处使用粗体排版——截图显示展示文本以轻字重（300）为主
- 不要使用暖色调色板——截图显示冷灰色、黑色和单一蓝色强调色
- 不要使界面杂乱——截图显示留白充足，产品展示聚焦
- 不要使用随意友好的语言——截图显示精确的技术性产品命名和主张
- 避免: 夸张的营销语言
- 避免: 装饰性元素
- 避免: 圆润友好的形状
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Dyson的网站通过一套冷峻、高对比度的设计系统，体现了高端硬件工程精神。色板以纯黑页眉（#000000）与纯白内容区域（#ffffff）为核心，仅用一个蓝色强调色（#0066cc）用于交互元素。正文使用深灰色（#333333），次要信息使用浅灰色（#999999, #919191）。字体专为humanist-sans（DysonFutura），大型展示文本使用轻字重（300），正文内容使用常规字重（400）。布局采用全宽英雄区方法，内容在富有戏剧性的产品摄影上左对齐，下方过渡到基于网格的产品卡片。关键设计约束：展示文本切勿使用粗体，容器圆角不超过8px，章节间保持充足留白，仅使用功能性交互元素而无装饰性添加，保持黑/白/灰为主的冷峻色板及最小化色彩强调，所有排版保持轻盈精致而非厚重或随意。
en · zh-CN · zh-TW · ja · ko