精选 · 开放 · 免费
Apple
一个由电影感的暗色布局、纯净的排版和绝对的克制所定义的高端硬件展示。
HardwarePremiumRestraintEditorial
01
设计气质 DNA
高端极简硬件编辑风格
一个高端产品画廊，以电影感的摄影和克制的排版来展示硬件。
02
色彩
#0071e3Accent
#1d1d1fInk
#86868bInk soft
#000000BG
#f5f5f7BG soft
rgba(255,255,255,0.8)Line
在纯黑、柔和的中性灰和清晰的白色文字之间形成极致的对比，以营造高端感。
03
字体
humanist-sans
- display
48px · 700 - subtitle
28px · 400 - body
17px · 400 - caption
12px · 400
导航文字极小且字间距极紧。 · 标题使用紧凑的字间距和高字重。 · 正文保持充足的行高以确保可读性。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
主视觉区域周围采用充足的垂直内边距，以强调留白和聚焦。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 8px
lg · 0px
pill · 980px
1px solid rgba(255,255,255,0.8) 用于深色描边，1px solid #1d1d1f 用于浅色元素
rgba(0, 0, 0, 0.22) 3px 5px 30px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽、边缘到边缘的主视觉区域，内容居中。
07
动效与交互
180msmicro
240mssmall
400msmedium
cubic-bezier(0.4, 0, 0.6, 1)easing
在 hover 时平滑地过渡 opacity 和 transform。 · UI 元素采用微妙的淡入效果。
链接和按钮的颜色过渡。 · 微妙的缩放或透明度变化。
08
组件
- button 主要按钮为药丸形、实色背景；次要按钮为描边样式。
- card 全宽产品卡片，以大尺寸图像和居中文本为特征。
- hero 电影感的全屏产品摄影，配以居中的标题和双主要操作按钮。
09
文案语气与禁用清单
- 语气 自信、简洁、权威。
- 标题风格 简短、有力的产品名称和单词标语。
- 按钮文案 直接的行动动词，如“了解更多”和“购买”。
- 不要使用厚重的投影——截图显示的是最小化、微妙的投影。
- 不要使用复杂的渐变——截图显示的是纯色、扁平的背景。
- 不要使用小而杂乱的排版——截图显示的是巨大、清晰的展示字体。
- 不要使用明亮、冲突的颜色——截图显示的是一个高度克制的调色板。
- 不要使用复杂的网格布局——截图显示的是简单的、居中的、线性的堆叠。
- 不要使用装饰性的边框或框架——截图显示内容在开放空间中呼吸。
- 避免: 过度的技术术语。
- 避免: 过多的感叹号。
- 避免: 杂乱或繁忙的布局。
- 避免: 多种冲突的颜色。
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
此设计代表了高端硬件营销的终极精炼。它依赖于巨大的、居中的排版（humanist-sans）置于纯黑或柔和的中性灰背景之上，营造出电影感、编辑风格的氛围。主色调严格限定为 #000000、#f5f5f7 和 #1d1d1f，并使用一个高对比度的强调色 #0071e3 用于主要操作。关键约束包括避免视觉杂乱、抵制使用装饰性元素，并在调色板中保持绝对的克制。动效应微妙而平滑，专注于 opacity 和 transform 过渡，以增强高端、无缝的感觉。
en · zh-CN · zh-TW · ja · ko