背景 #f5f4ee 暖米白；主文字 rgba(59,59,59,0.8)。这一个决定把"科技演示"扫成"编辑刊物"。
Hero 上限 56px / 行高 60px。靠字体的气质做戏剧感，不靠尺寸。设小标题，比设大标题更难——这是真正的编辑刊物纪律。
这是奢华手表 / 高端 fintech 网站的视觉移植。pill 按钮 + 1px 边框 + ::before 渐变层 + 1.5 秒对角扫过。动按钮里面，不动按钮本身。
9 档 backdrop-blur（4px → 62px）+ section 之间 cream/dark 硬切。几乎不用 drop-shadow——阴影是 2010 年代的语言，blur 和颜色对比才是 2026 的语言。
硬切换色块，永远不用渐变过渡。视觉延续靠字号 / 间距 / accent 色复现，不靠颜色渐变。深 section 是"严肃判断 / Prompt / CTA"专用。
Ink 系（softened 黑）· Marble 系（暖米白）· Dark 系（深 section）· 一种 Peach（唯一 accent）。
Mint 仅做插画装饰色，绝不进入 UI 系统。
Display 字体（衬线感 / 编辑感）只用一个字重 500。Body 字体（几何无衬线）三字重 400/500/600。 Mono 用于编号、标签。不用 light、不用 black——节制是核心纪律。
| Token | Value | 用法 |
|---|---|---|
| --em-sp-2 | 8px | 按钮内 gap、标签间距 |
| --em-sp-3 | 12px | 列表项间距 |
| --em-sp-4 | 16px | 卡片内容间距、grid gap |
| --em-sp-6 | 24px | 组件 padding |
| --em-sp-8 ★ | 32px | 大卡 padding、容器 padding |
| --em-sp-12 | 48px | section head 与内容 |
| --em-sp-16 | 64px | 组内大停顿 |
| --em-sp-20 | 80px | section padding（tight） |
| --em-sp-24 ★ | 96px | section padding（标准节奏） |
| --em-sp-32 | 128px | footer 顶部 |
| Token | Value | 用法 |
|---|---|---|
| --em-ease | cubic-bezier(.4, 0, .2, 1) | ★ 主缓动（Material standard） |
| --em-t-fast | 150ms | 状态切换、颜色变化 |
| --em-t-base ★ | 200ms | 大部分 hover / 默认 transition |
| --em-t-med | 300ms | 模态打开、面板展开 |
| --em-t-slow | 500ms | scroll-reveal 进入 |
| --em-t-sweep ★ | 1500ms | ★ 按钮光扫专用 — 灵魂 |
::before 伪元素 +
linear-gradient(transparent → rgba(255,255,255,0.18) → transparent) +
left: -100% → 100% +
transition: 1.5s。
marble-soft 底 · ink-10 边线 · large radius 32px · 无阴影。
用于"想被看到但不想喊叫"的内容。peach-soft 底色。
用于 Prompt 块、终端、严肃判断。
.em-reveal {
opacity: 0;
transform: translate3d(0, 30px, 0);
transition: opacity 700ms ease, transform 700ms ease;
}
.em-reveal.is-in {
opacity: 1;
transform: translate3d(0, 0, 0);
}
通过 IntersectionObserver 触发（threshold 0.08，rootMargin -8%）。本页所有 .em-reveal 元素都在用这套。
硬切色块，永远不用渐变过渡。深 section 是"严肃判断 / Prompt / CTA / 引用"的专用空间。 视觉延续来自字号 / 间距 / accent 色的复现，不来自颜色渐变。
"好的方法论不是答案，
是好问题的清单。"
— Method DS · Editorial Idiom
想要"严肃 / 编辑刊物 / 高端可信 / 长文阅读"气质的时候用这套。例如：
想要"活泼 / 拼贴 / 多入口 / 视觉密度大"气质的时候用 v4。例如：
所有 token 都在 assets/css/tokens-editorial.css 里。在你的页面顶部加：
<link rel="stylesheet" href="/ai-product-innovation/assets/css/tokens-editorial.css"> /* 然后在你的样式里就可以用： */ body { background: var(--em-marble); color: var(--em-ink-80); font-family: var(--em-font-body); }