色彩 · 语义状态色(沿用 R1 §2 已确认语义,色值为 claude-design-proposed)
运行 / 成功 / 通讯正常--c-run · #1E8A3C运行绿。通讯正常闪烁的基色
报警 / 错误 / 通讯异常--c-alarm · #C23934报警红;强调 --c-alarm-strong #A02C28
警告 / 过期 stale--c-warn · #9A6A00数据过期、部分失败、超时
补料 · 黄--c-ry · #8A6D00补料状态之一(黄/蓝语义映射待业务确认)
补料 · 蓝--c-rb · #2467B8补料状态之一(同上,成对使用)
选中 / 主操作--c-sel · #1D5FBF选中称蓝底白字;主按钮、链接、焦点
离线 / 停用--c-off · #5F6B78离线灰。必须叠加斜线图标,不得只靠灰色
页面底 / 卡片--bg-app · #E9EDF1浅灰底 + 白卡片 #FFFFFF;凹陷区 #F1F4F7
每个语义色配套 -bg / -line 浅色对(如 --c-run-bg #E4F3E9),用于徽标与提示条。正文用色 --ink #17202B(对比度 ≥ 12:1),次级 --ink-2,说明 --ink-3,禁用 --ink-dis。
状态冗余规则(验收门禁:状态不得仅用颜色表达)
运行 = 绿 + 实心三角 + 文本
停止 = 灰 + 实心方块 + 文本
报警 = 红 + 三角叹号 + 文本
离线 = 灰 + 圆圈斜线 + 文本
补料 = 黄/蓝 + 料筒图形 + 文本
过期 = 琥珀 + 时钟 + 相对时间
启动=实心填充按钮+▲形;停止=描边按钮+■形——灰阶与色弱情境下仍可区分(用右上角"灰阶自检"验证)。闪烁/动效只作附加信号。
字体与字号
系统内置栈(离线 file:// 可用,无 CDN):"Segoe UI","Microsoft YaHei","PingFang SC","Noto Sans SC",system-ui;数值一律 tabular-nums。
150.000--fs-44 · 指标主值
300.00 kg/h--fs-28 · 次级指标
页面标题 · 主页总览--fs-24
分区标题 · 生产线概览--fs-20
正文 16px · 触屏 HMI 最小正文字号--fs-16
辅助 14px · 表单帮助与单位--fs-14
元信息 12px · 时间戳/来源标注(仅非关键信息)--fs-12
间距 · 圆角 · 阴影
4pt 基准(--sp-1…--sp-12)。圆角 --r-sm 6 / --r-md 10 / --r-lg 14 / --r-full。卡片阴影一层极浅(--shadow-card),弹层 --shadow-pop。
触控命中区(触摸为首要输入)
相邻危险动作间距 ≥ --hit-gap 12px
规则:任何可点目标有效命中区 ≥ 48×48(--hit-min),视觉尺寸可小于命中区;启动/停止等危险相邻动作额外保持 --hit-gap。1920×1080 为首选回归 viewport,布局自适应、不写死像素(OD-06 开放)。