本月营收+33%
¥327.40 K
↑ 较上月 +33%
// V2 · INTERACTIVE
流·Studio 设计系统
所有 token、组件、状态的可交互参照。基于 Firecrawl Playground 实测规范校准。 hover / 点击下方组件可看到真实交互反馈。
// §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 别名仍可用。
边框 // 3 档 · 冷灰 · 差距极小靠语义
3 档相差只 1–2 个色阶,肉眼几乎看不出。**用语义,不用视觉对比**——80% 场景用 --border-faint。
主橙 Heat // 单 hue #FA5D19 + 8 档 alpha
从 V2 砖红 #E55B26 调亮到 Firecrawl 实测 #FA5D19(更红更饱和)。**全靠 alpha 叠加,绝不换 hue。** hover 不再切换到更深的橙,而是用 90% / 16% 这些档位组合。
Accent 多彩点 // 5 色信号 · 限定语义场景
**新增章节 · 取自 Firecrawl 实测**。这 5 色只用于**语义信号**(代码高亮 / info / 状态色),**禁止做大面积装饰**——全场依然只有橙色一个 accent。--accent-black 替代 V2 的 --ink #15140F(更柔和的灰黑)。
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。
状态色 // 用 accent-forest / crimson 作语义
V2 的 --green #3F6B3F(深森林绿)与 --red #B33A2A(暗砖红)替换为 Firecrawl 的 --accent-forest #42c366 与 --accent-crimson #eb3424——更明亮、更接近真实"信号灯"颜色,但仍保持非荧光。
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 档
早上好,大莱
设计系统总览
¥327.40 K
最近项目
夏季新款蕾丝连衣裙 · 蓝色 / M
商家可能没有现成的商品图,需要新增一种「AI 生成」模式 —— 商家上传一张随手拍的原图,AI 生成 4 张满意的头图,选 1 张。
查看 Demo
本月营收较上月增长 33%,5 个项目处于"生成中"状态,2 个需要重新调整模特模板
生成中
Ctrl K · ESC · Enter · ⇧+Tab
[ 200 OK ] [ .MP4 · 9:16 ] [ /v2 ]
· · + · +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
// §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
Radio
Switch
// §9 · TABS
Tab · 双层结构
主 Tab 在区块顶部,带橙色下划线指示;副 Tab 用于过滤,带灰度→彩色 icon 反馈。点击切换。
主 Tab
当前显示:全部
副 Tab · 灰度→彩色
// §10 · CARDS
卡片 / 快捷入口
所有卡片统一 8 px 圆角、1 px 边框、无阴影。快捷入口含 hover / active 状态。
// §11 · KPI
统计行 · 4 格 stats
活跃项目
12
↑ 本月 +3
生成中RUNNING
5
资产总数
847
·MP4·JPG·PNG
// §12 · LIST
列表行
hover 我看整行底色变化。
9:16
生成中
4:5
已完成
1:1
生成失败
// §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
// 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·
· +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 旋转、缩放、彩虹流光,禁。
×同行混用直角+圆角 —— 用户原话:"不要有些是直角,胶囊又是圆角"。