BDO 立信 DESIGN SYSTEM LIBRARY · 2026-09-02
立信 BDO · 国际业务二部

设计系统图书馆Design System Library

一个页面看完整套品牌资产：色彩与字体令牌、标志与图标、规范样张、组件、对外物料、起稿模板、导出成品与原始素材。每张卡都是真实文件的实时预览，点击即打开原件。

141Tokens
26规范样张 / 物料
24模板
—图标
3Logo 版本
01

色彩 Colors

品牌红与 Navy 为锁定值，其余为派生阶或套件实测取值。点击色卡复制变量名。

81 tokens

品牌锁定 不可改。红=点睛，Navy=立骨

品牌红色阶 派生 hover / press / tint，非锁定值

品牌 Navy 色阶 派生阶，非锁定值

品牌辅助中性 上游锁定的 5 支暖调中性

暖中性灰阶 套件实测取值，非强制锁定

功能状态色 产品语义专用，非装饰

数据可视化 分类 6 色 · Navy 顺序阶 · 红↔Navy 发散阶

语义别名 组件层应引用这一组，而非直接引原始色

02

字体 Typography

网页字体不受品牌锁定；PPT 场景锁定微软雅黑 UI。字体全部自托管，无境外 CDN。

28 tokens

字族 自托管 woff2 · 零境外 CDN；中文走系统字

Aa 甲乙丙 0123
Archivo
--font-latin --font-sans
自托管字体文件
Aa 甲乙丙 0123
Cormorant Garamond
--font-serif
自托管字体文件
Aa 甲乙丙 0123
PingFang SC
--font-cn
系统字体 local()
Aa 甲乙丙 0123
Microsoft YaHei UI
--font-ppt
系统字体 local()

字号阶 套件示例取值，非品牌锁定

--fs-display56px
立信 BDO Audit
--fs-title30px
立信 BDO Audit
--fs-h322px
立信 BDO Audit
--fs-h417px
立信 BDO Audit
--fs-lead15px
立信 BDO Audit
--fs-body13px
立信 BDO Audit
--fs-caption12px
立信 BDO Audit
--fs-label11px
立信 BDO Audit

字重 · 行高 · 字距

--fw-regular400
--fw-medium500
--fw-semibold600
--fw-bold700
--lh-tight1.1
--lh-snug1.35
--lh-normal1.6
--lh-relaxed1.75
--ls-tight-0.01em
--ls-normal0
--ls-wide0.02em
--ls-caps0.1em
--ls-caps-wide0.14em

字体栈变量

--font-latin"Archivo", -apple-system, BlinkMacSystemFont, sans-serif
--font-serif"Cormorant Garamond", Georgia, "Times New Roman", serif
--font-cn"PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif
--font-sans"Archivo", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", -apple-system, sans-serif
--font-body"Archivo", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", -apple-system, sans-serif
--font-monoui-monospace, "SFMono-Regular", Menlo, Consolas, monospace
--font-ppt"Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif
03

间距 · 圆角 · 阴影 Spacing

品牌刻意不锁这一组，取值来自套件物料实测，是示例范式而非规定。

23 tokens

间距阶 4px 基准网格

--space-00
--space-14px
--space-28px
--space-312px
--space-416px
--space-520px
--space-624px
--space-832px
--space-1040px
--space-1248px
--space-1664px
--space-2080px

圆角

--radius-xs3px
--radius-sm5px
--radius-md10px 卡片 / 面板（物料通用值）
--radius-lg16px
--radius-pill999px

阴影 Navy 色调、长距、低透明度

--shadow-xs
--shadow-sm
--shadow-md
--shadow-lg
--shadow-card
--shadow-focus

动效与其他

--ease-standardcubic-bezier(0.2, 0, 0, 1)
--ease-outcubic-bezier(0.16, 1, 0.3, 1)
--dur-fast150ms
--dur-normal200ms
--dur-slow300ms
--bw-thin1px
--bw-thick2px
--accent-bar4px
--content-max1160px
04

标志 · 图标 · 字体文件 Assets

标志文件名与几何路径不得更改；图标为自托管 Lucide 子集，零 CDN 依赖。

3 logo · 8 字体分片

标志三版本 文件名与几何路径不改

双色主用
双色主用
常规浅底，首选
BDO立信_logo_color_变体.svg
黑色单色
黑色单色
传真 / 单色印刷 / 低成本场景
BDO立信_logo_black.svg
反白
反白
深底 / 影像上
BDO立信_logo_white.svg

