10 KiB
10 KiB
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
特色组件
- 日式页眉：页面 plan 支持
section_no（如 "1"），渲染为1. 标题（x/y）编号格式 - 机密标记：plan 顶层或页面支持
confidential（如「機密情報」「社外秘」），右上角红色标签 - 流程图：
flowchart页面类型，浅天蓝卡片 + 法人蓝标题 + 箭头（支持横向流程与泳道两种模式） - 卡片式布局：参考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. 布局原则
- 留白优先：每页元素不超过 6 个视觉组，大量留白营造高级感
- 对齐网格：所有元素对齐 0.2in 网格，杜绝随意摆放
- 主色克制：主色只用于强调（标题条、关键数字、链接），大面积用中性色
- 视觉节奏：章节页制造呼吸感，内容页信息密度适中
- 统一性：同类型页面必须使用相同组件与布局（可预测性）
4. 对比度与可读性
- 正文对比度：
#F0F2F5on#0B0E14（≈15.8:1，远超 WCAG AA） - 主色文本 on 深底：
#2ECCFFon#0B0E14（≈9.1:1） - 辅助文本 on 深底：
#8A93A3on#0B0E14（≈4.6:1，满足 AA） - 琥珀金 on 深底：
#FFC94Don#0B0E14（≈11.5:1） - 禁止：主色/琥珀金作为大面积背景（只用于点缀与强调）
5. 扩展设计系统
新增设计系统时，在 engine.py 的 DesignSystem 类中创建同名子类并重写令牌。
plan.json 的 design 字段引用系统名（默认 aura-dark）。