档案室 × 实验室 × 新闻编辑部 — Editorial · Dense · Warm · Anti-Hype。 四个 accent · 双模式 · 中文 / 日文 / 韩文一等公民 · 零圆角 · 发线优于卡片 · `` 着色而非倾斜。 右上角切换主题 + 暗/浅模式查看每个组件的反应。
每页选 一个 accent。Light mode 下色值自动深化以保 AA 对比度。组件只引用 var(--accent),永远不写死 hex。
| Token | Dark | Light | 角色 |
|---|---|---|---|
| --bg | #0c0a07 | #f3ede0 | 页面背景 |
| --bg-2 | #161310 | #ebe3d2 | 卡片 / 引语 / 侧栏 |
| --bg-3 | #1e1a15 | #e2d8c2 | hover 态(少用) |
| --bg-paper | #e8e3d8 | #1a1815 | archive 框 / 反向纸面 |
| --fg | #f0ebe0 | #1a1815 | 主文本 |
| --fg-dim | #a09888 | #58524a | 正文段落 |
| --fg-mute | #6a6058 | #8a8276 | 元信息 / footer |
| --line | rgba(240,235,224,0.10) | rgba(26,24,21,0.12) | 分隔细线 |
| --line-bright | rgba(240,235,224,0.18) | rgba(26,24,21,0.22) | strip 分隔 / hover 边 |
暗模是温暖近黑(带红棕底色),不是纯黑。浅模是米白羊皮纸(cream parchment),不是纯白。两边都不用中性灰。
| Token | Family | 用途 |
|---|---|---|
| --display | Fraunces 300/400/500/700 (opsz 9-144) | 主标题、wordmark |
| --display-alt | Spectral 300/400/500/600/700 | 备用显示字体(旧页) |
| --serif | EB Garamond 400/500/600/700 + italic | Latin 正文运行 |
| --mono | JetBrains Mono 300/400/500/700 | eyebrow / 元 / 代码 / tag |
| --sans | Inter Tight 400/500/600 | UI chrome(备用) |
| --cjk-serif | Noto Serif SC → TC → JP → KR → 系统 fallback | 中文 / 日文 / 韩文衬线 |
| --cjk-sans | PingFang SC → Hiragino Kaku → Apple SD Gothic Neo | CJK UI sans |
Han / Kana / Hangul 永远不斜体。系统在三层强制执行:
:lang(zh), :lang(zh-Hans), :lang(zh-Hant),
:lang(ja), :lang(ko), .cjk, .cjk * {
font-style: normal !important;
font-synthesis-style: none; /* 阻止 UA 合成斜体 */
font-feature-settings: "palt" 1; /* 比例 kana/kanji 度量 */
}
正文行高 1.85(Latin 1.65),letter-spacing 0.02em,text-spacing-trim: trim-start(CSS Text 4 — 修剪 CJK 标点紧贴 Latin 字符的空隙)。
标题 line-height 1.1,letter-spacing 0(CJK 永远不负字距)。
从售货机到 SF 实体店的硬核小实验室——在能力与对齐之间,跑 8 小时之后谁还没疯。
從售貨機到 SF 實體店的硬核小實驗室——在能力與對齊之間,跑 8 小時之後誰還沒瘋。
自動販売機から実店舗まで——能力と整合性のあいだ、8 時間走ったあと誰がまだ正気か。
자판기에서 실제 매장까지——능력과 정렬 사이, 8 시간 뒤에도 누가 미치지 않았는가.
From vending machines to brick-and-mortar — between capability and alignment, who's still sane after eight hours.
一行里 Latin + CJK 混排时,CJK 字段用 <span class="cjk"> 显式标记,触发 --cjk-serif 字体栈和 palt features。
| Token | 值 | 建议用法 |
|---|---|---|
| --s-1 | 4px | 紧密图标间距 |
| --s-2 | 8px | 小元素间距 |
| --s-3 | 12px | eyebrow → 标题 |
| --s-4 | 16px | 段落底部 |
| --s-5 | 24px | 卡片内边距 / 正文行间 |
| --s-6 | 32px | 小节内分组 |
| --s-7 | 48px | 大卡 padding · gap-12 |
| --s-8 | 72px | section padding 移动端 |
| --s-9 | 112px | section padding 桌面 |
| --w-prose | 820px | 单列正文 / pullquote |
| --w-content | 1020px | hero h1 / 偶尔的宽块 |
| --w-wrap | 1320px | 页面外容器(strip + hero + section) |
议题的真正前线已不是"会不会发生",而是"在哪一层、用什么粒度、由谁先观察到"——这是方法论之争。
Brynjolfsson · Stanford · 2026-05
2026 年 1-5 年内消失的预测最早由 Anthropic CEO Amodei 提出。 但 Yale Budget Lab 报告显示宏观就业数据尚未呈现显著差异。
数据存在但解读分歧:微观分层方法看到 -16%,宏观聚合看不到。议题的实质从"会不会"转向了 "用什么粒度测量"。
| 动画 | 时长 | 缓动 | 循环 |
|---|---|---|---|
| lamp-pulse | 2.4s | ease-in-out | infinite (strip only) |
| cursor-blink | 1.1s | step-end | infinite (§ labels only) |
| hero-fadeUp | 0.7s × 4 stagger (.05/.15/.25/.35) | ease | once |
| hover | 0.15s · --d-fast | default | once |
| detail-open | 0.22s | ease | once |
页面应保持安静。多于此清单的动画 = 噪音。无视差,无滚动触发的渐入(hero 例外)。无 hover lift。无卡片阴影(除 lamp glow)。动画是预算,只花一次。
:lang() 强制 font-style: normal !important + font-synthesis-style: none。唯一例外是 pullquote <cite lang="en"> 行。<html lang>。无 lang 属性会落入 SC 默认;多语言页面要在 container 上明确标 lang="ja"/"ko"/"zh-Hant" 让正确字体加载。var(--accent)。border-radius: 0。▮ § № · / ← ⚠,渲染为 mono 字符。#c4850a vs 新版 #f5a524。新文章必须用 #f5a524。