造物云设计系统 · 执行标准 V2.0

版本：2026-10-20。保留紫蓝、冷灰、晶体标识与品牌字体；规范以共享代码为准。

1. 来源与接入

• 令牌：tokens.css；公共布局与组件：design-system.css；展示：design-system.html。
• 先加载 tokens.css，再加载 design-system.css。默认暗色，根节点 data-theme="light" 切浅色。
• 展示页和本指南同步发布；禁止承诺未迁移页面自动更新。
• 存量官网首页、产品页待逐页迁移；不要未经回归直接给全站替换样式。

2. 容器与响应式

容器全部 border-box，最大宽度包含内边距。标准页 1180px；文档页 1280px；首页宽幅及导航、页脚 1600px。正文上限 680px、标题 760px。

• Hero、表单并排区域、内容侧栏在小于768px时单列。不得靠隐藏正文解决拥挤。
• 官网导航小于1280px默认折叠；1280px以上仍需检查真实文字宽度，拥挤时继续折叠。高度移动56px、其余64px；滚动收紧不得导致内容跳动。
• 表格与代码允许区域内滚动，必须可键盘聚焦、有区域名称；页面不允许横向溢出。
• 图片 max-width:100%、height:auto；长 URL 自动换行；不锁定正文卡片高度。
• 200%文字缩放与320px等效窄视口需可读；固定底部操作区考虑 safe-area-inset-bottom。

3. 字体与间距

Noto Sans SC 承担中文，Space Grotesk 承担数字和拉丁标签。不要用全局替换破坏中文回退。

Display clamp(32px,2.5vw + 20px,60px)，H1 28–40，H2 24–32，H3 20–22；正文16/1.7；UI14；辅助13；标签11。展示标题默认600，关键数字可700；正文400，UI500。

间距命名按4px倍数：sp-1=4、2=8、3=12、4=16、5=20、6=24、8=32、10=40、16=64、24=96。页面节奏走响应式语义令牌，不写固定96px覆盖移动端。

4. 颜色、材质与图表

accent用于品牌、链接与强调；action-bg/action-fg专供主按钮。暗色白字按钮底#5B5FE0，浅色#5A4FE6，分别约5.05:1和5.68:1；不得用白字+暗色accent承担普通小字按钮。

fg为正文，fg2为辅助信息，fg3仅纯装饰。图例、占位提示、必要元信息不属于纯装饰；透明色按合成背景实测。

语义色仅状态反馈。分类图表用chart-1至5，并辅以标签、线型、标记。数值必须有单位，示意数据明确标注；不把示意增长写成经营事实。

实面承载正文与操作；玻璃用于导航、轻浮层、品牌展示。无backdrop-filter时使用足够实的表面降级。

5. 组件契约

按钮：zw-btn基础，primary/ghost变体，pill仅营销CTA。操作圆角12px，卡片18px、大面板22px。最小命中区44px；跳转用a、操作用button。每任务区一个主要动作，不以视口计数。

状态：默认/hover/focus-visible/active/disabled/loading/error。原生disabled禁用button；链接禁用须移除跳转并处理键盘，不能只加aria-disabled。提交加载用aria-busy并防重复。

表单：常驻label、输入至少16px、帮助文字关联aria-describedby；错误设aria-invalid并给出解决办法。失败保留输入；成功与异步错误用live region播报。

导航：菜单按钮aria-expanded、aria-controls；Enter/Space打开、Escape关闭、恢复焦点。当前页aria-current。触屏不依赖hover。

弹窗：原生dialog或完整dialog语义、命名、焦点进入与圈定、Escape关闭、返回触发点，背景不可交互。展示图示不等于行为组件。

卡片：无跳转的卡片不加点击暗示；避免嵌套链接；正文不因hover跳动。

6. 动效与可访问性

时长150/250/700ms；卡片hover最多上移3px，触屏禁用抬升。尊重prefers-reduced-motion，关闭循环、入场位移和smooth scroll。入场失败仍显示内容。

普通文字至少4.5:1，大号文字按WCAG门槛判断，不能把14px加粗误当大字。焦点2px描边+至少2px偏移；不只靠颜色表达状态。

7. 品牌与语气

品牌标不拉伸、不改三面明度、不拆白底板；安全距至少标记高度的1/4。单标最小20px，横向组合24px；字标视高为标记0.62倍。资源继续使用brand目录与logo-guide.html。

文案具体、专业、说明下一步；错误说清问题和修复方式。产品事实、客户案例、增长数字需有来源。

8. 发布与验收

• 320/375/640/768/1024/1280/1600/1920宽度无页面级溢出；抽测359/360、767/768、1023/1024、1279/1280边界。
• 明暗主题、键盘Tab、焦点、减弱动效；长文案、无数据、错误、禁用、加载状态。
• 令牌/组件/展示/指南同版本；破坏性改动有迁移映射，旧变量先弃用再移除。
• 新增令牌写明用途与适用场景，禁止为单个页面无理由复制新值。
• 部署前备份并比对远端；部署后核验资源内容与状态码。

9. 版本与迁移

V2.0 / 2026-10-20：统一冲突口径，新增响应式矩阵、共享组件CSS、主按钮语义色、独立图表色、可交互布局预览。

保留旧令牌名；fs-display/h1/h2/h3改流式值，fg2提高可读性。外部使用方先回归，勿盲目替换生产依赖。

V1 / 2026-08：初版。