颜色

整个系统都是暖色：奶油色的底，暖墨色代替黑色，暖色的深色代替蓝黑，只有一种品牌色珊瑚色，而且用得很省。组件只用下面这些语义 token，它们指向调色板；深色主题只改它们指向哪里，调色板本身不变（见主题）。

表格里的值是这个网站构建时从 token 文件读出来的。

底色

一页里三种底色交替出现：奶油色的画布、奶油色的卡片、深色。相邻的两段不用同一种。奶油色卡片和画布靠底色区分，不靠边框或阴影。深色用来强调：产品截图、对比、页脚。深色主题里它仍然比画布高一级，深色卡片照样显眼。

Token	浅色	深色	说明
`--surface-canvas`surface.canvas	`#faf9f5`指向 `--cream-50`	`#181715`指向 `--night-900`	页面底色。
`--surface-soft`surface.soft	`#f5f0e8`指向 `--cream-100`	`#1f1e1b`指向 `--night-850`	比画布高一级的浅色区块。
`--surface-card`surface.card	`#efe9de`指向 `--cream-200`	`#252320`指向 `--night-800`	画布上的卡片。
`--surface-cream-strong`surface.cream-strong	`#e8e0d2`指向 `--cream-300`	`#2b2925`	最深的米色，用于卡片内的强调。
`--surface-dark`surface.dark	`#181715`指向 `--night-900`	`#2b2925`	强调表面：深色卡片、代码窗口、页脚。
`--surface-dark-soft`surface.dark-soft	`#1f1e1b`指向 `--night-850`	`#322f2a`	比深色表面高一级，例如深色卡片里的代码。
`--surface-dark-elevated`surface.dark-elevated	`#252320`指向 `--night-800`	`#393631`	深色表面上凸起的元素。
`--surface-blur-cream`surface.blur-cream	`rgb(250 249 245 / 72%)`	`rgb(24 23 21 / 72%)`	12px 背景模糊下的半透明米色，例如滚动后的顶栏。
`--surface-blur-dark`surface.blur-dark	`rgb(24 23 21 / 72%)`	—	12px 背景模糊下的半透明深色。
`--surface-blur-cream-opaque`surface.blur-cream-opaque	`rgb(250 249 245 / 94%)`	`rgb(24 23 21 / 94%)`	不支持模糊时用的几乎不透明的米色。
`--surface-blur-dark-opaque`surface.blur-dark-opaque	`rgb(24 23 21 / 94%)`	—	不支持模糊时用的几乎不透明的深色。

文字是暖墨色，不用纯黑；深色底上的文字带一点奶油色，不用纯白。奶油色的文字颜色放在奶油色底上，on-dark 的放在深色底上，上面的样张列出了每种搭配。链接是珊瑚色。

Token	浅色	深色	说明
`--text-ink`text.ink	`#141413`指向 `--ink-900`	`#faf9f5`指向 `--cream-50`	标题和最强调的文字。
`--text-body-strong`text.body-strong	`#252523`指向 `--ink-800`	`#f5f0e8`指向 `--cream-100`	强调的正文。
`--text-body`text.body	`#3d3d3a`指向 `--ink-700`	`#e8e0d2`指向 `--cream-300`	正文。
`--text-muted`text.muted	`#6c6a64`指向 `--ink-500`	`#a09d96`指向 `--ink-300`	次要文字，例如日期和元信息。
`--text-muted-soft`text.muted-soft	`#8e8b82`指向 `--ink-400`	`#7f7c74`	最弱的文字：提示和小标签。
`--text-on-dark`text.on-dark	`#faf9f5`指向 `--cream-50`	—	深色表面上的文字。带米色，不用纯白。
`--text-on-dark-soft`text.on-dark-soft	`#a09d96`指向 `--ink-300`	—	深色表面上的次要文字。
`--text-link`text.link	`#d97757`指向 `--coral-500`	—	正文里的链接。

珊瑚色是品牌的电压。用在单个元素上要省：一个主按钮、链接、焦点框。只有铺满一整块时才大方，比如通栏的号召卡片。中间状态没有：不用珊瑚色的边框，也不用珊瑚色的标题。按下时颜色变深；禁用时变成细线的颜色，文字变浅。两种主题里珊瑚色都一样。

Token	浅色	深色	说明
`--color-primary`color.primary	`#d97757`指向 `--coral-500`	—	主按钮、整块的强调区和行动号召区。单个元素上少用。
`--color-primary-active`color.primary-active	`#a9583e`指向 `--coral-700`	—	主按钮按下时的填充色，以及链接悬停色。
`--color-primary-disabled`color.primary-disabled	`#e6dfd8`指向 `--cream-500`	`#3a3833`	主按钮禁用时的填充色。
`--color-on-primary`color.on-primary	`#ffffff`指向 `--white`	—	主色填充上的文字和图标。
`--focus-ring`focus-ring	`rgb(217 119 87 / 15%)`	—	输入框获得焦点时的光晕，用 3px 的 box-shadow 画出。

青色和琥珀色只用在小标记上：状态圆点、分类标签。状态色表示成功、警告和错误，用圆点或短标签，不铺成一整块。荧光笔用不透明的淡色标记文字，点缀色已经和底下的底色混好，所以被标记的文字对比度不变，两段标记挨在一起也不会叠深。

Token	浅色	深色
`--accent-teal`accent.teal	`#5db8a6`指向 `--teal-400`	—
`--accent-amber`accent.amber	`#e8a55a`指向 `--amber-400`	—
`--status-success`status.success	`#5db872`指向 `--green-500`	—
`--status-warning`status.warning	`#d4a017`指向 `--gold-500`	—
`--status-error`status.error	`#c64545`指向 `--red-500`	—
`--marker-coral`marker.coral	`#f4e2d9`	`#4d352b`指向 `--marker-coral-on-dark`
`--marker-teal`marker.teal	`#deede7`	`#2e453f`指向 `--marker-teal-on-dark`
`--marker-amber`marker.amber	`#f7ead9`	`#52412c`指向 `--marker-amber-on-dark`
`--marker-red`marker.red	`#f1d9d5`	`#492826`指向 `--marker-red-on-dark`
`--marker-coral-on-dark`marker.coral-on-dark	`#422c24`	`#4d352b`
`--marker-teal-on-dark`marker.teal-on-dark	`#273a35`	`#2e453f`
`--marker-amber-on-dark`marker.amber-on-dark	`#463624`	`#52412c`
`--marker-red-on-dark`marker.red-on-dark	`#3e2120`	`#492826`

边框是奶油色调的细线，看上去是高一级的层次，而不是一条墨线。浅一号的细线用来分隔同一张卡片或同一段里的内容。

Token	浅色	深色	说明
`--hairline`hairline	`#e6dfd8`指向 `--cream-500`	`#35332f`	边框。看起来是高了一级，而不是一条墨线。
`--hairline-soft`hairline-soft	`#ebe6df`指向 `--cream-400`	`#2a2823`	卡片内更淡的边框。
`--hairline-on-dark`hairline-on-dark	`#31302c`	`#43413b`	深色表面上的边框。

语义 token 指向的原始颜色。组件里用语义 token；调色板只用来定义它们。