建站连载 2/3

从零造一座灯塔（二）：夜与灯火——设计系统手记

2026 年 8 月 24 日 532 字约 1 分钟

如果说信息架构是龙骨，设计系统就是这艘船的样子。照梦的视觉只有一个母题：夜与灯火。

令牌先行

所有颜色都收进 CSS 变量，组件只认令牌不认具体色值：

:root[data-theme='night'] {
  --bg: #0b101e;        /* 深蓝夜航 */
  --ink: #e8e6f2;       /* 月光字色 */
  --accent: #e8a33d;    /* 灯火琥珀 */
}
:root[data-theme='day'] {
  --bg: #f6f3ec;        /* 暖纸 */
  --ink: #33323c;
}

这样做的好处是，换主题不是换一套样式，而是换一组值。夜间模式的切换按钮文案也因此可以写成「夜间模式 · 流萤的深空」——样式和叙事是一体的。

四季皮肤

月份驱动 data-season，它只影响两件事：点缀色 --season，和粒子层的形态——

月份	季节	白昼粒子	夜晚
3–5 月	春	樱花瓣	星与萤火
6–8 月	夏	光尘	星与萤火
9–11 月	秋	落叶	星与萤火
12–2 月	冬	落雪	星与萤火

访客什么都没配置，站点已经跟着真实世界呼吸了。这是「氛围」最省钱的来源。

把主色交给访客

主题工厂弹层里放了一排预设色板（灯火琥珀、暮山紫、青瓷绿……）加一个原生取色器。实现只要三行：

取色器 input 事件里 root.style.setProperty('--accent', v)；
localStorage 存一份；
<head> 预渲染脚本读出来再设一次，刷新不丢。

配合 color-mix(in srgb, var(--accent) 14%, transparent) 派生柔和底色，任何主色都能自动得到一整套hover、徽章、进度条。

书法字体的克制

马善政毛笔楷只出现在三个地方：站名、首页巨标题、署名。点缀而非滥用，是书法字体在现代排版里活下去的唯一方式。正文老老实实用系统黑体，标题用思源宋体兜底——气质交给留白和字重，而不是到处都是毛笔字。

动效的礼貌

所有氛围动效遵守两条军规：

prefers-reduced-motion 一律尊重；
移动端默认关闭重型粒子，只保留淡入。

好看永远不该以把访客的手机风扇吵醒为代价。

下一篇：内容三级体系——文章、手记、说说如何分层，系列连载如何自动聚合。

本文是「照梦的博客」的航海日志之一，作者寻。

转载请注明出处：https://zaomeng.ing/posts/build-blog-2/，采用 CC BY-NC-SA 4.0 协议。

寻

把梦照亮，把路寻到。

关于船长 →

← 较早一篇 / Earlier从零造一座灯塔（三）：内容三级体系与系列连载较新一篇 / Later →从零造一座灯塔（一）：技术选型与骨架

部分信息可能随时间过时，以最新日志为准

灯下留言 / Guest Notes

评论系统正在点亮中，很快就能在这里留下你的话。

想现在说点什么？欢迎去留言板贴一张纸条。