00 原则 01 色彩 02 字体 03 间距 04 表面 05 动效 06 组件 07 长文 08 编辑 09 布局 10 无障碍 11 状态 12 图标 13 层级 14 守则
Method DS · v4.5 · 设计系统 Live

Editorial Atelier

全站统一的设计语言:深海军墨 + 单一橙红 accent + 八粉彩色块 + 网格纸纹理 + 胶片颗粒 + Instrument Serif 衬线。这一页本身就是它的"活样品"——所有标本都由现网 CSS 实时渲染,是全站组件的单一真相源。

1品牌色 · Accent
8粉彩色块 · Pastels
22核心组件 · Components
3字体分工 · Type
2明暗主题 · Themes
00 · PRINCIPLES · 原则

四条取舍,先于一切样式

Token 与组件只是结果。真正决定这套系统长相的,是下面四条优先级——当两个方案冲突时,按它们裁决。

01

编辑体克制

像一本认真排的刊物,不像一个 SaaS 落地页。衬线大字承担表达,正文安静退后;宁可少一个装饰,也不让页面喧哗。一致性永远高于"再来点创意"。

02

纸感与方格

米白底、隐约方格纸、胶片颗粒——给数字界面以印刷品的材质与温度。深度靠"上高光 + 远柔影 + 纹理"叠出,不靠堆叠黑色阴影。

03

颜色是标点

橙红是全站唯一品牌色,稀缺即贵:只用来点睛 Hero、LIVE、强调字。八粉彩是"做旧"的、降饱和的拼贴色块,负责区分而非抢戏。墨与米白是真正的主角。

04

动效有意图

每个动效都为"引导注意力 / 反馈状态"服务,不为炫技。出场用编辑体缓动先快后缓;尊重系统"减少动态"偏好,关闭即一切归静。

01 · COLOR · 色彩

墨 · 橙 · 八粉彩

不用纯黑也不用纯白:墨是深海军蓝,底是暖纸米色。橙红是唯一品牌色,v4.5 收成更沉的砖橙,用来点睛而非铺陈。八个粉彩做拼贴色块,与暖底同一色温——整体冷暖统一,是配色耐看的关键。

Ink · 墨(深海军)
--ink
#1a2b4a
--ink-80
主正文
--ink-60
次要
--ink-40
弱化
--ink-15
描边
Accent · 品牌橙红 + 中性底
--accent
#e84f1f
--accent-deep
#c93e16
--accent-pale
#fae5d8
--cream
#f5f2ec
--cream-warm
#ebe5d3
--dark
#0f1a30
Pastels · 八粉彩(v4.5 · 较饱和暖粉彩 · 与暖底同色温)
coral
#f5a98e
rose
#f5c8c0
butter
#f5e89c
sand
#ead9b5
mint
#b5e4a0
sky
#b8d5e8
lilac
#c4b6e8
blush
#f5d5de
Functional · 功能语义色(v4.4.1 调和 · 与粉彩同族)
--success
鼠尾草绿
--warning
赭黄
--danger
陶土砖红
--info
灰蓝
success-pale
callout 底
warning-pale
callout 底
danger-pale
callout 底
info-pale
callout 底
主角墨 + 米白承担 90% 画面。先用中性,再考虑加色。
橙是标点accent 只点睛:Hero、LIVE 状态、强调字、主 CTA。一屏别超过两三处。
粉彩是区分八粉彩做拼贴 Bento,靠色相区分模块,不靠它表达情绪。
02 · TYPE · 字体

三体分工 · 衬线 / 黑体 / 等宽

标题用 Instrument Serif(中文回退 PingFang),正文用 Inter,标签与代码用 JetBrains Mono。字阶锚定 1.25 模数(Major Third)。

Type scale · 字阶标本(clamp 流体)
displayclamp 58–116 · serif
AI 产品创新
h1clamp 40–72 · serif
认知工程飞轮
h2clamp 34–56 · serif
产品能力就是战略能力
h3clamp 25–35 · serif
从功能,到连接,到认知
lede21 · sans
把感性的产品直觉,翻译成可被对齐、可被验证、可被迭代的系统逻辑。
body17 · sans
AI 产品的本质是认知工程:产品从工具载体,升级为认知系统。正文用 Inter,行距 1.75,中文不加字距。
mono12 · mono
Method · 01 · LIVE
Drop-cap · 下沉首字(编辑开篇)

知工程,是这套体系的第一性原理。当模型把"理解世界"变成可调用的能力,产品的设计对象就从功能流程,变成了一套认知系统的运作逻辑——这就是 .dropcap 想烘托的那种"正文有了开篇"的仪式感。

