01
设计气质 DNA
电商Lotto促销折扣
一个以折扣为核心的促销产品页面。
02
色彩
#FF0000Accent#000000Ink#FFFFFFBG#666666Mutedrgba(0,0,0,0.1)Line在干净的白色画布上,使用高对比度的主要操作色彩。
03
字体
- display
32px · 700 - body
16px · 400
04
间距
4px8px16px24px32px48px64px主产品栏周围留有充裕的留白。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid #e0e0e0
06
布局
1280container
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
文案语气与禁用清单
- 语气 直接且具有促销性。
- 标题风格 加粗、大号,且关键词突出。
- 按钮文案 紧迫且以行动为导向。
- 不要使用微妙的主色——截图显示关键 CTA 使用了亮红色(#FF0000)。
- 不要隐藏促销徽章——截图显示有‘50% OFF’和‘FREE US Shipping’等多个徽章。
- 不要使用极简的头部——截图显示有包含搜索、分类和账户链接的复杂头部。
- 不要使用复杂的动画——截图显示的是静态、功能性的布局。
- 不要使用衬线字体——截图全部使用无衬线字体。
- 不要使用柔和的强调色——截图使用高饱和度的红色作为主要操作色彩。
- 避免: 克制
- 避免: 含蓄
- 避免: 极简主义
11
System Prompt
这是一个以折扣驱动转化为核心的促销电商产品页面。它使用干净的白色背景(#FFFFFF),搭配高对比度的黑色文字(#000000)和主导的高饱和度红色(#FF0000)用于‘DAFTAR DISINI’和‘LOGIN DISINI’等 CTA 按钮。字体采用标准的 grotesque-sans 无衬线字体,涵盖展示文本和正文文本,以保持功能性和直接的阅读体验。关键结构元素包括用于产品展示的双栏布局、用于款式和尺码选择的带边框选项标签,以及醒目的横幅。关键的设计约束:避免使用柔和或微妙的强调色,避免使用隐藏分类的极简导航,避免使用衬线字体或复杂、分散注意力的动画。