造物云设计系统
统一规则，可复用的设计基础。

设计系统不是色卡的堆叠，而是一种态度的延续。造物云的视觉语言围绕三个词展开，所有令牌与组件都为它们服务。

由晶体标记（白色超椭圆底板 + 三面紫色晶体）与“造物云”字标组成。内嵌字标 SVG 用 currentColor 随背景反相；下载的锁版须按背景选深浅版本。深、浅、紫底都用同一枚完整标记——浅底只多补一层承托投影 + 发丝边，绝不拆掉白底板。三面明度顺序「顶亮 · 左深」不可改。

全部色值以 CSS 变量管理，明暗双主题各一套（点右上角切换）。主色为紫蓝，承担链接、强调与 CTA；语义色仅用于状态反馈。点击任意色块复制其变量名。

语义优先，色值留在令牌层

品牌强调、操作、文字和表面各司其职。新代码可使用 --surface-canvas / --surface-content / --surface-raised、--text-primary / --text-secondary、--border-default。旧变量继续有效；不要在业务页临时算一组透明度来替代稳定表面。颜色对比按最终背景复测。

一款中文字体撑全站：思源黑体（Noto Sans SC）。标题与正文同字体，靠字号 + 字重分层——展示标题用 SemiBold 600（中文大字号下 700/900 偏方偏重，600 更清透、更接近 Google/Gemini 的从容气质）。拉丁字母、数字与 kicker 用 Space Grotesk。

同一品牌，三种使用场景

用页面任务决定排版和材质。品牌表达允许一个视觉重点；产品操作强调稳定与清晰；内容阅读照顾行长与连续阅读。这里是可复用样式演示，不代表新的产品功能。

全站只用单色线性图标，不用 emoji。统一 24×24 网格、描边 1.5、圆角端点，描边一律 currentColor 随上下文取色。

规范：统一 24×24 网格、描边 1.5、圆角端点；按钮内 16px、徽章内 14px、卡片图标位 22px；颜色一律 currentColor，随容器取色，不另画实心版。

图像怎么选：动作、解释、证据、氛围

查看场景与图像规范 ↗

以 4px 为基数的阶梯。组件内部用小档，区块之间用中大档，页面级垂直节奏用 64 / 96。

密度以任务为准

复用 zw-stack、zw-actions、zw-cards 与 zw-split 组织空间，不为每个区块新写一组数字。紧凑数据可以缩小行内留白，交互目标仍至少44px；触屏不通过缩小操作控件换取密度。

圆角偏大偏柔，呼应玻璃拟态。阴影多层叠加而非单层重模糊：近处锐影定边界，远处大模糊负扩散托浮起；浅色主题再叠一层发丝环。

同一层玻璃在不同透明度下承担不同层级。整站遵循一条表面阶梯：底 → 分区面 → 表面 / 卡片 → 玻璃浮层，越靠前的元素越透、越亮。相邻区域用「底色交替 + 发丝分隔线」建立呼吸节奏，重点区（Hero / CTA）才铺满主色光晕与点阵肌理。

玻璃质感只有在“背后有内容”时才看得出。下方底板固定为一张彩色图形＋网格的忙背景（不随主题变），三张卡用同一套白色、不同不透明度＋模糊叠加——透得越多、越能看到背后的图形，就是越“轻”的玻璃。

内容表面与品牌材质分开

--surface-content 是稳定实面，用于表单和持续阅读；--surface-raised 承担浮层。玻璃用于导航、叙事展示和轻浮层，不能让背后的内容影响正文可读性。降低透明度偏好和不支持模糊时都回退到实面。

布局规范

容器全部包含内边距：标准内容页 --container 1180px，文档 --container-doc 1280px，首页宽幅 --container-wide 与导航页脚 --container-chrome 1600px。正文最多680px，标题760px。正文左对齐；Hero与收尾CTA可居中。

按宽度组织布局

视口决定可用空间；页面类型决定容器上限。以下矩阵、共享令牌和布局预览使用同一套规则。

三档时长 + 一条默认曲线：微交互 150ms、常规 250ms、入场 700ms。此外还有一层“呼吸”底噪——借鉴 Gemini 的科技质感：背景对话与光晕缓慢起伏，聚焦输入时转为“深呼吸”。一律尊重 prefers-reduced-motion。

动效哲学：深度靠“连续”而非“花哨”。状态之间用缓动过渡而非硬切；处理/思考用循环微动表达“系统在运转”；重点元素才叠加光晕与呼吸。任何一次交互只用一种动画，且都尊重 prefers-reduced-motion。

全站顶栏的唯一规范。三段式：品牌锁版 · 主导航 · 行动区。标准导航高 64px，移动端 56px；粘顶、玻璃模糊；容器使用 --container-chrome，内边距随断点调整。信息架构由站点内容决定，下方导航为组件示意，不是当前官网菜单清单。导航统一复用，变更时同步所有业务页。行动区按站点任务选用「预约咨询」；仅已开放登录的产品展示登录入口，CTA 是导航行动区的最高优先级动作。导航项统一 14px / 字重 500；悬停用下划线自左展开（2px 主色，.22s）比整块底色更轻更精致，两种择一、不叠加。

营销 CTA 用胶囊形，操作按钮用 12px 圆角；内容卡片以实面为主，玻璃用于导航和重点展示；徽章用于状态与产品标记；表单聚焦时主色描边 + 柔光环。

组件契约

组件成熟度：样式不等于完整行为

新组件先证明有复用场景，再提供API、尺寸/变体/状态、键盘规则、适用范围与验证证据。状态从“草案/样式可用”到“行为验证”逐步升级，不用好看的示例代替可用性验证。

交互验收示例

下列示例使用公开的 design-system.js 行为模块。导航开合、原生弹窗可复用；表单只在浏览器内演示校验和状态，不上传数据。

