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

版本 V1 · 适用范围：对内产品与市场物料、对外合作伙伴与供应商

	地址
权威来源（唯一）	https://www.zaowuyun.com/design-system.html
令牌文件	https://www.zaowuyun.com/tokens.css
本文档（在线版）	https://www.zaowuyun.com/design.html
品牌资源下载	设计系统页 §16 资源下载
标志完整规范	https://www.zaowuyun.com/logo-guide.html

本文是可执行标准，不是参考建议。对内评审与对外交付均以此为准；有冲突时，以设计系统页的实际取值为最终依据。

0. 三条铁律

只用变量，不写字面值。 写 var(--accent)，不写 #7B80FF。改一处等于改全站。
明暗共享同名令牌。 组件只认变量名；主题切换靠根节点 data-theme，组件代码零改动。
语义色只做状态反馈。 --ok/--info/--warn/--err 不当品牌色、不当图表分类色。

1. 接入

<link rel="stylesheet" href="tokens.css">

默认暗色。切浅色：

<html data-theme="light">

// 运行时切换（建议记忆到 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)，移动端自动收单栏

通栏区块的正确写法（背景通栏、内容对齐容器）：

.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. 玻璃拟态

.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

完整规则与错误用法对照见 https://www.zaowuyun.com/logo-guide.html。

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

附：完整令牌速查

见 https://www.zaowuyun.com/tokens.css。所有令牌在设计系统页可点击色块直接复制变量名。