色彩体系

Color System

一、主色 - 赤色(源自五行)

赤色属火,对应心脏、南方、夏季。象征热烈、专业、温暖,体现中医"望闻问切"的热情与专注。

主色
品牌主色
#B84C3C
用于:品牌标识、主要按钮、强调文字
浅色
主色浅
#D4695A
用于:悬停状态、浅色背景、图标填充
深色
主色深
#8B3A2E
用于:按下状态、强调背景、文字阴影

二、辅助色 - 黄色(源自五行)

黄色属土,对应脾脏、中央、长夏。象征尊贵、温暖、亲和,传递中医药的深厚底蕴与关怀。

辅助色
品牌辅助色
#C4A35A
用于:辅助按钮、次要强调、装饰元素
浅色
辅助色浅
#D4B86A
用于:次要背景、高亮区域
深色
辅助色深
#A4833A
用于:深色装饰、边框强调

三、功能色

成功
成功/健康
#4A7C59
用于:成功状态、健康提示、确认操作
提醒
警告/提醒
#D4A54A
用于:待处理事项、温馨提示、活动提示
错误
错误/警示
#C44C3C
用于:错误提示、删除操作、异常状态
信息
信息
#4A6C89
用于:信息提示、链接、帮助入口

四、中性色 - 温暖米色调

采用温暖米色调,替代传统冷灰色调,营造温馨、舒适的视觉氛围,符合中医养生的平和理念。

米白
主背景色
#FDFBF7
用于:页面主背景、卡片背景
浅米
次背景色
#F5F0E6
用于:区块背景、分隔区域
中米
深背景色
#EBE5D6
用于:底部导航、次要区块
深棕
主要文字
#2C2416
用于:标题、重要文字
中棕
次要文字
#5C5146
用于:正文、描述文字
浅棕
辅助文字
#8C8076
用于:提示文字、占位符
边框
边框色
#D9D0C2
用于:分隔线、边框
纯白
纯白
#FFFFFF
用于:卡片背景、输入框

五、五行对应色

源于《黄帝内经》五行五色理论,在特定中医场景下使用。

青色 - 木
#6B8E5A
对应肝脏、春季,养肝护肝相关场景
赤色 - 火
#B84C3C
对应心脏、夏季,养心护心相关场景
黄色 - 土
#C4A35A
对应脾脏、长夏,健脾养胃相关场景
白色 - 金
#E8E4DC
对应肺脏、秋季,润肺清肺相关场景
黑色 - 水
#3C4A5A
对应肾脏、冬季,补肾强肾相关场景

六、适老化色彩设计原则

高对比度原则 (WCAG 4.5:1+)

文字与背景对比度不低于 4.5:1,重要信息对比度达到 7:1。确保中老年用户能够清晰辨识内容。

避免蓝绿混用 (色弱友好)

老年人对蓝绿色域识别能力较弱,避免将蓝色和绿色同时作为区分信息的主要手段。采用 红/黄/棕 暖色调体系更适宜。

色彩数量控制

页面主要色彩不超过 3种,避免色彩过于丰富造成视觉干扰。功能色使用需保持一致性。

柔和不刺眼

避免使用纯度过高的颜色,所有颜色经过柔和处理。背景色采用暖色调,减轻长时间浏览的眼部疲劳。