# 受 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
- 用于代码片段、数据标签、技术内容

### 层次结构

| 角色 | 大小 | 字重 | 行高 | 字距 | 备注 |
|------|------|--------|-------------|----------------|-------|
| Display XL | 96px | 400 | 1.00 | — | NeueHaasGrotesk，英雄标题，"ss03" |
| Display XL Bold | 90.74px | 750 | 1.00 | 4.54px | NeueHaasGrotesk，强调展示 |
| Display XL Tracked | 96px | 400 | 1.00 | 2.4px | NeueHaasGrotesk，间距展示 |
| Display Light | 96px | 330 | 0.96 | — | NeueHaasGrotesk，飘逸展示 |
| Heading 1 | 70px | 330 | 1.00 | — | NeueHaasGrotesk，区块标题 |
| Heading 2 | 55px | 330 | 1.16 | — | NeueHaasGrotesk，子区块 |
| Heading 3 | 48px | 330 | 1.14 | — | NeueHaasGrotesk，功能标题 |
| Heading 4 | 32px | 360 | 1.14 | 0.32px | NeueHaasGrotesk，卡片标题 |
| Heading 5 | 28px | 500 | 1.28 | 0.42px | NeueHaasGrotesk，小标题 |
| Heading 6 | 24px | 400 | 1.14 | 0.36px | NeueHaasGrotesk，次要标题 |
| Body Large | 20px | 500 | 1.40 | 0.3px | NeueHaasGrotesk / Inter，引言段落 |
| Body | 18px | 400 | 1.56 | — | Inter-Variable，标准正文 |
| Body Medium | 18px | 550 | 1.56 | — | Inter-Variable，强调正文 |
| Body Small | 16px | 400 | 1.50 | — | Inter / NeueHaasGrotesk，紧凑正文 |
| Body Small Medium | 16px | 420 | 1.50 | — | Inter-Variable，轻微强调 |
| Button | 16px | 400 | 1.50 | — | NeueHaasGrotesk，CTA 文字 |
| Nav Link | 18px | 500 | 1.25 | 0.72px | NeueHaasGrotesk，导航项目 |
| Caption | 14px | 500 | 1.49 | 0.28px | NeueHaasGrotesk / Inter，元数据 |
| Caption Medium | 14px | 550 | 1.49 | 0.28px | Inter-Variable，强调说明文字 |
| Overline | 15.36px | 400 | 1.50 | 1.54px | NeueHaasGrotesk，宽字距标签 |
| Micro | 13px | 500 | 1.50 | -0.13px | Inter，紧字距小文字 |
| Label | 12px | 400 | 1.20 | 0.72px | Inter，大写标签 |
| Code | 16px | 400 | 1.50 | — | ui-monospace，大写，代码块 |
| Code Small | 12px | 400 | 1.33 | — | ui-monospace，大写，内联代码 |

### 原则

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

| 标记 | 值 | 用途 |
|-------|-------|-----|
| space-1 | 4px | 紧凑内联间距 |
| space-2 | 8px | 基础单位，图标间距 |
| space-3 | 12px | 卡片内边距，紧凑外边距 |
| space-4 | 16px | 标准元素内边距 |
| space-5 | 24px | 卡片间距，区块内边距 |
| space-6 | 28px | 中等区块间距 |
| space-7 | 32px | 区块分隔 |
| space-8 | 36px | 大内边距 |
| space-9 | 40px | 主要区块内边距 |
| space-10 | 64px | 英雄区块内边距，大间距 |

### 网格与容器

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

### 留白哲学

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

### 圆角半径尺度

| 值 | 应用场景 |
|-------|---------|
| 4px | 标签、徽章、微型元素 |
| 8px | 标准卡片、输入框、视频容器 |
| 12px | 特色卡片、图片容器、按钮（非圆角胶囊） |
| 20px | 顶部圆角卡片（20px 20px 0 0），模态框头部 |
| 340px | 大型圆角装饰元素 |
| 9999px | 圆角胶囊按钮、圆角胶囊徽章、导航元素 |

## 6. 深度与层级

| 层级 | 处理方式 | 用途 |
|-------|-----------|-----|
| 基础 | 无阴影，深色表面 | 默认页面背景 |
| 细微 | `rgba(0,0,0,0.1) 0px 0px 0px 1px` + 内嵌白色发光 | 静止卡片 |
| 中等 | 多层：1px 环 + 2px + 4px + 8px 阴影叠加 | 提升卡片，特色区块 |
| 高 | `rgba(0,0,0,0.25) 0px 25px 50px -12px` | 模态框、下拉框、遮罩层 |
| 焦点 | `0px 0px 0px 2px #36F4A4` | 键盘焦点环（霓虹绿） |

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. 响应式行为

### 断点

| 名称 | 宽度 | 主要变化 |
|------|-------|-------------|
| 移动端 | <640px | 单列，汉堡导航，展示文字缩至 48px，16px 内边距 |
| 平板 | 640-1024px | 两列网格开始，展示文字 70px，32px 内边距 |
| 桌面 | 1024-1440px | 完整布局，展开导航，96px 展示文字，64px 内边距 |
| 大桌面 | >1440px | 最大宽度容器居中，增加区块间距 |

### 触摸目标

- 最小触摸目标：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 特性必须在所有文字上激活以保持排版一致性