# 邬晓峰个人品牌设计系统 · Patrick Wu Brand System

> 双层结构：**机器可读约束层**（tokens + manifest）＋ **人可浏览展示层**（hub + guidelines + ui_kits + templates）。
> AI 工具据 `_ds_manifest.json` 与 `tokens/` 施加品牌约束；人从 `index.html` 浏览规范、样板与模板。
> 版本 **V1.0 · 2026** ｜ 归属 邬晓峰工作室 / PATRICK WU STUDIO

---

## 目录地图 · Directory Map

| 目录 / 文件 | 一句话职责 |
|---|---|
| `index.html` | **品牌中心 Hub** —— 浏览总入口，链向三层。本地双击即可打开。 |
| `readme.md` | **本文件** —— 品牌规范本体（色/字/徽章规则）＋ 目录地图 ＋ 文件索引。人与 AI 的统一读取面。 |
| `SKILL.md` | **Agent Skill 入口** —— 给 AI 工具的施加约束说明与工作流。 |
| `_ds_manifest.json` | **机器可读清单** —— token / 组件 / 规范卡 / 模板的索引，供外部 AI 工具定位每个资源。 |
| `styles.css` | 样式入口 —— `@import` 各 token 文件；展示层页面只需引用这一个文件。 |
| `tokens/` | **单一权威源** —— 拆分的机器可读 token：`colors.css` `typography.css` `fonts.css` `spacing.css` `base.css`。色值 / 字体 / 字号 / 间距只在此定义一次。 |
| `assets/` | 品牌资产 —— 4 版徽章 SVG（文件名与几何路径固定不变）。 |
| `guidelines/` | **规范样张卡** —— 颜色 / 字体 / 间距 / 徽章使用 / 图标 / 法律免责，每张独立 HTML；另有 `design-system.dc.html` 完整总览。 |
| `ui_kits/` | **品牌物料** —— 名片 / 信头信封 / 邮件签名 / 公众号封面 / Banner，可对外展示的成品；另有 `brand-applications.dc.html` 应用总览。 |
| `templates/` | **起稿模板** —— PPT / 名片 / 项目建议书（含可导出 DOCX），一键起稿。 |
| `exports/` | 导出物 —— 生成的 PDF / PPTX / DOCX / PNG。 |
| `uploads/` | 素材 —— 用户上传的原始素材。 |
| `support.js` `deck-stage.js` `image-slot.js` | **共享运行时** —— 全项目仅此一份，`templates/` 与两个 `.dc.html` 总览页以 `../` 相对路径引用（见「运行时与离线」）。 |

三层信息架构不变：**01 设计系统（规则）→ 02 品牌应用（展示）→ 03 模板库（生产）**，分别对应 `guidelines/` → `ui_kits/` → `templates/`。

---

## 品牌规范本体 · Brand Spec

### 色彩 Color（权威源：`tokens/colors.css`）
极简黑白，一处朱红。朱红用量 ≤5%，墨绿仅作成功状态。

| 名称 | Token | HEX | 用途 |
|---|---|---|---|
| 墨 Ink | `--color-ink` | `#12110E` | 主文本 / 深色背景 |
| 米纸 Paper | `--color-paper` | `#F7F4EC` | 主背景 |
| 品牌红 Accent | `--color-accent` | `#C4362A` | 唯一强调色（≤5%） |
| 暖灰 Grey | `--color-gray` | `#9A968C` | 辅助信息 / 元数据 |
| 次文本 Muted | `--color-muted` | `#403D36` | 正文段落 |
| 分隔线 Line | `--color-line` | `rgba(18,17,14,.14)` | 描边 / 分隔 |
| 墨绿 Success | `--color-ok` | `#3B7A57` | 成功状态（仅此用途） |

墨阶 `--ink-900…100`：`#12110E · #2A2822 · #403D36 · #6B675D · #9A968C · #C7C3B8 · #E7E3D9 · #F7F4EC`。

### 字体 Typography（权威源：`tokens/typography.css` · `tokens/fonts.css`）

| 角色 | Token | 字体 |
|---|---|---|
| 西文标题 / UI | `--font-display` | **Space Grotesk** |
| 中文正文 | `--font-body` | **Noto Sans SC**（思源黑体） |
| 中文标题气质 | `--font-serif` | **Noto Serif SC**（思源宋体） |
| 编号 / 技术标注 | `--font-mono` | **Space Mono** |

字号阶：display 74 · h1 66 · h2 40 · h3 24 · lead 18 · body 15 · xs 11 · mono 12（px）。

### 徽章 The Mark（权威源：`assets/`）
四版，文件名与几何路径**固定不变**：
- `wxf-emblem.svg` 标准（深色）
- `wxf-emblem-white.svg` 反白
- `wxf-emblem-tint.svg` 描边陪衬
- `wxf-emblem-accent.svg` 朱红强调

安全间距 ≥ 徽章高度 1/4；最小尺寸 数字 24px / 印刷 8mm；禁止改色、变形、旋转、加特效。详见 `guidelines/emblem.html`。

### 间距 / 形状（权威源：`tokens/spacing.css`）
4px 基准网格；间距阶 4→88px；圆角接近 0（方正克制）；阴影仅用于悬浮抬升；浏览页 12 列栅格，容器最大宽 1160px。

### 品牌基调
极简、克制、留白、编号秩序感。

---

## 运行时与离线 · Runtime & Offline

- **展示层**（`index.html`、`guidelines/*.html`、`ui_kits/*.html`）为**纯静态 HTML**，仅 `<link>` 引用 `styles.css` 消费 token，本地双击即可离线浏览。**唯一联网依赖**是 Google Fonts CDN（字体）——为呈现效果，中英文字体均走境外 CDN，无需自托管。
- **交互式模板**（`templates/*.dc.html` 及两个 `.dc.html` 总览页）为自包含 Design Component，运行时从 unpkg CDN 加载 React/Babel（除字体外的联网依赖）。为**控制冗余**，`support.js` / `deck-stage.js` / `image-slot.js` 全项目**仅保留一份于根目录**，各 `.dc.html` 以 `../` 相对路径共享，不逐个复制。
- 所有内部链接与资源均为**相对路径**，不依赖构建步骤或本地服务器。

## 单一权威源规则 · Single Source of Truth
色值 / 字体 / 字号 / 间距**只在 `tokens/` 定义一次**。其它文件一律引用 CSS 变量（`var(--color-ink)` 等），禁止各处内联硬编码。修改品牌 → 只改 `tokens/`，全站生效。

## 文件索引 · File Index
完整、可被程序解析的资源清单见 [`_ds_manifest.json`](./_ds_manifest.json)。