13 KiB
13 KiB
陪诊小程序 配色规范
本文件只规定颜色，不涉及布局、间距、圆角、触控尺寸。那些属于界面规范，另行处理。
适用范围：ui/wxapp_escort/ 下全部小程序页面。
一、总原则
全站只有一个色相。
- 第一色是暖橙，承载品牌、交互、强调。
- 第二色不是另一个色相，是暖墨文字层（暖偏棕的深灰）。它的作用是把层级拉开，不与暖橙争彩。
- 浅橙三档（描边、浅底、深字）都是主色的同色阶，不是新颜色。
- 状态色只允许在表达状态时出现，不做装饰。
判断一个颜色是否该用：如果它既不是暖橙的同色阶、也不是暖墨、也不是明确的状态色，就不该出现在页面里。历史遗留的灰金 #D4A853、亮橙 #FF8500、青灰、翠绿都是这条原则的违反项。
二、核心色板
令牌按项目惯例定义在各页面的 page {} 选择器内。技术上 app.wxss 的 page {} 也能全局定义变量，但各页自带可以让页面样式自包含、互不牵连，这是本项目的约定。
2.1 第一色：暖橙色阶
| 令牌 | 色值 | 用途 | 对比度 |
|---|---|---|---|
--brand-strong |
#C2410C |
主按钮、价格数字、选中态、实心强调块 | 纸面 4.89:1，白卡 5.18:1 |
--brand-ink |
#9A3412 |
标签文字、文字链、暖色小标题、图标 | 浅橙底 6.74:1，纸面 6.89:1 |
--brand-line |
#FFE0C2 |
浅橙块描边、浅橙档的状态描边 | 仅做描边 |
--brand-soft |
#FFF4E8 |
浅橙底：说明砖、图标衬底、按钮按下态 | 仅做底 |
用法边界：
--brand-strong是唯一可以当"实心大色块"用的值。全页同类实心块建议不超过一处，避免主色泛滥。--brand-soft只能当底，不能当文字色，也不能当描边色（它做描边时等于没有描边）。--brand-ink是浅橙底上的首选强调字色。--brand-strong落在--brand-soft上实测 4.77:1，过 AA 但余量小，浅橙底上的文字一律走--brand-ink。- 例外（已登记）：
escort/itemlist的价目单里，价格数字为弱化表达改走--muted+ 字重 500，不走--brand-strong，让「预约」空心胶囊按钮独占焦点。同一页价格列必须只用这一个色值、一种字重，不得混用。 escort/itemlist的「预约」按钮走空心胶囊：3rpx--brand-strong环 + 28rpx 满圆角（= 高 56rpx 的一半）+--brand-ink字 30rpx/500（纸面 6.89:1），无填充、无阴影，按下填--brand-line。不用填充是因为它与同行的规格签撞形——签是「浅橙底 + 6rpx 圆角」，按钮若同族，一行里就是两个标签，分不清哪个能点。规则：同一行只允许一个填充物（这里是签），按钮独占「环」这一形态；可点性由环承担，字重因此可以降到 500（注意 500 在部分 Android 中文会落回常规）。该页因此不存在实心大色块，§2.1「同类实心块不超过一处」无需开口子。
2.2 第二色：暖墨文字层
| 令牌 | 色值 | 用途 | 对比度 |
|---|---|---|---|
--ink |
#2B2521 |
标题、需要最重的正文 | 纸面 14.26:1 |
--ink-2 |
#4A4038 |
正文 | 纸面 9.52:1 |
--muted |
#6F655C |
次要文字、元信息、说明、未选中态 | 纸面 5.37:1，白卡 5.69:1，浅橙底 5.24:1 |
用法边界：
- 三档只表示文字层级，不表示状态，不表示可点击性。
--muted是最浅的一档，不得再浅。它是全站文字对比度的底线，任何比它更浅的文字色都视为不合格。--muted是三元色里的关键值：它在暖白纸面、白卡、浅橙底上都能过 4.5:1。历史值#7A7068压线达标但无余量（纸面 4.56:1），已废弃，所有硬编码#7A7068都要替换。- 注意
t-icon组件的color属性读不到 CSS 变量，只能用硬编码色值。这类硬编码必须与令牌同步（当前应为#9A3412、#6F655C、#C2410C三者之一）。
2.3 底与线
| 令牌 | 色值 | 用途 |
|---|---|---|
--white |
#FFFFFF |
卡片、面板 |
--paper |
#FAF8F5 |
页面底色（暖白纸面） |
--line |
#ECE3D6 |
发丝线：卡片内部分隔、区块切分 |
--sep |
#E5DACC |
分隔线：竖线、浅橙底上的线 |
用法边界：
- 这两组线不是装饰，是切分工具，本身不表意。不要给它们上主色或状态色。
--line与--sep的分工是固定的：浅橙底上必须用--sep，因为--brand-line落在--brand-soft上只有约 1.16:1，肉眼看不见；--sep比--line深一档，专门负责在彩色底上还能被看到。--paper与--brand-soft的明度差只有约 1.03:1。所以浅橙块落在纸面上时，形状必须靠 2rpx--brand-line描边承担，不能用更大的色差去解决，也不加阴影——首页.intro-card/.quick-item-full与escort/itemlist的页脚收口卡都是"描边 + 去阴影"这一种做法。浅橙块靠大面自身可辨，不靠阴影托形。- 白卡一律走中性阴影（
--shadow-card: 0 2rpx 10rpx rgba(63, 43, 25, 0.07)，首页与escort/itemlist同值），圆角 28rpx。彩色（暖橙）阴影不得用在--white面上——白面加暖橙阴影会在卡边泛出一圈暖晕，与全站白卡不是同一种东西；它只允许出现在实心 CTA、品牌印记这类小体量元素上（如首页--shadow-cta: 0 2rpx 8rpx rgba(194, 65, 12, 0.16)）。 - 例外（已登记）：
escort/itemlist的三个服务分组做成通栏白底块——--white面 + 上下各 2rpx--line发丝边 + 上述中性--shadow-card，圆角为 0。做法是margin: 36rpx -32rpx 0加等量padding: 28rpx 32rpx，白面顶到屏幕两侧而行宽仍落在容器原有的 686rpx 上。这是该页唯一可行的"白底卡"解法：卡内缩 32rpx 再自带 24rpx 内距会把内容宽压到 638rpx，最长服务名「VIP 5次 半天陪诊」(249rpx) 当场折行。圆角必须为 0，否则满宽块的圆角会切在屏幕边上、露出纸色缺口。页首.notice仍是内缩 28rpx 圆角白卡（同上中性阴影），两者是"提示卡 / 章节带"两种角色，形不同不算同类撞形。白底块内每组的末行不画分隔虚线，收口交给卡底发丝边。
例外（已登记）：escort/itemlist 的页脚做成浅橙收口卡——--brand-soft 底 + 2rpx --brand-line 描边 + 28rpx 圆角 + 去阴影，与首页 .quick-item-full（「联系我们」）同源。用途是把首页"每个区块都收在暖色卡上"的节奏带过来：该页其余四块都是白面，页脚若也走白，全页暖色就只剩"线"（竖条 / 按钮环 / 暖陶土字），比首页轻一档；这张"面"是补回来的暖色落点。
浅橙块不使用彩色阴影（按上条，靠描边托形）。以下值曾是"浅橙块托形阴影"的唯一候选，但首页与 escort/itemlist 实际都用描边，此值当前无使用位置，仅作登记——若将来确需给浅橙块托形，只能用它：
box-shadow: 0 2rpx 10rpx rgba(194, 65, 12, 0.08);
三、状态色
状态色只在订单、记录这类有明确状态字段的地方使用，且同一个页面里同类状态只能有一种颜色。
| 状态 | 底色 | 描边 | 字色 | 对比度 |
|---|---|---|---|---|
| 待服务 | #ECF7F4 |
#C7E5DF |
#0F766E |
5.00:1 |
| 服务中 | #FFF4E8 |
#FFE0C2 |
#C2410C |
4.77:1 |
| 已完成 | #EAF6EE |
#CDE9D7 |
#1F7A4D |
4.79:1 |
| 已取消 | #FCF0EE |
#F2D6D1 |
#B4231A |
5.89:1 |
用法边界：
- 不得仅用颜色传达状态。 状态胶囊必须带文字，颜色只做强化。这条是 WCAG 1.4.1（Use of Color，Severity: High）的要求——将来任何"纯色圆点表示状态"的写法都视为违规。
- 青绿（待服务）是全站唯一的冷色，也是唯一"反暖色"的特权。它只给"等你去处理"这一个语义。其他任何状态都不许用冷色，否则这个信号就废了。
- 服务中直接复用主色浅档，不另立色相。服务中是一个正常中间态，不需要报警感。
- 已取消的红是状态色里唯一脱离暖色体系的。若后续想让全站色相更少，可把已取消收成
--muted字 + 中性底（#EFEFF2），代价是列表里不易扫到。当前按上表执行。 - 状态色不得用在：区块标题、图标衬底、按钮、装饰条。它只包住状态文字本身。
- 表单错误提示复用已取消档（
#B4231A字 +#FCF0EE底），不新增令牌；错误必须带文字，不能只把输入框描红。 - 禁用态不使用暖橙（可点性由暖橙表达，禁用即收回）：
--muted字 +--sep描边 + 透明底。
四、硬约束（可验证）
- 所有文字对底色的对比度必须达到 WCAG AA 4.5:1；中文最小字号不低于 24rpx（12px）。
- 图标对衬底的对比度必须达到 WCAG 非文本 3:1。反例：
#22A45D落在#EBF8F0上只有 2.94:1，不达标；同位置的合格值是#19814A（4.49:1）。 - 不得新增色相。需要区分时先改结构（分组、加留白、换线），不要加颜色。
- 不得使用渐变色。历史遗留的
#FF9B33 → #FF7A33、#4CAF50 → #45A049属于违反项。 - 卡片、面板、说明砖的填充色必须中性（
--white/--paper/--brand-soft）。不得用--brand-strong或状态色做面填充，它们只做描边、图标、文字、mark。 - 暖橙以外的暖色（灰金、亮橙）不得出现。金色
#D4A853属于旧体系，已废弃。 - 每个页面内，同一种含义只能对应一个色值。同一页出现两种"次要文字灰"即为不合格。
- 不得仅用颜色传达信息（WCAG 1.4.1）。状态、错误、选中态都必须有文字或图标伴随，颜色只做强化。
五、历史遗留收口清单
以下为当前与规范冲突的位置，本文档阶段不执行，仅登记，供后续代码阶段按表替换。
5.1 页面级
| 范围 | 现状色值 | 替换为 |
|---|---|---|
mine/mine.wxss、mine/about.wxss |
#D4A853、#FF8500 |
--brand-strong / --brand-ink |
mine/about.wxss、mine/mine.wxss |
#22A45D |
--brand-strong |
mine/comp_address.wxml（switch 属性） |
旧金色 | #C2410C（属性值需硬编码） |
health/profilelist.js（confirmColor） |
旧金色 | #C2410C |
health/profilelist.wxss、profileedit.wxss |
#D4A853 系 |
暖橙令牌 |
escort/recordlist.wxss |
#D4A853 系 |
暖橙令牌 + 状态四档 |
escort/recorddetail.wxss（12 处） |
#D4A853 系 |
暖橙令牌 + 状态四档 |
escort/agreement.wxss |
底 #FAF6F1、#D4A853 系 |
--paper / --brand-soft / 暖橙令牌 |
hospital/contact.wxss、hospital/ranking.wxss |
底 #F5F7F6，字 #1F2937，绿 #6B8E7B #2D6A4F，灰 #6B7280 #9CA3AF #F3F4F6 #E5E7EB |
整体并入暖橙体系 |
pages/ai/aichat.wxss |
金 #D4A853，橙渐变 #FF9B33→#FF7A33，绿渐变 #4CAF50→#45A049，中性 #F5F5F5 #EEEEEE #999999 #333333 #E5E5E5 |
去渐变，气泡改单色 + 浅底，中性色归入纸面与线 |
5.2 系统级（不在任何页面里，最容易漏）
| 位置 | 现状 | 应改为 |
|---|---|---|
app.json tabBar 选中图标 |
images/home-green.png、ai-green.png、mine-green.png（绿色图片） |
暖橙 #C2410C 版本，与 selectedColor 一致 |
app.json tabBar color |
#999999 |
--muted 等价色 #6F655C |
app.wxss 全局变量 |
--td-brand-color-1..10 整套翠绿（基准 #22A45D）、--c-ink #1c1917 |
已确认业务页面零引用（页面只用了 t-icon），是死代码，可整体重写或删除 |
custom-tab-bar/index.wxss、index.js |
未选中色硬编码 #7A7068 |
#6F655C |
5.3 通用色值映射表
| 旧值 | 新值 | 说明 |
|---|---|---|
#D4A853 |
#9A3412 或 #C2410C |
灰金转暖橙，按"文字/图标"或"实心"分 |
#FF8500 |
#C2410C |
亮橙转主色 |
#FF9B33 / #FF7A33 |
#C2410C + #FFF4E8 |
去渐变，拆成字色与底色 |
#22A45D / #6B8E7B / #2D6A4F / #4CAF50 / #45A049 |
#C2410C；若语义是"已完成"则 #1F7A4D |
绿系全部转暖橙；仅状态语义保留绿 |
#FAF6F1 / #F5F7F6 / #F5F5F5 |
#FAF8F5 或 #FFFFFF |
旧底转纸面或卡片 |
#F3F4F6 / #EEEEEE / #E5E5E5 |
#ECE3D6 或 #E5DACC |
冷灰线转暖线 |
#E5E7EB |
#ECE3D6；浅橙底上用 #E5DACC |
同上 |
#1F2937 |
#2B2521 |
冷黑转暖墨 |
#333333 |
#2B2521 |
同上 |
#6B7280 / #9CA3AF / #999999 / #7A7068 |
#6F655C |
各版"次要灰"统一 |
六、一句话检验
改完任何页面后，用这三条自检：
- 把页面截图去色（灰度化），层级还清楚吗？如果去掉颜色就散架，说明是在用颜色凑层级。
- 数一下页面上有几个色相。超过"暖橙 + 暖墨 + 至多一个状态色"，就有问题。
- 页面里最浅的那行字，是
--muted或更深吗？比它更浅的，都要拉回来。