# BDO 立信 Design System

立信会计师事务所（特殊普通合伙）— **BDO Shu Lun Pan CPAs LLP** 的品牌设计系统。示例人物：**邬晓峰 Patrick Wu · 合伙人 · 国际业务二部**（示例数据，换人套用时替换联系方式即可）。

**上游权威源**：GitHub 仓库 [`EezyEBE/BDO_Design_System`](https://github.com/EezyEBE/BDO_Design_System)（品牌约束源：README 规范 + tokens.css + 真实矢量 logo + 自托管字体 + 6 个拆分物料 + standalone 视觉套件）。读者若有访问权限，建议进一步浏览该仓库以做出更贴合的设计。本项目是其下游可运行设计系统：token 化 + 组件 + 物料 UI kit。

**组织原则（来自上游，最高优先级）：锁死品牌识别（色 / 字 / 标志），留白设计细节。** 间距、圆角、阴影、组件形态不是品牌规定——本项目中这些取值来自套件物料实测，是"示例范式"，可参照不强制。

## 品牌内核

蓝与红。**Navy 立骨，品牌红点睛。** Navy `#1C334E` 承担标志主体、标题、主线条，传递专业与信任；品牌红 `#993945` 只做强调、装饰、关键识别，克制使用。

**红色克制铁律**：Navy 与中性色构成绝大部分视觉面积；品牌红仅用于强调、链接、关键信息与短装饰线；金沙 `#C9B98A` 只在深底上做极少量点缀。历史彩色 accent（绿/紫/蓝/橙）**已弃用**。

## CONTENT FUNDAMENTALS · 文案基本面

- **双语并置**：中文为主、英文为辅，是套件最鲜明的文案模式——中文粗体 + 英文小号斜体衬线（Cormorant Garamond italic）尾随，如「名片 *Business Card*」「邬晓峰 *Patrick Wu*」「合伙人 Partner · 国际业务二部 International Business Dept. 2」。
- **间隔符**：用 `·`（间隔号）连接并列项：「专业 · 洞察 · 全球视野」「合伙人 · 国际业务二部」「第 1 页 / 共 X 页」。
- **全大写英文标签**：小字号 + `.1em–.14em` 字距，深底配金沙：`WWW.BDO.COM.CN`、`HEADER`、`AVATAR`。
- **联系方式缩写**：红色粗体单字母前缀 `M / T / F / E / W / A` + 全角空格 + 内容。
- **语气**：机构书面语，克制、正式、专业；无口语、无感叹号、**无 emoji**。敬语规范（「此致 敬礼，/ Best regards,」）。
- **数字排版**：电话格式 `(86) 021 6339 1166`；日期「2026 年 X 月 X 日」。

## VISUAL FOUNDATIONS · 视觉基本面

- **颜色**：见上「品牌内核」。中性色是暖调（纸色 #F4F0EC、底白 #FBF9F6、暖灰 #6E6A64、描边 #E7E1D8）——页底从不用纯白，用暖白 `--base-warm`；纯白只给卡片。深色面板用 Navy 或更深的深墨 #16283D。
- **字体**：网页/UI 不锁——套件示例：Archivo（拉丁标题/数字）+ Cormorant Garamond 斜体（英文点缀）+ PingFang SC/雅黑（中文）。**PPT 场景锁定微软雅黑 UI**（Windows 内置，保证 100% 还原，这是品牌规定）。
- **数据可视化**：图表配色见 `--chart-*` token。分类图按 `--chart-1…6` 顺序取色（Navy 打头、品牌红点睛、金沙+暖灰补充，最多 6 类）；程度/热力用 `--chart-seq-*`（Navy 深→浅）；正负/优劣用 `--chart-div-*`（红↔Navy 发散）。网格线 `--chart-grid`、轴标签 `--chart-axis`。规范卡见 guidelines/chart-palette、chart-specimens。
- **标志性图形语言**：
  - 红色装饰条：卡片左侧 5px 竖条、深色面板顶部 4–5px 横条（呼应 logo 红笔画）；
  - Navy 主线 + 品牌红 52px 短线的信头分隔（`.bdo-rule`）；
  - 深底上 40–64px 宽、2–4px 高的金沙/红色小横线做节奏点。
- **背景**：纯色为主（暖白页底 / 白卡片 / Navy 深面板）。无图片背景、无纹理、无插画。唯一的渐变用法：Navy 深底上叠一层低透明度品牌红对角渐变（`linear-gradient(120deg, rgba(153,57,69,0), rgba(153,57,69,.30))`）做右侧氛围。
- **阴影**：Navy 色调、长距离、强负 spread 的柔投影，如 `0 20px 50px -22px rgba(28,51,78,.45)`，常配 `0 0 0 1px #EFE9E0` 描边圈。深色卡阴影透明度略高（.5–.6）。
- **圆角**：卡片 10px；小徽章/药丸 20–999px；微信头像 16–24px；信纸类印刷物**直角**。
- **边框**：1px `#E7E1D8`；分隔线 1px `#EEE8DF`；文档页眉页脚线 1.5–2px Navy。
- **动效**：极克制——仅颜色过渡 `transition: color .15s`；无弹跳、无位移动画。
- **hover**：链接红→深红 `#7D2D38`；按钮加深底色。press：再深一档。
- **图片**：套件不含摄影图。若需图片，建议冷调、专业、去饱和，勿抢品牌色。
- **布局**：版心 1160px；充足留白；标题行「红色衬线序号 + Navy 粗标题 + 灰色斜体英文」是章节标准头。

## ICONOGRAPHY · 图标

- 上游套件**不含任何图标系统**——无 icon font、无 SVG 图标集、无 emoji。对外静物料（名片/信纸等）刻意不用图标，信息层级靠字重、颜色与红色单字母前缀（M/T/E…）表达。
- 唯一的"图形"是三版 logo（真实矢量 SVG）与几何装饰条。
- **产品 / 文档 / PPT 用图标：采用 Lucide 细线，已自托管**（`assets/icons/icons.js` — Lucide 子集，MIT，零 CDN 依赖）。用法与官方一致：`<i data-lucide="mail"></i>` + `lucide.createIcons()`；宽高/颜色/描边从元素 `style` 继承。新增图标时把对应 SVG 路径补进 `icons.js` 的 `I` 字典即可。规范：
  - stroke-width **1.75px**（默认 2 略重，1.75 更贴机构气质）；线性、圆角端点，勿用 fill 版；
  - 着色只用 **Navy `#1C334E` / 暖灰 `#6E6A64`**，强调点用**品牌红 `#993945`**，深底反白；勿彩色、勿多色；
  - 尺寸 16 / 20 / 24px，`currentColor` 继承，随文字字重感调整视重；
  - 常用集：`file-text · file-check · shield-check · bar-chart-3 · trending-up · globe · building-2 · users · briefcase · phone · mail · map-pin · calendar · check-circle-2 · alert-triangle · arrow-right · chevron-right · download · search · scale`。
  - **仍禁用 emoji 与 Unicode 拼凑图标**——图标一律走 Lucide。

## 标志 Logo（assets/，文件名勿改）

| 文件 | fill | 用途 |
|---|---|---|
| `BDO立信_logo_color_变体.svg` | Navy + 红（两处笔画） | 双色版 · **主用**，浅色/中性背景 |
| `BDO立信_logo_black.svg` | #000 | 单色/传真/浅背景 |
| `BDO立信_logo_white.svg` | #FFF | 反白版 · 深色/图片背景 |

`viewBox 0 0 350 138` 横向字标。**规则**：四周安全空间 ≥ 字母 O 高度；最小高度印刷 8mm / 屏幕 24px；不拉伸、不旋转、不改色、不置于低对比背景。

## Index · 文件索引

- `styles.css` — 全局入口（只含 @import）
- `tokens/` — `colors.css` · `typography.css` · `spacing.css` · `fonts.css`（自托管 @font-face，无境外 CDN）· `base.css`（reset + `.bdo-accent-bar` `.bdo-eyebrow` `.bdo-rule`）
- `assets/` — 3 版 logo + `fonts/`（Archivo / Cormorant latin 子集 woff2）
- `components/forms/` — `Button`（源定义组件，取自上游 reference 存档）
- `components/data/` — `DataTable`（有意添加：财务/数据表格，Navy 表头 + 合计行）
- `ui_kits/materials/` — 6 个对外物料递归重建：名片 · 邮件签名 · 信纸信头 · 页眉页脚 · 微信应用 · 社交横幅（`index.html` 为总览）
- `ui_kits/website/` — 官网营销首页（**代表性构建，非复刻真实站点**）
- `templates/` — 消费方一键起稿模板（DC）。**文档**：`report`（审计/鉴证报告）· `proposal`（业务建议书）· `ppt`（幻灯片母版，锁雅黑）· `newsletter`（邮件通讯）。**品牌物料**：`business-card`（名片正反面）· `email-signature`（邮件签名）· `letterhead`（信纸）· `wechat`（微信头像/名片）· `banner`（社交横幅）· `doc-header-footer`（文档页眉页脚）· `social`（社交多尺寸套件）。**概念图库（麦肯锡式逻辑图，16:9）**：按 8 大逻辑关系分模板，每模板含多种数量版式并轮换 9 种处理方式（极简线框/卡片化/色块几何/深底反白/数字主导/图标节点/时间轴/表格矩阵/手绘草图）—— `concept-sequence`（顺序）· `concept-cycle`（循环）· `concept-list`（并列）· `concept-opposition`（对抗）· `concept-hierarchy`（层级）· `concept-structure`（结构）· `concept-matrix`（矩阵）· `concept-relationship`（关联）。**图表库**：`charts`（柱/堆叠/条形/折线/面积/组合/饼环/瀑布/雷达/KPI，16:9 可直接入 PPT/建议书）—— **所有数据图表从此取用、按 `--chart-*` 配色，勿新造样式**
- `guidelines/` — 基础规范样张卡片（含图标 Lucide、法律/免责声明块）
- `SKILL.md` — Agent Skill 入口

## Intentional additions · 有意添加

- **无新组件发明**。组件清单严格 = 上游 reference 存档定义的 `Button`。品牌明确「不锁组件形态」，其余 UI 由消费方按 VISUAL FOUNDATIONS 自行发挥。
- token 灰阶（--grey-25…900）由品牌 5 支中性色内插补全，方便产品 UI 使用；非品牌锁定值。

## 已知取舍 / 缺口

- 上游仅提供 latin 字体子集；**中文刻意走系统字**（PingFang SC / 微软雅黑），非缺失。
- 功能状态色（pass/warn/fail/info）取自下游历史存档，**待用户最终确认**。
- 上游明确 PPT 版式模板在另一个文档《BDO立信 PPT模板》中、不在仓库内，故本项目未创建 slide 样例。
- 无图标系统、无摄影图（上游如此，未擅自补）。