邬晓峰设计系统图书馆

01

色彩 Colors

极简黑白，一处朱红。色值只在 tokens/colors.css 定义一次，业务层一律引用变量。点击色卡复制变量名。

26 tokens

核心色板唯一强调色朱红，用量 ≤5%（配比墨 60 · 纸 33 · 灰 2 · 朱红 ≤5）

反白 · 深底文字墨底/影像上的文字与线

墨阶 Ink tints 由墨到纸的中性梯度

旧名别名兼容早期 DC 内联变量名，新代码请用 --color-*

02

字体 Typography

四款字体各司其职：Space Grotesk 西文标题、Noto Sans SC 中文正文、Noto Serif SC 中文标题气质、Space Mono 编号标注。

28 项

字族四款，走 Google Fonts CDN —— 本系统唯一允许的联网依赖

Aa 甲乙丙 0123

Space Grotesk

--font-display

西文标题/UI/编号

Aa 甲乙丙 0123

Noto Sans SC

--font-body

中文正文（黑体）

Aa 甲乙丙 0123

Noto Serif SC

--font-serif

中文标题气质（宋体）

Aa 甲乙丙 0123

Space Mono

--font-mono

编号/技术标注

字号阶 px 定值，业务层引用变量而非硬编码

--fs-display74px

邬晓峰 Patrick Wu

--fs-h166px

邬晓峰 Patrick Wu

--fs-h240px

邬晓峰 Patrick Wu

--fs-h324px

邬晓峰 Patrick Wu

--fs-lead18px

邬晓峰 Patrick Wu

--fs-body15px

邬晓峰 Patrick Wu

--fs-sm13px

邬晓峰 Patrick Wu

--fs-xs11px

邬晓峰 Patrick Wu

--fs-mono12px

邬晓峰 Patrick Wu

字重 · 行高 · 字距

--fw-light300

--fw-regular400

--fw-medium500

--fw-semibold600

--fw-bold700

--lh-tight1.02

--lh-snug1.2

--lh-normal1.5

--lh-relaxed1.7

--ls-tight-.01em

--ls-normal0

--ls-wide.14em

--ls-wider.2em

--ls-label.3em

--ls-cjk.5em

禁用字体品牌硬约束

Inter禁用

Roboto禁用

Arial禁用

03

间距 · 圆角 · 阴影 Spacing

4px 基准网格；圆角接近 0，方正为主；阴影仅用于悬浮抬升。

23 tokens

间距阶 4px 基准网格

--space-14px

--space-28px

--space-312px

--space-416px

--space-524px

--space-632px

--space-748px

--space-864px

--space-988px

章节内边距

圆角方正克制，默认直角

--radius-00

--radius-sm2px

--radius-md4px

阴影仅用于悬浮抬升

--shadow-card

--shadow-float

描边 · 栅格 · 动效

--border-hair1px

--border-emph2px

--grid-cols12

--grid-gutter24px

--container-max1160px

--container-pad44px

--easecubic-bezier(.2, .6, .2, 1)

--dur-fast.18s

--dur.22s

04

徽章 Emblem

四版徽章：标准 / 反白 / 描边陪衬 / 朱红强调。文件名与几何路径锁定。

4 版

四版徽章文件名与几何路径固定不变

标准（深色）

浅底常规

wxf-emblem.svg

反白

墨底/深色影像

wxf-emblem-white.svg

描边陪衬

大尺寸背景水印

wxf-emblem-tint.svg

朱红强调

品牌点睛（少量）

wxf-emblem-accent.svg

文件名与几何路径固定不变；安全间距≥1/4高；最小尺寸数字24px/印刷8mm；禁改色/变形/旋转/特效。

05

规范样张 Guidelines

规则层：色彩、字体、间距栅格、徽章、图标、法律，以及一张交互式完整总览。

7 张

色彩规范

Guideline

核心色板 · 墨阶 · 用色配比 · Do/Don't

打开 → guidelines/colors.html

字体规范

Overview

交互式总览（Design Component）

打开 → ui_kits/brand-applications.dc.html

07

模板库 Templates

生产层：可直接填内容、导出使用的成品模板。

3 套

PPT 模板

Template

PPTX · 16:9 · 1920×1080

打开 → templates/ppt.dc.html

项目建议书/报告

Template

PDF · A4 竖版

打开 → 可编辑导出件 ↓ templates/proposal.dc.html

名片

Template

PDF · 90×54mm 双面

打开 → templates/business-card.dc.html

08

文档与运行时 Docs

规范本体、机器可读清单、Hub 入口与三份共享运行时。

8 份

品牌中心 Hub三层精选入口（CD 生成）—— 本图书馆的精简版index.html

品牌规范本体规范取值 + 目录地图 + 文件索引的权威源readme.md

Agent Skill 入口AI 工具施加品牌约束的读序与硬约束SKILL.md

机器可读清单6 规范 · 5 物料 · 3 模板_ds_manifest.json

共享运行时React / DC 舞台（全项目一份）support.js

共享运行时幻灯片舞台deck-stage.js

共享运行时图片占位槽image-slot.js

导出物目录说明PDF / PPTX / DOCX / PNG 成品放这里exports/README.md

09

原始素材 Uploads

CD 端上传的参考图与徽章原件。

6 张

pasted-1783774257312-0.png

pasted-1783774277121-0.png

pasted-1783774288069-0.png

pasted-1783775757288-0.png

pasted-1783928898910-0.png

WXF_LOGO_1.svg

色彩 Colors

核心色板 唯一强调色朱红，用量 ≤5%（配比 墨 60 · 纸 33 · 灰 2 · 朱红 ≤5）

反白 · 深底文字 墨底/影像上的文字与线

墨阶 Ink tints 由墨到纸的中性梯度

旧名别名 兼容早期 DC 内联变量名，新代码请用 --color-*

字体 Typography

字族 四款，走 Google Fonts CDN —— 本系统唯一允许的联网依赖

字号阶 px 定值，业务层引用变量而非硬编码

字重 · 行高 · 字距

禁用字体 品牌硬约束

间距 · 圆角 · 阴影 Spacing

间距阶 4px 基准网格

圆角 方正克制，默认直角

阴影 仅用于悬浮抬升

描边 · 栅格 · 动效

徽章 Emblem

四版徽章 文件名与几何路径固定不变

规范样张 Guidelines

色彩规范

字体规范

间距与栅格

徽章使用

图标规范

法律与使用

设计系统完整总览

品牌应用 Applications

名片

信头/信封

邮件签名

公众号封面

Banner/社媒图

品牌应用完整总览

模板库 Templates

PPT 模板

项目建议书/报告

名片

文档与运行时 Docs

原始素材 Uploads

核心色板唯一强调色朱红，用量 ≤5%（配比墨 60 · 纸 33 · 灰 2 · 朱红 ≤5）

反白 · 深底文字墨底/影像上的文字与线

旧名别名兼容早期 DC 内联变量名，新代码请用 --color-*

字族四款，走 Google Fonts CDN —— 本系统唯一允许的联网依赖

禁用字体品牌硬约束

圆角方正克制，默认直角

阴影仅用于悬浮抬升

四版徽章文件名与几何路径固定不变