Colophon
这个小站是怎么搭的：字体、配色、技术栈，以及几个我坚持的设计取舍。
技术栈
框架
Next.js 16 · App Router
服务端渲染 + 按需动态路由，文章与分享数据请求时读取。
语言
TypeScript · React 19
全栈 TS，组件与 API 路由统一类型约束。
样式
Tailwind CSS 4
原子化类 + CSS 变量令牌，深浅两套主题共用一套类。
构建
Turbopack
开发与构建统一引擎，冷启动更快。
部署
nginx + PM2 · Node
阿里云单实例，nginx 反代 443/80，PM2 守护 Next 进程。
数据
JSON 文件 + fs
文章、分享、阅读量落在 data/*.json，后台在线编辑即改即生效。
字体
标题
Noto Serif SC
自托管宋体，给文章标题与刊头「测试即方法」一个衬线的重量。
正文
系统无衬线
跟随系统的中文字面，不额外下载，保证长文滚动时的渲染与性能。
代码 / 数据
ui-monospace
等宽字体处理代码块、期号、标签等需要字符对齐的文本。
配色
强调色
#6d5dfc → #8b7cff
克制的单一紫色，只用于交互与关键强调，不铺满。
深色主题
#080a18 底
近乎纯黑的蓝调底色，文字用高对比的冷白。
浅色主题
纸面 #f5f5f5
与深色孪生的一套浅色，字与发丝线逐值对齐。
设计取舍
- · 单一强调色，宁少勿多；删掉一个元素若页面更高级，就删。
- · 深浅双主题共用一套 Tailwind 类，靠 CSS 变量逐值对齐，不写两套。
- · 所有动效受 prefers-reduced-motion 约束，尊重读者的系统设置。
- · 内容自托管（字体、图片、统计、评论），不依赖第三方运行时。