PRODUCT TALK · SIGNAL
序 · INTRO
01 / 08
A DATA-FIRST DESIGN SYSTEM
数字，
是这页的主语。
瑞士国际主义不是一种装饰，是一种纪律：网格先行、字号对比、单一信号色。
下面 8 页，把这套纪律拆给你看。
封面：bg-dots 满铺 + bg-fade 向下淡出，内容用相对定位压在其上。zh-mega 巨标题 + 极小正文 = 极致字号对比。hl--full 整块红底白字，是整场唯一的强调色。
少，
但更好。
Weniger, aber besser —— Dieter Rams 的第十条原则。在数据汇报里，它意味着：
一页只留一个结论，其余全部降噪成支撑。
巨标题与正文之间的尺度差，本身就是层级。读者第一眼看到结论，第二眼才看到论据，
顺序由字号强制规定，而非由颜色暗示。
极致字号对比：zh-mega 与 .body 拉到 ~5 倍尺度差，层级靠尺度强制，不靠颜色。左对齐、大留白。
RENDER BUDGET · 7-DAY TREND
单帧渲染中位数，一周降了 41%
8.3ms
从 14ms 降到 8.3ms，掉帧投诉清零。
来源：内部 RUM 抽样 7d · n=12,480（示例数据，发布前替换）
数字 + 折线：左边大数字当结论，右边 .linechart 给趋势。折线 points 必须来自真实数据，颜色走 token，无数据就退回纯数字版式。
网格把页面切成可计算的列
01 · FOUNDATION
Tokens
颜色、间距、字阶全部变量化。改一处，全场跟随。
02 · STRUCTURE
12-Column
一切对齐到 12 栏，span 决定占比，留白也落在栏线上。
03 · SIGNAL
One Accent
全场只有一种红，只用在「需要被看见」的地方。
12 栏网格感：grid-3 等分 + 顶部 hairline rule 分隔。每列结构一致（label / 标题 / 正文），差异在内容不在装饰。
不均匀，但不随意
PRIMARY UNIT
12col
最大的格子放最重的信息。bento 的非对称仍然吸附在 6 列底栅上。
bento = 蓄意的非对称：col-4/row-2 的主格 + 三个 span-2，仍吸附在 6 列底栅。唯一的红落在最后一格，作为视线终点。
从「凭手感」到「凭网格」
BEFORE
每个间距都是 magic number
37px、22px、随手敲的对齐 · 改版即返工 · 没人说得清规则
AFTER ✓
每个间距都来自字阶
8px 节律 · 一处改全场跟 · 新人当天就能对齐
对比页：用一条共享黑边把两栏锁进同一矩形（瑞士网格感）。唯一的红落在右栏 AFTER 的 tag 与分隔线上，引导结论。
SHIPPED, NOT A SPEC
规则只有进了构建才算数
tokens build --target=web
generate css variables
lint contrast (WCAG AA)
snapshot 4 breakpoints
terminal 在瑞士主题里依然成立——它本身就是无圆角、深底的「已上线」证据。强调系统不是 PPT，是构建产物。
先定网格，
再谈风格。
— 把这套 token 拿走，从你最乱的那一页开始。
收束：巨标题陈述结论，单一红色作为句读。一条 2px 黑线收尾，不加任何装饰——瑞士的克制本身就是结尾。