AirShelf/电商AI平台/DESIGN_SPEC_V2.md

流·Studio 设计规范 · V2.1

版本: V2.1(2026-05-15) 风格代号: Restraint(克制)· Firecrawl-aligned 适用范围: 流·Studio 全产品(工作台 / 项目 / 商品库 / 流水线 / 资产库 / 编辑器 / 账户) V2.1 更新: 色彩系统全面对齐 Firecrawl 实测——冷灰底色(放弃米白)· 主橙 #FA5D19(从 #E55B26 调亮)· 20 档 black-alpha(从 11 档扩展)· 5 色 accent 多彩点(新增)· accent-black 替代 ink。保留 V2 所有结构性决策(8 px 圆角、inside-border、装订线、mono 装饰)。 与 V2 关系: V2.1 兼容 V2 的所有 token 命名(--ink --bg --card --green --red 等保留为 legacy 别名),代码层无需重写。

---

0. 变更速查

V2 → V2.1(本次 · 色彩系统对齐 Firecrawl)

#	维度	V2	V2.1
C1	底色	#FAF9F5 暖米白	#f9f9f9 冷灰(--background-base)
C2	主橙	#E55B26 砖红	#FA5D19 更红更饱和
C3	文字基色	--ink: #15140F	--accent-black: #262626(更柔和)· --ink 作 legacy 别名
C4	Alpha 阶梯	11 档 --ink-alpha-*	20 档 --black-alpha-*(1/2/3/4/5/6/7/8/10/12/16/20/24/32/40/48/56/64/72/88)
C5	Alpha base	全部用 rgba(0,0,0,...)	32% 起换 rgba(38,38,38,...)(避免叠出"灰中带蓝")
C6	状态色	--green #3F6B3F 深森林绿 / --red #B33A2A 暗砖红	--accent-forest #42c366 / --accent-crimson #eb3424(信号灯感)
C7	Accent 多彩	仅橙+绿+红	新增 5 色 amethyst/bluetron/crimson/forest/honey(仅用于语义信号)
C8	边框	#EFEBE0 暖色	#ededed 冷灰(无色相)
C9	Selection	未定义	background: var(--heat-20) + color: var(--heat)(Firecrawl 签名)

V1 → V2(上次 · 结构性变更,保留)

#	维度	V1	V2	决策类型
Δ1	圆角	大容器 0 / 按钮 9 / pill 999	大容器 8 / 按钮 8 / pill 999 / dot 999	变更
Δ2	mono [ STATUS ]	大量使用	保留(品牌签名)	保留
Δ3	字体	Inter	Inter Tight + 字重 500 替代 450(免费)	变更(轻)
Δ4	边框	真 border:1px	::before inside-border(hover 不抖动)	变更
Δ5	主容器左右垂直边	无	加 border-x + 四角准星(图纸装订线)	新增
Δ6	主 CTA 阴影	全场无	4 层橙色发光	变更(小幅)

---

1. 设计哲学

一句话: 一台精密设备的工作面板。

三条铁律:

1. 克制大于装饰 — 留白 > 容器 > 内容,大量空气感。
2. 单色锚点 — 全场只有一种 accent(橙色),且只用于 CTA / 关键状态 / 强调单词。
3. 结构清晰可见 — 用 1 px 边框 + 8 px 圆角 + 四角准星 + 容器纵向装订线 + mono [ ] 标签暴露"图纸感",而非阴影/渐变隐藏结构。

避免的"AI 味":

• 渐变铺面 / 玻璃拟态 / 彩色阴影
• 多色 emoji 图标
• 圆角无差别(全部 8px / 16px 的 SaaS 模板感)
• 卡片浮在背景上的"贴纸感"
• 装饰盖过内容(场记板 / 霓虹 / 丝绒幕布)

新增禁令:

• ❌ 0 px 硬切角的卡片 —— V2 起所有结构性容器都用 8 px 圆角
• ❌ 变深 hue 的 hover 色 —— 橙色 hover 用 alpha 阶梯,不用更深的橙

---

2. 色彩系统(V2.1 · 对齐 Firecrawl)

2.1 表面 / 背景(冷灰 · 无色相)

Token	Hex	用途
--background-base	#f9f9f9	页面底色 · 冷灰
--background-lighter	#fbfbfb	容器底色 / hover 浅底
--surface	#ffffff	卡片 / 容器表面
--surface-raised	#ffffff	浮层 / Modal 表面

Legacy 别名(V2 → V2.1): --bg = var(--background-base) / --bg-soft = var(--background-lighter) / --card = var(--surface)。组件 CSS 不用改。

2.2 边框(冷灰 · 3 档差距极小)

Token	Hex	用途
--border-faint	#ededed	默认 1 px 边框 ★ 80% 场景
--border-muted	#e8e8e8	略深
--border-loud	#e6e6e6	最深(强分隔)

设计意图: 3 档之间只差 1–2 个色阶,肉眼几乎看不出。用语义(faint/muted/loud)选择,不用视觉对比选择。 这是 Firecrawl 的细节哲学。

2.3 Heat · 主橙(单 hue + 8 档 alpha)

