设计令牌：一个文件管住整个站点

站点还只有一个页面的时候，随手写死几个十六进制颜色没什么问题。等到有了博客、游戏页、工具页，加上浅色深色两套主题，硬编码就会开始咬人。

只允许一个来源

$light: (
  'bg': #f5f1e8,
  'text': #14120f,
  'accent': #ff4a17,
  'ink-2': #1b2a6b,
);

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

规则很简单：组件里不出现任何十六进制颜色。一旦你需要在某个地方微调颜色，改令牌而不是改组件 —— 否则深色主题下必然有一个角落是错的。

写成 SCSS map 而不是直接写 CSS 变量，是因为换肤时要换的往往不只是颜色。圆角、线宽、阴影这些也得跟着走，而它们没法靠一两个变量表达。

换一次皮肤，改两个文件

这个站点最近换过一次视觉方向。动作是：

1. 重写 settings/_tokens.scss 里的两套色板；
2. 重写 tools/_mixins.scss 里的 card-shell 混入。

组件与页面一行都没动。 新的方向要求直角、3px 粗描边、零模糊的硬偏移阴影，这些都是令牌和混入层面的东西：

--radius-sm: 0;
--radius-md: 0;
--radius-lg: 0;
--border-width: 3px;
--shadow-ink: 4px 4px 0 var(--c-border);

最后一行是关键。阴影的模糊半径是 0，它退化成一个纯粹的偏移色块 —— 像套印时两块印版没对齐。这种“硬边阴影”和 0 4px 16px rgba(0,0,0,.1) 那种柔和投影在气质上完全是两回事，但代价只是改一个变量。

流体字号

用 clamp() 让字号在 320px 到 1280px 之间平滑过渡，比写一堆断点干净得多：

--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
--step-4: clamp(2.074rem, 1.82rem + 1.27vw, 2.74rem);

中间那个表达式是关键：系数加上一点视口单位，让曲线在两端的斜率不同 —— 小屏上变化快，大屏上趋于平缓。这正是排版想要的行为。

语义命名

--c-accent 而不是 --c-orange，--c-text-muted 而不是 --c-gray-600。名字描述用途，这样换配色方案时不需要改任何组件代码。

也有反例。新的视觉方向有两支油墨，第二支叫 --c-ink-2 —— 这个名字描述的是角色（第二块印版），不是颜色。它现在是墨蓝，深色主题下是青。叫它 --c-blue 的话，深色模式下就成了说谎。

这套令牌目前支撑着三种截然不同的页面形态。如果没有它，我大概已经放弃统一的视觉了。