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