// V2 · INTERACTIVE

# 流·Studio 设计系统

所有 token、组件、状态的可交互参照。基于 Firecrawl Playground 实测规范校准。 hover / 点击下方组件可看到真实交互反馈。

[ Restraint · v2.0 ] · // based on DESIGN_SPEC_V2.md
// §1 · COLOR TOKENS · V2.1 · FIRECRAWL-ALIGNED

## 色彩系统

V2.1 全面对齐 Firecrawl Playground 实测色板:**冷灰底**(非米白)· **#FA5D19 主橙**(更亮一档)· **20 档 black-alpha 阶梯**(替代 11 档 ink-alpha)· **5 色 accent 多彩点**(amethyst / bluetron / crimson / forest / honey)。点击任何色块复制值。

### 表面 / 背景 // 4 档 · 冷灰无色相

告别 V2 的暖米白(#FAF9F5),全面切换 Firecrawl 的纯冷灰。`--bg/--bg-soft/--card` 作为 legacy 别名仍可用。

--background-base
#f9f9f9 · 页面底
copied
--background-lighter
#fbfbfb · 容器底
copied
--surface
#ffffff · 卡片
copied
--surface-raised
#ffffff · Modal
copied

### 边框 // 3 档 · 冷灰 · 差距极小靠语义

3 档相差只 1–2 个色阶,肉眼几乎看不出。**用语义,不用视觉对比**——80% 场景用 `--border-faint`。

--border-faint
#ededed · 默认 ★
copied
--border-muted
#e8e8e8 · 略深
copied
--border-loud
#e6e6e6 · 强分隔
copied

### 主橙 Heat // 单 hue #FA5D19 + 8 档 alpha

从 V2 砖红 `#E55B26` 调亮到 Firecrawl 实测 `#FA5D19`(更红更饱和)。**全靠 alpha 叠加,绝不换 hue。** hover 不再切换到更深的橙,而是用 90% / 16% 这些档位组合。

--heat
#fa5d19 · 100% · CTA ★
copied
--heat-90
90% · hover
copied
--heat-40
40% · ring / edge
copied
--heat-20
20% · pill border / selection
copied
--heat-16
16% · hover bg
copied
--heat-12
12% · tint bg
copied
--heat-8
8%
copied
--heat-4
4% · 极弱
copied

### Accent 多彩点 // 5 色信号 · 限定语义场景

**新增章节 · 取自 Firecrawl 实测**。这 5 色只用于**语义信号**(代码高亮 / info / 状态色),**禁止做大面积装饰**——全场依然只有橙色一个 accent。`--accent-black` 替代 V2 的 `--ink #15140F`(更柔和的灰黑)。

--accent-black
#262626 · 主前景
copied
--accent-white
#ffffff · 反色文字
copied
--accent-amethyst
#9061ff · 紫 / code property
copied
--accent-bluetron
#2a6dfb · 蓝 / info
copied
--accent-crimson
#eb3424 · 红 / error ★
copied
--accent-forest
#42c366 · 绿 / success ★
copied
--accent-honey
#ecb730 · 黄 / warning
copied

### Black-Alpha 阶梯 // 20 档 · 替代 V2 的 11 档 ink-alpha

**核心工具尺。** 0–24% 用 `rgba(0,0,0,...)` 纯黑透明;**32% 起换 `rgba(38,38,38,...)`**(即 accent-black 作底)避免叠出"灰中带蓝"——这是 Firecrawl 的细节技巧,我们 1:1 复刻。dark mode 时这套 token 自动翻转为 white-alpha。原 `--ink-alpha-*` 全部作为 legacy 别名映射到对应 black-alpha。

--black-alpha-1
1%
copied
--black-alpha-2
2%
copied
--black-alpha-3
3%
copied
--black-alpha-4
4% · hover bg ★
copied
--black-alpha-5
5% · tab 分隔
copied
--black-alpha-6
6%
copied
--black-alpha-7
7% · active bg ★
copied
--black-alpha-8
8%
copied
--black-alpha-10
10%
copied
--black-alpha-12
12% · inside-border ★
copied
--black-alpha-16
16%
copied
--black-alpha-20
20%
copied
--black-alpha-24
24%
copied
--black-alpha-32
32% · base 切换 →
copied
--black-alpha-40
40%
copied
--black-alpha-48
48% · 占位字色 ★
copied
--black-alpha-56
56% · 次级文字 ★
copied
--black-alpha-64
64% · 描述
copied
--black-alpha-72
72%
copied
--black-alpha-88
88% · 近主前景
copied

### 状态色 // 用 accent-forest / crimson 作语义

V2 的 `--green #3F6B3F`(深森林绿)与 `--red #B33A2A`(暗砖红)替换为 Firecrawl 的 `--accent-forest #42c366` 与 `--accent-crimson #eb3424`——更明亮、更接近真实"信号灯"颜色,但仍保持非荧光。

--green
#42c366 · 成功(=forest)
copied
--green-bg
8% · 配套底
copied
--green-bd
20% · 配套边
copied
--red
#eb3424 · 失败(=crimson)
copied
--red-bg
8% · 配套底
copied
--red-bd
20% · 配套边
copied

### Selection 选中色 // Firecrawl 签名细节

页面内任何文字选中时,底色 `--heat-20` + 字色 `--heat`。**试着选中下面这行字看效果:**

本月营收 ¥327,400 较上月增长 33%,有 5 个项目处于"生成中"状态。其中 2 个需要重新调整模特模板。

// §2 · TYPE · V2.1 MIXED STRATEGY

## 字体系统 · 中英协作

V2.1 改为**中英双字体协作** —— `Inter` 处理英文/数字,`Alibaba PuHuiTi` 处理中文,装饰用 `JetBrains Mono`。浏览器按字符级 fallthrough,Inter 不含 CJK 字形 → 中文自动跳到普惠体。**不需要 JS,中英自然分工。**

### 字体族原理 // browser-level character fallthrough

// 01 · ENGLISH
Inter
The quick brown fox jumps. 0123456789 — Vercel / Linear / Stripe 御用,屏幕 UI 优化,数字同宽。
// 02 · 中文
阿里普惠体
为中英混排专门设计的笔画粗细配比,与 Inter 视觉重量贴近,中文版面舒适匀质。
// 03 · 装饰 MONO
JetBrains
[ 200 OK ] · // 05.14 · /v2 — 仅用于装饰标签,不参与正文。
// 混排实测 · MIXED RENDERING
本月营收 ¥327,400 较上月 +33%,共 5 个 AI 项目处于 "生成中" 状态
↑ 这一行里:中文走 PuHuiTi · "¥" "327,400" "+33%" "5" "AI" 走 Inter · 字重视觉匀质,无错位

### 字号 / 字重 / 行高阶梯 // 11 档

H1 / Hero36 / 500 / -0.024em / 1.2
早上好,大莱
区块 H228 / 500 / -0.02em / 1.25
设计系统总览
KPI 数值32 / 500 / -0.02em / tabular-nums
¥327.40 K
子区 H316 / 500 / -0.01em / 1.4
最近项目
卡片标题14 / 500 / normal / 1.4
夏季新款蕾丝连衣裙 · 蓝色 / M
正文 body14 / 400 / normal / **1.65**
商家可能没有现成的商品图,需要新增一种「AI 生成」模式 —— 商家上传一张随手拍的原图,AI 生成 4 张满意的头图,选 1 张。
Label · 按钮 / Tab13 / 500 / normal
查看 Demo
描述次级13 / 400 / --ink-alpha-64 / 1.8
本月营收较上月增长 33%,5 个项目处于"生成中"状态,2 个需要重新调整模特模板
Pill 文字11.5 / 500 / normal
生成中
Inter Bold · 徽标11.5 / 700 / Inter only
Ctrl K · ESC · Enter · ⇧+Tab
Mono 标签11 / 400 / 0.04em · JetBrains
[ 200 OK ] [ .MP4 · 9:16 ] [ /v2 ]
Mono 散点装饰8.5 / 400 / 0.04em
· · + · +XX+ +XXXX· +X·

### 字重档位 // 仅 400 / 500 / 600 / 700

// REGULAR · 400
流·Studio · Aa Bb 123
// MEDIUM · 500 ★ 默认强调
流·Studio · Aa Bb 123
// SEMIBOLD · 600
流·Studio · Aa Bb 123
// BOLD · 700 · 限徽标
流·Studio · Aa Bb 123

// Bold 700 仅用于 Ctrl K 这种纯英文徽标场景,**正文严禁 700**(中英字重错位会暴露)

// §3 · RADIUS

## 圆角阶梯

V2 核心变化:统一 8 px 作为默认主圆角。完全圆 999 px 仅用于 pill 和 dot。微元素降到 4–6 px。

x
禁用 V1
0 px
progress
2 px
kbd / badge
4 px
小色块
6 px
主默认
8 px ★
pill
pill / dot
999 px
// §4 · ICONS

## Icon 系统

统一 SVG line icon · stroke 1.5 · linecap round · 颜色通过 `currentColor` 继承。禁用 emoji / filled icon。

### 尺寸阶梯 // 5 档

S · 14 px
M · 16 px ★
L · 20 px
XL · 24 px
Hero · 36 px

### 颜色场景 // 通过 currentColor 继承

默认 ink-56
hover · ink
active · heat
在主 CTA 内
disabled

### Icon Box // 快捷入口/Modal 头部用

32×32 · 8 px 圆角 · --heat-12 底 · 16 px line icon
// §5 · BUTTONS

## 按钮 · 3 类型 × 5 状态 × 3 尺寸

所有按钮:高 32 / 圆角 8 / 字号 13 / 字重 500。默认按钮用 `::before inside-border`,hover 时边框淡出底色淡入,无布局抖动。

### 类型 1 · 默认 // .btn

// default
// hover
// active
// focused
// disabled

### 类型 2 · 主 CTA // .btn-primary

唯一允许阴影的按钮 —— 4 层橙色多重阴影,hover 时阴影向上抬起。

// default
// hover
// active
// focused
// disabled

### 类型 3 · 无框 // .btn-ghost

// default
// hover
// active
// disabled

### 尺寸 // -sm / 默认 / -lg

// §6 · PILLS

## 胶囊 · 严格 3 级分层

同级别尺寸必须完全一致。不允许混用。pill 永远是 `999 px`(完全圆),靠 dot 体现状态。

### L1 · 大胶囊 // h:28 / fs:13 / dot:8

用于项目状态、列表行主标签。

生成中 已完成 失败

### L2 · 中胶囊 // h:22 / fs:11.5 / dot:6 ★ 默认

最常用尺寸。卡片内 / 表格内默认。

生成中 200 OK 超时

### L3 · 小胶囊 // h:18 / fs:10.5 / dot:5

KPI 角标 / 行内 Mono 标签场景。

NEW +33% -1.2%

### 对比展示 // 同色 3 级并列看大小差距

L1 · 生成中 L2 · 生成中 L3 · 生成中
// §7 · INPUTS

## 输入框 · 5 状态

同样用 inside-border。focused 时橙色 ring 2 px,error 时红色边框 + 红色软底。点击下方各字段可看到真实 focus 反馈。

// default
// hover
// focused
// error
// disabled

### 带图标 / 搜索 // 含 Ctrl+K 提示

Ctrl K
// §8 · FORM CONTROLS

## 表单控件

Checkbox / Radio / Switch 全部可点击。disabled 状态也可演示。

### Checkbox

未选中 已选中 半选中 Disabled

### Radio

选项 A 选项 B(已选) 选项 C Disabled

### Switch

关 开 Disabled
// §9 · TABS

## Tab · 双层结构

主 Tab 在区块顶部,带橙色下划线指示;副 Tab 用于过滤,带灰度→彩色 icon 反馈。点击切换。

### 主 Tab

当前显示:全部

### 副 Tab · 灰度→彩色

// §10 · CARDS

## 卡片 / 快捷入口

所有卡片统一 8 px 圆角、1 px 边框、无阴影。快捷入口含 hover / active 状态。

### 快捷入口 // hover 我

新建商品
// AI 生成 / 上传图
短视频工坊
// 9:16 · MP4
投放话术库
// /v2 · 模板
// §11 · KPI

## 统计行 · 4 格 stats

本月营收+33%
¥327.40 K
↑ 较上月 +33%
活跃项目
12
↑ 本月 +3
生成中RUNNING
5
资产总数
847
·MP4·JPG·PNG
// §12 · LIST

## 列表行

hover 我看整行底色变化。

9:16
夏季新款蕾丝连衣裙
// 创建于 05.14 · 蓝色 / M
生成中
4:5
秋季风衣 · 卡其色
// 创建于 05.12 · M / L
已完成
1:1
运动 T 恤 · 黑白款
// 创建于 05.10 · 全色系
生成失败
// §13 · TIP

## 提示框 / 进度

小提示
使用 Ctrl+K 快速搜索任意项目、商品或资产。Tab 切换不同维度,Enter 直达。

### 进度条段位 // 5 段 · 流水线专用

未开始
进行中(2/5)
已完成
失败
// §14 · MODAL

## 弹窗 Modal

点击下方按钮打开。ESC / 点击遮罩关闭。带 4 角 SVG 准星 + 8 px 圆角 + 半透明遮罩 + 弹性入场。

// §15 · TOAST

## Toast 通知

右下角浮出。300ms 弹性入场,2400ms 自动消失。

// §16 · SIGNATURE

## 主容器装订线

整个工作区被左右两条 1 px 边线包夹,四角放圆弧内凹的 SVG 准星。这是流·Studio 视觉的"图纸"签名。Modal 内不必加。

这块容器左右贯穿两条 1 px 边线,四角带圆弧内凹的 SVG 准星
// container-demo · max-width: 720 · border-x only
// §17 · DECOR

## Mono 装饰元素 · 品牌签名

方括号标签 / 双斜杠注释 / 中点连接 —— 这些是流·Studio 独有的"调试视图感",Firecrawl 没有,绝对保留。

### 方括号标签

[ 200 OK ] [ /v2 ] [ .MP4 · 9:16 ] [ STUDIO ] [ ALL · 12 ] →

### 注释样式时间戳

// 05.14 · 周五 · 14:32

### 命令路径

/sidebar collapse · /toast dismiss · /modal open

### ASCII 散点(背景装饰)

· · +
· +XX+
+XXXX·
+X·

### 强调单词上色

本月营收较上月增长 +33%,有 5 个项目处于"生成中"状态。其中 2 个需要重新调整模特模板。

// 关键名词加深一档(不变橙),橙色只留给 CTA

// §18 · GUARDRAILS

## Don't List · 绝对禁止

任何 mockup / 代码 review 时,对照此清单。每一条违反都判错。

DO
用 8 px 统一圆角 + 准星 + 装订线 + mono 装饰做"图纸感"
DON'T
用 0 px 硬切角的卡片 —— V1 的做法,V2 起判错
DO
橙色 hover 用 `--heat-90` 等 alpha 阶梯
DON'T
hover 时切换到更深的橙 hex(如 #D04E1F)
DO
主 CTA 用多层橙色阴影(4 层)制造发光感
DON'T
用灰色阴影 / 文字阴影 / 通用 box-shadow 装饰
×渐变背景 —— 只有 hero 区可考虑,首选纯色。绝禁多色渐变。
×玻璃拟态 —— `backdrop-filter` 只用于 modal 遮罩。
×彩色 emoji —— 所有图标必须 SVG line(stroke 1.5)。
×多 accent 色 —— 全场只有橙色一个 accent。
×大圆角容器(>12 px)—— 直接判错。
×鲜艳荧光状态色 —— 避免霓虹绿、电光蓝、霓虹粉。
×居中对齐大段正文 —— 全部左对齐。
×装饰当主角 —— 场记板 / 丝绒 / 霓虹灯都不要。
×无意义微动效 —— hover 旋转、缩放、彩虹流光,禁。
×同行混用直角+圆角 —— 用户原话:"不要有些是直角,胶囊又是圆角"。
确认删除此商品?
// /products/dlt · IRREVERSIBLE
该操作不可撤销。商品「夏季新款蕾丝连衣裙」及其关联的 4 张候选图、2 段短视频将一并删除。