本月营收+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 旋转、缩放、彩虹流光,禁。
+ ×同行混用直角+圆角 —— 用户原话:"不要有些是直角,胶囊又是圆角"。
+