受 Shopify 启发的设计系统

Category: 电子商务与零售 电商平台。深色优先的电影感，霓虹绿强调色，超细字重。

1. 视觉主题与氛围

Shopify.com 是一座深色优先的数字剧场——一个将其商业平台以电影首映式的方式呈现的网站。整个体验在近黑色的表面上展开，这些表面带着深邃森林绿的最微弱低语（#02090A、#061A1C、#102620），营造出一种夜间氛围，感觉与其说是一个 SaaS 营销页面，不如说是科技发布会上的一场独家产品揭幕。这种黑暗并不冷酷或企业化——它是奢华体验中温暖包裹的黑暗，就像坐在黑暗礼堂的前排。

排版是当之无愧的主角。NeueHaasGrotesk——一种精致的 Helvetica 后裔——以纪念碑式的尺寸（96px）和难以置信的细字重（330-400）出现，创造出感觉是用光刻就而非用墨水印刷的标题。ss03 OpenType 特性赋予字形独特个性，使 Shopify 的字体与普通 Helvetica 用法区分开来。在展示层之下，Inter Variable 以外科手术般的精准处理正文，使用同样不寻常的可变字重（420、450、550），这些字重存在于传统字重档位之间的空间里。这种精准度传递出一家对每个细节都精益求精的公司的信号。

颜色使用极为克制。主要强调色是 Shopify 霓虹绿（#36F4A4）——一种电子薄荷色，只出现在焦点环和强调高亮上，在深色画布上像生物发光信号一样脉动。更柔和的绿色调（芦荟绿 #C1FBD4、开心果绿 #D4F9E0）提供氛围渲染。白色是深色表面上唯一重要的文字颜色，而基于锌色的中性色阶（#A1A1AA 到 #3F3F46）处理安静信息的层次结构。结果是一种让商业技术感觉属于科幻未来的设计。

Key Characteristics：

• 深色优先设计，带有深邃森林青绿色底调（非纯黑色）
• 超细展示排版（字重 330）以纪念碑式尺寸（96px）创造飘逸存在感
• 霓虹绿（#36F4A4）作为黑暗中单一的高能强调色
• 完整圆角按钮（9999px 圆角半径）作为主要交互形状
• 分层多级盒阴影创造摄影般的深度感
• 产品截图嵌入深色 UI 环境中，与周围的黑暗融为一体
• 基于锌色的中性色阶处理文字层次——在冷暖之间取得平衡

2. 色彩面板与用途

主色

• Shopify 白（#FFFFFF）：深色表面上的主要文字，按钮填充，高对比度元素
• Shopify 黑（#000000）：页面主背景，白色按钮上的文字，最大对比度基础（—color-shade-100）

辅助色与强调色

• 霓虹绿（#36F4A4）：标志性强调色——焦点环、交互高亮、激活状态指示器。电子感与生物发光感
• 芦荟绿（#C1FBD4）：装饰性背景、氛围卡片的柔和绿色渲染（—color-aloe-10）
• 开心果绿（#D4F9E0）：细微表面差异化的最浅绿色调（—color-pistachio-10）

表面与背景色

• 虚空黑（#000000）：根页面背景——真正的黑色以获得最大深度
• 深青绿（#02090A）：卡片表面、内容容器——带有绿色底调的近黑色
• 深森林绿（#061A1C）：具有明显绿色特征的区块背景
• 森林绿（#102620）：提升的深色表面、头部背景——最温暖的深色调
• 深色卡片边框（#1E2C31）：深色表面上的卡片边框，细微的边界定义

中性色与文字色（锌色阶）

• Shade-30（#D4D4D8）：最浅中性色，深色上几乎不可见的边框（—color-shade-30）
• 静默文字（#A1A1AA）：次级文字、元数据、描述——安静的声音
• Shade-50（#71717A）：三级文字、时间戳、最不重要的信息（—color-shade-50）
• Shade-60（#52525B）：禁用文字、装饰性中性色（—color-shade-60）
• Shade-70（#3F3F46）：细微分割线，几乎不可见的 UI 边界（—color-shade-70）
• 浅色边框（#E4E4E7）：浅色表面上的边框（罕用——仅在浅色模态框中）

语义色与强调色

