13 KiB
陪诊小程序 配色规范
适用范围：ui/wxapp_escort/ 全部页面。本文只规定颜色；布局、间距、圆角、触控尺寸属界面规范，另行处理。
一、总原则
全站只有一个色相——暖橙，承载品牌、交互、强调。第二色不是新色相，而是暖墨文字层（暖偏棕的深灰），只用来拉开层级，不与暖橙争彩。浅橙三档（描边、浅底、深字）都是主色同色阶。状态色只在表达状态时出现，不做装饰。
判断一个颜色能否用：既不是暖橙同色阶、也不是暖墨、也不是明确状态色的，就不该出现。灰金 #D4A853、亮橙 #FF8500、青灰、翠绿均为违反项。
二、核心色板
令牌集中在 app.wxss 的 page{} 内，是全站唯一来源——改配色只改这一处。注入顺序 app.wxss 先、页面 wxss 后，同特异度页面胜出，某页确需例外时可在自己 page{} 覆盖同名变量。
四处硬编码走不了变量，改色须一并手改（逐文件见 §7.3）：t-icon 的 color、app.json 的 tabBar.selectedColor、首页 base64 线图标的 stroke、着色的位图（images/home-ink.png）。
迁移进度：home/index、escort/itemlist 两页副本已删；itemdetail、attendantlist、guide、mine/contact 四页仍各带副本（停在旧值 #C2410C），待重构时按同一方式删。
2.1 第一色：暖橙色阶
主色于 2026-10-04 由 #C2410C（H18°）折中右移到下表值（H25°）。沿革与回滚见 §七。
| 令牌 | 色值 | 用途 | 对比度 |
|---|---|---|---|
--brand-strong |
#B8520A |
主按钮、价格数字、选中态、实心强调块 | 纸面 4.66:1，白卡 4.94:1；白字压其上 4.94:1 |
--brand-ink |
#9B4508 |
标签文字、文字链、暖色小标题、图标 | 浅橙底 5.96:1，纸面 6.10:1，白卡 6.46:1 |
--brand-line |
#FFE0C2 |
浅橙块描边、浅橙档的状态描边 | 仅做描边 |
--brand-soft |
#FFF4E8 |
浅橙底：说明砖、图标衬底、按钮按下态 | 仅做底 |
用法边界：
--brand-strong是唯一可当"实心大色块"的值；全页同类实心块不超过一处。--brand-soft只能当底，不能当文字色或描边色。- 浅橙底上的文字一律走
--brand-ink（--brand-strong落其上仅 4.56:1，余量小）。 - 例外（已登记）：
escort/itemlist价格数字改走--muted+ 字重 500，让「预约」空心胶囊独占焦点；同页价格列只用这一个色值、一种字重。 - 例外（已登记）：
escort/itemlist「预约」按钮走空心胶囊——3rpx--brand-strong环 + 28rpx 满圆角 +--brand-ink字 30rpx/500，无填充无阴影，按下填--brand-line。同行规格签已是"浅橙底 + 6rpx 圆角"，按钮若同族会与之撞形；同一行只允许一个填充物，按钮独占"环"形态。该页因此无实心大色块。
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是最浅一档，不得再浅——它是全站文字对比度底线。历史值#7A7068（纸面 4.56:1，压线无余量）已废弃，硬编码需全部替换。t-icon的color读不到 CSS 变量，只能硬编码，且必须与令牌同步（当前为#9B4508、#6F655C、#B8520A三者之一）。
2.3 底与线
| 令牌 | 色值 | 用途 |
|---|---|---|
--white |
#FFFFFF |
卡片、面板 |
--paper |
#FAF8F5 |
页面底色（暖白纸面） |
--line |
#ECE3D6 |
发丝线：卡片内部分隔、区块切分 |
--sep |
#E5DACC |
分隔线：竖线、浅橙底上的线 |
用法边界：
- 线是切分工具，不表意，不上主色或状态色。浅橙底上必须用
--sep（--brand-line落--brand-soft上仅 1.16:1，肉眼看不出）。 --paper与--brand-soft明度差仅约 1.03:1，浅橙块落纸面须靠 2rpx--brand-line描边托形，不加阴影。- 白卡一律走中性阴影
--shadow-card: 0 2rpx 10rpx rgba(63, 43, 25, 0.07)，圆角 28rpx。彩色（暖橙）阴影不得用在--white面上；它只允许用于实心 CTA、品牌印记等小体量元素（--shadow-cta: 0 2rpx 8rpx rgba(184, 82, 10, 0.16)）。 - 例外（已登记）：
escort/itemlist三个服务分组做成通栏白底块——--white+ 上下各 2rpx--line+--shadow-card，圆角 0；做法margin: 36rpx -32rpx 0+padding: 28rpx 32rpx，行宽仍为 686rpx（若内缩，最长名称「VIP 5次 半天陪诊」会折行）。圆角必须为 0，否则满宽块的圆角会切在屏幕边上。页首.notice仍是内缩 28rpx 圆角白卡。 - 例外（已登记）：
escort/itemlist页脚做浅橙收口卡（--brand-soft+ 2rpx--brand-line+ 28rpx 圆角 + 去阴影），与首页.quick-item-full同源，补回该页"暖色只剩线、没有面"的那一档。 - 例外（已登记）：
mine/mine的菜单与「退出登录」做成通栏白底块（--white+ 上下各 2rpx--line+--shadow-card，圆角 0）。其中「退出登录」是动作而非导航，与菜单行不同族：单独一块、一行居中、无图标无 chevron、字色--muted。状态色不得用于按钮（§三），退出因此不走红/橙，区分只靠结构与位置。
三、状态色
状态色只用于订单、记录这类有明确状态字段处，同页同类状态只允许一种颜色。
| 状态 | 底色 | 描边 | 字色 | 对比度 |
|---|---|---|---|---|
| 待服务 | #ECF7F4 |
#C7E5DF |
#0F766E |
5.00:1 |
| 服务中 | #FFF4E8 |
#FFE0C2 |
#B8520A |
4.56:1 |
| 已完成 | #EAF6EE |
#CDE9D7 |
#1F7A4D |
4.79:1 |
| 已取消 | #FCF0EE |
#F2D6D1 |
#B4231A |
5.89:1 |
用法边界：
- 不得仅用颜色传达状态（WCAG 1.4.1）：状态胶囊必须带文字，颜色只做强化。
- 青绿（待服务）是全站唯一冷色，只给"等你去处理"这一个语义。
- 服务中复用主色浅档，字色跟随该页
--brand-strong（已迁移页#B8520A，未迁移页#C2410C）。 - 状态色不得用于区块标题、图标衬底、按钮、装饰条，只包住状态文字本身。
- 表单错误复用已取消档（
#B4231A字 +#FCF0EE底），错误必须带文字。 - 禁用态不用暖橙：
--muted字 +--sep描边 + 透明底。
四、硬约束（可验证）
- 所有文字对底色对比度 ≥ WCAG AA 4.5:1；中文最小字号不低于 24rpx（12px）。
- 图标对衬底对比度 ≥ WCAG 非文本 3:1。
- 不得新增色相；需区分时先改结构（分组、留白、换线），不要加颜色。
- 不得使用渐变色。
- 卡片、面板、说明砖的填充必须中性（
--white/--paper/--brand-soft）。 - 暖橙以外的暖色（灰金、亮橙）不得出现。
- 同页同一含义只能对应一个色值。
- 不得仅用颜色传达信息（WCAG 1.4.1）。
五、历史遗留收口清单
以下为当前与规范冲突的位置，本文档阶段不执行，仅登记供后续代码阶段按表替换。
5.1 页面级
| 范围 | 现状 | 替换为 |
|---|---|---|
mine/about.wxss |
#D4A853、#FF8500、#22A45D |
--brand-strong / --brand-ink |
mine/addressedit.wxml（switch 属性） |
旧金色 | #B8520A（属性值需硬编码） |
health/profilelist.js（confirmColor） |
旧金色 | #B8520A |
health/profilelist.wxss、profileedit.wxss |
#D4A853 系 |
暖橙令牌 |
escort/agreement.wxss |
底 #FAF6F1、#D4A853 系 |
--paper / --brand-soft / 暖橙令牌 |
hospital/contact.wxss、hospital/ranking.wxss |
底 #F5F7F6、字 #1F2937、绿灰系 |
整体并入暖橙体系 |
已完成（2026-10-04）：mine/mine.wxss、pages/ai/aichat.wxss 已按本节并入暖橙体系。
已完成（2026-10-04）：escort/recordlist、escort/recorddetail 已按本节并入暖橙体系——两页删去旧金色副本与全部渐变，状态一律走 §三 四档；recorddetail 另在 page{ } 登记 --shadow-bar（底栏上向阴影，不在全局色板内）。两页 json 原本 usingComponents 为空却已用 t-icon/t-loading，一并补注册。
5.2 系统级（不在页面里，最易漏）
| 位置 | 现状 | 应改为 |
|---|---|---|
app.json tabBar 选中图标 |
home-green.png / ai-green.png / mine-green.png（绿色图片） |
暖橙 #B8520A 版本，与 selectedColor 一致 |
app.json tabBar color |
#999999 |
--muted 等价色 #6F655C |
app.wxss 全局变量 |
--td-brand-color-1..10 整套翠绿（基准 #22A45D）、--c-ink #1c1917 |
已确认业务页面零引用，是死代码，可整体重写或删除 |
custom-tab-bar/index.wxss、index.js |
未选中色硬编码 #7A7068 |
#6F655C |
5.3 通用色值映射表
| 旧值 | 新值 | 说明 |
|---|---|---|
#D4A853 |
#9B4508 或 #B8520A |
灰金转暖橙，按"文字/图标"或"实心"分 |
#FF8500 |
#B8520A |
亮橙转主色 |
#FF9B33 / #FF7A33 |
#B8520A + #FFF4E8 |
去渐变，拆成字色与底色 |
#22A45D / #6B8E7B / #2D6A4F / #4CAF50 / #45A049 |
#B8520A；语义为"已完成"则 #1F7A4D |
绿系转暖橙，仅状态语义保留绿 |
#FAF6F1 / #F5F7F6 / #F5F5F5 |
#FAF8F5 或 #FFFFFF |
旧底转纸面或卡片 |
#F3F4F6 / #EEEEEE / #E5E5E5 / #E5E7EB |
#ECE3D6（浅橙底上用 #E5DACC） |
冷灰线转暖线 |
#1F2937 / #333333 |
#2B2521 |
冷黑转暖墨 |
#6B7280 / #9CA3AF / #999999 / #7A7068 |
#6F655C |
各版"次要灰"统一 |
六、一句话检验
- 页面去色（灰度化）后层级还清楚吗？去掉颜色就散架 = 在用颜色凑层级。
- 数一下色相：超过"暖橙 + 暖墨 + 至多一个状态色"就有问题。
- 最浅的那行字是
--muted或更深吗？比它更浅的要拉回来。
七、主题色沿革与回滚
主色做过一次色相右移。照 §7.3 倒着改即可整体回滚。
7.1 三套值
| 版本 | --brand-strong |
HSL | --brand-ink |
HSL | 状态 |
|---|---|---|---|---|---|
| 现行 | #B8520A |
H25° · S90% · L38% | #9B4508 |
H25° · S90% · L32% | 首页、escort/itemlist、自定义 tabBar 已落地 |
| 之前 | #C2410C |
H18° · S88% · L40% | #9A3412 |
H15° · S79% · L34% | 其余页面仍是此值 |
| 已否候选 | #A85A00 |
H32° · S100% · L33% | — | — | 为凑白字 AA 把明度压到 33% 致画面发闷，仅登记 |
--brand-soft #FFF4E8、--brand-line #FFE0C2 全程未动，回滚无需处理。
7.2 为什么离开旧值
旧值 #C2410C（H18° 偏红、饱和偏高）大面积铺开会读成"锈橙 ≈ 干血"，与就医语境不合。折中右移到 H25°，明度只让 40%→38%、饱和 88%→90%，保住"眼前一亮"的抓力。若日后仍嫌血色，正解是收缩橙色面积，不是继续调暗。
7.3 回滚清单
回滚或再改主色只需改第 1 行（app.wxss）；其余 10 处是 CSS 变量读不到的地方（t-icon color、base64 stroke、位图、app.json、自绘阴影），须一并手改。--brand-soft / --brand-line 未变，不在表内。
| # | 文件 | 位置 | 现行 | 回滚为 |
|---|---|---|---|---|
| 1 | app.wxss |
page{} 内 --brand-strong / --brand-ink（全站唯一来源） |
#B8520A / #9B4508 |
#C2410C / #9A3412 |
| 2 | app.wxss |
page{} 内 --shadow-cta |
rgba(184, 82, 10, 0.16) |
rgba(194, 65, 12, 0.16) |
| 3 | pages/home/index.wxss |
.brand-mark 的 box-shadow |
rgba(184, 82, 10, 0.16) |
rgba(194, 65, 12, 0.16) |
| 4 | pages/home/index.wxss |
8 个 base64 线图标的 stroke |
#B8520A |
#C2410C |
| 5 | pages/home/index.wxml |
第 119 行 t-icon 的 color |
#9B4508 |
#9A3412 |
| 6 | pages/escort/itemlist.wxml |
第 25 / 30 / 96 行 t-icon 的 color |
#9B4508 |
#9A3412 |
| 7 | custom-tab-bar/index.js |
第 8 行 activeColor |
#B8520A |
#C2410C |
| 8 | custom-tab-bar/index.wxss |
第 39 行 .tab-item.is-active .tab-text |
#B8520A |
#C2410C |
| 9 | app.json |
第 30 行 tabBar.selectedColor |
#B8520A |
#C2410C |
| 10 | images/ai-ink.png |
整图纯色（AI客服选中态位图） | #9B4508 |
#8A4B08（位图需重上色，不能按文本替换） |
| 11 | images/home-ink.png |
整图纯色（「我的」默认头像位图，由灰色 home.png 重上色） |
#9B4508 |
#8A4B08（同上） |
无需回滚：其余页面从未迁移。仍定义旧值 #C2410C / #9A3412 的是 itemdetail、attendantlist、guide、mine/contact 四页八文件（各含 .wxss 令牌与 .wxml 里 t-icon 硬编码），本就是回滚后的目标态；agreement、recordlist、recorddetail、mine/* 等页走更早的金色体系（#D4A853），见 §5.1。
注：custom-tab-bar 未选中灰硬编码 #7A7068 是独立历史遗留项（应改 #6F655C，见 §5.2），与本次主色调整无关。