三枚种子，六张面孔：聊聊本站配色的实现思路
给一个站点做配色，最直觉的做法是什么？六套配色，就写六份样式；想改某个按钮的颜色，就在六份里各改一遍。功能上没问题，但它有个隐形的代价：你维护的不是六套配色，而是六份彼此独立的真相。
本站想避开的正是这件事。做法说出来很简单：写一次样式，让颜色从外面切换。 拆开看，它其实只用到四个概念。
令牌：先给设计决策起个名字
新手写样式，常常直接写颜色：「这个按钮是蓝的。」问题在于，蓝色只是当下的答案，而不是意图。等到要换配色，你得先回想一遍「当初哪里有蓝色」，再去逐处替换。
令牌（token）换了个思路：不描述「用什么颜色」，而描述「这块地方扮演什么角色」。正文有正文的角色，次要文字有次要文字的角色，分隔线、强调色、浮层底色各有各的角色——本站把它们命名为 bg / fg / fg-muted / line / accent 这样一组语义名。
页面里从此不出现具体色值，只出现「我是强调色」这样的声明。蓝色还是红色，是外层决定的事；组件自己毫不知情。把颜色和用途解耦，是这套系统能成立的第一步。
顺带一提，同样的命名思路也用在了颜色之外：圆角只有「控件 / 卡片 / 大容器」三档，字体只留一套无衬线、一套等宽。档位少，反而更容易保持整齐。
种子：把决策收敛到最小
既然角色有十几个，是不是要一个个手写颜色？不必。真正的关键判断，其实只有三枚：
- 底色——整页的基调；
- 正文色——承载文字的那一支；
- 强调色——用来点题的那一支。
这就是「种子色」。它是最小决策集：一套配色叫什么气质，几乎全由这三枚决定。 米纸底配赭红，是暖调胶片；粉底配玫红，是多巴胺糖果。至于它们之外那十来个令牌，不用一个个拍板——它们是这三枚的结果，不是并列的选项。
派生：让颜色自己「长」出来
「结果」是怎么来的？靠混色。把正文色按不同比例混进底色，就能得到深浅不同的灰阶：混七成是柔和的次要文字，混一成三是淡淡的分隔线；把正文色掺一点透明度，就得到阴影；把强调色掺进透明，就是首屏那几团柔和的光晕。
color-mix(in oklab, …)上面这张图不写死颜色：它读的就是当前这套皮肤的种子与令牌，所以切换配色时，图里的圆点会跟着一起变——它本身就是一次演示。
/* 一套皮肤，只需要人拍板三枚种子 */
[data-scheme='film'] {
--seed-bg: #f6efe3; /* 底色 */
--seed-fg: #211b14; /* 正文 */
--seed-accent: #b4492b; /* 强调 */
}
/* 其余令牌由种子生出来，全站只写一遍 */
[data-scheme] {
--c-fg-muted: color-mix(in oklab, var(--seed-fg) 70%, var(--seed-bg));
--c-line: color-mix(in oklab, var(--seed-fg) 13%, var(--seed-bg));
}这带来一个很舒服的副作用：六套配色看起来各不相同，内里却彼此同构。它们的浅色、灰阶、阴影都由同一套规则算出，所以换上任何一套，页面的层次感和节奏都是稳定的——风格换了，秩序没乱。
皮肤：换的是一条数据，不是一份样式
有了种子和派生，「一套配色」就被压缩成了很小的一件事：一组种子色，加少量例外。 本站管它叫一套「皮肤」，切换皮肤就是换外层的一个属性（data-scheme），剩下的交给派生规则。
这样，新增第七套配色不再是一次「不小的工程」，而是把一条新数据加进清单里。清单只有一份，页头的切换器和配色画廊共用它——不会出现「这里改了、那里忘了」的分叉。
例外：为刻意的破例留个位置
规则能覆盖大多数，但覆盖不了全部。比如大胆波普，要的就是纯黑的硬描边、没有模糊的硬阴影——那是刻意的风格，不该被「柔和派生」磨平；再比如深邃黑，阴影必须用纯黑，因为深色底上的前景是亮的，照前景去派生的阴影会变成「发光」，而不是投影。
所以系统留了一个口子：允许个别取值按需覆盖，但要求每处例外都写清理由。 规则管大多数，例外只留给真正需要的地方。
这一点其实是通用的：任何设计系统，如果一点破例的余地都没有，就会僵化；如果破例毫无约束，又会迅速失控。把「例行」和「例外」明确分开，系统才既稳、又不死板。
一点延伸
把「颜色」换成变量看，这套思路还能往别处搬：先定义角色，再收敛到最少的几个种子，让其余部分由规则生成。 你会发现它的收益和代价是一体两面——
收益是维护成本骤降、风格自动统一；代价是前期要设计规则，而且大部分决定权被交给了规则，个性能表达的余地，就只剩那几枚种子和几处例外。
但这恰恰是它有意思的地方：当你只被允许选三枚颜色时，你会更认真地去想，哪三枚才真正代表这个站点。 风格往往不在于你调了多少参数，而在于你决定留下哪几枚种子。