<link rel="stylesheet" href="tokens.css?v=2.3">
<link rel="stylesheet" href="design-system.css?v=2.3">
<script src="design-system.js?v=2.3"></script>
// 在模板挂载后初始化，卸载时清理；重复初始化不会重复绑定。
const cleanup = ZaowuyunUI.mount(document);
// cleanup();

以下图表为视觉示意，不代表真实经营数据。资产库、复利曲线、用量看板——数据是造物云讲“资产化”故事的主角。图表语言统一：主色承载“你的资产”，中性灰承载“成本 / 损耗”；网格极淡、坐标克制，让数字自己说话。

响应式与栅格

320–767px：4栏、16px沟槽、卡片单列；768–1023px：8栏、24px沟槽、卡片双列；≥1024px：12栏、24px沟槽、默认三列。导航根据实际内容宽度折叠：当前官网营销导航在1440px展开；文档章节导航采用横向滚动。详细页边距、节奏与验收宽度见布局章节。

系统对用户的回话：Alert 常驻页内、Toast 短暂浮层、Modal 打断确认。四种语义色各司其职，图标 + 文案双通道，不靠颜色单独传达。

空、加载、出错也是产品的一部分。空状态给下一步、加载用骨架占位、错误页给出路。语气保持笃定友好，不卖惨、不甩锅。

好设计对所有人成立。对比达 WCAG AA、键盘焦点永远可见、命中区 ≥44px、颜色不作唯一信号、尊重减弱动效。

对比度与信息表达

正文和操作界面优先使用稳定实面。玻璃仅用于导航、轻浮层和品牌展示，并提供不支持模糊时的实色降级。图表分类使用 --chart-1…5，状态色仅表达状态；序列同时提供文字、线型或标记。

白字 / 暗色品牌紫 #7B80FF 对比约 3.29:1，不能用于普通小字按钮。主按钮统一使用 --action-bg：暗色 #5B5FE0（5.05:1）、浅色 #5A4FE6（5.68:1）。正文至少 4.5:1；图例和占位提示也属于信息。透明背景按最终合成色复测。

专业、笃定、有洞见。像一位懂技术也懂业务的顾问——说人话、给判断，不堆砌术语，不喊口号。中文一律用弯引号“”，不用 emoji。

把这套设计系统带进你的项目——令牌直接引入，标准发给同事，品牌资源供合作伙伴与供应商取用。令牌以 tokens.css 为准，公共组件以 design-system.css 为准，本页与执行文档同步发布。

标记 · 品牌全彩

首选版本。白底板自带托底，浅底 / 深底 / 照片底通用。

下载 SVG →

标记 · 反白

仅限品牌紫底使用，不替代首选版。

下载 SVG →

标记 · 单色墨

黑白印刷、盖章、传真场景。

下载 SVG →

横向锁版

标记 + 字标，正式场合首选。字标须跟背景走。

浅底版 →·深底版 →

交付与迁移

先引用 tokens.css，再引用 design-system.css。保留旧令牌名，新增语义别名；不直接全站注入新组件。首页与产品页仍为待迁移页面，逐页验收后接入。设计页、执行指南、CSS 同版本发布。

<link rel="stylesheet" href="tokens.css?v=2.3">
<link rel="stylesheet" href="design-system.css?v=2.3">
<div class="zw-container zw-container--wide">
  <div class="zw-cards">…</div>
</div>

下载公共布局与组件 CSS ↗ · 执行规范 ↗

完整下载包包含 SKILL.md、执行规范、共享样式和可核对的版本清单。历史版本在页尾统一查看。

Agent 使用说明

把当前页面链接交给 Agent 即可作为规范入口。执行前先读取下列规则；无需依赖页面动画或预览器。Skill 文件可直接阅读，支持技能的环境可使用下载包安装。

可直接复制给 Agent 的任务说明

请按 https://www.zaowuyun.com/design-system.html 的当前规范完成本次设计任务。
先读 https://www.zaowuyun.com/design-agent.html 获取读取顺序与兼容入口，
再读 https://www.zaowuyun.com/design-system-manifest.json 确认版本，
再读 https://www.zaowuyun.com/zaowuyun-design-skill.md 与 https://www.zaowuyun.com/design.md。
保留现有品牌与页面叙事结构，把新增规则整合进对应章节。
实现后报告使用的规范版本、改动文件、响应式与无障碍验证结果及例外。

Agent 网页阅读版 · 下载 skill 源文件 · 下载完整规范与 skill 包

任务要求优先于本规范。发现规范互相冲突时，查验版本清单并报告，不自行拼接不同版本。页面链接提供执行上下文，不保证所有 Agent 自动安装或完全遵从。

按任务读取，避免一次加载全部规范

• 品牌物料：Logo章节、场景与图像规范、品牌资源；不读取不相关表单细节。
• 官网或长文：布局、排版、场景与内容规则；保持现有叙事顺序。
• 产品UI：令牌、组件成熟度、状态与无障碍契约；核对实际已实现API。
• 审查：列出文件位置、问题、用户影响、建议和真实验证结果。

外部skill为方法参考。其默认字体、颜色、技术栈、英文文案偏好不覆盖造物云VI、现有项目和用户任务。

VI 与设计系统版本记录

品牌标识、颜色、字体、布局、组件、文案与 Agent 规则统一记录。当前版本 V2.3；稳定入口始终使用本页地址，历史版本通过归档包保留。

完整变更记录 ↗

发布规则：样式修正升补丁号；兼容规则、组件或文档扩展升次版本；移除令牌、改品牌主色或破坏组件契约升主版本并附迁移说明。文档、令牌、组件与下载包同一发布版本，逐项记录实际文件变化。