• Link Muted（#9797A2）：带有下划线装饰的静默链接文字
• Link Sage（#9DABAD）：青绿色调的静默链接
• Link Lavender（#BDBDCA）：较浅的链接变体
• Link Mint（#99B3AD）：主题区块的绿色调链接变体

渐变系统

• 深青绿渲染：从 #102620 中心到 #02090A 边缘的径向渐变——用于产品展示区后方
• 绿色氛围：英雄区块后方细微的绿色调环境渐变，在不使用纯色的情况下创造深度
• 聚光灯：亮度集中区域逐渐消退至黑色——创造发布会风格的演示照明效果

3. 排版规则

字体族

展示字体： NeueHaasGrotesk（精致的 Helvetica 后裔，可变字体）

• 回退字体：Helvetica、Arial、sans-serif
• OpenType 特性：ss03（风格集 3——独特的字形替代方案）
• 可用字重：330、360、400、500、750（可变）
• 用于所有标题、英雄文字和大型展示元素

正文字体： Inter-Variable

• 回退字体：Helvetica、Arial、sans-serif
• OpenType 特性：ss03
• 可用字重：400、420、450、500、550（可变）
• 用于正文文字、链接、按钮、UI 元素

等宽字体： ui-monospace

• 回退字体：SFMono-Regular、Menlo、Monaco、Consolas、Liberation Mono、Courier New
• 用于代码片段、数据标签、技术内容

层次结构

原则

Shopify 的排版是可变字体精准度的大师级示范。展示层几乎完全使用 330-400 的字重——羽毛般轻盈的文字，看起来像投影光一样悬浮于深色背景之上。这与大多数 SaaS 网站采用的粗重方式截然相反：别人大声呼喊，Shopify 却在巨大尺度上低语。96px 标题配以 330 字重创造出巨大尺寸与纤细笔画的悖论，既有纪念碑感，又有脆弱感。ss03 OpenType 特性激活了一个风格集，赋予特定字符（可能是 ‘a’、‘g’ 和某些数字）更精致的外观，使 Shopify 的排版有别于标准 Helvetica Neue 的用法。Inter Variable 以外科手术般的精准处理正文层，使用 420 和 550 等存在于传统档位之间的字重——每段文字都拥有其所需的准确视觉重量。

4. 组件样式

按钮

主要按钮（白色填充）

• 背景：白色（#FFFFFF）
• 文字：黑色（#000000）
• 边框：2px 透明实线
• 圆角半径：完整圆角（9999px）
• 内边距：12px 26px 12px 16px（不对称——右侧更多内边距以获得视觉平衡）
• 悬停：轻微透明度降低或背景偏移
• 焦点：2px #36F4A4（霓虹绿）外框
• 过渡：all 200ms ease

次要按钮（幽灵/轮廓）

• 背景：透明
• 文字：白色（#FFFFFF）
• 边框：2px 白色实线（#FFFFFF）
• 圆角半径：完整圆角（9999px）
• 内边距：12px 26px 12px 16px
• 悬停：填充为白色背景配黑色文字
• 焦点：2px #36F4A4 外框

徽章/标签（中性填充）

• 背景：rgba(255, 255, 255, 0.2)（磨砂玻璃）
• 文字：白色（#FFFFFF）
• 边框：无
• 圆角半径：轻微圆角（4px）
• 内边距：12px 16px
• 字体：16px 常规

卡片与容器

• 背景：深色页面上的深青绿（#02090A）
• 边框：1px 实线 #1E2C31（深色卡片边框）——几乎不可见的边界
• 圆角半径：标准卡片 8px，特色卡片 12px，顶部圆角卡片 20px 20px 0 0
• 阴影：多层系统：
  • 静止状态：rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px, rgba(0,0,0,0.1) 0px 4px 4px, rgba(0,0,0,0.1) 0px 8px 8px + rgba(255,255,255,0.03) 0px 1px 0px inset
  • 内嵌白色高亮创造细微的顶部边缘发光效果
• 悬停：阴影扩展，卡片可能略微变亮
• 过渡：box-shadow 300ms ease，transform 200ms ease

输入框与表单

