# 波普信息图（Pop Infographic）

## 风格标识
`pop-infographic`

## 适用场景
增长数据、产品教育、技术方案、系统架构、社群运营、SNS 内容等信息密集型页面。

## 风格定位
Pop Infographic。鲜艳波普配色加信息图版式，提供两种方言：有机波普（流动、亲切）与复古像素（8-bit 工程感，适合开发者/技术主题）。根据主题选定一种方言后全 deck 保持一致。

## 视觉系统
- 有机方言：白底（#ffffff / 极浅青 #f0fdfa），不规则变形虫状、云朵状或波浪形色块（不规则 border-radius），可在边缘局部裁切；点缀圆点图案、手绘高亮笔触、星星和聊天气泡。
- 像素方言：浅奶油底（#fefce8）+ 极淡 CSS 网格线；模块用堆叠彩色方块、粗黑边框（border: 3px solid #171717）、硬阴影和轻微错位；图标用 Unicode 或 CSS 模拟 8-bit（圆角 ≤ 4px）。
- 每个信息模块只用一个主导色块，避免同一区域颜色过杂。

## 配色（CSS 可用）
- 背景：#ffffff / #f0fdfa（有机）或 #fefce8（像素）
- 文字：#171717（近黑）
- 强调：#ec4899（鲜粉）、#06b6d4 / #22d3ee（青色）、#facc15（亮黄，像素方言）
- 辅助：#525252（中灰）
- 面板：#f0fdfa（浅青）或 #fef9c3（浅奶油）

## 排版（HTML/CSS）
- 标题用粗无衬线（font-weight: 800; font-size: 28-44px）。
- 数字和百分比用超大字号强调（font-size: 64-96px）。
- 信息拆成短句、标签或卡片；文案短、直接、有主见，避免营销腔；少量英文标签不抢占主体信息。

## 推荐版式（960×540pt）
- 数据波普：可组合结论文字、排序条形图、分段构成条、大数字、环形图或更自由的信息图构图；根据数据意图和页面节奏选择，不固定左右模板。
- 系统架构：堆叠彩色图层（div 堆叠 + 粗边框），每层含图标、标题和一句说明。
- 时间线：横向方框或波浪线串联节点，最后一步放大高亮。
- 功能清单：卡片矩阵（grid），每张卡片单一强调色背景。

## CSS 实现要点
- 有机形状：`border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;`
- 圆点背景：`background-image: radial-gradient(#ec4899 2px, transparent 2px); background-size: 20px 20px;`
- 高亮笔触：`background: linear-gradient(120deg, transparent 10%, #facc15 10%, #facc15 90%, transparent 90%);`
- 像素硬阴影：`box-shadow: 4px 4px 0 #171717;` + `border: 3px solid #171717;`
- 默认可编辑 PPTX 路径把上述 gradient 装饰降级为纯色 `div`/离散色块；图表形式仍由内容决定，并优先采用能稳定导出的实现。

## 避免
- 不使用僵硬商务图表、暗沉配色、真实照片或玻璃拟态。
- 不让有机形态或背景网格干扰正文可读性。
- 不把页面做成儿童插画；保持现代和信息清晰。

## 输出要求
保留输入内容的信息结构和文字含义，按此风格重绘为统一连贯的 16:9 演示页面。所有视觉元素必须用 HTML/CSS 实现，不依赖外部图片资源。
