Shopify

近黑色基底、大幅摄影展示与胶囊形控件。
页面以近黑色为基底。字体采用 NeueHaasGrotesk、Inter-Variable。视觉特点包括大幅摄影展示、胶囊形控件、圆角卡片、细线分隔。适合参考的场景:品牌电商首页、商品展示页。
查看原始网站使用规范
建议采用
- 显示标题使用330的笔画重量(70-96px),字间距为0.015至0.04em——这种轻声笔画是品牌的标志性语气
- 主要操作按钮设为白色填充(#ffffff),文字为#02090a,绝不用薄荷绿——薄荷绿仅用于文本强调,而非操作按钮
- 仅将 #36f4a4 应用于关键词高亮和文字商标 — 它应表现为语义标点,而非装饰
- 所有内容卡片使用圆角 12px,行动按钮使用圆角 9999px — 这种搭配形成卡片与按钮的层级关系
- 按顺序叠加深色表面:#02090a → #041e18 → #072720 — 每一步都必须带有绿色色调,以保持氛围的连贯性
- 使用
- 在所有NeueHaasGrotesk和Inter文本中启用ss03字体特性设置——该功能可启用替代字形,以定义品牌的字母个性
- 在深色卡片上为多层柔和阴影(黑色0.1 + 白色0.03内嵌)搭配,营造玻璃边缘效果,而非使用厚重的外扩阴影
建议避免
- 绝不要使用700号字重以上的显示标题——品牌的权威感来自330字重的克制,而非700字重的体量感
- 绝不要将按钮填充为#36f4a4——这种青绿色是用于文本和强调的颜色,而非操作性颜色
- 永远不要使用浅色或中性背景——系统默认为深色主题;卡片、区域和画布均采用带有绿色调的深色
- 永远不要在卡片上使用大于12px的圆角——9999px的圆润形状专用于按钮和标签
- 永远不要使用纯中性灰(#808080或类似)——所有灰度必须带有绿色或青色调,以与深色表面保持和谐
- 永远不要使用厚重的投影来表现层级感——应使用表面色调渐变和细线边框,仅对交互元素使用柔和的叠加阴影
- 永远不要在同一个页面中使用两个以上的强调色——仅用青绿色突出重点,仅在渐变中使用青 青色,绝不要同时使用,以免争夺用户注意力