• 背景：透明或深森林绿（#061A1C）
• 文字：白色（#FFFFFF）
• 边框：1px 实线 #3F3F46（Shade-70）
• 圆角半径：8px
• 内边距：12px 16px
• 焦点：2px 实线 #36F4A4（霓虹绿焦点环）
• 占位符：Shade-50（#71717A）
• 过渡：border-color 200ms ease

导航

• 背景：透明（叠加在深色英雄区上），滚动时变为森林绿（#102620）
• 高度：约 64px
• 左侧：Shopify 文字标志（SVG，深色背景上的白色）
• 中/右：18px/500 NeueHaasGrotesk 导航链接，白色，字距 0.72px
• CTA：白色圆角按钮”Start for free”（右侧）
• 次要 CTA：带白色边框的幽灵按钮
• 悬停：链接变为静默文字（#A1A1AA）或出现下划线
• 移动端：汉堡菜单，全屏深色遮罩层
• 过渡：滚动时背景 300ms ease

图片处理

• 产品截图：嵌入深色 UI 环境中，与周围的黑暗融为一体
• 管理界面预览：展示在带细微卡片边框的深色背景上
• 宽高比：多样——英雄图片较宽（约 16:9），功能截图较灵活
• 所有图片在深色容器内平铺——无亮色边框或边框
• 延迟加载配以深色占位表面

信任指标

• 突出展示统计数据：“15+“（年）、“150M+“（买家）
• 数字以 NeueHaasGrotesk 展示级别显示
• 合作伙伴/开发者生态系统专区
• 深色主题的评价评论融入页面流程中

5. 布局原则

间距系统

基础单位：8px

网格与容器

• 最大容器宽度：约 1280px（居中）
• 英雄区：全宽，边到边的深色背景配居中文字
• 功能区块：带文字和产品截图的两列布局
• 统计区块：配大数字的水平布局
• 水平内边距：桌面 64px，平板 32px，移动端 16px
• 网格间距：主要内容块之间 24-32px

留白哲学

Shopify 的留白策略是戏剧性的。区块之间以大片深色空间分隔——80px 到 120px 的纯黑色呼吸空间——创造出演示文稿的节奏，而不是网页的节奏。每个内容块都是主题演讲式滚动中独立的”幻灯片”。在区块内部，间距更紧凑也更有意图，在广阔的虚空中创造焦点密度。宏观层面的空旷与微观层面的精准之间的对比，赋予了网站其电影般的韵律。

圆角半径尺度

6. 深度与层级

Shopify 的阴影系统异常精密。卡片不使用单一值阴影，而是使用叠加的多层方式：用于边界定义的 1px 环、用于自然光衰减的 2px/4px/8px 渐进模糊，以及模拟顶部照明玻璃表面的精致内嵌白色发光（rgba(255,255,255,0.03)）。在深色背景上，阴影从已经很深的表面继续加深，因此阴影更像”环境遮挡”而不是传统的高度——卡片看起来略微下沉入表面，而不是漂浮在其上。

装饰性深度

• 深青绿渐变：英雄区块和产品展示区后方的环境径向渲染
• 聚光灯效果：从中心亮区消退至黑色的区域，营造发布会式戏剧照明
• 边缘发光：通过内嵌盒阴影在深色卡片上形成细微的亮色边缘
• 绿色氛围光晕：背景渐变中的微弱绿色调，呼应品牌强调色

7. 该做与不该做

该做

• 使用深青绿-黑色表面层次（虚空黑 → 深青绿 → 深森林绿 → 森林绿）来营造深度
• 保持展示排版在 330-400 字重——飘逸的轻盈感是设计的标志
• 将霓虹绿（#36F4A4）专门用于焦点状态和关键强调高亮
• 为所有主要 CTA 按钮应用 9999px 圆角半径——完整圆角胶囊不可妥协
• 为卡片高度使用多层阴影系统——单一阴影看起来平淡
• 在所有文字中保持 ss03 OpenType 特性——这是排版身份的一部分
• 正文使用 Inter Variable，标题使用 NeueHaasGrotesk——不要混淆它们的角色
• 在区块之间创造戏剧性间距（80px+）以获得电影般的节奏

不该做