「AI」用黑体:衬线大标题里的拉丁缩写(AI / dPMF…)一律用 .en 切到 Inter 粗体、略缩小,AI 不跟随衬线——避免 Instrument Serif 下"AI"过窄、与中文方块字不协调。正文链接默认 .prose a 细下划线,hover 转橙加粗。

03 · SPACE · 间距与版心

8px 基准 · 方格的尺子

所有间距都落在 8px 基准网格上(--sp-1=4 起步),与方格纸纹理的 24px 网格同源。版心四档宽度,按内容密度选用。

Spacing scale · 间距尺
--sp-14
--sp-28
--sp-312
--sp-416
--sp-624
--sp-832
--sp-1248
--sp-1664
--sp-2496
--sp-32128
Container · 版心宽度
--container · 1320 · 主栅格
--container-content · 1180 · 内容
--container-narrow · 760 · 窄栏
--container-text · 640 · 正文行宽
Radius · 圆角
--r-chip8px
--r-card20px
--r-bento28px
--r-pill9999px
04 · SURFACE · 表面与抬升

两层纹理 · 四档深度

材质是这套系统的签名:方格纸 + 胶片颗粒。深度只用四档阴影 token,靠"上高光 + 远柔影"做出浮起感,绝不堆黑。

Elevation · 阴影四档
--shadow-soft分隔 · 1px
--shadow-card静置卡片
--shadow-raisedhover 抬升
--shadow-pop弹层 · modal
Texture · 两层纹理 + 光晕
方格纸 · grid-bg / 24px
胶片颗粒 · --grain-opacity
橙色光晕 · --accent-glow

胶片颗粒(v4.3 新增):全站 body::after 叠一层极淡噪点,给数字界面以印刷品手感;强度由单一 token --grain-opacity 控制(亮色 0.045 / 暗色 0.03),设 0 即全站关闭。亮色用 multiply、暗色用 screen 混合。

05 · MOTION · 动效

四条缓动曲线

动效服务于注意力与反馈。四条缓动覆盖通用交互、出场、回弹与编辑体出场;时长分四档。已接入 prefers-reduced-motion,系统减少动态时一切归静。

--ease
cubic-bezier(.4,0,.2,1)
--ease-out
cubic-bezier(.22,.61,.36,1)
--ease-bounce
cubic-bezier(.34,1.56,.64,1)
--ease-editorial
cubic-bezier(.16,1,.3,1)
Duration · 时长
token用途
--t-fast150ms即时反馈 · 颜色
--t-base220mshover / 交互
--t-med350ms卡片浮起
--t-sweep1400ms按钮光扫
reveal750ms进场淡入 · scale
Hover it · 实时感受

把光标移到按钮上:1.4s 的高光从左扫到右,箭头右移 3px。卡片 hover 用 350ms 抬到 --shadow-raised

06 · COMPONENTS · 组件

按钮 · 标签 · 表单 · Bento 卡片

Buttons · 全 pill + 1.4s 光扫
Chips & Eyebrow
默认 Chip Accent ● Dot Eyebrow · 小标题
Field · 表单输入(v4.3 新增)
行内输入组 · field-group(如口令框)
Bento Card · 核心组件(11 配色 · 网格纹理 · 受光高光)
data-bento="coral"

珊瑚陶土

暖色,常用于 LIVE / 主推卡片。

data-bento="sky"

灰蓝天空

冷色,理性、信息密度高的内容。

data-bento="dark"

深色强调

深海军底 + 暖白字,hover 带橙晕。

data-bento="butter"

燕麦

温暖、轻快的工具卡。

data-bento="lilac"

灰紫丁香

柔和的并列模块。

data-bento="accent"

满橙徽标

最强点睛,作者/品牌位专用。

Stats · 数字
03
已发布 · Live
05
规划中
2026
最近更新
持续生长
Module Row · 编号长卡
01

模型驱动,而非经验驱动

MODEL-DRIVEN

AI 产品的能力边界由模型能力 × 数据结构共同决定,产品经理从"需求翻译者"变成"能力设计者"。

Quote · 大字引用(悬挂引号)

AI 产品的本质,是认知工程。」支柱一 · 回答"是什么"

Codeblock · 提示词块(点 Copy 触发 Toast)
PROMPT · 认知工程
你是一名认知工程师。请把下面这段感性的产品直觉,
翻译成可被对齐、可被验证、可被迭代的系统逻辑:
——————
{在此粘贴你的产品直觉}
07 · PROSE · 长文排版

把原生 HTML 裹成刊物

长文方法论是这个站点的主体。用 <article class="prose"> 包住正文,标题/段落/列表/引用/代码/图说自动获得编辑体的垂直节奏,无需逐元素加 class。下面整张"纸"都由 .prose 渲染。

