# 小程序全站配色方案

设计分支：`codex/celestial-color-refresh`，从已推送的 `7871114` 创建。

当前阶段为配色方案对比，尚未替换业务页面的生产样式。三套方案沿用相同内容和主要页面结构，便于判断配色本身；方案确定后统一落地全部页面及弹窗。

## 现状

首页大面积高饱和紫色背景、紫粉摘要卡和蓝色指数球同时争夺注意力。天宫素材以青绿山水、祥云米白、朱红神袍和金色配饰为主；个人中心偏淡紫，关注页又偏米金。各页面缺少一致的背景、按钮、正文与导航色。

## 第二版 三套更鲜明的方向

第一版被反馈为不够鲜艳、单调。第二版增加互补色、局部明亮渐变和材质层次，保留浅色阅读区域，避免只给所有组件套同一种颜色。

| 方案 | 主色 | 对比色 | 鎏金色 | 页面底色 | 特点 |
| --- | --- | --- | --- | --- | --- |
| 丹霞瑞彩（推荐） | `#C93C48` | `#168B86` | `#F3B642` | `#FFF7ED` | 神袍朱红、碧玉青绿与祥云金橙呼应，活泼、温暖，有传统瑞彩感。 |
| 青碧流金 | `#087E87` | `#377DB5` | `#F1BB46` | `#F2FAF5` | 孔雀青、湖蓝与明金互相映衬，清亮而有层次，接近祥云山水的色彩关系。 |
| 紫金星阙 | `#7841C6` | `#B33178` | `#F1C359` | `#FBF5FF` | 深紫天幕、桃粉霞光与暖金日晕；顶部明暗对比更强，向下渐入浅色阅读区，仙境仪式感最突出。 |

## 首页调整原则

- 顶部通过相邻色的亮色渐变与柔光建立氛围，中下部回到浅色，保证正文阅读。
- 摘要卡增加明暗渐变、日晕线条与小标题；指数球使用暖金色及高光，和神像金饰呼应，形成明确视觉中心。
- 吉色、吉数、吉向、吉时使用主色浅底、暖金浅底和对比色浅底区分，配色从一套色板派生。
- 情感和财富卡分别使用柔和霞色、浅金色底纹，图标和宜忌状态继续保持含义清晰。
- 个人中心、表单和底部导航复用相同主色、对比色与金色，防止只有首页改色后又产生新的割裂。
- 吉色属于用户数据，色块继续反映实际计算值，不能被主题色覆盖；五行、宜忌状态同样保留区分。

## 全站应用范围

| 页面或组件 | 统一规则 |
| --- | --- |
| 首页及维度排序 | 浅色背景、主色摘要与选中状态、统一卡片及辅助文字。 |
| 天宫列表 | 使用共同页面底色和导航色；神仙原图保留色彩，未绑定状态沿用淡化逻辑。 |
| 请神及敬神详情 | 保留祥云山水和神像原图；名称栏、介绍、按钮、供奉操作栏统一颜色。 |
| 我的及神仙卡片 | 页面背景与首页同源；昵称和菜单正文使用统一深色，金色卡片保留仪式感。 |
| 我的元素及生肖弹窗 | 浅底卡片、统一正文和按钮；保留五行的木绿、火暖红、土棕、金黄、水蓝。 |
| 编辑个人信息及完善注册资料 | 表单统一纸面颜色，选中态和保存按钮使用主色。 |
| 登录、注册及登录门禁 | 使用同一套背景、输入、主按钮、错误和辅助文字颜色。 |
| 用户协议及隐私政策 | 浅色阅读背景、深色正文，章节标题与选中标签统一。 |
| 关注我们 | 使用同源背景和纸面卡片；二维码、平台标识保持原样。 |
| 内部联系页及通用弹窗 | 统一背景、输入和按钮。微信官方客服会话属于微信界面，不修改其配色。 |
| 底部导航、返回按钮、绑定门禁 | 统一选中态、非选中态、描边和遮罩，保留已有安全区布局。 |

## 实现与验收

确定方案后提取背景、纸面、正文、次级文字、主色、强调、描边、阴影及语义色等共用变量。逐页替换硬编码颜色，避免通过滤镜或透明覆盖把神仙素材变色，也不改业务判断、接口和布局结构。

对比预览复用了本仓库的神仙、祥云、头像、生肖和首页图标。首页样例数据来自现有算法，以 `1998-06-18 辰时`、`2026-10-21` 生成；个人中心守护天数为演示值。预览用于选色，不连接后端、不修改用户资料。全站应用后需要继续检查正文对比度、长文阅读、未绑定状态、弹窗与小屏安全区。