• 不要在深色背景上将纯黑色（#000000）用于文字——只用白色（#FFFFFF）
• 不要引入暖色（橙色、红色、黄色）——色盘严格限于冷色（绿色、青绿色、中性色）
• 不要为 NeueHaasGrotesk 正文使用高于 500 的字重——重字重会破坏飘逸感
• 不要将绿色强调色应用于大面积区域——霓虹绿只用于小而精准的高亮
• 不要在交互元素上使用尖锐角（0px 圆角）——所有元素都应有圆角
• 不要添加亮色背景——深色主题是根本，不是可选的
• 不要使用单层盒阴影——叠加方式是整个系统
• 不要将正文的行高设置在 1.56 以上——Shopify 的文字相对紧凑
• 不要在同等大小/角色下混用 NeueHaasGrotesk 和 Inter——它们的字重尺度不同
• 不要为标题设置低于 0 的字距——Shopify 标题的字距为中性或正值

8. 响应式行为

断点

触摸目标

• 最小触摸目标：44x44px（WCAG AAA）
• 圆角胶囊按钮：最低 48px 高度配慷慨的水平内边距
• 导航链接：44px 触摸区域
• 卡片表面：链接时整张卡片可点击

折叠策略

• 导航：水平全链接 → 1024px 以下变汉堡菜单；Logo 和 CTA 按钮保持可见
• 英雄区块：96px 展示文字 → 平板 70px → 移动端 48px；保持单列居中对齐
• 功能区块：文字+图片两列 → 768px 以下叠加为单列
• 统计：水平行 → 移动端叠加为垂直
• 区块内边距：随视口缩小从 64px → 40px → 24px → 16px
• 卡片：网格 → 叠加，移动端保持全宽

图片行为

• 产品截图：在深色容器内响应式显示，保持宽高比
• 英雄图片：所有断点全宽，延迟加载配深色占位符
• 管理 UI 预览：按比例缩放，移动端可能裁剪
• 所有图片使用 CDN（cdn.shopify.com）配响应式 srcset

9. 智能体提示指南

快速颜色参考

• 主要 CTA：Shopify 白（#FFFFFF）
• 页面背景：虚空黑（#000000）
• 卡片表面：深青绿（#02090A）
• 区块背景：深森林绿（#061A1C）
• 提升背景：森林绿（#102620）
• 强调色：霓虹绿（#36F4A4）
• 正文文字：白色（#FFFFFF）
• 静默文字：静默灰（#A1A1AA）
• 深色边框：深色卡片边框（#1E2C31）

示例组件提示

• “在真实黑色（#000000）背景上创建一个英雄区块，使用 96px/330 的 NeueHaasGrotesk 白色标题、20px/500 的 #A1A1AA 副标题，以及两个圆角胶囊按钮：白色填充（9999px 圆角）和带 2px 白色边框的幽灵按钮”
• “在深青绿（#02090A）上设计一张带 1px #1E2C31 边框、12px 圆角、多层阴影（1px 环 + 2px/4px/8px 模糊，10% 黑色）的功能卡片，内含 32px/360 白色标题和 18px/400 #A1A1AA 正文”
• “在深森林绿（#061A1C）上构建一个统计区块，使用 96px/750 白色数字（NeueHaasGrotesk）、16px/400 #A1A1AA 描述标签，以及统计块之间 64px 的慷慨间距”
• “创建一个粘性导航，背景透明（滚动时变为 #102620），左侧白色 Shopify Logo，18px/500 白色导航链接配 0.72px 字距，右侧白色圆角胶囊按钮’Start for free’”
• “设计一个带 rgba(255,255,255,0.2) 磨砂玻璃背景、4px 圆角、12px 16px 内边距、16px 白色文字的标签/徽章——漂浮在深色卡片表面上”

迭代指南

使用此设计系统完善已生成的界面时：

1. 每次专注于一个组件
2. 引用本文档中的具体颜色名称和十六进制代码
3. 记住：这是深色优先设计——浅色表面是例外，不是规则
4. 展示文字应始终感觉羽毛轻盈（字重 330-400）——如果看起来很重，降低字重
5. 霓虹绿（#36F4A4）是珍贵的——只为焦点和强调色节俭使用
6. 深色表面层次（黑色 → 深青绿 → 深森林绿 → 森林绿）创造细微深度
7. 阴影是多层的——单个 box-shadow 值无法捕捉 Shopify 卡片的感觉
8. ss03 OpenType 特性必须在所有文字上激活以保持排版一致性