第 3 章 · Chapter 3

色彩Colour

只有两种品牌色：Navy 与 Leaf。其余色族全部是中性色或功能色，服从品牌色。

3.1原则与面积比例Principles & proportion

只有两种“品牌色”：Navy 与 Leaf。其余全部是中性色或功能/辅助色，服从品牌色。
每个色相都与标志相关：Navy 族（色相 244）、Leaf 族（132）、Navy 的互补暖色（Sand 中性 70、Harvest 75、Soil 60）、Leaf 的互补（Crimson 25，只做错误/危险）、Sky（244 低饱和，图表与信息）。没有自由漂浮的颜色。
Leaf 只标记“有生命/有进展/可操作”的东西：主按钮、成功、作物、当前状态；不做大面积底色。
全部色阶由 OKLCH 推导（明度阶梯 0.975→0.26，饱和度钟形），锚点保持标志原值。源数据 brand/.scales.generated.json。

面积比例 60 / 20 / 10 / 10

Sand / 白 · 60%

Navy · 20%

Leaf 10%

Sand/白底 60%，Navy 20%，Leaf 10%，其余辅助（Harvest、Sky、Soil、Crimson）合计 10%。

3.2色阶Scales

七个色族，每族 11 阶。HEX / RGB 用于屏幕，CMYK 用于印刷；Pantone 为最接近色，印刷前打样。白 #FFFFFF、黑 #000000 仅用于单色标志与打印。

锚点行以 ● 标出。色块通过 --cx-color-* 变量渲染，与 tokens 一致。

Navy 品牌深色

锚点 Navy-900（Pantone 302 C），值来自标志源文件，不可更改。

名称	CSS token	HEX	RGB	CMYK	Pantone
navy-50	--cx-color-navy-50	#F2F7FC	242 247 252	4 2 0 1
navy-100	--cx-color-navy-100	#E4EEF7	228 238 247	8 4 0 3
navy-200	--cx-color-navy-200	#CEDFEE	206 223 238	13 6 0 7
navy-300	--cx-color-navy-300	#B0CBE2	176 203 226	22 10 0 11
navy-400	--cx-color-navy-400	#8DB5D6	141 181 214	34 15 0 16
navy-500	--cx-color-navy-500	#669DC9	102 157 201	49 22 0 21
navy-600	--cx-color-navy-600	#3F86BD	63 134 189	67 29 0 26
navy-700	--cx-color-navy-700	#0B6EAB	11 110 171	94 36 0 33
navy-800	--cx-color-navy-800	#005688	0 86 136	100 37 0 47
navy-900	--cx-color-navy-900	#003459	0 52 89	100 42 0 65	Pantone 302 C
navy-950	--cx-color-navy-950	#002641	0 38 65	100 42 0 75

Leaf 品牌绿

锚点 Leaf-600（Pantone 369 C），值来自标志源文件，不可更改。

名称	CSS token	HEX	RGB	CMYK	Pantone
leaf-50	--cx-color-leaf-50	#F2FAEC	242 250 236	3 0 6 2
leaf-100	--cx-color-leaf-100	#E3F3D8	227 243 216	7 0 11 5
leaf-200	--cx-color-leaf-200	#CBE7B7	203 231 183	12 0 21 9
leaf-300	--cx-color-leaf-300	#ADD68C	173 214 140	19 0 35 16
leaf-400	--cx-color-leaf-400	#8CC35A	140 195 90	28 0 54 24
leaf-500	--cx-color-leaf-500	#6BAC1B	107 172 27	38 0 84 33
leaf-600	--cx-color-leaf-600	#55A400	85 164 0	48 0 100 36	Pantone 369 C
leaf-700	--cx-color-leaf-700	#487900	72 121 0	40 0 100 53
leaf-800	--cx-color-leaf-800	#375E01	55 94 1	41 0 99 63
leaf-900	--cx-color-leaf-900	#264400	38 68 0	44 0 100 73
leaf-950	--cx-color-leaf-950	#172B01	23 43 1	47 0 98 83

Sand 暖中性：纸与墨（50 = Paper，950 = Ink）