知工程,是这套体系的第一性原理。当模型把"理解世界"变成可被调用的能力,产品的设计对象,就从功能流程,变成了一套认知系统的运作逻辑。

在传统范式里,产品经理是需求的翻译者:把用户的诉求,翻译成功能规格。但当能力来自模型,边界由"模型能力 × 数据结构"共同决定,产品经理就被推到了一个新位置——能力的设计者1这正是"模型驱动,而非经验驱动"在组织层面的真实后果。这不是职责的微调,而是工作对象的整体迁移。

从功能,到连接,到认知

三个时代,三种产品的本质。每一次跃迁,都不是上一代的增强版,而是设计对象的换轨:

  • 功能时代:产品是工具,价值在"能不能做到"。
  • 连接时代:产品是网络,价值在"连接了谁"。
  • 认知时代:产品是认知系统,价值在"理解到什么程度"。
产品能力,就是战略能力。当能力可被设计,竞争就从"做什么功能",前移到"设计什么认知"。 支柱二 · 回答"凭什么"

一个可被验证的回路

把感性的产品直觉,翻译成可被对齐、可被验证、可被迭代的系统逻辑——这就是认知工程飞轮要解决的事。它要求我们像写 prompt 一样写产品:明确角色、给定约束、定义评估。

关键判断

当一个方向同时满足"模型在变强 + 数据在累积 + 认知可被结构化",它大概率值得做——三者缺一,慎入。

AI 产品的本质,是认知工程

这并非把"AI"当成一个功能模块塞进既有产品,而是承认:产品的内核,已经从一套确定的流程,变成一套会学习、会推理、会犯错的认知系统。设计它,需要新的语言。

功能连接认知
图 1 · 三代产品本质的换轨:每一步都迁移了设计对象,而非叠加功能。

下面是三代产品的对照,.prose table 自动套用编辑体表格样式:

时代本质价值锚点
功能工具能否做到
连接网络连接了谁
认知认知系统理解多深
边注用法

.prose 换成 .prose.prose--sidenotes,里面的 .sidenote 在宽屏会浮到右侧页边(看上面第一段的右栏),窄屏自动回落为内联块。

08 · EDITORIAL · 编辑组件

注记 · 徽章 · 落款

长文里反复要用的零件:四种 callout 注记框、状态徽章、作者署名。语义色都走 v4.4 新增的 --*-pale token,自动适配明暗。

Callout · 注记 / 提示 / 警示 / 关键
Badge · 状态徽章
已发布 · Live 进行中 · WIP 规划中 · Planned 中性 · Default
Byline · 作者署名 / 落款
09 · LAYOUT · 布局

页面骨架 · 栅格 · 三种模板

一套页面怎么搭:统一外壳(导航 → 面包屑 → Hero → 交替章节 → 页脚)+ 12 列 Bento 栅格 + 四档版心 + 标准断点。L1/L2/L3 三种模板对应 IA 的页面层级。

Page anatomy · 页面骨架(自上而下)
TopNav · 顶部导航sticky · 全站同一套 · z 50
Breadcrumb · 面包屑仅 L2 / L3 · 首页 / 方法论 / …
Herosection--hero + grid-bg · eyebrow + 大标题 + lede
Section(cream)section-head + 内容 · padding sp-28
Section(cream-warm)明暗交替,制造节奏
Footer · 页脚四栏链接 + 大字 wordmark
Bento grid · 12 列拼贴栅格
span 6
span 6
span 4
span 4
span 4
span 8
span 4

12 列基栅,gap --sp-4。常用跨度 span 4 / 6 / 8 / 12;卡片最小高 280(--tall 360 / --xl 460)。版心四档见「03 间距」:1320 / 1180 / 760 / 640。

Breakpoints · 标准断点(统一这 4 档)
断点语义主要变化
≤ 600phone容器内边距收到 sp-5;多列全塌成 1 列
≤ 760phone-lg双列塌单列;prose 边注回落内联
≤ 900tablet顶部导航收起;Bento 12→6 列;process 4→2
≥ 1100desktopprose 边注浮右栏;pullquote 可浮动

已收敛 ✓:全站 @media 断点已统一为上面四档(旧漂移值 620 / 680 / 768 / 860 / 1024 已并入)。断点只能写字面值(CSS 变量不能用在 @media 里),靠"约定"统一,不靠 token。

