KEHU 界面配色规范

00标识

由官方 AI 源文件矢量提取，无位图、不依赖字体。填充统一为 currentColor——放紫底给白色，放白底给主紫，一份文件覆盖两种场景。

标准锁定客湖 + KEHU，浅色底用主紫

反白紫底与深色照片上用纯白

中文短版横向空间紧张时用，如移动端页头

图标favicon、App 图标、头像位

不要改造标识。不拉伸变形、不换成非品牌色、不加描边或阴影、不重排中英文的相对位置。需要单色场景就改父元素的 color，其余一律用原图。

<span class="k-logo">{% include '_logo.html' %}</span>

/* 颜色由父元素决定，标识自己不写死 */
.topbar .k-logo { color: #fff; }

01品牌色

六个品牌色。主紫是唯一主色，其余五个只做点缀与语义区分，同一屏最多同时出现三种。右侧两列是该色作为文字时，在白底与深底上的实测对比度。

主紫

#61007D

--k-purple

白底 11.64 深底 1.57

浅紫

#904CA3

--k-purple-2

白底 5.60 深底 3.26

强调橙

#F19319

--k-orange

白底 2.35 深底 7.75

青

#41B8B1

--k-teal

白底 2.41 深底 7.57

蓝

#219CDC

--k-blue

白底 3.06 深底 5.95

品红

#DA2F68

--k-magenta

白底 4.58 深底 3.98

≥ 4.5，正文可用 3.0–4.5，仅大字与图形 < 3.0，不可承载文字

橙、青、蓝在白底上都不能直接当文字色。 橙只有 2.35:1，青 2.41:1，蓝 3.06:1，都低于 WCAG AA 正文要求的 4.5:1。在浅色界面里，这三个色只用于填充块、图表线条和图标；需要写字时换成下面的压暗版。

浅色界面的文字安全色

橙 · 文字

#AB650A

--k-warning

白底 4.57

蓝 · 文字

#1A7DB1

--k-info

白底 4.55

青 · 文字

#21716C

--k-success 文字

白底 5.76

品红 · 文字

#A81B4A

--k-danger 文字

白底 7.19

紫色梯度

100

200

默认

主色

hover

active

02语义映射

语义色不是随便挑的，每个状态固定绑一个品牌色。同一个状态在任何页面都必须是同一个颜色，用户才不用重新学。

状态	色相	填充	文字	用在哪
成功	青	`#E4F5F4`	`#21716C`	人工确认、提交成功、校验通过
警告	橙	`#FDF2E2`	`#AB650A`	待审核、可能填错、需要注意
错误	品红	`#FBE7EE`	`#A81B4A`	存疑、删除、必填标记、校验失败
信息	蓝	`#E3F1FA`	`#1A7DB1`	规则说明、AI 相关
强调	主紫	`#F4EDF7`	`#61007D`	已修改、当前选中、关键数字
中性	—	`#F0EEF3`	`#5F5A66`	已驳回、停用、无状态

03中性色

灰阶带一点紫调，和品牌色同源，不用纯灰——纯灰配紫会显脏。

页面底色

#F7F6F9

--k-bg

卡片

#FFFFFF

--k-surface

分隔线

#E8E4EE

--k-line

正文

#1D1B20

--k-text

白底 17.07

次要文字

#5F5A66

--k-text-2

白底 6.69

辅助文字

#928C9B

--k-text-3

白底 3.36

辅助文字 #928C9B 只有 3.36:1，仅用于时间戳、脚注这类丢了也不影响理解的内容。任何用户需要读懂才能操作的文字，一律用 --k-text 或 --k-text-2。

04字阶

Web 端字号，与 PPT 的 1920×1080 字阶是两套，不要混用。

26 / 700页面主标题

19 / 600区块标题

15 / 600卡片标题

15 / 400正文，行高 1.6

16 / 400 · 输入输入框文字

13.5 / 400次要说明

12 / 400脚注、时间戳

27 / 700 · 数字1,284

输入框字号不得小于 16px。iOS Safari 遇到小于 16px 的输入框，会在聚焦时自动放大整页，用户填一个字段就要手动缩回去一次，手机端体验会直接崩掉。

所有数字启用等宽数字 font-variant-numeric: tabular-nums。价格和样本数在表格里纵向对齐，滚动时才不会左右跳。

05组件

下面都是真实渲染的元素，切换系统深浅色可以直接看到两套主题的表现。

按钮

一屏只能有一个实心主按钮。出现第二个，用户就得停下来想该点哪个。

状态徽标

待审核 AI 已验证存疑人工确认已驳回已修改

提示条

信息：说明规则或补充上下文。

成功：操作已完成。

警告：可能有问题，但不阻断操作。

错误：操作失败，并说清楚怎么改。

表单

门店名称 *

校验未通过

1000ml 不该比 700ml 便宜，请核对

06图标

统一 24 网格、1.8px 线宽、圆头端点、无填充。界面里不使用 emoji。

混用线宽是最常见的破功点。线宽统一由 .k-icon 控制， <symbol> 内部一律不写 stroke-width，否则从不同图标库拼来的图标会粗细不一，整套视觉立刻散架。

<!-- 尺寸档位：16 / 20（默认）/ 24 / 32 -->
<svg class="k-icon"><use href="#i-camera"></use></svg>

07移动端硬规则

门店填写页九成以上是手机打开，安卓、iOS、鸿蒙都要照顾。以下不是建议，是硬性要求。

项目	要求与原因
点击热区	不小于 44×44px，遵循 Apple HIG。用变量 `--k-tap`。
输入框字号	不小于 16px，否则 iOS 聚焦时自动放大整页。
页面缩放	不写 `user-scalable=no`。禁止缩放会挡住视力不好的用户，而且新版 iOS 本来就忽略它。
安全区	底部固定栏用 `env(safe-area-inset-bottom)` 留白，配合 `viewport-fit=cover`，否则会被 iPhone 底部横条压住。
拍照入口	「拍照」与「从相册选」拆成两个 input：`capture` 和 `multiple` 写在同一个上会互相冲突。
图片方向	用 `createImageBitmap(file, {imageOrientation:'from-image'})` 解码。不处理 EXIF，安卓和鸿蒙竖着拍的照片会躺倒。
图片压缩	上限 500KB。先降画质再降分辨率——进货单看的是字能不能认出来，分辨率比画质更值钱。
透明底	PNG 转 JPEG 前先铺白底，否则透明区域会变成黑块。
已够小的图	本身小于上限的 JPEG 直接透传，不重新编码——重编码只会白白掉画质。

08文案

写给正在干活的人看，不写给评审看。

这样写

「已提交」「本周数据已收到」
「请至少上传 1 张进货单或聊天截图」
「1000ml 不该比 700ml 便宜，请核对」
动词开头，直接说要做什么
报错说清楚哪里错、怎么改

不要写

「感谢您的支持与配合！」这类客套
用 emoji 和感叹号堆情绪
「系统已为您智能校验」自夸式描述
「操作失败，请重试」不说原因
「赋能」「闭环」「抓手」等黑话

09接入

新页面照抄这两段。所有色值都从变量取，换品牌色时只改 kehu.css 一个文件。

<link rel="stylesheet" href="/static/css/kehu.css">

<!-- 图标库与字标，两个都要 include -->
{% include '_icons.html' %}
<span class="k-logo">{% include '_logo.html' %}</span>

/* 只用变量，不写死颜色 */
.my-panel {
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-md);
  color: var(--k-text);
}
.my-panel .price { color: var(--k-purple); }

页面里出现任何硬编码 hex 都算违规，包括旧版遗留的 #5b4b8a、#8a7bc8。提交前搜一遍 # 开头的六位色值，应该一个都搜不到。