精选 · 开放 · 免费
Build in Amsterdam
专注于旗舰级电商体验的高端数字代理机构
agencyecommerce
01
设计气质 DNA
数字代理机构Shopify 合作伙伴品牌建设高端电商
高端时尚杂志与数字店面的结合
02
色彩
#C38133Accent
#000000Ink
#F2EFE6BG
rgba(0,0,0,1.0)Line
高对比度单色调,搭配温暖的中性色强调
03
字体
grotesque-sans · transitional-serif
- display
86px · 400 - body
16px · 400 - caption
11px · 500
标题:Neue Haas Grotesk Display,紧凑的负值字距调整 · 正文:Reckless Neue 过渡衬线体,优雅且易读 · 标签:大写无衬线体,标准字重
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
100px
非对称网格,右半部分留有充裕的留白空间
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
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一家位于阿姆斯特丹的高端数字代理机构 (Build in Amsterdam),专注于 Shopify Plus 电商开发。其视觉识别以温暖的灰白色背景 (#F2EFE6) 为核心,搭配黑色 (#000000) 字体和标志性的琥珀色强调色 (#C38133)。字体组合采用 Neue Haas Grotesk Display 的超大标题(紧凑负值字距调整)与 Reckless Neue 过渡衬线体的正文。布局采用独特的分屏方式:作品样本占据左半部分,品牌信息填充右半部分。关键约束:切勿为正文段落使用无衬线字体,避免居中布局,保持温暖的中性色调,不引入冷色调的蓝色或绿色。按钮必须保持描边样式,使用 1px 细黑色边框。琥珀色强调色仅出现在特定 UI 元素中,例如圆形的菜单触发器。
en · zh-CN · zh-TW · ja · ko