# 设计令牌

> 三层 token 结构，命名描述用途而非外观。换配色时只动原始值，换暗色模式时只动语义映射。

来源：https://xiaoxusop.github.io/letterpress/wiki/design-tokens/
语言：zh-CN
类型：知识库条目

## 被引用

- [中文排版](https://xiaoxusop.github.io/letterpress/wiki/cjk-typography/)
- [这个博客是怎么搭的](https://xiaoxusop.github.io/letterpress/how-this-works/)
- [letterpress](https://xiaoxusop.github.io/letterpress/wiki/letterpress/)

## 正文

`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`。

## 间距用 4 单位基数

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

## 圆角：全直角

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

## 相关

- 中文字号与行高的取值理由：[中文排版](https://xiaoxusop.github.io/letterpress/wiki/cjk-typography/)
- 项目本身：[letterpress](https://xiaoxusop.github.io/letterpress/wiki/letterpress/)