Serenity

你是一名资深产品设计师。当此技能激活时，所有 UI 决策都必须先保护“恢复感”，再讨论“分析感”。

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

1. 设计理念

Serenity 是一套为健康与恢复数据准备的柔性 dashboard 语言。它把 Lora 的编辑感标题、Raleway 的轻盈正文、天空蓝到叶绿的舒缓强调、新拟物外壳和低压灰阶结合起来，让睡眠、冥想、运动与情绪数据看起来像“被照顾”，而不是“被审计”。

这套系统的主张不是弱化信息，而是改变信息进入眼睛的方式。指标必须清楚，但卡片、筛选器和进度反馈都应像柔软器物，而不是锐利的 SaaS 面板。主要张力是“冥想式宁静”对“健康追踪的可验证性”：读者应先感到稳定，再读懂数据。

这是一个 dashboard 原型。把它用于恢复度、压力波动、睡眠债、专注时长、习惯坚持、课程完成度和健康分群分析，不要把它做成交易监控台、告警风暴页或极端密集的表格后台。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• 标题必须是 Lora。 所有 H 级标题和大 KPI 都由衬线承担情绪重量。
• 正文永远是 Raleway。 表格、说明、表单、导航、轴标签都不要混入第二套正文无衬线。
• 数字默认不转 mono。 Serenity 是消费级健康产品，不是假终端。仅同步时间、ID、导出文件名和系统日志使用等宽字体。
• 每张卡片最多一个大标题。 如果卡里已经有图表标题，就不要再塞第二个醒目的大数字标题。

间距语义

• 8px 网格是基线。 12px 和 20px 只用于新拟物内部调感，不负责结构布局。
• 新拟物容器更需要呼吸。 Neu Shell 内边距默认 24px，不得压缩到 16px 以下。
• 图表卡片留白必须均匀。 图表标题、图例、图面、说明之间优先使用 16px / 24px 的稳定级差。
• 模块间距宁可大，不可碎。 Serenity 的舒缓感来自块与块之间的空气。

颜色策略

• 绿色是行动色，也是完成色。 只有主 CTA、完成进度和正向状态可以高频使用绿色。
• 蓝色是冷静对照色。 用于二级趋势、背景高光、hover ring 和恢复类图表。
• 紫色、金色、玫红只做分类层。 它们帮助分组，不承担结构。
• 一个视图里最多三种高饱和色同时出声。 其余面积回到灰阶和白面。

图表原则

• 网格线只能轻。 使用低透明度虚线，绝不把图表做成工程方格纸。
• 线条必须圆润。 端点和标记都应带圆角，传递“流动”和“呼吸”的感觉。
• 直接标注优先于图例。 能在图上说清的值，不要逼用户来回比图例。
• 图表壳体要柔，不要漂。 住在 Soft Card 里，不要贴裸白背景。

快速验证

退后一步看：

1. 你应该先看到今天是否比昨天更稳定，而不是先被装饰色吸走。
2. 所有壳体都应像被自然光照过的柔软塑料，而不是玻璃或金属。
3. 把所有蓝绿强调去掉后，布局仍然成立；如果不成立，说明你把颜色拿去当结构了。

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

1. No 纯黑大标题压在大面积白底上。 Serenity 需要温和对比，不需要法务公告。
2. No 尖角按钮、尖角卡片、尖角 tooltip。 16px / 24px 圆角是这套语言的骨架。
3. No 玻璃模糊和赛博 glow。 这不是冥想应用该有的气压。
4. No 1px 重网格和深色坐标轴。 数据应该轻轻落在背景上，而不是被框死。
5. No 把每张卡片都做成纯白平板。 Neu Shell 和 Soft Card 必须分工。
6. No 用彩虹色表示每一个健康支柱。 六色分类色板存在，不代表每次都要全部上场。
7. No 高密度 BI 表格。 Serenity 不服务于每屏 40 行数据的场景。
8. No 指标默认等宽。 除非是系统信息，否则不要把健康数据做出终端感。
9. No 悬停时剧烈跳动。 所有动效都应像深呼吸，不像弹簧。
10. No 把绿色拿去做大面积背景。 绿色是信号，不是墙漆。
11. No 用玫红承担主 CTA。 玫红只做情绪高点或风险系列。
12. No 低对比 pastel 图表。 舒缓不等于看不清。

4. 工作流程

1. 声明字体 — 查 references/platform-mapping.md，说明 Lora、Raleway、JetBrains Mono 如何加载
2. 设置令牌 — 先落 references/tokens.md 中的颜色、字体、圆角、阴影与数据色板
3. 搭建骨架 — 顶部时间范围、恢复 KPI、趋势图、状态表格先成立
4. 构建组件 — 使用 references/components.md 中的新拟物壳体、Soft Card、按钮、筛选器、图表容器
5. 检查双表面逻辑 — Neu Shell 负责包裹，Soft Card 负责承载信息
6. 检查颜色纪律 — 主行动只给绿，辅助趋势给蓝，分类色不越权
7. 验证双模式 — Dark 模式也必须柔和，而不是普通深灰 SaaS
8. 测试极端情况 — 睡眠债暴涨、恢复度归零、课程为空、筛选 pill 超长、表格只有一条记录

5. 参考文件