01
设计气质 DNA
歉意直接视觉优先女性化透明
一家平静、视觉驱动的精品店面,橱窗上贴着一张个人化的、带歉意的字条。
02
色彩
#D4E157Ink#F3EFE9BG#E8E4DEMutedrgba(212, 225, 87, 0.5)Line柔和、自然的背景色板,叠加单一高饱和度、低纯度的黄绿色用于文本,以创造醒目、略带前卫感的对比。
03
字体
- display
64px · 400 - nav
14px · 500
大型衬线标题使用醒目的黄绿色,以产生高视觉冲击力。 · 导航元素使用全大写、字距加宽的无衬线字体。
04
间距
4px8px16px24px32px48px64px96px中心信息周围留有充足内边距,以确保在摄影背景上的可读性。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
无可见边框;完全依赖颜色对比和排版进行区分。
06
布局
1440container
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 组件或卡片——截图显示的是极简的、全出血的视觉布局。
- 不要使用多种强调色——截图显示的是单色黄绿色文本色板搭配中性背景。
- 不要使用尖锐、几何感的边框或阴影——截图显示的是柔和、无边框、无阴影的设计。
- 不要使用密集、小号的排版——截图显示的是大号、间距充裕的文本以确保可读性。
- 避免: 正式的企业语言
- 避免: 笨重的 UI 元素
- 避免: 杂乱的布局
- 避免: 标准的电子商务网格
11
System Prompt
这是一个消费品牌的编辑式、摄影驱动的电子商务网站。设计依赖于全出血、温暖的摄影背景,搭配醒目的黄绿色(约 #D4E157)过渡衬线文本叠加。布局极简,无可见边框、阴影或复杂 UI 组件。导航小巧、字距加宽、使用无衬线字体。语气个人化且带歉意。关键禁忌:避免深色模式,避免笨重的 UI 组件,避免多种强调色,避免标准的电子商务网格。整体感觉是平静、温暖且视觉驱动的。