图标全集 Lucide 细线子集 · 自托管 assets/icons/icons.js

字体文件 assets/fonts/ · 8 个 woff2 分片

assets/fonts/archivo-latin.woff234 KB
assets/fonts/archivo-latin-ext.woff232 KB
assets/fonts/cormorant-latin.woff237 KB
assets/fonts/cormorant-latin-ext.woff233 KB
assets/fonts/cormorant-italic-latin.woff238 KB
assets/fonts/cormorant-italic-latin-ext.woff234 KB
05

品牌规范样张 Guidelines

规则层：标志用法、色彩、字体、间距、图表配色、法律块、签章与二维码。

16 张

标志使用规则

Brand

安全空间 · 最小尺寸 · 四条禁令

打开 guidelines/brand-logo-rules.html

标志 三版本

Brand

双色主用 · 黑色单色 · 反白深底（几何路径同源）

打开 guidelines/brand-logos.html

图表示范 Chart specimens

Brand

柱 · 环 · 折线 · 进度 · 表内条 —— 品牌配色应用

打开 guidelines/chart-specimens.card.html

图标 Iconography

Brand

Lucide 细线 1.75px · Navy/暖灰/红着色 · 无 emoji

打开 guidelines/iconography.card.html

法律 / 免责声明 Legal blocks

Brand

报告页脚 · 保密声明 · 邮件免责的标准排版块

打开 guidelines/legal.card.html

签字 / 印章 / 二维码 Sign · Seal · QR

Brand

报告签字区 · 公章占位与安全距 · 二维码留白规范

打开 guidelines/sign-seal-qr.card.html

图表配色 Chart palette

Colors

分类 6 色 · Navy 顺序阶 · 红↔Navy 发散阶

打开 guidelines/chart-palette.card.html

品牌主色

Colors

品牌红 #993945 · 品牌 Navy #1C334E — 锁定

打开 guidelines/colors-brand.html

辅助中性色

Colors

暖调中性 — 深墨 · 暖灰 · 金沙 · 纸色 · 底白

打开 guidelines/colors-neutrals.html

红 / Navy 色阶

Colors

派生 hover · press · tint（非锁定值）

打开 guidelines/colors-ramps.html

功能状态色

Colors

产品场景专用，非装饰 — 待最终确认

打开 guidelines/colors-status.html

阴影 · 标志性饰线

Spacing

Navy 长距柔投影 · 红色装饰条 · Navy 主线+红短线

打开 guidelines/shadow-motifs.html

间距 · 圆角

Spacing

4px 基准网格 · 卡片 10px（示例取值，非品牌锁定）

打开 guidelines/spacing-radius.html

正文与标签

Type

导语 15px · 正文 13px · 全大写标签 11px

打开 guidelines/type-body.html

字体栈 · PPT 锁定

Type

网页不锁字体；PPT 锁定微软雅黑 UI（品牌规定）

打开 guidelines/type-fonts.html

标题层级 · 双语并置

Type

Archivo/中文粗体 + Cormorant 斜体英文尾随

打开 guidelines/type-headings.html
06

组件 Components

带 JSX 源码、类型定义与 AI prompt 说明的可复用组件。

2 个

数据表格 DataTable

Component

Navy 表头 · 暖白斑马纹 · 品牌红合计行 · 等宽数字

打开 JSXd.tsprompt.md components/data/datatable.card.html

Button

Component

primary(navy) · accent(red) · secondary · ghost · danger · 3 尺寸

打开 JSXd.tsprompt.md components/forms/buttons.card.html
07

对外物料 Materials

成品级品牌应用：名片、信头、邮件签名、公众号、Banner、文档页眉页脚、社交套件。每张卡同时给「打开」成品预览与「起稿模板」直链——物料的模板不在模板库区重复出现。

8 件

社交横幅 Banner

Materials

公众号 900×383 · Navy 深底 + 红色对角渐变

打开 起稿模板 ui_kits/materials/Banner.html

名片 Business Card

Materials

90×54mm · 正面白卡红边条 / 背面 Navy 反白

打开 起稿模板 ui_kits/materials/BusinessCard.html

文档页眉页脚 Document

Materials

Word 报告 · Navy 细线分隔 · 红色页码

打开 起稿模板 ui_kits/materials/DocHeaderFooter.html

邮件签名 Email Signature

