Shopify 网站预览
Shopify 网站预览

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或类似)——所有灰度必须带有绿色或青色调,以与深色表面保持和谐
  • 永远不要使用厚重的投影来表现层级感——应使用表面色调渐变和细线边框,仅对交互元素使用柔和的叠加阴影
  • 永远不要在同一个页面中使用两个以上的强调色——仅用青绿色突出重点,仅在渐变中使用青 青色,绝不要同时使用,以免争夺用户注意力