名称	CSS token	HEX	RGB	CMYK
sand-50	--cx-color-sand-50	#FDF5ED	253 245 237	0 3 6 1
sand-100	--cx-color-sand-100	#F3EBE3	243 235 227	0 3 7 5
sand-200	--cx-color-sand-200	#E3DBD3	227 219 211	0 4 7 11
sand-300	--cx-color-sand-300	#CDC6BE	205 198 190	0 3 7 20
sand-400	--cx-color-sand-400	#B5AEA6	181 174 166	0 4 8 29
sand-500	--cx-color-sand-500	#9D958E	157 149 142	0 5 10 38
sand-600	--cx-color-sand-600	#867F77	134 127 119	0 5 11 47
sand-700	--cx-color-sand-700	#6E6860	110 104 96	0 5 13 57
sand-800	--cx-color-sand-800	#565049	86 80 73	0 7 15 66
sand-900	--cx-color-sand-900	#3F3933	63 57 51	0 10 19 75
sand-950	--cx-color-sand-950	#28231D	40 35 29	0 13 27 84

Harvest 琥珀：警告、成熟、收获

名称	CSS token	HEX	RGB	CMYK
harvest-50	--cx-color-harvest-50	#FEF5EA	254 245 234	0 4 8 0
harvest-100	--cx-color-harvest-100	#FDEACF	253 234 207	0 8 18 1
harvest-200	--cx-color-harvest-200	#F8D7A9	248 215 169	0 13 32 3
harvest-300	--cx-color-harvest-300	#EFBE79	239 190 121	0 21 49 6
harvest-400	--cx-color-harvest-400	#DFA345	223 163 69	0 27 69 13
harvest-500	--cx-color-harvest-500	#C8880C	200 136 12	0 32 94 22
harvest-600	--cx-color-harvest-600	#AB7304	171 115 4	0 33 98 33
harvest-700	--cx-color-harvest-700	#8B5F13	139 95 19	0 32 86 45
harvest-800	--cx-color-harvest-800	#684B21	104 75 33	0 28 68 59
harvest-900	--cx-color-harvest-900	#473822	71 56 34	0 21 52 72
harvest-950	--cx-color-harvest-950	#2A2319	42 35 25	0 17 40 84

Soil 土棕：基质、硬件、次级强调

名称	CSS token	HEX	RGB	CMYK
soil-50	--cx-color-soil-50	#FCF5F1	252 245 241	0 3 4 1
soil-100	--cx-color-soil-100	#F6EAE1	246 234 225	0 5 9 4
soil-200	--cx-color-soil-200	#EDD8C8	237 216 200	0 9 16 7
soil-300	--cx-color-soil-300	#E0C1A8	224 193 168	0 14 25 12
soil-400	--cx-color-soil-400	#CFA685	207 166 133	0 20 36 19
soil-500	--cx-color-soil-500	#BB8B64	187 139 100	0 26 47 27
soil-600	--cx-color-soil-600	#A6744A	166 116 74	0 30 55 35
soil-700	--cx-color-soil-700	#8B5D37	139 93 55	0 33 60 45
soil-800	--cx-color-soil-800	#6C482A	108 72 42	0 33 61 58
soil-900	--cx-color-soil-900	#4D3420	77 52 32	0 32 58 70
soil-950	--cx-color-soil-950	#2F2014	47 32 20	0 32 57 82

Sky 低饱和蓝：信息、图表第二序列、环境数据

名称	CSS token	HEX	RGB	CMYK
sky-50	--cx-color-sky-50	#F0F8FE	240 248 254	6 2 0 0
sky-100	--cx-color-sky-100	#DEEFFE	222 239 254	13 6 0 0
sky-200	--cx-color-sky-200	#BFE1FE	191 225 254	25 11 0 0
sky-300	--cx-color-sky-300	#A1CDF2	161 205 242	33 15 0 5
sky-400	--cx-color-sky-400	#87B5DC	135 181 220	39 18 0 14
sky-500	--cx-color-sky-500	#719CBF	113 156 191	41 18 0 25
sky-600	--cx-color-sky-600	#6285A1	98 133 161	39 17 0 37
sky-700	--cx-color-sky-700	#546C80	84 108 128	34 16 0 50
sky-800	--cx-color-sky-800	#445360	68 83 96	29 14 0 62
sky-900	--cx-color-sky-900	#343C42	52 60 66	21 9 0 74
sky-950	--cx-color-sky-950	#212528	33 37 40	18 7 0 84

Crimson 错误/危险，只此一用

