# 造物云设计系统 · 执行标准 **版本 V1** · 适用范围：对内产品与市场物料、对外合作伙伴与供应商 | | 地址 | |---|---| | 权威来源（唯一） | | | 令牌文件 | | | 本文档（在线版） | | | 品牌资源下载 | 设计系统页 §16 资源下载 | | 标志完整规范 | | > 本文是**可执行标准**，不是参考建议。对内评审与对外交付均以此为准；有冲突时，以设计系统页的实际取值为最终依据。 --- ## 0. 三条铁律 1. **只用变量，不写字面值。** 写 `var(--accent)`，不写 `#7B80FF`。改一处等于改全站。 2. **明暗共享同名令牌。** 组件只认变量名；主题切换靠根节点 `data-theme`，组件代码零改动。 3. **语义色只做状态反馈。** `--ok/--info/--warn/--err` 不当品牌色、不当图表分类色。 ## 1. 接入 ```html ``` 默认暗色。切浅色： ```html ``` ```js // 运行时切换（建议记忆到 localStorage） document.documentElement.setAttribute('data-theme', 'light'); // 浅色 document.documentElement.removeAttribute('data-theme'); // 暗色（默认） ``` --- ## 2. 颜色 ### 品牌 | 令牌 | 暗色 | 浅色 | 用途 | |---|---|---|---| | `--accent` | `#7B80FF` | `#5A4FE6` | 链接、CTA、强调、图表主序列 | | `--accentDeep` | `#5B5FE0` | `#4438C4` | hover / 按下 | | `--acBg` | 主色 13% | 主色 8% | 主色浅底：标签、图标位 | **主色是唯一品牌色**，承担链接 / CTA / 强调。全站实心主色胶囊按钮**只用于最高优先级动作**（如「预约演示」），一屏一个。 ### 文字（四级） `--fg` 主文字 → `--fgStrong` 次强 → `--fg2` 次要 → `--fg3` 辅助 > ⚠️ `--fg3` 对比度约 2.0–2.2，**达不到 AA，只可用于纯装饰**（占位、图例、极次要标注），禁止承载正文。 ### 表面（由深到浅的层级） `--bg` 地基 → `--bg2` 次级底 → `--panel` 最淡面板 → `--demo` 演示区 → `--surf` 表面 → `--card` 卡片 ### 描边（三档，形成线宽层级） | 令牌 | 用途 | |---|---| | `--bdrSoft` | 组件**内部**分隔 | | `--bdr` | 组件**边界**（默认） | | `--bdrBrt` | hover / 强调 | ### 语义色 `--ok` 成功 · `--info` 信息 · `--warn` 警告 · `--err` 错误，各配 `--okBg` 等浅底。 **只做状态反馈**——不作主色、不作图表分类色。 --- ## 3. 字体 | 令牌 | 字体 | 用途 | |---|---|---| | `--font-sans` | Noto Sans SC | 中文与正文（默认） | | `--font-latin` | Space Grotesk | 拉丁、数字、kicker、标签、指标 | | `--font-serif` | Noto Serif SC | 仅编辑式长文（如关于页叙事） | **字阶**：`--fs-display 44` / `--fs-h1 32` / `--fs-h2 24` / `--fs-h3 19` / `--fs-body 16` / `--fs-note 15` / `--fs-sm 14` / `--fs-caption 13` / `--fs-xs 12` / `--fs-label 11` ### 字重策略（最容易做错的一环） **主力是 500，不是 400。** 中文在 ≤16px 时，400 显轻飘、600 显闷，`--fw-medium` 最清晰耐读。 | 字重 | 令牌 | 用在哪 | |---|---|---| | 400 | `--fw-normal` | **仅**长段落正文 | | 500 | `--fw-medium` | **默认**：导航项、按钮、标签、卡片描述、表格 | | 600 | `--fw-semibold` | 小标题、强调、表头 | | 700 | `--fw-bold` | **仅**大标题与关键数字——用得越少越有力 | 不用 800+：中文粗字重会糊成一团。 ### 行高按字号分档 字越大行高越紧，否则大标题会散架、小字会挤。 | 令牌 | 值 | 适用字号 | |---|---|---| | `--lh-display` | 1.15 | ≥40px 展示标题 | | `--lh-tight` | 1.25 | 24–36px 标题 | | `--lh-snug` | 1.45 | 18–20px 小标题 | | `--lh-base` | 1.7 | 正文（中文比西文需要更松）| | `--lh-caption` | 1.55 | ≤13px 小字 | ### 小字梯度 小字层次是"精致感"的来源——**别只有一档小字**。`--fs-sm 14`（UI 主力）、`--fs-caption 13`（卡片描述，小字主力）、`--fs-xs 12`（元信息）、`--fs-label 11`（kicker）四档各司其职；`--fs-note 15` 承接正文与 UI 之间。 **约定** - 所有拉丁标签（kicker / 分组名）用 `.mono` + `font-size:11px` + `letter-spacing:.1–.14em` + 大写 - 数字已全局 `tabular-nums`，表格 / 指标天然对齐 - 大标题配 `letter-spacing:-.02em` 收紧 --- ## 4. 间距与布局 **间距基数 4**：`--sp-1 4` … `--sp-4 16` · `--sp-6 24` · `--sp-10 40` · `--sp-16 64` · `--sp-24 96` **纵向节奏（四档）** | 层级 | 值 | |---|---| | 页面级 | `--sp-24` 96 | | 区块间 | `--sp-16` 64 | | 块内 | `--sp-8` 32 | | 元素间 | `--sp-4` 16 | **布局** **容器分三层，按页面类型选——不要随手写数字：** | 令牌 | 值 | 用在哪 | |---|---|---| | `--container-chrome` | 1600px | 顶栏 / 页脚的通栏内层（全站一致）| | `--container-wide` | 1600px | 宽幅叙事页（首页、大屏演示）| | `--container` | **1180px** | **默认**——营销页、产品页、内容页 | | `--container-doc` | 1280px | 文档页（内容密度高，如设计系统本身）| - 桌面页边距 `--gutter` 40 / 移动 `--gutter-sm` 20 - 正文可读宽度 `--measure` **≤680px**（约 36–46 字/行），标题 ≤760px——**别让长句通栏** - 12 列栅格、列间距 24 - 卡片网格用 `auto-fit + minmax(220–300px, 1fr)`，移动端自动收单栏 **通栏区块的正确写法**（背景通栏、内容对齐容器）： ```css .section-full { padding: var(--sp-24) max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); background: var(--bg2); } ``` **对齐**：正文与列表**左对齐**；仅 Hero、CTA、巨幕 slogan 居中。 **断点**：`≤640` 移动单栏 · `641–1024` 平板双栏 · `≥1025` 桌面多栏 --- ## 5. 圆角 | 令牌 | 值 | 用途 | |---|---|---| | `--r-xs` | 6px | 小标记、焦点环 | | `--r-sm` | 8px | 徽章、输入框 | | `--r-md` | 12px | **按钮、图标位（最常用）** | | `--r-lg` | 18px | 卡片 | | `--r-xl` | 22px | 大面板 | | `--r-full` | 999px | 胶囊按钮、头像 | 同一组件内保持同一档；嵌套时外层比内层大一档。 --- ## 6. 阴影 | 令牌 | 用途 | |---|---| | `--sh1` | 卡片 / 悬浮 | | `--sh2` | 弹层 / 模态 | | `--shGlass` | 玻璃面（含顶部内高光） | 多层叠影而非单层重模糊：近处 1–2px 锐影定边界，远处大模糊托浮起。 **浅色主题自动换成"发丝环 + 极低透明度叠影"**——近乎无影但有真实托起，不要在浅色下硬套暗色阴影。 --- ## 7. 玻璃拟态 ```css .glass { background: var(--glass); border: 1px solid var(--bdr); box-shadow: var(--shGlass); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); } ``` 层级：`--glassA`（最淡）→ `--glassB` → `--glassC`（最实），顶部高光统一 `--glassTop`。 --- ## 8. 动效 | 令牌 | 值 | 用途 | |---|---|---| | `--t-fast` | .15s | 微交互（颜色、描边） | | `--t-base` | .25s | 常规（hover 位移、展开） | | `--t-slow` | .7s | 入场 | | `--ease` | `cubic-bezier(.4,1,.6,1)` | **全站默认缓动** | **原则** - 深度靠**连续**而非花哨：状态之间缓动过渡，不硬切 - 一次交互只用**一种**动画 - 卡片 hover 标准：`transform: translateY(-3px)` + 描边转主色 - 必须尊重 `prefers-reduced-motion`（`tokens.css` 已内置全局降级） --- ## 9. 组件约定 **按钮** | 类型 | 样式 | 用途 | |---|---|---| | 主 | `--accent` 实心胶囊，白字 | 最高优先级，一屏一个 | | 次 | `--card` + `1px --bdrBrt` 描边 | 并列动作 | | 幽灵 | 透明 + 描边 | 低优先级 | 主按钮白字落在 `--accent` 上对比约 3.3（暗色）——**按钮文字请 ≥14px 且 ≥600 字重**，或改用 `--accentDeep` 底。 **导航栏**：高 64px（滚动后收 56px），粘顶，`--navBg` + `blur(22px)`，背景通栏、内容收进 `--container` 居中带与正文对齐。 **页脚**：`--ftrBg` 深色锚，三段式（品牌锚区 + 三栏导航 + 底栏合规），ICP / 公安备案常驻。 **焦点态**：`tokens.css` 已内置全局 `:focus-visible`（2px 主色环 + 2px offset）——**不要 `outline:none` 而不给替代**。 --- ## 10. 数据可视化 - **主色承载"你的资产 / 增长"**，中性灰承载"成本 / 损耗"，二者同图对照 - 网格线极淡（`--bdrSoft`），无边框、无阴影；坐标标签用 `--font-latin` - 关键点用脉冲圆点强调，线条入场"生长"，不做花哨转场 - 最多 5 个分类序列，超出并入「其他」 --- ## 11. 文案语气 温暖但专业、朴实不炫技、站在用户这边。 - 用用户认得的词，不用系统内部叫法（说"通知"，不说"webhook 配置"） - 主动语态；按钮说清会发生什么（`发布` → 提示 `已发布`） - 报错说明**出了什么问题 + 怎么修**，不空道歉 - 具体胜过机灵 --- ## 12. 品牌资源（对外可下载） 合作伙伴、供应商、媒体可直接从设计系统页 **§16 资源下载** 取用，无需另行申请。 ### 选哪个版本 | 背景 | 用这个 | 文件 | |---|---|---| | 浅底 / 白底 | 品牌全彩 | `zaowuyun-mark-color.svg` | | 深底 / 深空底 | 品牌全彩（同一枚，直接用） | `zaowuyun-mark-color.svg` | | 照片 / 复杂背景 | 品牌全彩（白底板自带托底） | `zaowuyun-mark-color.svg` | | **品牌紫底** | 反白（白晶体，无底板） | `zaowuyun-mark-reverse.svg` | | 黑白印刷 / 盖章 / 传真 | 单色·墨 | `zaowuyun-mark-mono.svg` | | 正式场合（标记 + 字标）· 浅底 | 横向锁版 | `zaowuyun-lockup.svg` | | 正式场合（标记 + 字标）· 深底 | 横向锁版·反白字标 | `zaowuyun-lockup-dark.svg` | **首选永远是品牌全彩**——白底板自带托底，浅底、深底、照片底通吃。只有在品牌紫底上才换反白版。 **锁版字标必须跟背景走**：浅底用墨色字标，深底与紫底用反白字标。SVG 里字标色是写死的，不会自动反相——拿错版本字就会看不见。 ### 红线（不可协商） - 安全距 **≥ 1X**（X = 标记高 ÷ 4），四周留空，越大越好 - 最小尺寸：屏幕**单标记 ≥ 20px**、横向组合整体高 **≥ 24px**；印刷 8mm / 10mm - 三面明度顺序「**顶亮 · 左深**」任何版本都不可改 - **不**拉伸、**不**旋转、**不**换色、**不**加描边或外发光 - **不**为适配浅底而拆掉白底板、只留半颗宝石 - **不**在杂乱背景上直接放——先垫纯色块或玻璃块 - 字标比例固定：字标视高 = 标记视高 × **0.62** 完整规则与错误用法对照见 。 --- ## 13. 检查清单（提交前过一遍） - [ ] 没有硬编码色值 / 圆角 / 间距，全部走变量 - [ ] 明暗两主题都验证过（切 `data-theme` 看一遍） - [ ] 正文宽度 ≤ `--measure`，没有通栏长句 - [ ] `--fg3` 没有用在正文上 - [ ] 键盘 Tab 一遍，焦点环清晰可见 - [ ] 移动端 ≤640 单栏正常，无横向滚动 - [ ] 一屏只有一个实心主色 CTA - [ ] 动效尊重 `prefers-reduced-motion` --- ## 14. 治理：谁改、怎么改 - **唯一改动入口**：`design-system.html`。任何颜色、字号、圆角、间距的变更，先改这里，再同步 `tokens.css` 与本文档——**不允许在业务页面里直接改样式来"绕过"标准**。 - **版本号**：设计系统页顶栏显示当前版本（现为 **V1**）。破坏性变更（改主色、改容器宽度、删令牌）升主版本并在下方记录。 - **提出变更**：带上使用场景与截图，走设计评审；临时需求优先用现有令牌组合解决，不新增令牌。 - **对外分发**：合作方直接引用线上地址（`tokens.css` / 品牌资源），不要私自复制副本——副本会随时间与标准脱节。 ### 变更记录 | 版本 | 日期 | 变更 | |---|---|---| | V1 | 2026-08 | 首次发布：96 个令牌（明暗各 48）、字体/字阶/圆角/间距/动效规范、组件与图表约定、品牌资源包（5 个 SVG）、全站统一 favicon | --- ## 附：完整令牌速查 见 。所有令牌在设计系统页可**点击色块直接复制变量名**。