Shopify 网站预览
Shopify 网站预览

Shopify

深夜市集,薄荷灯下

Shopify的设计语言呈现出一个深夜市集,被薄荷绿信号点亮:近黑色的画布带有淡淡的森林色调,白色文字采用近乎轻声的笔画重量(330),通过 宽松 的字间距传递语气,搭配一个鲜明的薄荷绿点缀,作为功能性的标点而非装饰。界面元素以微妙的深绿色渐变(#02090a → #041e18 → #072720)层层叠加,使卡片如同从同一材质中取出的面板,仅以细线分隔,而非厚重阴影。主要操作按钮采用高对比度的白色圆点按钮——绿色从不用于操作本身,而是保留为品牌主色调,用于行内高亮、关键短语和图标,读来是自信而非紧迫感。布局在电影级满幅摄影与深色内容区块之间交替,内容区块中采用圆角媒体卡片(12px半径),营造出盛景与目录之间的节奏感。

查看原始网站

使用规范

建议采用

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