漫画风设计系统：网点、硬阴影与漫画红

上一篇说了「为什么」，这篇说说「是什么」——这个博客的漫画风设计系统，拆开看其实只有几条规则。

三色原则

整个站点只有三种基础色：

1. 纸底 #fdf6e3 —— 所有页面的底色，带一点暖黄，像真的纸
2. 墨色 #111111 —— 正文、描边、阴影，全是它
3. 漫画红 #e63b2e —— 唯一的点缀色，只出现在链接、标签、强调处

硬阴影：漫画风的灵魂

普通网页的阴影是柔的：box-shadow: 0 4px 12px rgba(0,0,0,0.1)。漫画不是这样画的——漫画的阴影是纯黑、无模糊、有明确偏移的色块：

.panel {
  border: 3px solid var(--color-ink);
  box-shadow: 6px 6px 0 var(--color-ink); /* 无模糊，纯偏移 */
}
 
.btn-comic:active {
  box-shadow: 0 0 0 var(--color-ink); /* 按下时阴影归零 */
  transform: translate(3px, 3px);     /* 位移补上，模拟「按下去」 */
}

按钮按下去的时候阴影归零、元素位移——就像真的把一张纸上的贴纸摁进了纸里。

网点与纹理

背景不是纯色，而是一层很淡的网点（halftone），用 CSS 的 radial-gradient 平铺出来：

body {
  background-image: radial-gradient(var(--halftone-dot) 1px, transparent 1px);
  background-size: 8px 8px;
}

近看看不出，远看让纸面「活」了一点，避免大面积平底的廉价感。

排版对照

引用块长这样：左侧一根漫画红的粗竖条，底色是同色系的浅红。日漫里的旁白框差不多就是这个意思。

设计 token 全部收敛在 src/styles/tokens.css，以后想换风格——比如把漫画红换成漫画蓝——只改一个变量。

设计系统不是一锤子买卖，会随着写作慢慢长。先把骨架立住，剩下的交给时间。