企业官网建设流程全解析

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成

本指南以design-systems/shopify/目录下 Open Design 仓库内置的 Shopify 风格设计系统为骨架，系统拆解"暗色优先 + 超轻量排版 + 霓虹绿点缀"的视觉语言，并结合仓库中的tokens.css、components.html、components.manifest.json等真实实现文件，讲解配色 Token、字体层级、组件样式、布局与深度体系以及可直接喂给 AI Agent 的生成提示词。读完本文，你将能够用这套规范复刻一个具有影院级质感的电商落地页、Landing Page 或产品功能展示页。

1. 视觉主题与氛围：暗色优先的数字剧场

Shopify.com 的设计本质是一个"暗色优先（dark-first）的数字剧场"——整个页面像一场电影首映式，把商业平台本身当作产品发布会来呈现。整个体验铺陈在一片近乎黑色的表面之上，这些表面带有最微弱的深森林绿气息（#02090A、#061A1C、#102620），营造出一种夜间氛围：它不是冷冰冰的 SaaS 营销页，而是一场科技 keynote 上的独家产品揭幕。这种黑暗不是寒冷或企业化的，而是奢华体验中温暖包裹的暗——如同坐在暗场音乐厅的前排。

在 Open Design 仓库的 tokens.css 中，这一氛围被固化为三层表面 Token：

--bg: #000000; /* void —— 真正的黑色根背景 */ --surface: #02090a; /* 深青绿 —— 卡片表面 */ --surface-warm: #061a1c; /* 暗森林 —— 区块背景 */

关键特征一览：

• 暗色优先设计，带深森林青绿底色（而非纯黑）
• 超轻量 display 排版（字重 330）配合纪念碑式大字号（96px），营造空灵质感
• 霓虹绿（#36F4A4）作为黑暗中唯一的高能量强调色
• 全药丸按钮（9999px 圆角）作为主要交互形态
• 多层、多阶段 box-shadow 营造摄影级深度
• 产品截图嵌入暗色 UI 语境，与周围黑暗融为一体
• 以锌为基底的中性色阶管理文本层级——冷暖之间取得平衡

2. 调色板与角色：每一度颜色都有职责

2.1 主色（Primary）

2.2 次要与强调色（Secondary & Accent）

在 tokens.css 中，霓虹绿被进一步拆成完整的交互状态族：

--accent: #36f4a4; /* 霓虹绿 */ --accent-on: #000000; /* 霓虹绿上的黑色文字（保证对比度） */ --accent-hover: #2de097; /* 悬停时略深的霓虹绿 */ --accent-active: color-mix(in oklab, var(--accent), black 14%); /* 激活态，OKLab 混合压暗 14% */

color-mix(in oklab, ...)是现代 CSS 颜色混合语法，说明这套 Token 允许在 OKLab 感知均匀色彩空间内派生状态色，而不是硬编码一个近似值。

2.3 表面与背景（Surface & Background）

这一"四层表面层级"（Void → Deep Teal → Dark Forest → Forest）是全站深度叙事的核心，对应 tokens.css 中的--bg/--surface/--surface-warm三个变量加文档中描述的 Forest 抬升层。

2.4 中性色与文本（锌色阶 Zinc Scale）

在 tokens.css 中，这些语义对应为--muted: #a1a1aa（次要文字）、--meta: #71717a（时间戳/三级信息）、--border-soft: #3f3f46（细分隔线），配合--border: #1e2c31（暗卡片边框）构成完整的边框体系。

2.5 语义链接色（Semantic & Accent）

2.6 渐变系统（Gradient System）

• 暗青绿 Wash：从中心#102620到边缘#02090A的径向渐变——用于产品展示区背后
• 绿色氛围渐变：hero 区块后方带绿色底调的微妙氛围渐变，不借助纯色便制造深度
• 聚光灯（Spotlight）：聚焦的亮区渐隐至黑色——营造 keynote 式的舞台照明

3. 排版规则：可变字体的精密掌控

3.1 字体家族

Display 字体：NeueHaasGrotesk（Helvetica 的精炼后裔，可变字体）

