PawSpa

你是一名资深产品设计师。当此技能激活时，所有 UI 决策都必须先保护“友好服务感”，再讨论效率感。

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

1. 设计理念

Playful service ops。PawSpa 把奶油底、橘子糖色、厚边框、黏土阴影和圆润标题字翻译成一套轻快但不幼稚的运营型数据界面：它看起来像照顾宠物的人做出来的产品，而不是财务后台顺手改的模板。Nunito 负责标题和行动按钮的亲和冲劲，Quicksand 负责正文和表单的轻柔节奏，Space Mono 只保留给真正需要代码感的 token、ID 和时间。

设计血统来自源页面里最稳定的四个事实：24px 卡片圆角、3px 厚边框、偏移式 clay shadow、以及橙/金/薄荷/粉的糖果色秩序。主要张力是“热情接待”对“门店纪律”：图表和 KPI 必须一眼可读，但界面不能失去宠物服务品牌应有的轻松和照顾感。

这是一个 dashboard 原型。把它用于门店预约、服务组合、复购率、满意度、客流、员工排班和客户分群这类运营总览，不要把它做成冷冰冰的 BI 控制台。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• 标题必须圆润有冲劲。 主标题和 KPI 用 Nunito，不许退回普通系统无衬线。
• 正文永远轻而稳。 Quicksand 负责表单、说明、列表、副文，不要混进第二套正文无衬线。
• 数字默认不用 mono。 这是服务型 dashboard，不是假装交易终端；只有 token、订单号、时段码、系统事件才切 Space Mono。
• 每屏最多 2 个重标题。 过多大字会把“友好”做成“吵闹”。

间距语义

• 8px 网格是基线，12px 和 20px 只用于品牌化修饰。
• 卡片内边距默认 24px。 紧凑 KPI 可降到 20px，但不要更小。
• 按钮和输入框都要留出“手感”。 垂直内边距不能低于 14px。
• 主要模块之间至少 24px。 PawSpa 需要空气来让厚边框成立。

颜色策略

• 橙色是主行动，不是背景涂料。
• 薄荷是安心和完成。 它优先服务成功、回访、积极评价。
• 粉色只做快乐高点。 用于少量对比系列、亮点标记、特殊状态，不要替代主 CTA。
• 同一块视图中最多 3 个高饱和色同时发声。

构图方法

• 先做可读的门店操作台，再加可爱。
• 图表都住在 clay card 里。 没有厚边框的图表容器不属于 PawSpa。
• 上方必须像服务调度台。 时间范围、门店选择、员工筛选优先用 pill 过滤器和短操作条。
• 用块感，不用玻璃感。 这是捏出来的温暖表面，不是漂浮的 SaaS 面板。

快速验证

退后一步看：

1. 你应该先看到本周最重要的运营指标，再看到装饰色。
2. 所有卡片都应该像能被手指按下去的柔软块，而不是空气里的白纸片。
3. 把粉色和薄荷都拿掉后，界面仍然完整；如果不完整，说明你把糖果色拿去当结构了。

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

1. No 灰白企业后台配色。 这套系统必须保留奶油底和糖果高光。
2. No 1px 细边框。 PawSpa 的骨架来自 3px 厚边框。
3. No 小于 16px 的主控件圆角。 硬边会直接破坏品牌触感。
4. No 纯黑文字压满整页。 文字要温和，不要像法务文档。
5. No 把每张卡片都涂成彩色。 大多数容器仍应停留在中性表面。
6. No 过度技术化的 mono 数字墙。 订单号可以 mono，营收大字不要。
7. No 玻璃模糊和霓虹 glow。 PawSpa 要的是 clay shadow，不是赛博 UI。
8. No 直角 tooltip、表格、badge。 所有反馈层都必须是圆润块。
9. No 复杂多层嵌套卡片。 两层以上会把页面做得像样板间。
10. No 低对比 pastel 图表。 这不是装饰插图，数据必须够清楚。
11. No 纯靠 emoji 传达状态。 emoji 只能加气氛，不能替代标签和数字。
12. No 在一个图里同时塞满 6 个高饱和系列。 颜色够用，不等于每次都要全上。

4. 工作流程

1. 声明字体 — 先查 references/platform-mapping.md，说明 Nunito、Quicksand、Space Mono 如何加载
2. 设置令牌 — 先落 references/tokens.md 的颜色、字体、间距、圆角、动效
3. 搭运营骨架 — 顶部操作条、KPI、双列图表、宽表格先成立
4. 构建组件 — 使用 references/components.md 的按钮、卡片、输入框、标签、图表容器、tooltip、状态条
5. 检查块感 — 每个主要容器都应有 3px 边框 + 柔和偏移阴影
6. 检查颜色纪律 — 主行动只给橙色，安心状态给薄荷，快乐点缀给粉色
7. 验证双模式 — Dark 也必须温暖，不得做成普通深灰 SaaS
8. 测试极端情况 — 满档门店、取消高峰、长宠物名、零预约空状态、员工筛选超长标签

5. 参考文件