Token	Value	用途
--heat	#fa5d19	主橙 100% · CTA / 链接 ★
--heat-90	rgba(250,93,25,.90)	hover(替代 V1 #D04E1F)
--heat-40	rgba(250,93,25,.40)	focus ring / 边框次级
--heat-20	rgba(250,93,25,.20)	pill 边框 / selection 底色 ★
--heat-16	rgba(250,93,25,.16)	hover 软底
--heat-12	rgba(250,93,25,.12)	tint 底(active nav / icon-box)
--heat-8	rgba(250,93,25,.08)
--heat-4	rgba(250,93,25,.04)	极弱底

从 V2 #E55B26 调亮到 V2.1 #FA5D19 —— 更红更饱和,与 Firecrawl 100% 实测一致。hover 永远不换 hue,只换 alpha。

2.4 Accent · 5 色信号(新增)

作用: 仅用于语义信号——代码高亮、图标色、状态色源。禁止做大面积背景或装饰。全场仍只有 1 个 accent(橙)。

Token	Hex	用途
--accent-black	#262626	主前景(替代 V2 --ink #15140F,更柔和)
--accent-white	#ffffff	反色文字(在橙底 / 黑底上)
--accent-amethyst	#9061ff	紫 · 代码 property
--accent-bluetron	#2a6dfb	蓝 · info
--accent-crimson	#eb3424	红 · error / 失败 ★
--accent-forest	#42c366	绿 · success / 成功 ★
--accent-honey	#ecb730	黄 · warning

Legacy 别名: --ink = var(--accent-black) / --green = var(--accent-forest) / --red = var(--accent-crimson)。

2.5 Black-Alpha 阶梯(20 档 · 核心工具尺)

替代 V2 的 11 档 ink-alpha。这是日常用得最多的 token。0–24% 用 rgba(0,0,0,...);32% 起换 rgba(38,38,38,...)(=--accent-black 作底),避免叠出"灰中带蓝"——Firecrawl 实测细节。

Token	Light 值	Dark 值	典型用途
--black-alpha-1	rgba(0,0,0,.01)	rgba(255,255,255,.01)	极弱底
--black-alpha-2	rgba(0,0,0,.02)	rgba(255,255,255,.02)
--black-alpha-3	rgba(0,0,0,.03)	rgba(255,255,255,.03)
--black-alpha-4	rgba(0,0,0,.04)	rgba(255,255,255,.04)	hover bg ★
--black-alpha-5	rgba(0,0,0,.05)	rgba(255,255,255,.05)	tab 间分隔条
--black-alpha-6	rgba(0,0,0,.06)	rgba(255,255,255,.06)
--black-alpha-7	rgba(0,0,0,.07)	rgba(255,255,255,.07)	active bg ★
--black-alpha-8	rgba(0,0,0,.08)	rgba(255,255,255,.08)
--black-alpha-10	rgba(0,0,0,.10)	rgba(255,255,255,.10)
--black-alpha-12	rgba(0,0,0,.12)	rgba(255,255,255,.12)	inside-border ★
--black-alpha-16	rgba(0,0,0,.16)	rgba(255,255,255,.16)
--black-alpha-20	rgba(0,0,0,.20)	rgba(255,255,255,.20)
--black-alpha-24	rgba(0,0,0,.24)	rgba(255,255,255,.24)	input hover 边框
--black-alpha-32	rgba(38,38,38,.32)	rgba(255,255,255,.32)	← base 切换 → ↓
--black-alpha-40	rgba(38,38,38,.40)	rgba(255,255,255,.40)
--black-alpha-48	rgba(38,38,38,.48)	rgba(255,255,255,.48)	占位字色 ★
--black-alpha-56	rgba(38,38,38,.56)	rgba(255,255,255,.56)	次级文字 / 未选中 Tab ★
--black-alpha-64	rgba(38,38,38,.64)	rgba(255,255,255,.64)	描述文字
--black-alpha-72	rgba(38,38,38,.72)	rgba(255,255,255,.72)	强次级
--black-alpha-88	rgba(38,38,38,.88)	rgba(255,255,255,.88)	近主前景

V2 → V2.1 兼容映射(legacy 别名,组件 CSS 不必改):

• --ink-alpha-4 → --black-alpha-4
• --ink-alpha-7 → --black-alpha-7
• --ink-alpha-12 → --black-alpha-12
• --ink-alpha-24 → --black-alpha-24
• --ink-alpha-32 → --black-alpha-32
• --ink-alpha-48 → --black-alpha-48
• --ink-alpha-56 → --black-alpha-56
• --ink-alpha-64 → --black-alpha-64
• --ink-alpha-72 → --black-alpha-72
• --ink-alpha-88 → --black-alpha-88

2.6 状态色配套底/边

含义	主色	配套底色(8% alpha)	配套边框(20% alpha)
成功	--green (#42c366)	rgba(66,195,102,.08)	rgba(66,195,102,.20)
失败	--red (#eb3424)	rgba(235,52,36,.08)	rgba(235,52,36,.20)
信息	--heat (#fa5d19)	--heat-12	--heat-20
警告	--accent-honey(#ecb730)	rgba(236,183,48,.08)	rgba(236,183,48,.20)

2.7 Selection · 文字选中色(Firecrawl 签名)

::selection {
  background: var(--heat-20);
  color: var(--heat);
}

选中任何文字时,底色 20% 橙、文字 100% 橙。这是 Firecrawl 易被忽略但整站感知到位的细节。

---

3. 字体系统(V2.1 · 中英混排策略)

3.1 字体族 · Inter + 阿里巴巴普惠体

用途	字体声明
正文 / UI	'Inter', 'Alibaba PuHuiTi', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif
纯英文场景	'Inter', system-ui, sans-serif(--font-inter)· 用于"Ctrl K"等强制纯英文徽标
Mono 装饰	'JetBrains Mono', 'Geist Mono', ui-monospace, monospace

核心策略 · 浏览器字符级 fallthrough:

Inter ────────→ 英文 / 数字 / 符号(命中)
   │
   ↓ (CJK 不命中,继续找)
Alibaba PuHuiTi ──→ 中文(命中)
   │
   ↓ (字体未加载到)
PingFang SC / Microsoft YaHei ──→ 系统中文兜底

浏览器对每个字符逐个查找 font-family 链,Inter 不含 CJK 字形 → 中文字符自动跳到下一个候选。这是中英混排的标准做法,不需要 JS、不会字重错位。

V2 → V2.1 → V2.1 变更轨迹:

• V2: Inter Tight → 中文走系统 fallback → 字重错位
• V2.1 (前一版): 单一 Alibaba PuHuiTi → 英文用普惠体英文字形 → 英文略圆,缺乏 Inter 的"科技感"
• V2.1 (本版) : Inter(英)+ Alibaba PuHuiTi(中)双字体协作 → 各自处理最擅长的语种

为什么这个组合最优:

• Inter:Vercel / Linear / Stripe 御用,工程产品默认审美。专门给屏幕 UI 优化,数字字形漂亮(同宽)。中文不擅长。
• Alibaba PuHuiTi:阿里出品,免费商用,为中英混排专门设计的笔画粗细配比(45/55/65/85 多档),中文笔画与 Inter 视觉重量贴近。专门给中文优化。
• 两者结合:英文有 Inter 的锐利,中文有普惠体的清晰,字重之间衔接自然。

Inter 载入:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Alibaba PuHuiTi 载入:

@font-face {
  font-family: 'Alibaba PuHuiTi';
  font-weight: 400;  /* 55 Regular */
  src: local('Alibaba PuHuiTi 3.0'),
       local('AlibabaPuHuiTi-3-55-Regular'),
       url('https://chinese-fonts-cdn.deno.dev/packages/alibaba_puhuiti/dist/AlibabaPuHuiTi-3-55-Regular/AlibabaPuHuiTi-3-55-Regular.woff2') format('woff2');
}
/* 同写法处理 500 Medium / 600 SemiBold / 700 Bold */

优先级: 本地安装(设计师机器一般装了)→ CDN 加载 → 系统中文兜底。永远不会出现假字或方框。

特殊场景 · 强制纯英文用 --font-inter:

某些场景必须确保用 Inter(比如 "Ctrl K" 这种快捷键徽标想要 Inter Bold 的紧凑感),直接用专属变量:

.search-wrap .k {
  font-family: var(--font-inter);  /* 跳过 fallback 链,锁定 Inter */
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

Mono 字体保留 JetBrains Mono——用作装饰元素 [ 200 OK ] // 05.14 /v2,不参与中文。

3.2 字号 / 字重 / 行高(V2.1 整体放大半档,行高提升)

角色	字号	字重	字距	行高	用途
H1 / Hero	36 px	500	-0.024em	1.2	页面主标题(从 V2 的 32 上调)
区块 H2	28 px	500	-0.02em	1.25	section-head 标题
KPI 数值	32 px	500	-0.02em	1.1	统计大数字
子区 H3	16 px	500	-0.01em	1.4	subsection 标题(从 15 上调)
卡片标题	14 px	500	normal	1.4	项目名 / 商品名(从 13.5 上调)
正文 body	14 px	400	normal	1.65	默认正文(行高从 1.5 上调)
区块描述	14 px	400	normal	1.75	section-head 描述
子区 lead	13 px	400	normal	1.8	子区下方说明
Label(按钮/Tab)	13 px	500	normal	1.4	按钮文字 / Tab
Pill 文字	11.5 px	500	normal	1.3	状态徽标
Mono 标签	11–11.5 px	400/500	0.04em	1.5	[ STATUS ]
Mono 散点	8.5 px	400	0.04em	1	背景 ASCII 装饰

字重档位仍仅 3 档:400 / 500 / 600。普惠体 500(Medium 65)的中文笔画比 Inter 500 重一些,整体不显单薄,因此 600 几乎不需要。

关键属性:

• 数值类必须加 font-variant-numeric: tabular-nums
• 标题用 negative letter-spacing(-0.01 ~ -0.024em)
• 正文行高 1.65–1.8(V2 是 1.5–1.7),中文字间留呼吸

---

4. 圆角规则 · V2 统一 8 px

核心原则(V2 改写):统一 8 px / 状态徽标完全圆 / 极少数微元素降到 4–6 px

元素类型	圆角值	例子
所有结构性容器(大卡片 / 区块)	8 px	.stats .list-card .shortcut .tip .modal
所有按钮 / 输入框	8 px	.btn .pill-btn .icon-btn .search
nav 项	8 px	nav a(V1 是 7,V2 统一)
缩略图 / 画面占位	8 px	.thumb .ic
头像 / 小色块	6 px	.av .team .p(可选 8)
Mono 标签 / badge / kbd	4 px	.kbd .badge
进度条段位	2 px	.prog span
Pill 状态徽标 / dot	999 px	.pill .dot(完全圆)

为什么改: Firecrawl 实测全站统一 8 px,工程感来自"准星 + 装订线 + mono 装饰",不是硬切角。0 圆角容器在小尺寸下会显得"卡顿、廉价",8 px 是同时兼顾"图纸感"和"成品感"的最佳值。

---

5. 边框 / 阴影 / 描边

5.1 边框策略 · V2 改为 inside-border

V2 改进: 默认边框用 ::before 伪元素绘制,而非真 border。原因:hover 时让 ::before 透明度 → 0 不会触发布局抖动。

通用工具类:

.inside-border {
  position: relative;
}
.inside-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-faint);
  border-radius: inherit;
  pointer-events: none;
  transition: opacity .2s ease, border-color .2s ease;
}
.inside-border:hover::before { opacity: 0; }

层级:

• 默认:var(--border-faint)
• 略深:var(--border-muted)(主分隔线)
• 最深:var(--border-loud)(强分隔,少用)
• 禁止 2px / 3px 实线
• 虚线仅用于 .tip 提示框:1px dashed var(--border-faint)

5.2 阴影 · V2 引入主 CTA 专属橙色发光

默认无阴影(V1 规则保留)。

新增例外 · 主 CTA 4 层橙色阴影(替代 V1 的"全场无"):

.btn-primary {
  box-shadow:
    inset 0 -4px 8px rgba(250, 93, 25, 0.20),  /* 内阴影:底部暗一点 = 立体 */
    0 1px 1px rgba(250, 93, 25, 0.12),
    0 2px 4px rgba(250, 93, 25, 0.10),
    0 0.5px 0.5px rgba(250, 93, 25, 0.16);
}
.btn-primary:hover {
  box-shadow:
    inset 0 -4px 8px rgba(250, 93, 25, 0.20),
    0 1px 1px rgba(250, 93, 25, 0.16),
    0 4px 8px rgba(250, 93, 25, 0.20),         /* 更高更亮 */
    0 0.5px 0.5px rgba(250, 93, 25, 0.16);
}

Toast 阴影(V1 保留):0 4px 20px rgba(21,20,15,0.06),白色调,不属于橙色发光体系。

5.3 容器四角"+"准星(签名元素 · V2 升级为 SVG)

V1 用字符 +(font-family JetBrains Mono);V2 升级为 SVG 路径,带圆弧内凹,质感更工程化:

<svg width="22" height="21" viewBox="0 0 22 21" fill="none" class="corner">
  <path d="M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z" fill="var(--border-muted)"/>
</svg>

位置: 容器四角,中心精确落在边框交点上(用 -translate-x-1/2 -translate-y-1/2)。

字符版本兼容: 简单卡片(如 modal 内嵌)仍可用 content: '+' 字符版,但全屏主容器必须用 SVG。

---

6. 主内容容器 · 新增装订线规则(V2 新增章节)

核心签名: 主工作区始终被两条 1 px 垂直边线包夹,配合四角准星,形成图纸装订线效果。

<div class="workbench-container">
  <svg class="corner top-left">...</svg>
  <svg class="corner top-right">...</svg>
  <svg class="corner bottom-left">...</svg>
  <svg class="corner bottom-right">...</svg>
  <!-- content -->
</div>

.workbench-container {
  max-width: 1480px;
  margin: 0 auto;
  border-left: 1px solid var(--border-faint);
  border-right: 1px solid var(--border-faint);
  position: relative;
  /* 上下边线不要,只左右 */
}
.workbench-container .corner {
  position: absolute;
  width: 22px; height: 21px;
}
.workbench-container .corner.top-left     { top: -10.5px; left: -11px; }
.workbench-container .corner.top-right    { top: -10.5px; right: -11px; }
.workbench-container .corner.bottom-left  { bottom: -10.5px; left: -11px; }
.workbench-container .corner.bottom-right { bottom: -10.5px; right: -11px; }

适用范围:工作台 / 项目列表页 / 商品库 / 流水线主区。编辑器全屏画布、Modal 内不必加。

---

7. 间距 / 栅格(V2.1 全局放大,Firecrawl-level 呼吸)

基础栅格: 4 px

常用间距阶梯: 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / 40 / 48 / 64 / 80 / 104

V2 → V2.1 变更: 全局垂直间距系统性放大 30%。原因:Alibaba PuHuiTi 中文笔画比 Inter 厚一档,字体密度提升 → 必须用更大的留白补偿,否则视觉拥挤。这就是为什么 Firecrawl 的间距看起来"奢侈"——它的字体也是出版级偏紧凑的 Suisse Intl,留白补偿到位。

主区块布局:

• 侧边栏宽度:248 px(无变)
• 主内容 padding:72 px 80 px 120 px(从 V2 的 48 56 56 上调)
• 内容最大宽度:1280 px(从 1480 收窄,留更多自然边距)
• 区块间垂直:104 px(section margin-bottom · 从 80 上调)
• 子区间垂直:64 px(subsection margin-bottom · 从 48 上调)
• 子区标题底距:22 px(h3 → 内容 · 从 16 上调)
• 卡片网格间距:24 px(主区) / 14 px(子区)
• 卡片内 padding:
  • 大卡片 / stats: 28 px 30 px(从 22 24 上调)
  • 列表行: 20 px 24 px(从 14 18 上调)
  • 快捷入口: 18 px 20 px(从 14 上调)
  • Modal 头/体: 24 px 28 px(从 20 24 上调)
  • Hero / section-head: 52 px 56 px / padding-bottom: 28 px

最重要的一条: 别再吝啬空气。当不确定 padding 是 16 还是 24 时,选 24。 当不确定 margin 是 48 还是 64 时,选 64。

间距/字号配对原则:

• 标题旁边的描述/副标:mb 10–14 px(紧凑组合)
• 标题下方的正文/列表:mb 22–28 px(分组组合)
• section 顶部 mono-tag → h2:mb 14 px
• h2 → section description:mb 12 px
• section-head 整体下方边线:pb 28 px / mb 44 px

---

8. 背景:制图纸网格(V1 保留)

8.1 三层叠加

图层 1(最上):主交叉点 "+" 准星 SVG  — 240×240 重复
图层 2(中间):子交叉点小圆点         — 60×60 重复
图层 3(最下):虚线网格                — 240×240 重复(stroke-dasharray: 1.5 4)

配色:

• "+" 准星:#B8B3A4(stroke 1 px)
• 小点:#CFCABB(r=0.9)
• 虚线:#E2DED2(stroke 1 px)

8.2 视觉聚焦遮罩

mask-image: radial-gradient(ellipse 95% 80% at 50% 35%, #000 25%, transparent 95%);

8.3 装饰散点(Mono ASCII)

主区域 4 个固定位置撒 ASCII 散点。字号 8.5 px / 颜色 --ink-alpha-12 / 透明度 0.8 / pointer-events: none。

8.4 边角 Mono 标签(品牌签名 · 保留)

主区域 4 个角各放一个 Mono 标签:

左上 [ 200 OK ]    右上 [ /v2 ]
左下 [ .MP4 · 9:16 ]    右下 [ STUDIO ]

字号 10.5 px / 颜色 --ink-alpha-48 / 字距 0.06em。

作用: 让页面看起来像「在某个开发环境 / 调试视图里」,而不是普通官网。Firecrawl 没有这个元素,这是流·Studio 的独特品牌资产。

---

9. Icon 系统(V2 强化章节,直接对应用户优化诉求 ①)

9.1 通用规则

• 格式: 一律 SVG inline,禁止 <img> 引图标
• 库选择: 推荐 Lucide(line icon,1.5–2 px stroke)或 Phosphor Regular
• stroke width: 统一 1.5 px(替代 V1 提到的 1.8)
• stroke linecap / linejoin: round
• 填充: 不填充(纯 line icon)
• 颜色: 通过 stroke="currentColor",继承父元素 color
• emoji 禁用: 任何场景都不允许彩色 emoji

9.2 尺寸阶梯

场景	尺寸	用途
Icon-S	14 px	内嵌 inline 文字旁
Icon-M(默认)	16 px	按钮内 / Tab / list 行
Icon-L	20 px	顶栏 / 快捷入口 / dropdown 触发器
Icon-XL	24 px	Modal 头部 / Toast / 空状态
Icon-Hero	36 px	空状态插画 / 大占位

9.3 颜色规则

场景	颜色
默认	--ink-alpha-56
Hover	--ink
Active / 选中	--heat
Disabled	--ink-alpha-12
在主 CTA 内	#FFFFFF

9.4 Icon-Box(快捷入口左侧的方块图标容器)

.icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;             /* V1 是 0,V2 改 8 */
  background: var(--heat-12);
  display: grid;
  place-items: center;
}
.icon-box svg { width: 16px; stroke: var(--heat); }

---

10. 组件规范 · 含完整状态(V2 大幅扩充,对应用户诉求 ②③④)

10.1 按钮(3 种类型 × 5 种状态 × 3 种尺寸)

类型:

类型	背景	文字	边框/描边
.btn 默认	--card 白	--ink	inside-border --ink-alpha-12
.btn-primary 主	--heat	#FFFFFF	无,靠橙色阴影分层
.btn-ghost 无框	transparent	--ink-alpha-56	无

尺寸:

尺寸	高度	padding	字号	icon 尺寸
-sm	28 px	0 10 px	12 px	14 px
默认	32 px	0 14 px	13 px	16 px
-lg	40 px	0 18 px	14 px	16 px

5 种状态(每种类型都要实现):

状态	.btn 默认	.btn-primary 主
Default	白底 / inside-border --ink-alpha-12	橙底 + 4 层橙阴影
Hover	底色 --ink-alpha-4 + 边框 opacity → 0	阴影第 3 层加亮(0 4px 8px rgba(229,91,38,0.20))
Active(按下)	底色 --ink-alpha-7 + scale(0.99)	scale(0.995) + 阴影 inset 加深
Focused	外层 2 px --heat-40 ring,offset 2 px	同左
Disabled	底 --bg-soft + 文字 --ink-alpha-12 + cursor: not-allowed + 无 hover	底 --heat-40 + 文字 #FFFFFF + 阴影消失 + cursor: not-allowed

过渡: 全场统一 transition: background-color 200ms, opacity 200ms, transform 100ms, box-shadow 100ms ease。

10.2 Pill(状态徽标)· 严格分级(对应用户诉求 ②)

V2 核心改进:Pill 分 3 级,同级别尺寸完全一致

级别	高度	padding	字号	圆角	dot 尺寸	用途
L1 大胶囊	28 px	0 12 px	13 px	999 px	8 px	项目状态 / 列表行
L2 中胶囊	22 px	0 10 px	11.5 px	999 px	6 px	默认 / 通用
L3 小胶囊	18 px	0 8 px	10.5 px	999 px	5 px	KPI 卡角标 / Mono 标签

色调(3 种,通用所有级别):

状态	文字色	底色	边框(20% alpha)
info	--heat	--heat-12	--heat-20
ok	--green	--green-bg(#3F6B3F14)	--green-bd(#3F6B3F33)
err	--red	--red-bg(#B33A2A14)	--red-bd(#B33A2A33)

每个 pill 前置圆点(.dot,直径同上表,颜色继承文字色)。

HTML 写法:

<span class="pill pill-l2 pill-info">
  <span class="dot"></span>
  生成中
</span>

10.3 输入框 / 搜索(V2.1 · 含 Firecrawl 式快捷键提示)

尺寸: 高 36 px(从 V2 的 32 上调,中文留白更舒展)/ padding 0 14 px / 字号 14 px / 圆角 8 px

状态:

状态	边框	底色
Default	inside-border --black-alpha-12	--card
Hover	inside-border --black-alpha-24	--card
Focused	inside-border --heat-40 + inset 1 px	--card
Error	inside-border --red	--red-bg
Disabled	inside-border --black-alpha-12	--black-alpha-5(从 --bg-soft 改 · 冷灰底太接近白,看不出禁用)

占位字色 --black-alpha-48,disabled 占位 --black-alpha-24。

带图标 / 快捷键搜索框(参考 Firecrawl 实测):

[🔍] [          搜索任意内容...          ] Ctrl K
 │                                          │
 │ 16px line icon, color: --black-alpha-56  │ mono · 11.5px · --black-alpha-48
 │ 左 14 px,**z-index: 2**(关键)          │ 右 14 px,**z-index: 2**
 │                                          │ 平铺文本(无边框盒),不用 kbd 样式

关键坑(已修):

1. 搜索 icon 看不见 —— <input> 的白色 bg 会盖住同级的 SVG icon。SVG 必须加 z-index: 2 才能抬到 input 之上。同理 Ctrl K 提示也要 z-index。
2. 快捷键不用 ⌘ —— JetBrains Mono webfont 不带 U+2318 ⌘ 字形,会显示成方框。Windows 用户体系用 "Ctrl K" 纯文本;Mac 端要显示 ⌘ 时用 SVG command 图标(见 §9.4)。
3. 快捷键提示不要用 kbd 边框盒 —— Firecrawl 是平铺灰色 mono 文本,无任何 border / bg / radius。显得克制,符合"克制大于装饰"。

10.4 KPI 统计行(.stats)

• 1 行 4 格,共用一个 inside-border 容器,圆角 8 px,无 gap
• 列与列之间用 border-right: 1px solid var(--border-faint) 分隔(最后一列去掉)
• 容器四角加 SVG "+" 准星
• 每格结构:label + L3 pill → 大数字(30 px) → delta / progress

10.5 列表行(.list-row)

[缩略图 54×70] [标题 + meta] [进度条 5 段] [L2 pill] [按钮 -sm]

• grid 5 列:54px 1fr auto auto auto
• 行高 padding 14 px 18 px
• 行间 1 px 分隔线(--border-faint),最后行去掉
• 整行 hover → --ink-alpha-4 底色
• 整行 active(键盘选中)→ --ink-alpha-7 底色
• 整行 disabled → opacity 0.5 + cursor: not-allowed

10.6 进度条段位(流水线 5 阶段专用)· V2.1 语义色重写

5 个 18×5 px 小段,3 px 间距,每段颜色映射真实业务状态(替代 V2 的"全灰已完成"——那样像项目失败):

状态	颜色	视觉处理
未开始	--black-alpha-8	极弱灰底 · 静态
已完成	--accent-forest(#42c366)	绿色 · 静态(替代 V2 灰色)
进行中	--heat(#fa5d19)	橙色 + 1.4s 脉动(opacity 1↔0.55 + scaleY 1↔0.7)· 区别于失败
失败	--accent-crimson(#eb3424)	红色 · 静态

圆角:每段 2 px。

关键设计:

• 绿/橙/红/灰 四色一眼可辨:已完成的绿色让"5/5 全绿"=完美交付,不会再有"全灰像失败了"的误读
• 橙色脉动动画 是区分"进行中"与"失败"的关键——红色永远静态,只有橙色会呼吸,潜意识上"动 = 在运行,静 = 出错"

.prog span.now {
  background: var(--heat);
  animation: prog-pulse 1.4s ease-in-out infinite;
}
@keyframes prog-pulse {
  0%,100% { opacity: 1;    transform: scaleY(1); }
  50%     { opacity: .55;  transform: scaleY(.7); }
}

10.7 快捷入口卡(.shortcut)

• 白底 / inside-border / 8 px 圆角(V1 是 0) / 14 px padding
• 左侧 32×32 橙色 tint 图标块(--heat-12 底 / 8 px 圆角 / 居中 16 px line icon)
• 右侧:标题(13 px 500)+ Mono 描述(11.5 px,--ink-alpha-48)
• Default → Hover → Active 完整状态:
  • Hover:底色 --ink-alpha-4 / 标题 underline-from-orange 1 px(可选)
  • Active(点击瞬间):scale(0.99)
  • Focused(键盘):2 px --heat-40 ring

10.8 提示框(.tip)

• 白底 / 1 px 虚线边框(dashed)/ 8 px 圆角
• 加粗标题独立一行 + 正文
• 内联代码用 .mono 类:橙色文字 + --heat-12 底 + 4 px 圆角

10.9 Toast

• 右下角 24 px 偏移 / 白底 / inside-border / 8 px 圆角
• 唯一允许的"白阴影":0 4px 20px rgba(21,20,15,0.06)
• 进入动画:translateX(420px → 0),缓动 cubic-bezier(0.34, 1.56, 0.64, 1),300 ms
• 自动消失:2400 ms
• 内容结构:左侧 24×24 橙色 tint 图标(--heat-12 底)+ 右侧标题 + Mono 副文本([ 200 OK ])

10.10 弹窗(Modal)

• 居中,460–480 px 宽,白底,8 px 圆角(V1 是 0)
• 四角加 SVG "+" 准星
• 遮罩 rgba(21,20,15,0.42),带 backdrop-filter: blur(8px)
• 进入动画:scale(0.96 → 1),250 ms 弹性缓动
• 三段结构:
  • Header: 36 px 橙色 tint 图标 + 标题 + Mono 副标
  • Body: 13 px / --ink-alpha-56 / 行高 1.7
  • Footer: 右对齐两个按钮(取消 + 主 CTA)
• ESC 关闭 / 点击遮罩关闭

10.11 Tab(双层)

主 Tab:

• 高 36 px / padding 0 14 px / 字号 13 px / 字重 500
• 未选中:--ink-alpha-56 文字
• 选中:--ink 文字 + 底部 2 px --heat 横线(整个 tab 宽度)
• Hover(未选中态):--ink-alpha-7 底色

副 Tab(过滤型):

• 高 28 px / padding 0 10 px / 字号 12 px
• 未选中:--ink-alpha-56 + 灰度 icon
• 选中:--ink + 多色 icon(grayscale: 0)
• Tab 之间用 1 px 高 12 px 的 --ink-alpha-7 竖条分隔(可选)

10.12 Dropdown / Select

• 触发器:同输入框样式(高 32 / 圆角 8 / inside-border)
• 右侧 16 px chevron-down icon,色 --ink-alpha-48,展开时旋转 180°
• 弹层:白底 / 8 px 圆角 / 0 4px 20px rgba(21,20,15,0.06) 阴影 / 唯一允许阴影场景之二
• 选项:高 32 / padding 0 12 / hover --ink-alpha-4/ 选中--heat-12+ 右侧 14 px checkmark--heat`
• 分组分隔:1 px --border-faint

10.13 Checkbox / Radio / Switch(V2.1 · 全部用 SVG icon)

通用原则: 所有 indicator 都用真 SVG(via background-image data URI 或 inline <svg>),禁止用 border-width / transform: rotate(45deg) 凑对勾——那种 CSS hack 在缩放/字体渲染下会变形。

Checkbox:

• 容器: 16×16 / 4 px 圆角 / inside-border --black-alpha-24(hover 时 → --black-alpha-48)
• Checked: --heat 底 · 居中 12×12 白色 SVG checkmark(<path d="M20 6 9 17l-5-5"/> · stroke 3 · linecap round)
• Indeterminate: --heat 底 · 居中 12×12 白色 SVG 横线(<path d="M5 12h14"/> · stroke 3)
• Disabled: 底 --black-alpha-5 + 边 --black-alpha-12 + icon 不渲染或半透明
• 实现方式: background-image: url("data:image/svg+xml,...") · background-size: 12px 12px · background-position: center · 这样不需要 ::after 凑出 icon,SVG 是真实的

Radio:

• 16×16 圆 / inside-border --black-alpha-24
• Checked:内嵌 8×8 --heat 实心圆(纯几何形状,不算 icon,用 ::after 即可)
• Disabled:底 --black-alpha-5

Switch:

• 容器 28×16 / 999 px 圆角
• Off:底 --black-alpha-12 / 圆球 #FFFFFF 12×12 + 1 px subtle shadow
• On:底 --heat / 圆球右移到 left: 14px
• 过渡:background 200 ms,圆球位移 left 200 ms

为什么不用字符 ✓ ✗ 这种 Unicode: 不同系统、不同字体对这些字符的字形支持差异巨大(⌘ 在 JetBrains Mono Web 字体里就是缺字形 → 显示成方框)。SVG 是唯一可靠的解。

---

11. 微观细节(品牌签名 · V1 保留)

11.1 标签全部包方括号

[ 200 OK ] [ .MP4 · 9:16 ] [ /v2 ] [ /sidebar collapse ]

11.2 时间戳像代码注释

// 05.14 · 周五

11.3 数值后缀

¥327 主体大字 + .40 小字次级(<small>)

11.4 强调单词上色

正文里 <b style="color: var(--ink)">3 个项目</b> —— 让具体数值/名词比周围文字更深一档(不是变橙)。橙色只留给 CTA。

11.5 ASCII 字符做装饰

↑ 本月 +3 ↓ -1.2%

11.6 链接式"更多"按钮

[ ALL · 12 ] → —— Mono 标签 + 箭头,色 --ink-alpha-48,hover 转橙。

11.7 缩略图不放图,放比例

9:16 Mono 字符占位。

---

12. Don't List(绝对禁止)

• ❌ 0 px 卡片(V1 → V2 反转)
• ❌ 渐变背景(只有 hero 区可考虑,但首选纯色)
• ❌ 玻璃拟态(backdrop-filter 只用于 modal 遮罩)
• ❌ 彩色 emoji 图标(用 SVG line icon,1.5 px stroke)
• ❌ 多个 accent 色(全场只有橙色)
• ❌ 大圆角容器(>12 px 直接判错)
• ❌ 灰色阴影 / 文字阴影(只允许橙色主 CTA 阴影 + Toast/Dropdown 白阴影)
• ❌ 鲜艳的状态色(避免荧光绿、电光蓝、霓虹粉)
• ❌ 居中对齐大段正文(全部左对齐)
• ❌ 把装饰当主角(场记板、丝绒、霓虹灯)
• ❌ 无意义的微动效(hover 旋转、缩放、彩虹流光)
• ❌ hover 时换深 hue 的橙(用 alpha)
• ❌ 真 border + hover 边框消失(用 inside-border ::before)
• ❌ 同一行混用直角和圆角(用户原话:"不要有些是直角,胶囊又是圆角")

---

13. Sass / CSS Token 速查表(V2.1)

:root {
  /* ============================================================
     Color system V2.1 · Firecrawl-aligned
     ============================================================ */

  /* === 表面 / 背景(冷灰)=== */
  --background-base:    #f9f9f9;
  --background-lighter: #fbfbfb;
  --surface:            #ffffff;
  --surface-raised:     #ffffff;

  /* === 边框(冷灰 · 3 档)=== */
  --border-faint: #ededed;   /* 默认 1 px */
  --border-muted: #e8e8e8;
  --border-loud:  #e6e6e6;

  /* === Accent 多彩(5 色信号)=== */
  --accent-black:    #262626;
  --accent-white:    #ffffff;
  --accent-amethyst: #9061ff;
  --accent-bluetron: #2a6dfb;
  --accent-crimson:  #eb3424;
  --accent-forest:   #42c366;
  --accent-honey:    #ecb730;

  /* === Heat · 单 hue + 8 档 alpha === */
  --heat:    #fa5d19;
  --heat-90: rgba(250, 93, 25, .90);
  --heat-40: rgba(250, 93, 25, .40);
  --heat-20: rgba(250, 93, 25, .20);
  --heat-16: rgba(250, 93, 25, .16);
  --heat-12: rgba(250, 93, 25, .12);
  --heat-8:  rgba(250, 93, 25, .08);
  --heat-4:  rgba(250, 93, 25, .04);

  /* === Black-Alpha 阶梯(20 档 · 0–24 用 #000,32+ 用 #262626)=== */
  --black-alpha-1:  rgba(0, 0, 0, .01);
  --black-alpha-2:  rgba(0, 0, 0, .02);
  --black-alpha-3:  rgba(0, 0, 0, .03);
  --black-alpha-4:  rgba(0, 0, 0, .04);
  --black-alpha-5:  rgba(0, 0, 0, .05);
  --black-alpha-6:  rgba(0, 0, 0, .06);
  --black-alpha-7:  rgba(0, 0, 0, .07);
  --black-alpha-8:  rgba(0, 0, 0, .08);
  --black-alpha-10: rgba(0, 0, 0, .10);
  --black-alpha-12: rgba(0, 0, 0, .12);
  --black-alpha-16: rgba(0, 0, 0, .16);
  --black-alpha-20: rgba(0, 0, 0, .20);
  --black-alpha-24: rgba(0, 0, 0, .24);
  --black-alpha-32: rgba(38, 38, 38, .32);
  --black-alpha-40: rgba(38, 38, 38, .40);
  --black-alpha-48: rgba(38, 38, 38, .48);
  --black-alpha-56: rgba(38, 38, 38, .56);
  --black-alpha-64: rgba(38, 38, 38, .64);
  --black-alpha-72: rgba(38, 38, 38, .72);
  --black-alpha-88: rgba(38, 38, 38, .88);

  /* === Legacy aliases(V2 命名 → V2.1 token,组件 CSS 无需重写)=== */
  --bg:           var(--background-base);
  --bg-soft:      var(--background-lighter);
  --card:         var(--surface);
  --ink:          var(--accent-black);
  --green:        var(--accent-forest);
  --red:          var(--accent-crimson);
  --green-bg:     rgba(66, 195, 102, .08);
  --green-bd:     rgba(66, 195, 102, .20);
  --red-bg:       rgba(235, 52, 36, .08);
  --red-bd:       rgba(235, 52, 36, .20);
  --ink-alpha-4:  var(--black-alpha-4);
  --ink-alpha-7:  var(--black-alpha-7);
  --ink-alpha-12: var(--black-alpha-12);
  --ink-alpha-24: var(--black-alpha-24);
  --ink-alpha-32: var(--black-alpha-32);
  --ink-alpha-48: var(--black-alpha-48);
  --ink-alpha-56: var(--black-alpha-56);
  --ink-alpha-64: var(--black-alpha-64);
  --ink-alpha-72: var(--black-alpha-72);
  --ink-alpha-88: var(--black-alpha-88);

  /* === 圆角 === */
  --r-sm: 4px;
  --r-md: 8px;     /* 默认主圆角 */
  --r-pill: 999px;

  /* === 字体 === */
  --font-sans: 'Inter Tight', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', 'Geist Mono', monospace;

  /* === 容器宽度 === */
  --container-max: 1480px;
  --sidebar-w: 248px;

  /* === 过渡 === */
  --t-fast: 100ms ease;
  --t-base: 200ms ease;
  --t-slow: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === Selection · Firecrawl 签名细节 === */
::selection {
  background: var(--heat-20);
  color: var(--heat);
}

/* === Dark mode · 翻转底色 + black-alpha 改用 white-alpha === */
.dark {
  --background-base:    #0a0a0a;
  --background-lighter: #141414;
  --surface:            #171717;
  --surface-raised:     #1f1f1f;
  --border-faint: #2a2a2a;
  --border-muted: #333333;
  --border-loud:  #404040;
  --accent-black: #f5f5f5;
  --black-alpha-1:  rgba(255,255,255,.01);
  --black-alpha-2:  rgba(255,255,255,.02);
  --black-alpha-3:  rgba(255,255,255,.03);
  --black-alpha-4:  rgba(255,255,255,.04);
  --black-alpha-5:  rgba(255,255,255,.05);
  --black-alpha-6:  rgba(255,255,255,.06);
  --black-alpha-7:  rgba(255,255,255,.07);
  --black-alpha-8:  rgba(255,255,255,.08);
  --black-alpha-10: rgba(255,255,255,.10);
  --black-alpha-12: rgba(255,255,255,.12);
  --black-alpha-16: rgba(255,255,255,.16);
  --black-alpha-20: rgba(255,255,255,.20);
  --black-alpha-24: rgba(255,255,255,.24);
  --black-alpha-32: rgba(255,255,255,.32);
  --black-alpha-40: rgba(255,255,255,.40);
  --black-alpha-48: rgba(255,255,255,.48);
  --black-alpha-56: rgba(255,255,255,.56);
  --black-alpha-64: rgba(255,255,255,.64);
  --black-alpha-72: rgba(255,255,255,.72);
  --black-alpha-88: rgba(255,255,255,.88);
}

---

14. V1 → V2 迁移检查清单(给后续改代码用)

• 全局替换 border-radius: 0 → border-radius: 8px(卡片 / stats / shortcut / modal / toast / thumb)
• 替换 V1 ink-2/3/4 token 为 ink-alpha-56/48/12
• 替换 --orange-tint --orange-soft 为 --heat-12 --heat-20
• 主 CTA hover 移除 #D04E1F,改用 4 层橙阴影变化
• 所有 .btn .input 加 inside-border 类
• 主工作区容器加 border-left + border-right + 4 个 SVG 准星
• 字体 Inter → Inter Tight
• 所有 icon 转 SVG line icon,stroke 1.5
• Pill 按 L1/L2/L3 三级规范化高度/字号/圆点尺寸
• 每个交互组件补齐 hover / active / focused / disabled 状态

---

15. 参考与来源

• 视觉灵感(实测): Firecrawl Playground · 详见 firecrawl_playground_spec.md
• 结构灵感: Linear / Stripe Dashboard
• 图纸感来源: 印刷套版准星 + 老 Unix 终端
• V1 文档: DESIGN_SPEC.md(保留作为历史)