Page templates · 三种页面模板(对应 IA 层级)
L1 · 板块入口
首页 / 总论 / 方法论…
TopNav(全局) Hero:eyebrow + display 大字 多个交替章节 Footer 四栏
L2 · 方法论详情
产品定义 / 价值评估…
TopNav(全局) 面包屑 + eyebrow「阶段·短码·状态」 H1 方法名 + 工具主体 飞轮 上一步 / 下一步 Footer
L3 · 子模块
九宫格 9 格…
TopNav(全局) 面包屑 + 父方法 · 模块号 H2 模块名 + 内容 ← 返回父方法

详见仓库 12_信息架构规范.md。统一外壳 = 全站一套导航 + 面包屑 + 页脚;L2 / L3 必有面包屑与返回。

10 · A11Y · 无障碍

默认就可达

无障碍是基线不是补丁:焦点可见、对比达标、尊重"减少动态"、键盘可操作、触达够大。

Focus ring · 焦点环(键盘可见)
:focus-visible → --shadow-focus(3px accent-glow)
Checklist · 无障碍清单
维度规范
焦点所有可交互元素 :focus-visible 显示橙环;不靠颜色单独表意
对比正文 ink-80 / 米白 ≥ AA;粉彩上正文用 ink-80;暗卡正文 0.86
减少动态prefers-reduced-motion → 关光扫 / reveal / 徽章脉冲
键盘Tab 顺序随 DOM;Esc 关 modal / panel;链接与按钮语义正确
触达尺寸主按钮 ≥ 44 高、图标钮 36、打分格 36;间距足够不误触
隐藏文本装饰图标 aria-hidden;纯视觉信息配 .sr-only
11 · STATES · 状态

六态 · 一致反馈

每个可交互元素覆盖六态:默认 / 悬停 / 按下 / 聚焦 / 禁用 / 加载。反馈方式统一,时长走 --t-base

State matrix · 状态矩阵
元素hoveractive / focusdisabled / loading
Button1.4s 光扫 + 箭头右移 / 底色转深focus 橙环透明度降、不可点 / 文案转「…中」
Field描边转深focus 橙描边 + 环底灰禁输入 / error 红 · success 绿
Bento card抬升 --shadow-raised + 网格略显
Chip / Badge—(badge--live 脉冲)
Live · 按钮各态
默认 悬停我
12 · ICON · 图标

线性 · 随字成色

统一线性图标:24×24 画布、描边 2、圆角端点、currentColor 跟随文字色、不堆多余填充。UI 中渲染 16–20px。

moon
sun
arrow
check
external
plus
属性规范
viewBox0 0 24 24
stroke-width2 · round cap / join
colorcurrentColor(继承文字色,勿写死)
render size16 / 18 / 20px in UI

SVG 里给颜色用 currentColor 或写在 style=""(presentation 属性里的 var() 不解析,会变黑、暗色不可见)。

13 · LAYERING · 层级

谁压在谁上面

z-index 只走 token 档位,杜绝「z-index: 9999」打架。自上而下:Toast → 弹层 → 颗粒 → 顶栏 → 锚点导航 → 内容。

Toast--z-toast · 300
Modal / Panel--z-modal · 200
胶片颗粒 grainbody::after · 100
顶部导航 TopNav--z-sticky · 50
锚点导航 ds-toc40
页面内容--z-base · 1

grain 在 100:盖住常规内容与导航(极淡、pointer-events:none),但压在 modal / toast 之下,弹层始终清晰。新增浮层一律选 token 档,不自创数值。

14 · GUARDRAILS · 守则

该做 · 别做

把四条原则落到具体取舍上。改样式之前对照一遍,避免把这套系统拉回到"通用 SaaS 落地页"。

✓ 该做 · Do
  • 橙红留给点睛:Hero、LIVE、强调字、主 CTA,一屏两三处足矣。
  • 大标题、引用一律 Instrument Serif;正文、UI 一律 Inter。
  • 标题里的 AI / dPMF.en 切黑体。
  • 间距只取 --sp-* 档位;圆角只取四档 token。
  • 深度用阴影四档 token;颜色、描边一律走语义 token,自动适配暗色。
  • 长文一律用 .prose 包裹,靠它统一节奏,别逐元素手贴 class。
✕ 别做 · Don't
  • 别把橙红当背景大面积铺;它一铺就廉价。
  • 别给中文加斜体、别让"AI"跟随衬线(会过窄、不协调)。
  • 别引入第二种品牌色,或把八粉彩调回高饱和荧光。
  • 别写死 hex / 任意像素值;别堆叠多层黑色阴影找深度。
  • 别在活跃页面引 _archive/ 的旧 CSS,或混引两套体系。
  • 别让正文通栏满宽——失去刊物的"栏"。
  • callout 注记别滥用:一节一两个就够,满屏框等于没有重点。
已复制到剪贴板