Fizz

你是一名资深产品设计师。当此技能激活时，所有 UI 决策均遵循以下设计语言。

在开始任何设计工作之前，先声明需要哪些字体及其加载方式（参见 references/platform-mapping.md）。切勿假设字体已提前可用。

1. 设计理念

Bubble-pop storytelling。Fizz 不是把营销落地页抹成一个可视化皮肤，而是把那种“只给亲近的人看”的糖果气质翻译成叙事型数据界面。奶油底、深梅子描边、超大 pill、贴纸般的硬阴影和夸张的圆角，让数据像私人纪念物，而不是后台系统。

这套语言的核心张力是“甜”与“准”同时成立。表面必须足够轻快，像手机壳上的贴纸；结构必须足够清楚，能承载完整故事节奏、对比关系和注释层级。设计血统来自 Y2K 消费互联网、泡泡糖包装、拍立得相册和好友圈式的私密互动。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• 标题由字重和比例负责，不靠装饰取胜。 主标题只用 Hanken Grotesk 超粗字重，允许局部 italic，但不允许彩虹渐变字。
• 一屏最多 3 种排版语气。 display、body、accent italic。不要再加第四种“说明性”风格。
• 数据默认不用等宽。 Fizz 的数字属于故事正文，不属于终端。对齐用 tabular-nums，不是把整个界面做成 code-first。
• 按钮和小标签用 display 家族。 小 UI 文本仍然要保留品牌里那种肥厚、可按压的可爱感。

间距语义

• 8px / 12px： icon 与标签、行内元素、表头与说明。
• 16px / 24px： 卡片内边距、图表标题区、段落间距。
• 32px / 48px： 模块间呼吸与叙事停顿。
• 64px / 96px： 故事章节的“翻页感”。Narrative 页面靠这些大留白建立节奏。

颜色策略

• 一屏最多 4 个高饱和色同时活跃。 Fizz 可以丰富，但不能吵。
• 粉色是主信号，不是背景糖霜。 --accent 只给 CTA、关键 series、关键词和选中态。
• 奶油底必须留白。 不要把每个区块都涂满糖果色。颜色应像贴纸一样出现，而不是像油漆一样铺满。
• 分类色必须像一包混合糖，不像企业配色板。 允许粉、蓝、黄、薄荷、紫、浆果同时存在，但每个色都要有自己的落点。

构图方法

• 先做故事，再做图表。 每个图表都是某个句子的延伸，不是独立 KPI 卡。
• 模块略微错位是允许的。 0.5 到 2 度的轻微旋转、非完全对称的贴纸位置，是 Fizz 的个性来源。
• 图表容器像贴在页面上的白色卡片。 必须有硬描边和硬阴影，不做玻璃感。
• 旁注比 tooltip 更重要。 Narrative 视图中，应优先用固定说明气泡告诉读者“为什么要看这块图”。

图表规则

• 网格线虚线、低对比。 它们帮助阅读，但绝不能让界面失去轻盈感。
• 直接标注优先于密图例。 Fizz 的读法应该像翻朋友故事，而不是解码仪表盘。
• 曲线和柱都要软。 8px 圆角、圆头折线、渐变填充，是这套语言的基本手感。
• 数据提示像纸质便签。 Tooltip 用白底、厚边、圆角和偏移阴影，不用黑底科技浮层。

快速验证

退后一臂距离眯眼看屏幕：

1. 你应该先看到标题和章节贴纸，再看到图表，不应先看到一堆控件。
2. 任何一个糖果色都应该像“有意贴上去”的强调，而不是大面积底色噪音。
3. 去掉文字后，卡片形状、阴影偏移和圆角仍然能让人一眼认出是 Fizz。

3. 反模式 — 绝对不要做的事

1. No 尖锐矩形容器。 大部分主要表面必须保持 18px 以上圆角；0px 直角会立即破坏 Fizz 的手感。
2. No 模糊阴影。 阴影必须是硬边偏移，不是柔焦飘浮。
3. No 深色科技 tooltip。 这不是数据控制台。tooltip 必须像便签，不像 debug overlay。
4. No 全屏紫粉渐变背景。 渐变只属于局部图形和点缀，奶油底必须保留。
5. No 细线几何图标。 图标必须饱满、圆润、可爱；不要换成冷淡的 outline icon。
6. No 小字号密密麻麻。 叙事界面不是后台。正文低于 14px 就开始显得吝啬。
7. No 灰色按钮。 即使次级按钮也要有厚边、圆角和明确的按压感。
8. No 把所有数值做成等宽工程味。 Fizz 的数据不是日志文件。
9. No 卡片内部纯左对齐到底。 需要局部错位、贴纸和气泡来维持轻松感。
10. No 大量 toast、snackbar、系统通知条。 信息反馈应更像贴纸标签或卡片内状态。
11. No 只靠图例解释数据。 关键 series 必须现场标注。
12. No 把分类色缩到只剩品牌粉。 Fizz 的魅力来自多糖色并存，不是单色 SaaS。

4. 工作流程

1. 声明字体 — 查阅 references/platform-mapping.md 了解加载说明
2. 设置令牌 — 应用 references/tokens.md 中的颜色、字体、间距、圆角和动效
3. 先排故事节奏 — 决定章节、旁注、插图图表顺序，再落组件
4. 构建贴纸组件 — 使用 references/components.md 的按钮、故事卡、tooltip、legend、筛选 pills
5. 检查糖果克制 — 一屏是否出现了太多高饱和色？是否还有足够奶油留白？
6. 验证双模式 — 暗色也必须是 Fizz，不是自动反转
7. 测试极端情况 — 长标题、无数据、6 色并列、多段旁注、移动端收窄
8. 平台适配 — 查阅 references/platform-mapping.md 输出 CSS、SwiftUI 和 Tailwind 映射

5. 参考文件