• 回退栈："NeueHaasGrotesk", "Helvetica Neue", Helvetica, Arial, sans-serif
• OpenType 特性：ss03（样式集 3——独特的字形替代）
• 可用字重：330、360、400、500、750（可变）
• 用于所有标题、hero 文字和大型 display 元素

正文：Inter Variable

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

等宽：ui-monospace

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

这三个字体族在 tokens.css 中被绑定为--font-display、--font-body、--font-mono三个 Token。注意ss03特性在 components.html 中通过font-feature-settings: "ss03"全局施加在body、所有标题和按钮上（见其第 103、129、171 行），确保整个界面字形风格统一。

3.2 完整排版层级表

在 tokens.css 中，这套层级被压缩为连续字号阶梯：--text-xs: 12px→--text-sm: 14px→--text-base: 18px→--text-lg: 20px→--text-xl: 32px→--text-2xl: 48px→--text-3xl: 70px→--text-4xl: 96px，配合--leading-body: 1.56、--leading-tight: 1.00、--tracking-display: 0em。需要特别留意的是：tokens.css 注释明确说明--tracking-display: 0em只描述 96px 大字的基准字距，而较小 NeueHaasGrotesk 字号上的正字距（0.32px–2.4px）需要按 DESIGN 文档在组件层内联设置。

3.3 排版原则

Shopify 的排版是可变字体精密度的教科书。display 层几乎只活在 330–400 字重——羽毛般轻盈的文字像投射的光一样悬浮在暗色背景之上。这与大多数 SaaS 网站采用的粗黑方式截然相反：别人在喊叫，Shopify 用大尺度低语。96px 字重 330 的标题制造了"巨大尺寸 × 纤细笔画"的悖论，既纪念碑式又脆弱易碎。ss03OpenType 特性激活的样式集给特定字符（很可能是 'a'、'g' 和某些数字）更精致的面貌，使 Shopify 的字体区别于标准 Helvetica Neue 用法。Inter Variable 以手术级的精度处理正文层，使用 420、550 等存在于传统字重档位之间的可变字重——每段文字恰好拥有它需要的视觉重量。

4. 组件样式：从按钮到卡片的完整配方

4.1 按钮（Buttons）

主按钮（白色填充）

• 背景：白色（#FFFFFF）；文字：黑色（#000000）
• 边框：2px solid transparent
• 圆角：全药丸（9999px）
• 内边距：12px 26px 12px 16px（不对称——右侧更多内边距以求视觉平衡）
• 悬停：轻微降低不透明度或切换背景
• 焦点：2px#36F4A4（霓虹绿）轮廓环
• 过渡：all 200ms ease

次按钮（Ghost/描边）

• 背景：透明；文字：白色（#FFFFFF）
• 边框：2px solid 白色
• 圆角：全药丸（9999px）
• 内边距：12px 26px 12px 16px
• 悬停：填充为白色背景 + 黑色文字（反色）
• 焦点：2px#36F4A4轮廓

徽章/标签（中性填充）

• 背景：rgba(255, 255, 255, 0.2)（磨砂玻璃效果）
• 文字：白色；边框：无
• 圆角：轻微圆角（4px）
• 内边距：12px 16px；字体：16px regular

在 components.html 中，按钮的落地实现与文档完全一致：.btn基类使用border-radius: var(--radius-sm)（即 9999px 全药丸）、padding: 12px 26px 12px 16px、font-feature-settings: "ss03"；.btn-primary:hover { opacity: 0.9; }；.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }（焦点环即为0 0 0 2px #36f4a4）。这里印证了文档中"焦点使用霓虹绿 2px 环"的描述，并且把焦点样式挂在了:focus-visible上，保证键盘可达性而不会在鼠标点击时误触发。

4.2 卡片与容器（Cards & Containers）

• 背景：深青绿（#02090A）
• 边框：1px solid#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

tokens.css 将这套阴影封装为--elev-raised单变量（见 tokens.css 第 120-125 行），components.html中的.card直接引用box-shadow: var(--elev-raised)。

4.3 输入框与表单（Inputs & Forms）

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

落地代码中，.field input使用background: var(--surface-warm)、border: 1px solid var(--border-soft)、border-radius: var(--radius-md)、padding: 12px 16px；::placeholder颜色为var(--meta)（#71717a）；:focus时border-color: var(--accent)并叠加box-shadow: var(--focus-ring)。

