01
设计气质 DNA
趣味性现代感模拟感粗犷感
一个为成人打造的、充满趣味与色彩的粗犷玩具。
02
色彩
#3574E0Accent#000000Ink#4A4A4AInk soft#0A1929BG#17365DBG soft#FFFFFFBG quiet#F5F5F5Mutedrgba(255, 255, 255, 0.15)Line深海军蓝背景为亮蓝色主形和彩色产品细节创造了高对比度效果。
03
字体
- display
56px · 700 - h1
48px · 700
主标题使用大写字母并增加字距。 · 描述性正文使用首字母大写。
04
间距
4px8px16px24px32px48px64px96px采用充足的垂直间距,让粗犷元素得以舒展呼吸。
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)和锐利的几何无衬线字体。布局不对称且富有冲击力,让多彩的产品摄影脱颖而出。关键设计原则包括:使用锐利转角而非圆角,标题采用宽字距大写,并在深邃、富有氛围感的基底上运用明亮的色彩点缀。请勿使用柔和的粉彩色、圆角组件或衬线字体,因为其视觉识别建立在粗犷几何形态和高对比度之上。