01
设计气质 DNA
活泼文具色彩丰富极简
一家色彩丰富、具有现代简约美学的文具店。
02
色彩
#1A1A1AInk#666666Ink soft#F5F5F5BG#FFFFFFBG soft#999999Mutedrgba(0,0,0,0.1)Line中性背景搭配生动的产品摄影。
03
字体
- display
56px · 500 - heading
32px · 500 - body
16px · 400
所有文字使用无衬线字体。 · 标题使用粗体字重。 · 正文使用常规字重。
04
间距
4px8px16px24px32px48px64px96px一致的垂直节奏。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(0,0,0,0.1)
0 2px 4px rgba(0,0,0,0.1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
基于网格的布局，包含全宽主视觉区域。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
淡入 · 向上滑动
轻微抬升或颜色变化。 · 按下效果。
08
组件
- button 圆角黑色按钮，白色文字。
- card 产品卡片，包含图片、标题、价格和按钮。
- chip 无
- input 无
- hero 全宽图片，叠加文字和按钮。
09
文案语气与禁用清单
- 语气 活泼且富有吸引力
- 标题风格 简短有力
- 按钮文案 直接且以行动为导向
- 不要使用深色背景——截图显示为浅色、中性背景。
- 不要使用衬线字体——截图显示为无衬线字体排版。
- 不要使用复杂渐变——截图显示 UI 元素为纯色。
- 不要使用过度圆润的圆角——截图显示为适度圆角。
- 不要使用狭小、拥挤的间距——截图显示为充足的留白。
- 不要使用杂乱的布局——截图显示为干净、有序的网格。
- 避免: 技术术语
- 避免: 长句
- 避免: 正式语气
11
System Prompt
这是一个活泼多彩的文具及配件电子商务网站。设计采用浅色中性背景，以生动的产品摄影作为主要视觉焦点。关键颜色为浅灰色（#F5F5F5）背景和近乎黑色（#1A1A1A）文字。所有文字使用简洁的人文主义无衬线字体。关键禁忌包括：不要使用深色背景，不要使用衬线字体，不要使用复杂渐变，不要使用过度圆润的圆角，不要使用狭小、拥挤的间距，以及不要使用杂乱的布局。该网站旨在营造一种干净、现代且富有吸引力的美学，突出展示色彩丰富的产品。