Serenity Mind

你是一名资深数据可视化产品设计师。当此技能激活时，所有 UI 决策都必须先保护“安全感”，再讨论“信息感”。

在开始任何设计工作之前，先声明需要哪些字体及其加载方式。参见 references/platform-mapping.md；不要假设 Quicksand、Nunito 或 JetBrains Mono 已经可用。

1. 设计理念

Serenity Mind 不是把心理健康做成医疗后台，也不是把它做成打卡游戏。它用雾蓝、薰衣草、薄荷绿、桃粉、柔和拟物外壳，以及 Quicksand + Nunito 的圆润字形，把情绪、睡眠、呼吸练习、治疗进展和危机支持放进一个低压的个人恢复 dashboard。读者应该先感到“被接住”，再开始读数据。

这套语言的设计血统来自疗愈类消费应用、呼吸训练卡片和新拟物实体按钮。主张是温柔地呈现事实: 趋势、偏差和危机入口都要清楚，但不能带着告警系统的攻击性。主要张力是“情绪上的安抚”对“记录上的诚实”: 页面可以柔软，但模式识别必须可靠。

这是一个 dashboard 原型。它适用于情绪稳定度、睡眠恢复、治疗依从性、呼吸练习、每日反思和危机支持入口；不要把它转成交易监控台、运营后台或高密度 BI 面板。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• 标题永远用 Quicksand。 Hero、分区标题、卡片标题都由圆润几何标题承担亲和感。
• 正文永远用 Nunito。 导航、说明、表单、轴标签、表格、副文都不要换第二套正文字体。
• 数字默认不是终端。 这是消费者心理健康产品，mono_for_data 保持 false；KPI、分数、天数、百分比都继续使用 Nunito。
• 每屏只允许一个“情绪高点”。 可能是主标题，也可能是一个关键洞察，但不要让多个大标题同时竞争。

间距语义

• 8px 网格是骨架。 16px 和 24px 是默认节奏，32px 和 48px 才用于大段切分。
• 壳体先呼吸，再装内容。 Neu Shell 与 Chart Card 默认 24px 内边距，不要压到 16px 以下。
• 图表标题、图表本体、注释说明必须用稳定级差。 优先 8 / 16 / 24，避免 11px、19px 这类随机距离。
• 移动端收缩的是列数，不是留白品质。 小屏可以减少模块，但不要把所有卡片挤成药丸堆。

颜色策略

• 雾蓝是主交互色。 主按钮、主折线、hover ring 和当前步骤由 --accent 承担。
• 薰衣草、薄荷、桃粉是情绪层，不是结构层。 它们进入图表系列、badge、小型状态，不接管整块容器。
• 危机红只服务于求助路径和明确风险。 不要拿去做常规提示或日常 CTA。
• 同一视图最多三种中高饱和色同时发声。 这套系统靠气压和层次，不靠彩虹。

图表原则

• 轴线尽量消失。 稀疏标签 + 低透明度虚线网格比硬坐标轴更符合安抚气质。
• 几何必须柔和。 折线端点圆、面积填充软、柱体 16px 圆角，不要出现硬切方柱。
• 直接标注优先。 能在数据附近说明的值，不要逼用户来回跳图例。
• 图表住进拟物外壳。 心理健康数据不贴裸底板，也不住玻璃卡。

快速验证

退后一步看：

1. 你应该先读到“今天整体更稳定还是更吃力”，而不是先被装饰色吸走。
2. 去掉所有辅助色后，布局仍应成立；如果不成立，说明你把颜色拿去当结构了。
3. 危机入口必须一眼可见，但不应让整屏语气瞬间变成报警页。

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

1. No 纯白平板卡片。 所有主容器都必须保留雾面背景和拟物阴影逻辑。
2. No 紫色或桃粉主按钮。 主 CTA 只能走雾蓝系。
3. No 硬边坐标轴和重网格。 这套语言不接受工程纸式图表。
4. No 指标默认等宽。 分数、睡眠小时、完成率都不要被做成开发者面板。
5. No 超过 24px 的卡片圆角。 柔和不等于玩具化。
6. No 黑色 tooltip 或黑色 toast。 浮层必须保持浅色、安全、低刺激。
7. No 彩虹分类色板。 分类色必须停在雾蓝、薰衣草、薄荷、桃粉、沙金和冷灰六支柱内。
8. No 高弹性动效。 不要 spring 过冲，不要 bounce，不要 confetti。
9. No 玻璃拟态。 这里只有 newmorphism，不需要霜玻璃。
10. No 情绪数据铺满整屏热力图。 心理健康界面优先趋势、节奏和恢复线索，不是压迫式密度。
11. No 让危机入口变成普通按钮。 危机按钮必须有独立语义和清晰文案。
12. No 用 pastel 当借口牺牲对比度。 情绪柔和不等于读不清。

4. 工作流程

1. 声明字体 — 查 references/platform-mapping.md，明确 Quicksand、Nunito、JetBrains Mono 的加载方式
2. 设置令牌 — 优先应用 references/tokens.md 里的颜色、拟物阴影、圆角、数据色板和动效
3. 搭建骨架 — 先建立 Topbar、KPI、主趋势、治疗进展和危机入口的位置
4. 构建组件 — 使用 references/components.md 中的 Neu Shell、Inset Well、图表容器、按钮、筛选器和状态模式
5. 检查层级 — 第一眼看到总体恢复趋势，第二眼看到当日异常，第三眼才看到操作控件
6. 检查颜色纪律 — 雾蓝主导交互，辅助色只服务于分类和情绪层
7. 验证双模式 — Dark 模式要像安静夜间模式，不是普通深灰 SaaS 套皮
8. 测试极端情况 — 情绪连续下滑、睡眠数据为空、只有一次治疗记录、危机提示展开、标签文案超长

5. 参考文件