水墨质感的设计系统：在暗色主题里留住温度

黑不是一种颜色

大多数暗色主题失败的原因出奇一致：把背景设成 #000000 或某个冷蓝黑，把文字设成 #FFFFFF，然后疑惑为什么页面看起来像停车场节能模式。

问题在于纯黑不反射环境。纸上的墨之所以好看，是因为墨里有层次——浓淡干湿，焦浓重淡清。屏幕上的暗色主题想要温度，同样需要「墨分五色」。

配色推导：从一方砚台开始

这个站点的色板不是拍脑袋定的，推导过程如下：

1. 基底不用纯黑，用暖黑。 #0a0908——RGB 三个通道故意不相等，红色通道略高，模拟墨在暖光下的反光。
2. 文字不用纯白，用宣纸白。 #ede3d0，饱和度给一点点黄。纸的白是「吸收了一部分蓝光的白」，比 #fff 亲肤得多。
3. 强调色用朱砂而非科技蓝。 #ea5c40——印泥的红色偏橙，落在暖黑上既跳又不刺眼。对比度约 5.1:1，无障碍达标。
4. 辅助色用鎏金与苔青。 金 #d0ad6c 用于代码与引文，苔青 #9aab8e 用于终端提示符。两者饱和度都压在 40% 以下，确保它们是「盐」而不是「主菜」。

:root {
  --ink: #0a0908;      /* 墨 */
  --paper: #ede3d0;    /* 宣纸 */
  --cinnabar: #ea5c40; /* 朱砂 */
  --gold: #d0ad6c;     /* 鎏金 */
  --moss: #9aab8e;     /* 苔青 */
}

字体：宋体的骨架，等宽的呼吸

中文暗色界面有个隐藏福利：宋体在暗背景上比黑体更精神。横细竖粗的笔画对比，在小字号下依然轮廓分明。我的层级是：

• 标题：思源宋体 900——毛笔提按的重量感，配合 letter-spacing: -0.01em
• 正文：思源黑体 300/400——长文阅读的舒适区
• 标签与数据：JetBrains Mono——中文语境里的等宽字体承担「这是机器说的话」的语义

混排时给数字和英文统一套上 font-mono，页面会立刻安静下来——因为视觉噪音大多来自字形的随意切换。

质感的三处细节

噪点。 一层 5% 透明度的 SVG 噪点铺满全屏，模拟宣纸的纤维。参数要克制：baseFrequency: 0.85，再高就成电视雪花。

印章。 品牌符号是一方 32px 的朱砂印，旋转 -3°。倾斜很重要——正的方框是 UI，斜的方框是「有人按上去的」。

辉光要像灯，不像霓虹。 主色光晕半径 120px 起、透明度 12% 以下，模拟纸背后的烛光晕染。box-shadow: 0 0 20px #ea5c40 那种霓虹感是另一个世界的美学，别混进来。

最后

暗色主题的高级感，本质上是在回答一个问题：你的黑里藏着什么？ 藏着暖意的黑，藏着纸感的白，藏着印泥的红——藏着一整套关于「物」的隐喻。想清楚这个，配色就不再是玄学。