情感顾问(cupid)的作业工具:客户管理、人工配对、系统外拨、审批跟进。与用户端共用令牌档位与图标语言,但密度更高、控件更方正、层级靠品红与描边而非阴影——单次连续作业 30 分钟到 3 小时,效率优先于氛围。
与用户端的分野、色彩、文字、密度——情感顾问端一切组件的底层语言。
同一产品家族的两个 App:用户端 Beloved 是消费体验,情感顾问端 Dating Advisor 是生产力工具。scale 的档位数一致,取值不同——迁移组件时只需换令牌,不需重画结构。
| 维度 | 用户端 Beloved | 情感顾问端 Dating Advisor |
|---|---|---|
| 使用场景 | 浏览、聊天、付费 | 客户管理、配对作业、外拨、审批 |
| 单次时长 | 5–20 分钟 | 30 分钟 – 3 小时连续作业 |
| 信息密度 | 低(留白、大图) | 高(列表、表格、批量操作) |
| 主色 | 玫红 #FF3D8A | 品红 #E50182(顶栏条 / 徽标)· 主操作 #C4016F;大面积底一律米白 #F7F5F3 |
| 默认字号 | 16px | 14px |
| 默认间距 | 16px | 12px |
| 默认圆角 | 16px(按钮药丸形) | 10px(按钮方形) |
| 默认阴影 | e2 浮起 | e1 / 纯 border |
| 按钮高度 | 48 / 38 | 36 / 32 |
| 列表行高 | 72(含头像缩略) | 56(紧凑,可批量) |
| Tab 形式 | 横向滚动 chip / icon + 文字 | 顶部下划线 Tab(无 icon) |
| 表格 | 不使用 | 必备:可排序、可筛选、可批量勾选 |
| 语言 | 中英双语 | 仅中文(组件为英文预留 1.5× 宽度) |



