设计令牌

src/styles/tokens.css。三层结构：

primitive  → 原始值。组件永不直接引用
semantic   → 按用途引用 primitive。组件只引用这一层
component  → 只在某个组件内有意义的派生值

为什么分三层：要换配色时只动 primitive；要换暗色模式时只动 semantic 的映射。如果组件里直接写 color: #002FA7，上面两件事都得全库搜索替换，而且一定会漏掉几处，于是暗色模式下出现一块刺眼的亮蓝。

命名描述用途而非外观：--color-accent 而不是 --color-blue。这样把强调色从克莱因蓝换成别的时，名字不用改。

配色怎么定的#

一个强调色，其余全是中性灰。

强调色取 International Klein Blue（#002FA7）——它是那个年代的产物，与国际主义风格同源，不是随手挑的「好看的蓝」。

刻意避开的两个配色族：

紫蓝渐变——AI 生成页面的第一识别特征
米色/奶油底 + 黄铜/陶土 + 浓咖啡近黑——这个更隐蔽，因为它看起来「有品味」。但它已经成了 2026 年可识别的默认值，换成它只是把默认值换了个届，不是去 AI 味

暗色模式不是把亮色反过来：反转会让层级关系也翻过来（原本的「抬升」变成「下沉」）。这里按表面亮度表达层级重新排：画布最暗（#09090B）、卡片略亮（#131316），靠亮度差而非阴影建立纵深。

强调色在暗色下也不是同一个值：#002FA7 放到深色底上对比度只有约 2:1，读不了。暗色下用提亮版 #6B91FF。

不是只用 8。因为 8 的刻度缺少中间步——想做「比 16 紧一点、但比 8 松」的节奏时没有可用值，于是只能写一次性数值，节奏就散了。

瑞士风格的一致性锁：要么全用一套，要么不用。 混用（胶囊按钮 + 方卡片）是坏设计，除非有写下来的规则说明为什么。