不同宽度，同一套秩序
从 320px 到超宽屏，先保证内容可读，再增加并列信息。断点描述可用空间，不判断设备型号。下列数值是共享令牌与组件的执行规则。
| 视口宽度 | 页边距 | 栅格 / 沟槽 | 卡片 | 页面 / 区块节奏 | 导航 |
|---|---|---|---|---|---|
| 320–359 | 16px | 4 栏 / 16px | 1 列 | 48 / 40px | 56px，折叠菜单 |
| 360–767 | 20px | 4 栏 / 16px | 1 列 | 48 / 40px | 56px，折叠菜单 |
| 768–1023 | 32px | 8 栏 / 24px | 2 列 | 72 / 48px | 64px，折叠菜单 |
| 1024–1279 | 40px | 12 栏 / 24px | 3 列 | 96 / 64px | 默认折叠；空间充足才展开 |
| 1280–1599 | 40px | 12 栏 / 24px | 3 列 | 96 / 64px | 完整导航，拥挤则折叠 |
| ≥1600 | 40px + 居中余白 | 12 栏 / 24px | 默认仍 3 列 | 96 / 64px | 框架上限 1600px |
选容器
标准页 1180px；文档 1280px；首页宽幅、导航与页脚 1600px。宽度含 padding，不再额外加 80px。
保阅读
正文最多 680px，标题最多 760px。字号用 clamp 连续变化；正文 16px，输入框至少 16px。
变结构
Hero、测评与预约在 768px 以下纵向排列。表格局部横向滚动；页面本身不横向滚动。
布局预览
选择目标宽度，查看对应卡片列数；真实页面仍需拖动浏览器验证。
组件契约
按钮与链接
跳转用 a，执行用 button。最小命中区 44×44px。普通操作 12px 圆角，营销 CTA 可用胶囊；每个任务区一个主要动作。
表单与反馈
提交时防止重复；失败保留输入并允许重试；结果用 aria-live 播报。
导航与弹层
移动菜单使用 button 和 aria-expanded；Enter / Space 展开，Escape 关闭并恢复焦点。弹窗锁定焦点、背景不可交互，并提供可见关闭按钮。
这些是实现验收条件；本页静态导航与弹窗图示不视为可复用行为组件。
材质、图表与可访问性
正文和操作界面优先使用稳定实面。玻璃仅用于导航、轻浮层和品牌展示，并提供不支持模糊时的实色降级。图表分类使用 --chart-1…5，状态色仅表达状态；序列同时提供文字、线型或标记。
白字 / 暗色品牌紫 #7B80FF 对比约 3.29:1，不能用于普通小字按钮。主按钮统一使用 --action-bg：暗色 #5B5FE0（5.05:1）、浅色 #5A4FE6（5.68:1）。正文至少 4.5:1；图例和占位提示也属于信息。透明背景按最终合成色复测。
交付与迁移
先引用 tokens.css，再引用 design-system.css。保留旧令牌名，新增语义别名；不直接全站注入新组件。首页与产品页仍为待迁移页面，逐页验收后接入。设计页、执行指南、CSS 同版本发布。
<link rel="stylesheet" href="tokens.css?v=2.0">
<link rel="stylesheet" href="design-system.css?v=2.0">
<div class="zw-container zw-container--wide">
<div class="zw-cards">…</div>
</div>品牌内核
Brand Essence设计系统不是色卡的堆叠，而是一种态度的延续。造物云的视觉语言围绕三个词展开，所有令牌与组件都为它们服务。
基础设施感
智能像电力一样随取随用。视觉传达稳定、可计量、可信赖——克制的留白、精确的网格、可预期的交互。
专业冷感
面向企业的判断力。深空底色、紫蓝主调、思源黑体标题，传达技术的深度与产品的成熟，不卖萌、不喧哗。
高光的活力
玻璃拟态、柔和渐变、会“呼吸”的背景对话——在专业之上留一束光，让“企业级”不等于“冰冷”。
品牌标 · Logo
Brand Mark由晶体标记（白色超椭圆底板 + 三面紫色晶体）与“造物云”字标组成。内嵌字标 SVG 用 currentColor 随背景反相；下载的锁版须按背景选深浅版本。深、浅、紫底都用同一枚完整标记——浅底只多补一层承托投影 + 发丝边，绝不拆掉白底板。三面明度顺序「顶亮 · 左深」不可改。
配色系统
Colors全部色值以 CSS 变量管理，明暗双主题各一套（点右上角切换）。主色为紫蓝，承担链接、强调与 CTA；语义色仅用于状态反馈。点击任意色块复制其变量名。
暗色主文字用微带蓝调的 #ECEEFF，浅色用冷墨 #16181F——都不是纯黑纯白，让文字与底色共享色温、降低刺目。
浅色主色收敛为靛蓝 #5A4FE6，底色改为中性冷灰 #F4F5F8——不发暖、不发脏，与暗色紫蓝同族呼应。
字体系统
Typography一款中文字体撑全站：思源黑体（Noto Sans SC）。标题与正文同字体，靠字号 + 字重分层——展示标题用 SemiBold 600（中文大字号下 700/900 偏方偏重，600 更清透、更接近 Google/Gemini 的从容气质）。拉丁字母、数字与 kicker 用 Space Grotesk。
图标系统
Iconography全站只用单色线性图标，不用 emoji。统一 24×24 网格、描边 1.5、圆角端点，描边一律 currentColor 随上下文取色。
规范：统一 24×24 网格、描边 1.5、圆角端点；按钮内 16px、徽章内 14px、卡片图标位 22px；颜色一律 currentColor，随容器取色，不另画实心版。
间距
Spacing以 4px 为基数的阶梯。组件内部用小档，区块之间用中大档，页面级垂直节奏用 64 / 96。
圆角 + 阴影
Radius + Shadow圆角偏大偏柔，呼应玻璃拟态。阴影多层叠加而非单层重模糊：近处锐影定边界，远处大模糊负扩散托浮起；浅色主题再叠一层发丝环。
材质与分区
Surfaces & Regions同一层玻璃在不同透明度下承担不同层级。整站遵循一条表面阶梯：底 → 分区面 → 表面 / 卡片 → 玻璃浮层，越靠前的元素越透、越亮。相邻区域用「底色交替 + 发丝分隔线」建立呼吸节奏，重点区（Hero / CTA）才铺满主色光晕与点阵肌理。
玻璃质感只有在“背后有内容”时才看得出。下方底板固定为一张彩色图形＋网格的忙背景（不随主题变），三张卡用同一套白色、不同不透明度＋模糊叠加——透得越多、越能看到背后的图形，就是越“轻”的玻璃。
规则：普通信息区 A / B 交替、用 1px 发丝线分隔；每屏最多一个重点区，避免多个高饱和区域相邻打架。
布局规范
容器全部包含内边距：标准内容页 --container 1180px，文档 --container-doc 1280px，首页宽幅 --container-wide 与导航页脚 --container-chrome 1600px。正文最多680px，标题760px。正文左对齐；Hero与收尾CTA可居中。
查看响应式矩阵与布局预览 ↑动效
Motion三档时长 + 两条曲线：微交互 150ms、常规 250ms、入场 700ms。此外还有一层“呼吸”底噪——借鉴 Gemini 的科技质感：背景对话与光晕缓慢起伏，聚焦输入时转为“深呼吸”。一律尊重 prefers-reduced-motion。
动效哲学：深度靠“连续”而非“花哨”。状态之间用缓动过渡而非硬切；处理/思考用循环微动表达“系统在运转”；重点元素才叠加光晕与呼吸。任何一次交互只用一种动画，且都尊重 prefers-reduced-motion。
核心组件
Components营销 CTA 用胶囊形，操作按钮用 12px 圆角；内容卡片以实面为主，玻璃用于导航和重点展示；徽章用于状态与产品标记；表单聚焦时主色描边 + 柔光环。
智核 · TOKEN HUB
统一接入 50+ 大模型，智能路由、灰度发布与成本核算，让模型能力像电力一样随取随用。
| 模型 | 上下文 | 供应商 | 日均调用 |
|---|---|---|---|
| GPT-4o | 128K | OpenAI | 4.20M |
| Claude 3.5 | 200K | Anthropic | 3.15M |
| DeepSeek R1 | 64K | DeepSeek | 1.74M |
数据可视化
Data Viz以下图表为视觉示意，不代表真实经营数据。资产库、复利曲线、用量看板——数据是造物云讲“资产化”故事的主角。图表语言统一：主色承载“你的资产”，中性灰承载“成本 / 损耗”；网格极淡、坐标克制，让数字自己说话。
响应式与栅格
320–767px：4栏、16px沟槽、卡片单列；768–1023px：8栏、24px沟槽、卡片双列；≥1024px：12栏、24px沟槽、默认三列。导航独立以1280px为展开起点，拥挤时继续折叠。详细页边距、节奏与验收宽度见V2矩阵。
查看响应式矩阵与布局预览 ↑反馈
Feedback系统对用户的回话：Alert 常驻页内、Toast 短暂浮层、Modal 打断确认。四种语义色各司其职，图标 + 文案双通道，不靠颜色单独传达。
删除后其调用记录仍保留在资产库，但应用本身无法恢复。
状态
Empty · Loading · 404空、加载、出错也是产品的一部分。空状态给下一步、加载用骨架占位、错误页给出路。语气保持笃定友好，不卖惨、不甩锅。
接入第一个模型，开始积累你的资产。
＋ 接入模型页面走丢了，我们带你回去。
返回首页无障碍
Accessibility好设计对所有人成立。对比达 WCAG AA、键盘焦点永远可见、命中区 ≥44px、颜色不作唯一信号、尊重减弱动效。
所有可交互元素带 2px 主色焦点环，offset 2px，绝不 outline:none 了事。
图标即使小，可点区域也补足 44×44；颜色之外必配图标或文字，色盲同样可辨。
语气
Voice & Tone专业、笃定、有洞见。像一位懂技术也懂业务的顾问——说人话、给判断，不堆砌术语，不喊口号。中文一律用弯引号“”，不用 emoji。
“越用越聪明的不是工具，是你的公司。”
“统一接入 50+ 大模型，成本可控、随取随用。”
“让每一条业务流水线具备 AI 决策能力。”
“全球领先的一站式 AI 赋能生态平台。”
“颠覆式重塑企业数智化转型新范式。”
“让 AI 为您的业务插上腾飞的翅膀！”
资源下载
Resources把这套设计系统带进你的项目——令牌直接引入，标准发给同事，品牌资源供合作伙伴与供应商取用。令牌以 tokens.css 为准，公共组件以 design-system.css 为准，本页与执行文档同步发布。
<link rel="stylesheet" href="https://www.zaowuyun.com/tokens.css">