4.4 导航（Navigation）

• 背景：透明（覆盖在暗色 hero 上），滚动后变为森林色（#102620）
• 高度：约 64px
• 左侧：Shopify wordmark 标志（SVG，暗底白色）
• 中/右侧：18px/500 NeueHaasGrotesk 导航链接，白色，字距 0.72px
• CTA：白色药丸按钮 "Start for free"（右侧）
• 次级 CTA：白色描边 ghost 按钮
• 悬停：链接变为弱化文字（#A1A1AA）或获得下划线
• 移动端：汉堡菜单，全屏暗色遮罩
• 滚动时背景过渡 300ms ease

4.5 图片处理（Image Treatment）

• 产品截图：嵌入暗色 UI 语境，与周围黑暗融合
• 管理后台界面预览：展示在暗色背景上，带细微卡片边框
• 宽高比：多样——hero 图片宽幅（约 16:9），功能截图灵活
• 所有图片在暗色容器内齐平嵌入——无亮色边框或框架
• 懒加载并配暗色占位表面

4.6 信任指标（Trust Indicators）

• 统计数据醒目展示："15+"（年）、"150M+"（买家）
• 数字以 NeueHaasGrotesk display 尺度呈现
• 合作伙伴/开发者生态 callout 区块
• 暗色主题 testimonials 融入页面流

在 components.html 的 hero 示例中可以看到完整落地：.stat-number使用font-family: var(--font-display)、font-size: var(--text-3xl)（70px）、font-weight: 750、line-height: 1.00，与文档"数字以 display 尺度 750 字重呈现"完全对应。

5. 布局原则：剧院式的节奏

5.1 间距系统（8px 基准单位）

tokens.css 对应的变量为--space-1（4px）到--space-12（64px），并额外提供了区块纵向节奏--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 40px，正是文档中"区块间 80–120px 纯黑呼吸空间"的落地形式。

5.2 网格与容器（Grid & Container）

• 最大容器宽度：约 1280px（居中）
• Hero：通栏、边到边暗色背景、文字居中
• 功能区块：文字 + 产品截图的 2 列布局
• 统计区块：带大数字的横向布局
• 水平内边距：桌面 64px、平板 32px、移动 16px
• 网格间距：主要内容块之间 24–32px

落地代码中--container-max: 1280px、--container-gutter-desktop: 64px、--container-gutter-tablet: 32px、--container-gutter-phone: 16px一一对应；.container采用margin-inline: auto居中，并在 1023px、639px 两个断点逐级收窄内边距。

5.3 留白哲学

Shopify 的留白策略是剧院式的。区块之间由广袤的暗色空间分隔——80px 到 120px 的纯黑呼吸区——创造出演示而非网页的节奏。每个内容块在 keynote 式滚动中是自己的"一张幻灯片"。区块内部，间距更紧凑、更有目的性，在广阔虚空之上制造焦点密度。宏观层面的空旷与微观层面的精确之间的对比，正是网站电影化节奏的来源。

5.4 圆角尺度（Border Radius Scale）

tokens.css 将其收敛为--radius-sm: 9999px（全药丸——所有 CTA 按钮）、--radius-md: 8px（标准卡片/输入框）、--radius-lg: 12px（重点卡片）、--radius-pill: 9999px。

6. 深度与层级：环境光遮蔽而非悬浮

Shopify 的阴影系统异乎寻常地精密。卡片不使用单一值阴影，而是采用堆叠多层方案：1px 环用于边界定义，2px/4px/8px 渐进模糊模拟自然光衰减，再加上rgba(255,255,255,0.03)的微妙内嵌白色微光模拟顶部照明的玻璃表面。在暗色背景上，阴影从本已很暗的表面继续压暗，因此阴影更像"环境光遮蔽"而非传统抬升——卡片看起来微微沉入表面，而不是悬浮其上。

tokens.css 将中等等级封装为--elev-raised（含完整的 5 层声明），--elev-ring: 0 0 0 1px var(--border)对应 Subtle 层，--elev-flat: none对应 Base 层，--focus-ring: 0 0 0 2px #36f4a4对应焦点层。

