这套系统的所有决策都可以追溯回这六条原则。新增组件时优先回到原则做判断。
背景米白 #f5f2ec，主文字深海军蓝 #1a2b4a。编辑刊物和"科技演示"的分水岭。
#e84f1f 是唯一品牌色，只用于 CTA、logo、强调。粉彩色块只用于内容卡片身份。
Fraunces 衬线做标题，bold + italic 组合。Inter 做正文。不用"现代 sans 标题"。
所有色块卡片底层都有 24px 1px 方格线，模拟"绘图本/笔记本"质感。这是核心视觉签名。
不规整的色块网格——大小不一的卡片自由拼接。不要整齐对仗的栅格。
pill 按钮 + 1.4 秒对角光扫。从奢华手表/Fintech 借鉴的"微奢华"细节。
深海军蓝主文字 + 米白主背景 + 暖橙唯一品牌色 + 8 个粉彩色块（仅用于 bento 卡片）。
Fraunces 衬线（变量字体，opsz 144 大字版）做标题，italic + bold 是核心 idiom。Inter 几何无衬线做正文。JetBrains Mono 做编号 / 标签 / code。
所有间距都是 4 或 8 的倍数。section 之间用 96–128px，组件内部用 8–48px。
| Token | Value | 用法 |
|---|---|---|
| --sp-1 | 4px | 极紧密元素（icon padding、行内 gap） |
| --sp-2 | 8px | 按钮内 gap、标签间距 |
| --sp-3 | 12px | 列表项间距 |
| --sp-4 | 16px | 卡片内容间距、bento gap |
| --sp-6 | 24px | 章节内 row 间距 |
| --sp-8 | 32px | 大组件 padding、容器 padding |
| --sp-10 ★ | 40px | bento card padding |
| --sp-12 | 48px | section head 与内容间距 |
| --sp-16 | 64px | section head bottom |
| --sp-20 | 80px | section padding（tight） |
| --sp-28 ★ | 112px | section padding（standard） |
| --sp-32 | 128px | footer 顶部 / hero 大停顿 |
五档圆角。Bento 大卡 28px 是核心标志，按钮全 pill 9999px，表单 10px。
这套系统的可复用单元。每个组件都有明确的语义、状态与适用场景。
通过 data-bento 切换 10 种身份色：cream / mint / rose / sky / lilac / butter / blush / sand / coral / accent / dark
eyebrow + title + sub + foot 四件套
用大数字 + 单位的"统计"卡片
深底 + 米白文字，用于强调
把 感性 翻译成 结构。 — METHOD DS
克制的动画哲学——一个奢华细节（按钮光扫 1.4 秒），其余靠浮动、滚动渐显、horizontal marquee 制造氛围。
animation: marquee 38s linear infinite
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-in { opacity: 1; transform: translateY(0); transition: 700ms ease-out; }
通过 IntersectionObserver 触发。stagger 子项延迟 80ms 递增。
::before 伪元素，linear-gradient transparent → rgba(255,255,255,0.18) → transparent，
left: -100% → 100%，transition 1.4s ease。
5.5–7s 的轻微 ±8px 上下浮动
移动鼠标——背景应该有一个柔和的橙色光晕跟随。500×500px radial-gradient，mix-blend-mode: multiply。
这套系统支持的标准页面模式。新增方法论子页时，直接套用。
| 模式 | 结构 | 典型用途 |
|---|---|---|
| 方法论详情页 | Hero(grid-bg) + Marquee + Why(3 bento) + Canvas(9 bento) + Modules(deep list) + Pricing + Process + Prompt(dark) | 每个方法论子页 |
| 体系总页 | Hero(大字) + Marquee + Methods(bento grid) + Philosophy(3 bento) + Author | index.html |
| 设计系统文档 | Hero + Principles + Color + Type + Spacing + Radius + Components + Animations + Patterns | 当前页 |
| 案例研究 | Hero + Context + Process + Outcome bento + Lessons + Related | 未来实战案例 |