OpenDesign·你的设计资产库

网页参考

Blokwatches

为现代模拟手表品牌设计的趣味、粗犷且色彩鲜明的产品落地页。

ProductHardwareBold TypographyGeometricConsumer

预览暂时不可用,请通过原站查看。

01

设计气质 DNA

趣味性现代感模拟感粗犷感

一个为成人打造的、充满趣味与色彩的粗犷玩具。

02

色彩

#3574E0Accent
#000000Ink
#4A4A4AInk soft
#0A1929BG
#17365DBG soft
#FFFFFFBG quiet
#F5F5F5Muted
rgba(255, 255, 255, 0.15)Line

深海军蓝背景为亮蓝色主形和彩色产品细节创造了高对比度效果。

03

字体

geometric-sans · grotesque-sans

  • display56px · 700
  • h148px · 700

主标题使用大写字母并增加字距。 · 描述性正文使用首字母大写。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

采用充足的垂直间距,让粗犷元素得以舒展呼吸。

05

表面 (圆角 / 阴影 / 边线)

sm · 0px
md · 0px
lg · 0px
pill · 999px

按钮和形状采用锐利、干净的边缘。

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

全宽主视觉区域采用不对称布局,其后是居中文本块和标志条。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

交互元素呈现微妙的颜色变化或轮廓调整。 · 即时响应。

08

组件

  • button 轮廓样式,使用大写字母和锐利转角。
  • card 在可见区域内未突出显示。
  • chip 在可见区域内未突出显示。
  • input 在可见区域内未突出显示。
  • hero 产品大幅冲击力图片,置于深色背景上,搭配有机蓝色形状,辅以粗体大写排版和明确的操作号召。

09

文案语气与禁用清单

  • 语气 自信、现代且富有趣味性。
  • 标题风格 简短、有力的大写陈述。
  • 按钮文案 清晰、直接的大写指令。
  • 不要使用柔和的粉彩色系——截图显示的是深邃、高对比度的海军蓝背景搭配亮蓝色强调色。
  • 不要在按钮或卡片上使用圆角——'FIND YOUR BLOK'按钮采用的是锐利的方形转角。
  • 不要在标题中使用衬线字体——主要的展示字体是粗体几何无衬线体。
  • 不要将所有文本居中——主视觉区域使用右对齐文本来平衡左侧较重的产品图像。
  • 不要使用单色背景——主视觉在深海军蓝底色上使用了动态的有机蓝色形状。
  • 不要避免使用大写文本——该设计大量依赖宽字距的大写标题来增强视觉冲击力。
  • 避免: 过于技术化的术语
  • 避免: 被动语态
  • 避免: 杂乱的布局

11

System Prompt

这是一个为现代模拟手表品牌'Blok'设计的粗犷、趣味的产品落地页。其设计核心在于高对比度,使用深海军蓝背景(#0A1929)搭配亮蓝色强调形状(#3574E0)和锐利的几何无衬线字体。布局不对称且富有冲击力,让多彩的产品摄影脱颖而出。关键设计原则包括:使用锐利转角而非圆角,标题采用宽字距大写,并在深邃、富有氛围感的基底上运用明亮的色彩点缀。请勿使用柔和的粉彩色、圆角组件或衬线字体,因为其视觉识别建立在粗犷几何形态和高对比度之上。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。