DEEPDIVE / DESIGN SYSTEM · v2 / ↗ DESIGN.md Theme
DESIGN SYSTEM · v2 · 2026-05

AI Buzzwords ·
DeepDive 视觉系统

档案室 × 实验室 × 新闻编辑部 — Editorial · Dense · Warm · Anti-Hype。 四个 accent · 双模式 · 中文 / 日文 / 韩文一等公民 · 零圆角 · 发线优于卡片 · `` 着色而非倾斜。 右上角切换主题 + 暗/浅模式查看每个组件的反应。

§ 01 / Themes

四个 accent 主题

RED#e84040 · 暗模#b8302e · 浅模紧迫 · 时效 · 市场冲击 · 劳动 · 裁员
SIGNAL#d1402c · 暗模#b22a17 · 浅模事故 · 泄露 · 单点突发
AMBER#f5a524 · 暗模#b8761a · 浅模分析 · 历史 · 结构 · B2B · 默认
MINT#7fb88b · 暗模#4a7a55 · 浅模研究 · 发现 · 技术能力 · 硬件

每页选 一个 accent。Light mode 下色值自动深化以保 AA 对比度。组件只引用 var(--accent),永远不写死 hex。

§ 02 / Surfaces

暗 / 双模 · 表面色

TokenDarkLight角色
--bg#0c0a07#f3ede0页面背景
--bg-2#161310#ebe3d2卡片 / 引语 / 侧栏
--bg-3#1e1a15#e2d8c2hover 态(少用)
--bg-paper#e8e3d8#1a1815archive 框 / 反向纸面
--fg#f0ebe0#1a1815主文本
--fg-dim#a09888#58524a正文段落
--fg-mute#6a6058#8a8276元信息 / footer
--linergba(240,235,224,0.10)rgba(26,24,21,0.12)分隔细线
--line-brightrgba(240,235,224,0.18)rgba(26,24,21,0.22)strip 分隔 / hover 边

暗模是温暖近黑(带红棕底色),不是纯黑。浅模是米白羊皮纸(cream parchment),不是纯白。两边都不用中性灰。

§ 03 / Typography

双衬线 + Mono · CJK 一等公民

TokenFamily用途
--displayFraunces 300/400/500/700 (opsz 9-144)主标题、wordmark
--display-altSpectral 300/400/500/600/700备用显示字体(旧页)
--serifEB Garamond 400/500/600/700 + italicLatin 正文运行
--monoJetBrains Mono 300/400/500/700eyebrow / 元 / 代码 / tag
--sansInter Tight 400/500/600UI chrome(备用)
--cjk-serifNoto Serif SC → TC → JP → KR → 系统 fallback中文 / 日文 / 韩文衬线
--cjk-sansPingFang SC → Hiragino Kaku → Apple SD Gothic NeoCJK UI sans

尺度 / Type scale

--t-displayHero 标题 · accent emphasis
--t-h1章节 h2 · 关键短语
--t-h2文章 h3 标题
--body-lgBody Large · 19px Garamond — 用于 hero 副标 / lede
--bodyBody · 16px Garamond — 主正文
--eyebrowEYEBROW · MONO 11px · 0.20em TRACK

CJK 规则 (硬性)

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 永远不负字距)。

每脚本自动切换

zh-Hans · Noto Serif SC

当 AI 开始"打工"

从售货机到 SF 实体店的硬核小实验室——在能力与对齐之间,跑 8 小时之后谁还没疯。

zh-Hant · Noto Serif TC

當 AI 開始「打工」

從售貨機到 SF 實體店的硬核小實驗室——在能力與對齊之間,跑 8 小時之後誰還沒瘋。

ja · Noto Serif JP

AI が「働き始める」とき

自動販売機から実店舗まで——能力と整合性のあいだ、8 時間走ったあと誰がまだ正気か。

ko · Noto Serif KR

AI 가 "일하기" 시작할 때

자판기에서 실제 매장까지——능력과 정렬 사이, 8 시간 뒤에도 누가 미치지 않았는가.

en · Fraunces + EB Garamond

When AI starts working

From vending machines to brick-and-mortar — between capability and alignment, who's still sane after eight hours.

混合 · <span class="cjk">

The Context Layer 才是 ToB AI 的护城河

一行里 Latin + CJK 混排时,CJK 字段用 <span class="cjk"> 显式标记,触发 --cjk-serif 字体栈和 palt features。

§ 04 / Spacing

8-pt 编辑 scale

Token建议用法
--s-14px紧密图标间距
--s-28px小元素间距
--s-312pxeyebrow → 标题
--s-416px段落底部
--s-524px卡片内边距 / 正文行间
--s-632px小节内分组
--s-748px大卡 padding · gap-12
--s-872pxsection padding 移动端
--s-9112pxsection padding 桌面

三层 max-width

--w-prose820px单列正文 / pullquote
--w-content1020pxhero h1 / 偶尔的宽块
--w-wrap1320px页面外容器(strip + hero + section)
§ 05 / Components

复用 组件

Lamp + Cursor

DEEPDIVE
§ 02 / 章节标签(cursor 闪烁)

Pullquote

议题的真正前线已不是"会不会发生",而是"在哪一层、用什么粒度、由谁先观察到"——这是方法论之争。

Brynjolfsson · Stanford · 2026-05

Cite link

2026 年 1-5 年内消失的预测最早由 Anthropic CEO Amodei 提出。 但 Yale Budget Lab 报告显示宏观就业数据尚未呈现显著差异。

Synthesis block

数据存在但解读分歧:微观分层方法看到 -16%,宏观聚合看不到。议题的实质从"会不会"转向了 "用什么粒度测量"

Stats grid

1-5
年时间线
来源
-16%
22-25 岁就业
Brynjolfsson 2025
1.6万
企业岗裁员
Amazon Q1
2026·05
最新更新
v2
§ 06 / Motion

动画 预算(一次花完)

动画时长缓动循环
lamp-pulse2.4sease-in-outinfinite (strip only)
cursor-blink1.1sstep-endinfinite (§ labels only)
hero-fadeUp0.7s × 4 stagger (.05/.15/.25/.35)easeonce
hover0.15s · --d-fastdefaultonce
detail-open0.22seaseonce

页面应保持安静。多于此清单的动画 = 噪音。无视差,无滚动触发的渐入(hero 例外)。无 hover lift。无卡片阴影(除 lamp glow)。动画是预算,只花一次。

§ 07 / Don'ts

绝不 做的事

  • 添加第 5 个主题色。如果新文章不属于 red/signal/amber/mint,可能不属于 DeepDive。
  • 在 CJK 字符上设 italic。系统通过 :lang() 强制 font-style: normal !important + font-synthesis-style: none唯一例外是 pullquote <cite lang="en"> 行。
  • 省略 <html lang>。无 lang 属性会落入 SC 默认;多语言页面要在 container 上明确标 lang="ja"/"ko"/"zh-Hant" 让正确字体加载。
  • 直接写 hex 进组件 CSS。永远 var(--accent)
  • 圆角。除 6px lamp dot 之外永远 border-radius: 0
  • emoji。允许的字符是 ▮ § № · / ← ⚠,渲染为 mono 字符。
  • hover lift / 卡片阴影 / 滚动视差。页面是 print-flat 的。
  • 混用 amber 的两个 hex:旧版 #c4850a vs 新版 #f5a524。新文章必须用 #f5a524