Materials

logo + 红色竖分隔 + 单字母前缀联系信息

打开 起稿模板 ui_kits/materials/EmailSignature.html

物料总览 Materials

Materials

6 个对外物料 · 点击进入单件

打开 ui_kits/materials/index.html

信纸信头 Letterhead

Materials

A4 · 双色 logo 页眉 + Navy 主线红短线 + 页脚细线

打开 起稿模板 ui_kits/materials/Letterhead.html

微信应用 WeChat

Materials

头像三式 + 企业微信名片

打开 起稿模板 ui_kits/materials/WeChat.html
社交多尺寸 Social kit

社交多尺寸 Social kit

Template

BDO立信 社交套件：LinkedIn 头图 · 公众号封面 · 招聘方图 · 引言方图，标注尺寸

打开 templates/social/
08

官网 Website

代表性营销首页构建，非真实站点复刻。

1 页

官网首页 Marketing homepage

Website

代表性营销首页 · 非复刻真实站点（上游无网站源）· Navy hero + 服务 + 数据 + 洞察

打开 ui_kits/website/index.html
09

模板库 Templates

一键起稿，按「大类 › 族 › 条目」组织。卡上的红边标签是风格（同内容不同版式），Navy 边标签是成员（同族不同内容，如概念图的 8 类逻辑关系），点即切换；顶部按风格筛选可通览整套风格。品牌物料的起稿模板并入「07 对外物料」，不在此重复。

2 类 · 17 套

文档 DocumentsA4 · 起稿一份完整文件

业务建议书

业务建议书 Proposal

2 风格

BDO立信 A4 建议书/投标模板：封面 · 执行摘要 · 服务方案 · 团队 · 报价 · 联系

打开 templates/proposal/
审计 / 鉴证报告

审计 / 鉴证报告 Report

2 风格

BDO立信 A4 报告模板：封面 · 目录 · 章节页 · 正文 · 签字页，含页眉页脚与法律声明

打开 templates/report/
邮件通讯

邮件通讯 Newsletter

2 风格

BDO立信 600px 邮件通讯模板：Navy 页眉 · 头条 · 文章列表 · CTA · 合规页脚

打开 templates/newsletter/

幻灯片与图形 Slides & Graphics均 1280×720 · 母版是版式骨架，概念图与图表是填进骨架的内容，同样可粘入建议书与报告

PPT 母版

PPT 母版 Slides

2 风格

BDO立信 16:9 幻灯片母版：封面 · 章节 · 内容 · 数据 · 对比 · 金句 · 尾页，锁定微软雅黑

打开 templates/ppt/
概念图库

概念图库 Concept Diagrams

8 类

顺序/流程逻辑图库：2/3/4/5/6步 + 时间轴，轮换 6+ 种处理方式（极简/卡片/色块/深底/数字/图标/手绘）

打开 templates/concept-sequence/
图表库

图表库 Charts

Template

咨询常用图表库（16:9，可直接入 PPT/建议书）：柱/堆叠/条形/折线/面积/组合/饼环/瀑布/雷达/KPI，全部 --chart-* 品牌配色

打开 templates/charts/
10

文档与整包 Docs

规范本体、机器可读清单、lint 规则、导出成品与 CD 单文件整包。

7 份
品牌规范本体色/字/logo 取值与文件索引的权威源readme.md
Agent Skill 入口AI 工具施加品牌约束的读序与硬约束SKILL.md
机器可读清单26 卡 · 20 模板_ds_manifest.json
打包运行时CD 导出的组件打包产物_ds_bundle.js
品牌合规 lint 规则oxlint 规则集，校验硬编码色值等_adherence.oxlintrc.json
图表库导出件独立成品页，可直接对外发送exports/BDO-图表库-Charts.html
CD 单文件整包全部资源内嵌的离线单页，可整份转发BDO立信 视觉套件 (standalone).html
11

原始素材 Uploads

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

5 张
pasted-1783677630791-0.pngpasted-1783677630791-0.png pasted-1783736751881-0.pngpasted-1783736751881-0.png pasted-1783736865585-0.pngpasted-1783736865585-0.png pasted-1783737869982-0.pngpasted-1783737869982-0.png pasted-1783738191942-0.pngpasted-1783738191942-0.png
没有匹配项
BDO立信 DESIGN SYSTEM · 国际业务二部 scripts/build-library.mjs 生成 · 2026-09-02