01
设计气质 DNA
数字代理机构Shopify 合作伙伴品牌建设高端电商
高端时尚杂志与数字店面的结合
02
色彩
#C38133Accent#000000Ink#F2EFE6BGrgba(0,0,0,1.0)Line高对比度单色调，搭配温暖的中性色强调
03
字体
- display
86px · 400 - body
16px · 400 - caption
11px · 500
标题：Neue Haas Grotesk Display，紧凑的负值字距调整 · 正文：Reckless Neue 过渡衬线体，优雅且易读 · 标签：大写无衬线体，标准字重
04
间距
4px8px16px24px32px48px64px96px100px非对称网格，右半部分留有充裕的留白空间
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 4px
lg · 100px
pill · 100px
按钮和卡片采用 1px 实线黑色边框
06
布局
1440container
12columns
35pxgutter
768 / 1024breakpoints
分屏布局：左侧展示作品/作品集，右侧包含首屏文案与行动号召按钮
07
动效与交互
100msmicro
250mssmall
500msmedium
cubic-bezier(0.45, 0.02, 0.09, 0.98)easing
作品集叠加层的平滑透明度过渡 · 交互元素的基于 transform 的 hover 效果 · 作品条目的交错出现动画
卡片和按钮上微妙的 transform 偏移 · 通过透明度变化提供即时视觉反馈
08
组件
- button 带细黑色边框的描边矩形按钮，采用大写文本
- card 基于图片的悬浮叠加效果作品卡片，带有 hover 状态
- hero 超大字体标题搭配衬线体正文，采用分屏布局
09
文案语气与禁用清单
- 语气 自信、精致、权威
- 标题风格 直接、陈述性的超大写文案
- 按钮文案 极简的大写文本标签，配细边框
- 不要使用明亮的饱和色——截图显示的是柔和的暖中性色调搭配黑色强调
- 不要到处使用圆角——截图显示的是仅在特定元素上带有 4px 圆角的尖锐矩形按钮
- 不要为正文使用无衬线字体——截图显示的是用于段落文本的过渡衬线体 (Reckless Neue)
- 不要使用居中文本对齐——截图显示的是采用非对称网格的左对齐和右对齐文本
- 不要为卡片添加投影——截图显示的是带有细实线边框、无阴影效果的干净边缘
- 不要使用装饰性手写字体——截图显示的仅是无衬线体 (grotesque sans-serif) 和过渡衬线体 (transitional serif)
- 避免: playful 的语言
- 避免: 过多的标点符号
- 避免: 表情符号
- 避免: 感叹号
- 避免: 随意的语气
10
包内真实截图
11
System Prompt
这是一家位于阿姆斯特丹的高端数字代理机构 (Build in Amsterdam)，专注于 Shopify Plus 电商开发。其视觉识别以温暖的灰白色背景 (#F2EFE6) 为核心，搭配黑色 (#000000) 字体和标志性的琥珀色强调色 (#C38133)。字体组合采用 Neue Haas Grotesk Display 的超大标题（紧凑负值字距调整）与 Reckless Neue 过渡衬线体的正文。布局采用独特的分屏方式：作品样本占据左半部分，品牌信息填充右半部分。关键约束：切勿为正文段落使用无衬线字体，避免居中布局，保持温暖的中性色调，不引入冷色调的蓝色或绿色。按钮必须保持描边样式，使用 1px 细黑色边框。琥珀色强调色仅出现在特定 UI 元素中，例如圆形的菜单触发器。