297 lines
10 KiB
Markdown
297 lines
10 KiB
Markdown
# aura-ppt 设计系统规范
|
||
|
||
> 灵感来源：Gamma 设计质量（9.2分）。内置多套深度定制的设计系统。
|
||
|
||
## 设计系统清单
|
||
|
||
| 系统名 | 风格 | 适用场景 |
|
||
|---|---|---|
|
||
| `aura-dark`（默认） | 深色高级（深蓝黑+电光青） | 科技感、对外提案、产品发布 |
|
||
| `business-report` | 浅色商务（白底+火焰蓝+商务红） | **商务报告、管理层汇报、咨询风格** |
|
||
| `report-jp` | 日式商务报告（法人蓝+浅天蓝卡片+Meiryo UI） | **日本客户汇报、本部報告会、对日业务** |
|
||
|
||
---
|
||
|
||
## 0. 全局视觉规范（所有设计系统共用）
|
||
|
||
### 卡片视觉
|
||
- **柔和投影**：所有卡片容器自动带外投影（blur 90000 / dist 45000 / 25%透明度深灰），立体悬浮感
|
||
- **圆角**：radius 8%（圆角矩形 adjustment）
|
||
- 卡片左色条（随图表色板序号变色）
|
||
|
||
### 图表视觉
|
||
- **渐变柱体**：柱状图垂直渐变（顶部提亮45% → 底部原色），模拟立体感（XML gradFill）
|
||
- **协调色板**：每系统6色光谱序列（冷→暖过渡），相邻柱区分度清晰
|
||
- 水平网格线（3条辅助）+ 数值标签 + 类别标签（防截断）
|
||
|
||
### 排版层级（typography）
|
||
统一语义化字号，修改只需改设计系统 `typography` 字典：
|
||
|
||
| 语义 | 字号 | 用途 |
|
||
|---|---|---|
|
||
| cover_title | 38 | 封面主标题 |
|
||
| cover_subtitle | 18 | 封面副标题 |
|
||
| section_title | 34 | 章节页标题 |
|
||
| page_title | 22 | 页面标题 |
|
||
| card_title | 16 | 卡片标题 |
|
||
| body | 15 | 正文 |
|
||
| body_small | 13 | 双栏/卡片内文字 |
|
||
| table_head / table_cell | 13 / 12 | 表格 |
|
||
| chart_label / chart_cat | 12 / 9 | 图表标签 |
|
||
| footer / notes | 9 / 10 | 页脚/辅助 |
|
||
|
||
### 页面结构装饰
|
||
- report-jp 页眉装饰线（主色细线 + 左端1.6in锚点块）
|
||
- 章节页装饰（左侧竖条 + 底部横线）
|
||
- 内容区背景层（模板模式：body 区极浅色分区，与母版背景区分）
|
||
|
||
---
|
||
|
||
## 3. report-jp 设计系统（日式商务报告）
|
||
|
||
> 参考：日本本部报告会资料（010_【本部長報告会】2026年7月度_AI推進部.pptx）。
|
||
> 法人蓝 #0B3D91 + 浅天蓝卡片 #B7DEE8 + Meiryo UI 字体，日企报告标准样式。
|
||
|
||
### 设计令牌
|
||
|
||
| 令牌 | 色值 | 用途 |
|
||
|---|---|---|
|
||
| `page` | **10.83 × 7.5 in**（非标准比例） | 页面画布 |
|
||
| `bg` | `#FFFFFF` | 页面背景（纯白） |
|
||
| `bg2` | `#F5F7FB` | 交替行/次级背景 |
|
||
| `panel` | `#E8EAF6` | 面板（浅蓝灰） |
|
||
| `panel2` | `#DDE3F2` | 面板暗 |
|
||
| `card_fill` | `#B7DEE8` | **卡片填充（浅天蓝）** |
|
||
| `line` | `#C9D4E8` | 分隔线 |
|
||
| `text` | `#1A1A1A` | 正文（黑色，日企惯例） |
|
||
| `text_dim` | `#556070` | 辅助文本 |
|
||
| `primary` | `#0B3D91` | 主色：**法人蓝** |
|
||
| `secondary` | `#1976D2` | 次级：Material蓝 |
|
||
| `accent` | `#C00000` | 强调红（警示/机密） |
|
||
| `success` | `#2E7D32` | 正向（绿） |
|
||
| `danger` | `#C00000` | 警示（红） |
|
||
|
||
### 图表色板（协调渐变：蓝→青→绿→金→橙）
|
||
|
||
```
|
||
#0B3D91 深法人蓝 → #2E74B5 中蓝 → #0099CC 青蓝 → #26A69A 青绿 → #F2B134 琥珀金 → #EF6C00 橙
|
||
```
|
||
|
||
**渐变柱体**：柱状图使用垂直渐变（顶部提亮45% → 底部原色），模拟立体感。
|
||
|
||
### 字体
|
||
|
||
```
|
||
日文：Meiryo UI（日企标准，微软雅黑日文版）
|
||
中文：微软雅黑 ｜ 英文：Segoe UI
|
||
```
|
||
|
||
### 特色组件
|
||
|
||
1. **日式页眉**：页面 plan 支持 `section_no`（如 "1"），渲染为 `1. 标题（x/y）` 编号格式
|
||
2. **机密标记**：plan 顶层或页面支持 `confidential`（如「機密情報」「社外秘」），右上角红色标签
|
||
3. **流程图**：`flowchart` 页面类型，浅天蓝卡片 + 法人蓝标题 + 箭头（支持横向流程与泳道两种模式）
|
||
4. **卡片式布局**：参考PPT的浅天蓝卡片（#B7DEE8）作为内容容器
|
||
|
||
### 风格要点
|
||
- 法人蓝（#0B3D91）是日本企业标准的"企业蓝"，庄重、权威
|
||
- 正文用黑色（日企报告惯例，不同于中式报告的深灰）
|
||
- 卡片用浅天蓝而非浅灰——日式报告特有的清爽感
|
||
- 标题字号相对 16:9 版本略小（22pt），因为页面更窄（10.83in）
|
||
- 机密标记红色标签是日企报告标配（機密情報/社外秘/取扱注意）
|
||
|
||
---
|
||
|
||
## 1. business-report 设计系统（商务报告风格 · 火焰蓝）
|
||
|
||
> 灵感来源：麦肯锡/BCG 咨询报告、PowerPoint 商务模板。浅色底、克制的信息层次、清晰可打印。
|
||
> 主色为**火焰蓝**（消防救援标志蓝 `#1E50A2`）——庄重、专业、辨识度高。
|
||
|
||
### 设计令牌
|
||
|
||
| 令牌 | 色值 | 用途 |
|
||
|---|---|---|
|
||
| `bg` | `#FFFFFF` | 页面背景（纯白） |
|
||
| `bg2` | `#F5F6FA` | 交替行/次级背景 |
|
||
| `panel` | `#F4F6FA` | 卡片/面板背景（浅灰） |
|
||
| `panel2` | `#ECEFF5` | 面板暗色变体 |
|
||
| `line` | `#D8DEE9` | 分隔线/边框（浅灰） |
|
||
| `text` | `#1F2937` | 主文本（深灰） |
|
||
| `text_dim` | `#6B7280` | 辅助文本（中灰） |
|
||
| `primary` | `#1E50A2` | 主色：**火焰蓝**（标题/强调） |
|
||
| `accent` | `#C00000` | 强调色：商务红（关键数字/警示） |
|
||
| `secondary` | `#3B78C4` | 次级：亮蓝 |
|
||
| `success` | `#228B22` | 正向（墨绿） |
|
||
| `danger` | `#C00000` | 警示（红） |
|
||
|
||
### 图表色板（火焰蓝系列）
|
||
|
||
```
|
||
#1E50A2 火焰蓝 → #3B78C4 亮蓝 → #C00000 红 → #ED7D31 橙 → #70AD47 绿 → #7030A0 紫
|
||
```
|
||
|
||
### 风格要点
|
||
- **白色底 + 火焰蓝标题**：商务报告经典组合，庄重专业，打印友好
|
||
- **商务红点睛**：与火焰蓝形成经典"蓝+红"组合，只用于关键数字、强调语句、风险标识
|
||
- **浅灰卡片**：F4F6FA 面板 + D8DEE9 细边框，层次靠灰阶而非色块
|
||
- **克制的装饰**：无光晕、无渐变背景，纯网格对齐——信息优先
|
||
- **表格**：表头火焰蓝底白字（primary），交替行 bg2/panel
|
||
- **pill 文字**：浅色系统下 pill 上文字用白色（深色系统用底色）
|
||
|
||
---
|
||
|
||
## 2. aura-dark 设计系统（深色高级）
|
||
|
||
### 设计令牌（Design Tokens）
|
||
|
||
| 令牌 | 色值 | 用途 |
|
||
|---|---|---|
|
||
| `bg` | `#0B0E14` | 页面背景（深蓝黑） |
|
||
| `bg2` | `#11151F` | 交替行/次级背景 |
|
||
| `panel` | `#171D2B` | 卡片/面板背景 |
|
||
| `panel2` | `#121722` | 卡片暗色变体 |
|
||
| `line` | `#273042` | 分隔线/边框 |
|
||
| `text` | `#F0F2F5` | 主文本（近白） |
|
||
| `text_dim` | `#8A93A3` | 辅助文本（灰蓝） |
|
||
| `primary` | `#2ECCFF` | 主色：电光青（强调/标题/链接） |
|
||
| `accent` | `#FFC94D` | 强调色：琥珀金（里程碑/高亮） |
|
||
| `secondary` | `#A78BFA` | 辅助色：霓虹紫（次强调） |
|
||
| `success` | `#3DD68C` | 成功/正向（绿色） |
|
||
| `danger` | `#FF6B6B` | 警示/风险（红色） |
|
||
|
||
### 图表色板（6色序列）
|
||
|
||
```
|
||
#2ECCFF → #FFC94D → #A78BFA → #3DD68C → #FF8A65 → #5C9DFF
|
||
```
|
||
|
||
### 度量
|
||
|
||
| 令牌 | 值 | 说明 |
|
||
|---|---|---|
|
||
| `margin` | 0.55 in | 页面四边距 |
|
||
| `grid` | 0.2 in | 垂直节奏网格 |
|
||
| `radius` | 6% | 圆角卡片弧度 |
|
||
| `content_w` | 12.23 in | 内容区宽度（16:9） |
|
||
| `page` | 13.333 × 7.5 in | 16:9 画布 |
|
||
|
||
### 字体
|
||
|
||
```
|
||
标题: 微软雅黑 Bold（日文场景: Yu Gothic Bold）
|
||
正文: 微软雅黑 Regular（日文场景: Yu Gothic）
|
||
英文/数字: Segoe UI
|
||
```
|
||
|
||
## 2. 组件库
|
||
|
||
### 2.1 封面（cover）
|
||
|
||
```
|
||
[左上光晕装饰] [kicker 标签: 14pt 主色]
|
||
[主标题: 42pt Bold 近白]
|
||
[副标题: 18pt 灰蓝]
|
||
[内容要点: 15pt 灰蓝, 行距1.5]
|
||
[主色横线: 2.8in × 2.5pt]
|
||
[底部深色条: 0.6in 高] [备注/日期: 11pt]
|
||
```
|
||
|
||
### 2.2 目录（toc）
|
||
|
||
```
|
||
[页头: 左侧主色竖条 + 标题 + 分隔线]
|
||
[内容区: 2列网格, 卡片 5.9×1.35in]
|
||
每卡片: [编号 28pt 主色] + [条目 16pt Bold]
|
||
```
|
||
|
||
### 2.3 章节页（section）
|
||
|
||
```
|
||
[kicker: "SECTION 01" 14pt 主色]
|
||
[标题: 36pt Bold]
|
||
[内容: 16pt 灰蓝]
|
||
留白为主，营造节奏感（章节间呼吸）
|
||
```
|
||
|
||
### 2.4 内容页（content）
|
||
|
||
```
|
||
[页头: 标题 26pt Bold + 可选副标题 + 分隔线]
|
||
[正文: 16pt, 行距1.4, 段距8pt]
|
||
[要点: 每个要点一行, 支持 **加粗** 强调]
|
||
[页脚: 页码 10pt 右下角]
|
||
```
|
||
|
||
### 2.5 双栏页（two_column）
|
||
|
||
```
|
||
[两卡片 5.9in 宽, 间隔0.4in]
|
||
每卡片: [栏目标题 18pt Bold 主色] + [内容 14pt 行距1.4]
|
||
```
|
||
|
||
### 2.6 表格页（table）
|
||
|
||
```
|
||
[表头: 深色背景 + 主色文字 13pt Bold, 居中]
|
||
[交替行: bg2/panel]
|
||
[单元格: 12pt, 垂直居中]
|
||
[行高: 0.62in, 表头高0.55in]
|
||
```
|
||
|
||
### 2.7 图表页（chart）
|
||
|
||
```
|
||
[图表卡片: panel背景, 圆角]
|
||
[图例: 右上角横排, 色块+标签 11pt]
|
||
[数据标签: 11pt Bold 显示实际值（不省略）]
|
||
[柱状图: 圆角柱, 2倍柱宽间距]
|
||
[折线图: 主色3pt线 + 数据点圆点]
|
||
[饼图: 扇区 + 数值标签]
|
||
```
|
||
|
||
### 2.8 时间线（timeline）
|
||
|
||
```
|
||
[水平主线: 2pt 灰蓝]
|
||
[节点: 主色圆点 0.16in]
|
||
[阶段标题: 13pt Bold 主色]
|
||
[描述: 10pt 灰蓝, 最多2行]
|
||
```
|
||
|
||
### 2.9 引言页（quote）
|
||
|
||
```
|
||
[左侧主色竖条 0.09×2.2in]
|
||
[引言: 26pt Bold, 行距1.4]
|
||
[出处: 13pt Bold 琥珀金]
|
||
```
|
||
|
||
### 2.10 结束页（end）
|
||
|
||
```
|
||
[标题: 40pt Bold "谢谢" / "Thank you"]
|
||
[内容: 16pt 灰蓝]
|
||
[主色横线: 2.8in × 2.5pt]
|
||
```
|
||
|
||
## 3. 布局原则
|
||
|
||
1. **留白优先**：每页元素不超过 6 个视觉组，大量留白营造高级感
|
||
2. **对齐网格**：所有元素对齐 0.2in 网格，杜绝随意摆放
|
||
3. **主色克制**：主色只用于强调（标题条、关键数字、链接），大面积用中性色
|
||
4. **视觉节奏**：章节页制造呼吸感，内容页信息密度适中
|
||
5. **统一性**：同类型页面必须使用相同组件与布局（可预测性）
|
||
|
||
## 4. 对比度与可读性
|
||
|
||
- 正文对比度：`#F0F2F5` on `#0B0E14`（≈15.8:1，远超 WCAG AA）
|
||
- 主色文本 on 深底：`#2ECCFF` on `#0B0E14`（≈9.1:1）
|
||
- 辅助文本 on 深底：`#8A93A3` on `#0B0E14`（≈4.6:1，满足 AA）
|
||
- 琥珀金 on 深底：`#FFC94D` on `#0B0E14`（≈11.5:1）
|
||
- **禁止**：主色/琥珀金作为大面积背景（只用于点缀与强调）
|
||
|
||
## 5. 扩展设计系统
|
||
|
||
新增设计系统时，在 `engine.py` 的 `DesignSystem` 类中创建同名子类并重写令牌。
|
||
plan.json 的 `design` 字段引用系统名（默认 `aura-dark`）。
|