把孔版套印的约束翻译成设计令牌

这个站点的视觉方向叫「孔版套印」——就是丝网/孔版印刷那种两支油墨、粗颗粒、边缘微微错开的样子。做成这样不是为了复古，而是因为印刷是一种天然克制的媒介：它的限制是物理的，不是审美的，所以它不会自己膨胀成“渐变 + 圆角 + 柔和阴影”那种到处都像同一套模板的观感。

真正的工作量不在“画出那个样子”，而在把那些限制写成令牌。

印刷的约束，一条条对应到 CSS

印刷那边	这里的令牌 / 决定
一版只能上一支油墨	两支油墨：纸色 + 荧光橙 + 墨蓝。没有第三个强调色
裁切是直的	--radius-* 全部为 0，一个圆角都不留
压印是实的	--shadow-ink 一律 0 模糊；出现模糊阴影就是跑偏
墨线会糊粗	--border-width: 3px，细线 --border-hair: 2px
套版对不齐	--misreg: 4px（卡片硬阴影偏移）、--overprint: 2px（标题重影）
网点	@include mx.halftone(...)：--halftone-size 与 --halftone-dot 控制密度
纸本身有颜色	--c-bg 是纸色 #f5f1e8，不是纯白

右侧那一列表全在 src/styles/settings/_tokens.scss 里。换肤要改的东西只有它，加上 tools/_mixins.scss 里的三个 mixin。

令牌层长什么样

浅色与深色是两张 map，同一个 mixin 展开：

$light: (
  'bg': #f5f1e8,
  'surface': #fffdf7,
  'accent': #ff4a17,
  'ink-2': #1b2a6b,
  // …
);

$dark: (
  'bg': #101433,
  'accent': #ff4a17,
  'ink-2': #5fd3e8,
  // …
);

@mixin palette($map) {
  @each $name, $value in $map {
    --c-#{$name}: #{$value};
  }
}

好处很直接：组件里只写 var(--c-accent)，不知道自己是第几支油墨。深色模式换了配方，组件一行都不用动。这也是为什么后来把滚动条改成中性黑灰时，我只需要往两张 map 里各加两个键。

两条防止“套印变噪音”的规则

错位的观感很容易上瘾，什么都想加重影。我给自己定死了两条：

重影只在页面主标题（h1）上出现，而且必须换另一支油墨。

同色重影（text-shadow 与字同色、0 模糊、只偏 2px）是我踩过的坑：两层几乎重合，把字的边缘糊粗一圈，整行发脏，看起来像渲染坏了。异色重影才有“两版没对齐”的意思。重复出现的 h2~h4 一律不加重影，改用左侧一条实心油墨条。

网点绝不铺到正文底下。

半调网点在首屏是右侧一条渐变网屏（向右浓、向左用 mask 渐隐），永远不横跨到文字底下。字压在网屏上，再好的排版也读不清。

这两条不是审美偏好，是可读性的下限。装饰一旦开始吃正文的对比度，就不是装饰了。

系统件不参与套印

前一阵我把全局滚动条从“实心油墨条”改成了静默收起 + 中性黑灰。这是同一套逻辑的延伸：

滚动条、下拉箭头、日期选择器这类系统件不该抢套印的戏。它们是操作系统的延伸，你给它上荧光橙，它就从“氛围”变成“干扰”。所以它用的是单独的一对中性令牌，而不是 --c-accent。

视觉方向应该管到“观感”，管不到“控件语义”。这两件事混在一起就会变成噪音。

为什么这套分层值得

被否掉的那一版是浅色 Bento 卡片 —— 圆角、渐变、柔和阴影。问题不是它丑，是它没有约束：没有约束的时候，每个组件都倾向于自己再加一点，最后整站都是同一种模糊的柔和感。

印刷不一样，它先告诉你「你只有两支油墨、直线、实心」，然后逼你在这个盒子里做决定。把这些限制写进令牌之后：

• 加一个新组件：只用 var(--c-*) 与 var(--space-*)，自动就对了。
• 换配色或换线宽：改 _tokens.scss。
• 想确认有没有跑偏：搜 border-radius 和 blur，有就错了。

约束不是省事的手段，是让一堆零散决定变成同一个决定的手段。