装饰性深度

• 暗青绿渐变：hero 区块和产品展示背后的氛围径向 wash
• 聚光灯效果：聚焦亮区渐隐至黑色，营造 keynote 式舞台照明
• 边缘微光：通过 inset box-shadow 在暗卡片上制造微亮色边缘
• 绿色氛围光晕：背景渐变中微弱的绿色底调，呼应品牌强调色

7. 该做与不该做（Do's and Don'ts）

应该做（Do）

• 使用暗青绿-黑表面层级（Void → Deep Teal → Dark Forest → Forest）营造深度
• 保持 display 排版字重 330–400——空灵轻盈是设计的签名
• 霓虹绿（#36F4A4）仅用于焦点状态和关键强调高亮
• 所有主 CTA 按钮应用 9999px 圆角——全药丸不可妥协
• 卡片抬升使用多层阴影系统——单层阴影看起来扁平
• 所有文字保持ss03OpenType 特性——它是排版身份的一部分
• 正文用 Inter Variable、标题用 NeueHaasGrotesk——绝不混用角色
• 区块间制造剧院式间距（80px+）以获得电影化节奏

不该做（Don't）

• 暗色背景上不要用纯黑（#000000）作文字——只用白色（#FFFFFF）
• 不要引入暖色（橙、红、黄）——色板严格偏冷（绿、青绿、中性色）
• 正文 NeueHaasGrotesk 字重不要超过 500——重字重破坏空灵感
• 不要在大面积表面上使用绿色强调——霓虹绿只用于小而精确的高亮
• 交互元素不要用直角（0px 圆角）——一切都要圆润
• 不要添加亮色背景——暗色主题是根本，不是可选项
• 不要使用单层 box-shadow——堆叠方案才是系统
• 正文 line-height 不要超过 1.56——Shopify 文字相对紧凑
• 不要在相同字号/角色下混用 NeueHaasGrotesk 和 Inter——它们的字重尺度不同
• 标题不要用低于 0 的字距——Shopify 标题字距中性或为正

8. 响应式行为

断点

落地代码中，components.html使用@media (max-width: 1023px)将.container内边距切到 64→32px、区块纵向间距切到 96→64px，并用@media (max-width: 639px)继续切到 16px/40px；.hero-grid与.stats-grid分别在 1023px 和 639px 处塌陷为单列。

触控目标（Touch Targets）

• 最小触控目标：44×44px（WCAG AAA）
• 药丸按钮：最小高度 48px，水平内边距慷慨
• 导航链接：44px 触控区
• 卡片表面：整卡在可链接处均可点击

塌陷策略（Collapsing Strategy）

• 导航：完整横向链接 → 1024px 以下汉堡菜单；logo 与 CTA 按钮保持可见
• Hero 区块：96px display → 平板 70px → 移动 48px；保持单列居中
• 功能区块：2 列文字+图片 → 768px 以下堆叠为单列
• 统计：横向行 → 移动端堆叠纵向
• 区块内边距：64px → 40px → 24px → 16px 随视口收窄
• 卡片：网格 → 堆叠，移动端保持通栏

图片行为

• 产品截图：暗色容器内响应式缩放，保持宽高比
• Hero 图片：所有断点通栏，懒加载并配暗色占位
• 管理后台 UI 预览：按比例缩放，移动端可能裁切
• 所有图片使用 CDN 配合响应式 srcset

9. Agent 提示词指南：让 AI 生成 Shopify 风格界面

9.1 快速颜色速查

• 主 CTA：Shopify 白（#FFFFFF）
• 页面背景：Void 黑（#000000）
• 卡片表面：深青绿（#02090A）
• 区块背景：暗森林（#061A1C）
• 抬升背景：森林（#102620）
• 强调色：霓虹绿（#36F4A4）
• 正文文字：白色（#FFFFFF）
• 弱化文字：Muted（#A1A1AA）
• 暗色边框：暗卡片边框（#1E2C31）

9.2 组件提示词示例

以下提示词直接来自设计规范，可原样复制给 Claude Code、Codex、Cursor 等编码 Agent 使用：

