solvent

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

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

1. 设计理念

电影级遥测。Fraunces 像片头字幕一样承担戏剧性，Inter 与 JetBrains Mono 在进入操作阶段后接管效率与可读性。画布是暖棕黑，不是纯黑；信号是琥珀光，不是霓虹蓝；修正与异常用洋红，而不是红色警报墙。主要张力是“华丽编辑感”与“精密工具栏”之间的对冲: 允许雾化玻璃和辉光，但它们只能框住数据，不能吞掉数据。

设计血统：胶片调色台、后期软件时间线、电影片头字幕、暗房里的暖光读数器。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• Fraunces 只做大片字。 display、h1、h2 可用 Fraunces；表格、筛选器、轴标签禁止使用衬线体。
• 每个屏幕最多一处斜体高潮。 Fraunces 斜体只能用于一个关键短语或大标题，不能在同屏四处飘。
• 所有数据值等宽。 KPI、轴刻度、时间范围、耗时、百分比、ID 串全部使用 JetBrains Mono。
• 微标签永远是技术性的。 标签、图例、时间戳使用大写或小型大写节奏，靠字距而非彩块建立存在感。

间距语义

• 8px 网格是底盘。 但视觉上要读成“宽镜头”: 卡片内边距优先 24px，主区块间距优先 32px 或 48px。
• 不要把信息挤成后台表单。 顶部摘要区要留出呼吸；如果某个图表需要更多数据密度，压缩的是图内标签，不是整页外边距。
• 圆角分层明确。 4px 给图元，8px 给输入控件，12px 给常规组件，20px 给主容器，999px 仅给 pill。

颜色策略

• 一屏只允许一个发光主角。 默认是琥珀 --accent。如果已经有发光 CTA，图表选中态就不要再做第二个大辉光。
• 洋红是修正色，不是常规主色。 用于对比、偏差、实验版本、异常分支；不要让洋红接管整个页面。
• 中性色完成大部分层次。 text1 到 text4 + surface1 到 surface3 应承担 80% 的信息区分。

构图方法

• 用顶部条，不用厚侧栏。 Solvent 语言更像工作台前沿，而不是左侧 ERP 导航。
• 先放一块“舞台区”，再放分析卡。 页面顶部需要一个宽的引导面板，承接标题、摘要和操作；下面才进入 KPI 与图表网格。
• 图表容器像玻璃抽屉。 允许模糊、内高光和深景阴影，但内容层必须是扁平、干净、对齐的。

数据可视化工艺

• 网格线用细虚线。 1px、低不透明度、暖色中性。它们应该像导播线，而不是 Excel 方格。
• 折线端点圆润，柱形边角轻微。 线条是流动的，柱体仍然保持工具感，不做果冻圆角。
• 工具提示像暗房读数卡。 背景必须接近不透明，数值列用等宽，至少一列与主色呼应。
• 眯眼测试。 眯眼后应该还能看见：一个琥珀信号、一个 Fraunces 主标题、一个清晰的图表重心。

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

1. No cold blue accents. 不要引入科技蓝或青紫渐变，这会直接破坏暖琥珀语言。
2. No flat white analytics cards. 大片纯白卡片会把系统拉回普通后台风格。
3. No serif in dense data regions. 表格、图例、轴标签、筛选器里禁止 Fraunces。
4. No more than one glow cluster per viewport. 一屏只能有一个明显辉光中心。
5. No border-radius above 20px on containers. 20px 是主容器上限；超过会变成消费级软糖 UI。
6. No pill charts. 柱形、进度条、热力块最大 4px 圆角；999px 只属于按钮和芯片。
7. No washed-out tooltips. 工具提示不能半透明到看不清数值。
8. No full-screen magenta states. 洋红只能点到为止，不允许整块面板都染成洋红。
9. No stacked shadows without blur glass. 如果没有雾化面板语境，就不要堆叠大阴影。
10. No more than five categories in a single chart palette. 超过五类时改用分面、筛选或交互，不要继续加颜色。
11. No tiny axis labels. 轴标签低于 11px 就已经不在 Solvent 的阅读范围内。
12. No cheerful loading skeletons. 加载状态用暗色占位和脉冲边框，不要灰白 shimmer 条。

4. 工作流程

1. 声明字体 — 查阅 references/platform-mapping.md 了解加载说明
2. 设置令牌 — 应用 references/tokens.md 中的变量
3. 搭建舞台区 — 先建立顶部摘要面板，再放数据网格
4. 构建组件 — 使用 references/components.md 中的规格
5. 检查层次 — 眯眼测试：琥珀信号和主标题是否还在？
6. 验证双模式 — 深色与浅色都要保留暖色底，不允许出现冷灰 fallback
7. 验证数据可读性 — 等宽数值、可读轴标签、足够不透明的 tooltip
8. 平台适配 — 查阅 references/platform-mapping.md 了解输出规范

5. 参考文件