精选 · 开放 · 免费
Urbanwoodsystems
一个基于网格、拥有超大排版和中性配色的大胆硬件产品网站。
HardwareCleanProductGeometricMinimal
01
设计气质 DNA
高端工业感极简都市功能性
一本极简主义的瑞士设计杂志与一本高端硬件目录的结合。
02
色彩
#000000Ink
#E6E6DDBG
rgba(0,0,0,0.1)Line
高对比度的单色系配色方案,搭配温暖的中性背景。
03
字体
grotesque-sans
- display
140px · 500 - body
11px · 500
所有文本严格设置为中等字重(500)。 · 所有元素使用紧凑的字间距(-0.1px至-2px)。 · 不使用字体字重变化;层次完全通过巨大的尺度差异来建立。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
严格的4px网格,交互元素周围仅有最小内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
除标准的1px系统默认值外,无可见边框;完全依赖布局和间距。
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
桌面端为不对称双栏网格,移动端堆叠为单栏。
07
动效与交互
0msmicro
200mssmall
0msmedium
lineareasing
交互元素的颜色过渡(0.2秒)。 · 未见复杂的入场动画或运动模式。
可点击元素上为标准指针光标。 · 无。
08
组件
- button 大型白色圆形容器,作为主要导航中心。
- card 无;导航通过大型几何形状处理。
- chip 无。
- input 无。
- hero 不对称分割布局,一侧是大型产品摄影,另一侧是超大的排版区块。
09
文案语气与禁用清单
- 语气 自信、含蓄且功能性强。
- 标题风格 超大、加粗且字间距紧凑。
- 按钮文案 微妙,整合于大型几何导航中心中。
- 不要使用细体或轻字重——截图显示所有文本均为500字重。
- 不要为表面添加投影或景深——截图显示为完全扁平的元素。
- 不要使用纯白背景——截图显示为温暖的中性色(#E6E6DD)。
- 不要在按钮上使用复杂的圆角——截图显示为大型药丸/圆形形状(300px半径)。
- 不要使用明亮或多彩的强调配色——截图为严格的单色系黑色墨迹。
- 不要使用宽松或舒缓的字间距——截图显示为紧凑、压缩的排版。
- 避免: 过多的形容词或营销套话。
- 避免: 复杂或多步骤的导航菜单。
- 避免: 鲜艳或霓虹色的配色方案。
- 避免: 装饰性元素或不必要的UI修饰。
- 避免: 斜体或手写体排版。
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个用于高端自行车硬件的极简主义、高端产品网站。它采用大胆的工业美学,搭配温暖的中性背景(#E6E6DD)和深邃的黑色墨迹(#000000)。排版仅使用中等字重(500)的怪诞无衬线字体(Unica77),为标题使用巨大的显示尺寸(最大140px),为正文使用非常小的尺寸(11px),形成鲜明的层次对比。关键约束包括:永远不使用500以外的字体字重,保持严格的单色系配色而不使用鲜艳强调色,并保持表面完全扁平而无阴影。导航通过大型白色圆形中心而非传统菜单实现。
en · zh-CN · zh-TW · ja · ko