在标准化组件库同质化严重的今天，Pocketmelon 选择了Editorial（杂志级排版）的设计风格。我们将经典印刷品的典雅感、律动感与 Web 技术的响应式流动性融合在一起。

一、数字时代的新新闻主义排版

真正的 Editorial 设计不仅仅是换上衬线字体 (Serif)，而是通过巨幅标题 (Display Font)、精确的字距微调 (Kerning)、留白音符以及富有节奏感的多栏网格，引导读者的视线与呼吸节奏。

二、CSS 自定义属性与主题架构

传统的主题切换常依赖大量 dark:bg-slate-900 类名重写，极易导致样式遗漏。Pocketmelon 设计系统抽象出语义化的 CSS 自定义属性底层：

/* 暗黑模式 (:root) vs 纸感模式 (.theme-paper) */
:root {
  --bg: #0d0d0d;
  --fg: #f5f3ee;
  --surface: #131313;
  --rule: rgba(245, 243, 238, 0.14);
  --accent: #7dd3a8;
}

.theme-paper {
  --bg: #f5f3ee;
  --fg: #0d0d0d;
  --surface: #ebe7dd;
  --rule: rgba(13, 13, 13, 0.14);
  --accent: #2e7d32;
}

组件内部使用 bg-[color:var(--bg)]、text-[color:var(--fg)]、border-[color:var(--rule)] 统一渲染。只需切换根元素的类名，全局部件即可秒级完成无痛主题变换。

2.1 瑞士网格与动态字号阶梯

利用 CSS clamp(min, val, max) 视口响应式字号计算，标题可以在 320px 移动屏到 2560px 超宽屏之间实现无断点的流畅伸缩，时刻保持黄金比例的版式美感。

2.2 Paper 模式的触感与衬线美学

Paper 模式模仿了精装书籍的米黄色象牙纸质感 (#f5f3ee)，配合高对比度的黑色油墨字色 (#0d0d0d)。长文段落采用细致调整过行高 (leading-relaxed) 的字体排版，给读者带来回归纸质阅读的沉静感受。

三、微交互与平滑过渡

排版是静态的骨骼，而微交互则是赋予其灵魂的肌肉。从 Hover 时的下划线伸展动画，到磁性按钮 (Magnetic Button) 的跟随吸附，每一个细节都经过毫秒级阻尼曲线微调，打造兼具冷峻工程与温暖审美的旗舰产品体验。