珍珠玻璃与主题色

这套界面最显眼的特征，是卡片像一层薄薄的磨砂玻璃，浮在壁纸之上。它不是简单的透明，而是由底色、模糊、边缘高光和一层很淡的投影共同组成。

主题色相

所有强调色都从同一个色相推导：

--primary: oklch(0.70 0.14 var(--hue));
--btn-regular-bg: oklch(0.95 0.025 var(--hue));

切换色相时，按钮、标签、进度条和链接会一起变化，页面仍然保持统一。相比给每个组件单独配色，这种做法更不容易失控。

卡片层次

• 页面底色比卡片略深；
• 卡片圆角 1rem，边框几乎不可见；
• 阴影只用于浮层和导航，正文卡片保持安静；
• 分隔线使用低透明度，不使用纯黑。

动效

动效只做三件事：进入时轻微上移、悬停时颜色变化、切换主题时淡入淡出。过多的位移和缩放会让内容显得不安定。

字体

正文使用系统无衬线字体，代码使用等宽字体。中文正文的行高保持在 1.8 左右，段落间距略大于行距，阅读节奏会更舒服。

小结

视觉语言不是一组漂亮的截图，而是一套可以复用的约束。只要变量和规则还在，换一个框架也能保持同样的气质。