取自情感顾问端 Logo 的品红 #E50182 用在顶栏与品牌页(工作台、列表、详情、启动、登录);实心按钮与选中态用深一档的 #C4016F,避免与顶栏糊在一起。大面积铺底一律用米白 #F7F5F3:启动页与登录页也是浅底,品红只落在 Logo、顶栏条与主按钮上——高饱和品红铺满整屏会刺眼,且与用户端的浪漫气质混淆。#A80066 仅作按下态与通话浮窗的深一档层级。与用户端的区分来自更饱和的品红 + 更紧的密度,而不是更深的底色。
审批与跟进状态贯穿情感顾问端全部作业流,语义色是状态的第一识别层;性别色与用户端完全一致,跨端认知不切换。
中性色为中性灰(用户端为暖调),配合米白工作台底 #F7F5F3——长时间连续作业下更耐看。列表行的次要信息行(城市 · 活跃 · 状态、电话 · 微信)与权限说明一律用 --text2 #6B6B6B,不用 --text3:那一行是扫读时真正要看的内容;--text3 #9E9E9E 只留给时间戳与兜底装饰文案。
| 前景 / 背景 | 用途 | 对比度 | 结论 |
|---|---|---|---|
| 白 / #C4016F | 主按钮文字 | 5.9 | AA |
| 白 / #E50182 | 作业页顶栏文字 | 4.51 | AA |
| 白 / #A80066 | 通话浮窗文字 | 7.3 | AAA |
| #7A0A52 / #FDEBF5 | 浅粉底文字 | 9.2 | AAA |
| #1A1A1A / #F7F5F3 | 正文 | 15.4 | AAA |
| #6B6B6B / #FFFFFF | 次要文字 | 5.3 | AA |
| #8A6508 / #FBF3E0 | 「已配对」徽章文字 | 4.6 | AA |
| #6B6B6B / #F0EDEA | 列表次要信息行、权限说明 | 4.4 | AA |
| #9E9E9E / #FFFFFF | 时间戳、兜底说明等装饰文案 | 2.9 | 仅装饰 |
字体栈 MiSansPunct → Figtree → -apple-system / SF Pro Text → MiSans → system-ui:链首 MiSansPunct 是中文标点子集,把中文标点从西文字体手里截回来;西文走 Figtree,中文落 MiSans。字重上限 700(MiSans 可变字体 wght 轴已限轴,CSS 800 会被钳到 700,而 Figtree 的 800 是真 ExtraBold,混排时两边粗细会劈叉)。数字、工号、推荐码、时长一律 SF Mono 等宽,方便竖列比对。字阶维持情感顾问端自有的细粒度刻度(11.5 / 12.5 / 13.5 / 14 / 17 / 25),不与用户端统一。
4px 网格,档位与用户端一致;默认值下移一档:间距默认 md 12,圆角默认 sm 10,阴影默认 e1。
--hairline: 0.5px列表分隔、卡片与控件描边、顶栏 / 筛选条 / Tab / 底部操作条的分界线一律 0.5px:同一条 1px 在真机上偏实偏重,列表密集处显脏。刻意加重的四处不收:头像性别角标与快捷入口角标的白描边 1.5px、TabBar 选中指示条、情感顾问气泡左侧品红条 2.5px。
与用户端同一套线性图标语言:24px 栅格、1.75px 描边、圆头圆角、currentColor 跟随文字色。VIP 等级徽标沿用用户端的扇贝封缄(同一套渐变与造型,仅尺寸改小);实名认证等 C 端专属印章情感顾问端不用。
本节为情感顾问端图标唯一真值源。多数图标直接复用用户端设计系统的图标库(电话 / 挂断 / 麦克风 / 二维码 / 复制 / 筛选 / 设置 / 通知 / 消息 / 锁定 / 对勾 / 时钟 / 沙漏 / 定位 / 学历 / 职业 / 退出 / 添加 / 更多 / 返回 / 关闭 / 发送 / 图片 / 刷新 / 查看 / 公告 / 警告 / 信息提示 / 皇冠 / 钻石 等);前 5 枚(工作台 / 我的会员 / 数据看板 / 申请池 / 分配交接)为情感顾问端作业场景新增,已正式登记;其余为处置于本节的复用图标。再有新增一律先登记到本节。
全部为中文单语,控件为英文预留 1.5× 宽度弹性。触控目标不小于 44×44(视觉高度可为 36,热区外扩)。
方形圆角 10px,主尺寸 36px,密集操作区用 32px。情感顾问端不用药丸形大按钮。
情感顾问端标准 Tab 是顶部下划线(无 icon,带计数);筛选用 32px 以内的方形 chip 行,可横向滚动。
审批与跟进状态为方形 4px 圆角徽章;VIP 徽标直接沿用用户端的扇贝封缄 + 暖金属 4 级(VIP1 暖珠银 / VIP2 香槟金 / VIP3 暖铂 / VIP4 至尊钻·品红),列表内用 18px 小尺寸 + 等宽等级字。头像上仅可叠加性别徽标一种,VIP / 配对 / 情感顾问等徽标一律置昵称行内联——与用户端同一条铁律。
情感顾问端以 32 / 40 为主(列表),48 / 72 用于详情页头部。性别徽标按 24 / 16 / 12 三档跟随尺寸。



情感顾问端独有组件:表头可排序、行可勾选批量操作、数字列等宽右对齐。移动端横向滚动,首列(客户名)不参与滚动裁切。
| 客户↓ | 城市 | 最近活跃↕ | 状态 | |
|---|---|---|---|---|
| Lily VIP3 | 上海 | 2h | 已配对 | |
| Mei VIP2 | 北京 | 1d | 待配对 | |
| Sora | 深圳 | 3d | 普通 |
看板只用简单柱状图,单色品红系;不做 3D、不做花哨曲线、不做渐变填充。不显示任何佣金金额(佣金线下结算,不在 APP 范围)。
情感顾问端特有的组合:身份可识别、审批可追溯、聊天记录不可见、外拨可录音。
情感顾问发出的每条消息都带品红「情感顾问」徽标,永久不可隐藏(合规要求:会员必须能识别对方身份)。情感顾问 ↔ 会员消息不需互喜、不计费、不进审核队列、实时送达。
配对与解除都是多方流程,每一步都要有时间戳与处理人;情感顾问端只显示自己有权看到的节点。
400 号码外拨,全程录音并持久化;浮窗用品红深一档 #A80066,录音指示用红点脉冲。
--hairline)分隔。