名称	CSS token	HEX	RGB	CMYK
crimson-50	--cx-color-crimson-50	#FDF4F3	253 244 243	0 4 4 1
crimson-100	--cx-color-crimson-100	#FCE7E5	252 231 229	0 8 9 1
crimson-200	--cx-color-crimson-200	#FAD1CD	250 209 205	0 16 18 2
crimson-300	--cx-color-crimson-300	#F7B4AD	247 180 173	0 27 30 3
crimson-400	--cx-color-crimson-400	#F1918A	241 145 138	0 40 43 5
crimson-500	--cx-color-crimson-500	#E36E67	227 110 103	0 52 55 11
crimson-600	--cx-color-crimson-600	#CE514D	206 81 77	0 61 63 19
crimson-700	--cx-color-crimson-700	#AE3D3B	174 61 59	0 65 66 32
crimson-800	--cx-color-crimson-800	#86312E	134 49 46	0 63 66 47
crimson-900	--cx-color-crimson-900	#5D2725	93 39 37	0 58 60 64
crimson-950	--cx-color-crimson-950	#381A18	56 26 24	0 54 57 78

3.3语义角色Semantic roles

界面只引用语义 token，不直接引用色阶。“当前”一列用语义变量本身渲染，切换右上角主题即可看到亮/暗两套值。

角色 token	亮色	暗色	用途
--cx-color-bg	sand-50	navy-950	页面底
--cx-color-bg-raised	#FFFFFF	navy-900	卡片、面板
--cx-color-bg-sunken	sand-100	#001B2F	输入框、代码块底
--cx-color-bg-inverse	navy-900	sand-50	反色区块
--cx-color-fg	sand-950	sand-50	正文
--cx-color-fg-muted	sand-700	sand-300	次级文字
--cx-color-fg-subtle	sand-600	sand-500	占位、禁用
--cx-color-fg-inverse	sand-50	navy-950	反色区块文字
--cx-color-brand	navy-900	navy-300	品牌深色（标题、导航）
--cx-color-brand-strong	navy-950	navy-200
--cx-color-accent	leaf-600	leaf-500	主操作、当前、活体
--cx-color-accent-hover	leaf-500	leaf-400
--cx-color-accent-fg	#FFFFFF（≥ 18px 粗体）或 navy-950	navy-950	落在 accent 上的文字：小字用 navy-950，白字只在 ≥ 18.66px 粗体
--cx-color-accent-soft	leaf-100	leaf-900	浅绿底
--cx-color-border	sand-200	navy-800	分割线
--cx-color-border-strong	sand-400	navy-600	输入框描边
--cx-color-link	navy-700	sky-300	链接
--cx-color-success	leaf-800	leaf-400	文字级成功
--cx-color-warning	harvest-700	harvest-400	警告
--cx-color-danger	crimson-700	crimson-400	错误 / 危险
--cx-color-info	sky-700	sky-300	信息

3.4文字与背景配对Text / background pairs

硬性要求：正文 ≥ 4.5:1，大字与图形 ≥ 3:1。以下为已核验的配对，每个方块用真实配色渲染。tokens/build.mjs 自动生成 contrast-report.md，不达标时报错。

navy-900 / sand-5011.9 : 1 ✓

sand-950 / sand-50> 10 : 1 ✓

leaf-700 / 白5.2 : 1 ✓ 正文

leaf-600 / 白3.1 : 1 仅大字

sand-700 / sand-505.1 : 1 ✓

navy-700 / 白≥ 4.5 : 1 ✓

navy-950 / leaf-600小字用这个

白 / leaf-600≥ 18.66px 粗体

sand-50 / navy-90011.9 : 1 ✓

Leaf-600 上不放小白字。Leaf-600 对白只有 3.1:1，只够大字（≥ 18.66px 粗体）与图形；按钮小字用 navy-950。

3.5图表序列Chart series

六个序列色固定顺序使用，不跳选；网格线 sand-200；不用 3D、不用渐变。亮/暗各一套，示例随主题切换。

token	亮色	暗色
--cx-color-chart-1	navy-700	navy-400
--cx-color-chart-2	leaf-700	leaf-400
--cx-color-chart-3	harvest-600	harvest-400
--cx-color-chart-4	sky-600	sky-300
--cx-color-chart-5	soil-600	soil-400
--cx-color-chart-6	crimson-600	crimson-400