"Create a hero section on true black (#000000) background with a 96px/330 NeueHaasGrotesk headline in white, a 20px/500 subtitle in #A1A1AA, and two pill buttons: white filled (9999px radius) and ghost with 2px white border"

"Design a feature card on Deep Teal (#02090A) with 1px #1E2C31 border, 12px radius, multi-layer shadow (1px ring + 2px/4px/8px blur at 10% black), containing a 32px/360 white heading and 18px/400 #A1A1AA body text"

"Build a stats section on Dark Forest (#061A1C) with 96px/750 white numbers (NeueHaasGrotesk), 16px/400 #A1A1AA descriptive labels, and generous 64px spacing between stat blocks"

"Create a sticky nav with transparent background (becomes #102620 on scroll), white Shopify logo left, 18px/500 white nav links with 0.72px letter-spacing, and a white pill 'Start for free' button right"

"Design a tag/badge with rgba(255,255,255,0.2) frosted glass background, 4px radius, 12px 16px padding, white 16px text — floating over a dark card surface"

9.3 迭代指南

对已有页面进行精修时：

1. 一次只聚焦一个组件
2. 引用本文档中具体的颜色名称和十六进制码
3. 记住：这是暗色优先设计——亮色表面是例外而非规则
4. display 文字必须始终如羽毛般轻盈（字重 330–400）——若显笨重，降低字重
5. 霓虹绿（#36F4A4）珍贵——仅用于焦点与强调，节制使用
6. 暗色表面层级（黑 → 深青绿 → 暗森林 → 森林）制造微妙深度
7. 阴影必须多层——单一box-shadow值捕捉不到 Shopify 卡片的感觉
8. ss03OpenType 特性必须在所有文字上开启以保证排版一致性

10. 在 Open Design 仓库中的使用方式

本规范在仓库中是一份完整可用的设计系统包，包含设计文档、Token 样式表、组件实现与预览页面。按 USAGE.md 的推荐阅读顺序：

1. 先读USAGE.md理解包契约
2. 再读DESIGN.md了解视觉意图、约束与反模式
3. 将tokens.css的:rootToken 块粘贴进第一个 artifact 的<style>块，再编写组件 CSS
4. 用components.manifest.json快速浏览组件清单；需要精确选择器或状态时打开components.html
5. 需要视觉核对时检查preview/目录下的colors.html、typography.html、spacing.html三个预览页

需要强调的契约约束（来自 USAGE.md）：

• 保留 schema Token 名称原样，保证跨品牌切换可靠
• 用--accent表示主要操作、链接、焦点状态以及一个清晰焦点元素
• 优先复用components.manifest.json中的组件组，而不是发明新控件
• 避免在复制的:rootToken 块之外使用裸 hex 值
• 避免独立于tokens.css重定义 Tailwind 或 design-token 值
• 不主张原始上游来源证据——本包基于仓库内置的 curated 打包 fixture
• 不添加components.html或DESIGN.md中未体现的新组件配方

在工程实现层面，components.manifest.json提供了完整的质量审计：它声明了 58 个 Token（全部已声明且被引用，undeclaredReferenced为空数组），35 个选择器、15 个类、22 个元素，并标注了 buttons、inputs、cards、links、icons、typography、layout 等组件组及其引用的 Token 列表——例如 buttons 组引用--radius-sm（全药丸）、--motion-base（200ms）、--ease-standard等。这份清单证明所有可见值均来自tokens.css，实现了"单一事实来源"的 Token 治理。

如果你希望在生成 artifact 时对这套暗色系统做无障碍把关，manifest.json 中建议关联的 craft 规范为color与accessibility-baseline（仓库根目录 craft/ 目录下可找到对应文档），这也与设计中 44×44px 触控目标、白色正文对比度等细节相呼应。

结语

这套 Shopify 风格设计系统证明了"克制"的力量：四层暗色表面、一个高能量强调色、一套空灵的 330 字重可变字体、一种不可妥协的全药丸按钮。它把电商科技包装成科幻电影的未来感，同时通过完整的 Token 体系让任何 Agent 或开发者都能精确复刻。结合 tokens.css（Token 定义）、components.html（组件实现）、DESIGN.md（完整规范）三件套，你可以在任何项目中快速落地这套"暗色电影化"视觉语言。

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成