色彩系统
以暖灰为基底、单一强调色（品牌青蓝 #2A7F8B）引导注意力。调色板收敛为四套：品牌色 / 中性色 / 功能色 / 辅助色；中性色阶与 B 端 ink 体系完全一致。辅助色仅服务数据展示，多系列图表色与分类色统一在「图表」页维护，不在本页重复收录。
02 · COLOR · 调色板
Brand · 品牌色
Neutral · 中性色阶（与 B 端 ink 统一）
Functional · 功能色
Auxiliary · 辅助色（数据展示）
辅助色只用于数据展示（KPI 数值、状态徽章、单系列图表）。多系列图表色与分类色归「图表」页维护，此处不重复收录。
In Context · 移动端实际应用
空腹血糖
6.4mmol/L
▲ 0.6高于参考 3.9–6.1
早餐午餐晚餐加餐
达标
需关注
超标
观察中
✓本周空腹血糖均值较上周下降 0.3 mmol/L，建议保持当前饮食结构。
HbA1c 5.8%
记录今日血糖
查看 7 日趋势
主色仅用于 CTA 与选中态；辅助数据色仅用于数值与徽章
语义色彩映射
默认 Light 主题下的角色映射。实现时必须引用这些角色，而不是直接写颜色值。
| 用途 | 色值 | 说明 |
|---|---|---|
| 页面背景 | #FAFAFA | 暖灰底色，主屏背景 |
| 次级背景 | #F4F4F5 | 列表底色、分区 |
| 卡片 / 容器 | #FFFFFF | 通过阴影区分层级 |
| 暖色面 | #F3E9D4 | 品牌相关区域 |
| 主文字 | #18181B | 标题、正文 |
| 次要文字 | #52525B | 描述、时间戳 |
| 占位 / 禁用 | #A1A1AA | 输入提示 |
| 分割线 | #E4E4E7 | 列表分隔 |
| 强调 / CTA | #2A7F8B | 按钮、链接、进度 |
| 按压态 | #1D6770 | 按钮按下 |
| 选中背景 | rgba(42,127,139,.08) | Tab 选中、列表高亮 |
使用规则
- 60-30-10 法则：60% 暖灰背景 + 30% 白色面与深色文字 + 10% 蓝色强调。
- 对比度：主文字与背景 ≥ 7:1（AAA）；次要文字 ≥ 4.5:1（AA）。
- 状态色不做大面积背景填充，仅用于小标签、图标、进度条。
- 渐变仅用于品牌元素（启动页、高级功能入口），不用于普通按钮与图表。
- 色彩职能分离：品牌色负责 CTA / 装饰条 / 选中态；辅助数据色仅负责 KPI 数值、状态徽章。二者不在同一组件内同时强调。
- 深浅成对：辅助数据色作为背景时使用 alpha 0.08–0.14，实色只用于文字与图标。
- 趋势色语义优先：「上升 = 绿」仅在「数值越大越好」的指标上成立；血压、血糖等超标即坏，上升必须配红。