inkpaper 风格设计思路

inkpaper 的视觉系统围绕一个意象：宣纸上用毛笔写字，盖一方朱砂印。整套设计就是在还原这个感觉，同时保证屏幕上的可读性。

色彩系统

三组色调，各司其职。

墨色（ink），用于文字。分四阶：

• --ink：正文主色，接近纯黑但带暖调（#1a1814）
• --ink-light：次要文字，比如日期、标签
• --ink-faint：辅助信息，sidebar 里的小字
• --ink-ghost：最淡的一阶，分隔符、占位文字

纸色（paper），用于背景。分三阶：

• --paper：主背景，微暖的白（#f7f5f2），不是纯白
• --paper-warm：卡片、sidebar 背景，比主背景深一点
• --paper-deep：行内代码背景、更深的区分层

朱砂（vermillion），用于强调和交互：

• --vermillion：链接、hover 状态、品牌色（#c04b3a）
• --vermillion-soft：链接下划线、引用块左边线
• --vermillion-faint：引用块背景、极淡的高亮

为什么不用纯黑纯白？因为宣纸不是白的，墨也不是纯黑的。微暖的色调让整个页面有”纸”的感觉，而不是”屏幕”的感觉。

宣纸纹理

用 SVG 的 feTurbulence 滤镜生成 fractalNoise 噪点，叠加在 body::before 上，opacity: 0.1。这个数值试过很多次——0.05 几乎看不到，0.2 开始干扰阅读，0.1 刚好能感知到纹理但不碍事。

实现上是一个 inline SVG data URL，不需要额外请求图片资源。fixed 定位，pointer-events: none，不影响交互。

朱砂顶线

页面最顶端有一条 2px 的朱砂色线，position: fixed，始终可见。这是整个页面里最重的色彩元素，灵感来自印章——一方朱印点在宣纸角上。

字体

正文用 Noto Sans SC + Inter。Noto Sans SC 覆盖中文，Inter 覆盖西文和数字，两者在 x-height 和笔画粗细上比较协调。代码用 JetBrains Mono，等宽字体里辨识度最好的之一。

字体通过 Google Fonts 加载。如果你的站点在国内，可能需要换成自托管的字体文件。

暗色模式

暗色模式不是简单把黑白反转。每组色调都重新调过：

• 墨色变成浅色文字（#e8e4df），保持暖调
• 纸色变成深色背景（#1a1814），和亮色模式的墨色接近
• 朱砂提亮（#e06050），因为暗背景上需要更高对比度

调暗色的原则是：在暗色环境下，纸墨关系还在，只是反过来了——暗色的”纸”承载亮色的”墨”。

动效

只有两种动效：

1. fadeInUp：页面元素进场时从下向上淡入，0.45s，仅在首页和文章列表上用。
2. 渐变底线：链接和标签 hover 时，一条朱砂色的线从左向右展开。用 background-image + background-size 实现，比 border-bottom 动画更平滑。

没有更多了。动效是调味料，不是主菜。

设计变量架构

所有色彩、字体、间距都通过 CSS 自定义属性定义，放在 @inkpaper/core 包里。这个包是纯 CSS，不依赖任何框架。@inkpaper/vitepress 和 @inkpaper/astro 在此基础上做各自框架的适配。

这样拆的好处是：色彩系统和纹理在两个框架版本之间完全复用，只有组件层各自实现。