流·Studio 设计系统

三条铁律 // 不可妥协

核心签名 // 4 个不能丢

• 主橙 #fa5d19(Firecrawl 实测)+ 单 hue alpha 阶梯
• 全场 8 px 圆角(Pill 999 例外)
• 主容器左右装订线 + 四角准星
• Mono 装饰 [ 200 OK ] // 05.14 [ /v2 ](品牌签名 · Firecrawl 没有)

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

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

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

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

全靠 alpha 叠加,绝不换 hue。hover 不切换深橙,而是用 90% / 16% 这些档位组合。

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

只用于语义信号(代码高亮 / info / 状态色),禁止做大面积装饰 —— 全场依然只有橙色一个 accent。

状态色配套(底 / 边) // 8% / 20% alpha

Selection · Firecrawl 签名细节

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

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

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

字重档位 // 400 / 500 / 600 · 700 仅徽标

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

常用阶梯

典型场景

HTML 模板

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

<div class="app">
  <aside class="sidebar"><!-- shell.js 注入 --></aside>
  <main>
    <div class="topbar"><!-- shell.js 注入:crumbs · right --></div>
    <div class="content">
      <div class="page-head">
        <div>
          <h1>商品库</h1>
          <div class="sub"><span class="mono">// 12 个商品</span> · 描述</div>
        </div>
        <div class="actions">
          <button class="btn">导入</button>
          <button class="btn btn-primary">+ 新建商品</button>
        </div>
      </div>

      <div class="section-h">
        <h2>最近项目</h2>
        <a class="more">[ ALL · 12 ] →</a>
      </div>
      <!-- 内容 -->
    </div>
  </main>
</div>

<script src="assets/shell.js" defer></script>

尺寸阶梯 // 5 档

颜色场景 // 通过 currentColor 继承

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

三级体系总览 // 视觉 / 语义 / 数量约束

选谁?决策表 // 操作类型 → 等级

一级按钮 · Primary // .btn-primary · 一个区域只 1 个

语义:用户在当前页面/弹窗最希望完成的那一个动作。视觉上需要"被看到"。

二级按钮 · Secondary // .btn · 并列动作 · 可多个

语义:跟主操作并列出现的动作,但不是首要焦点 —— 取消、重置、导出、上一步、关闭。

三级按钮 · Tertiary // .btn-ghost · 弱化辅助 · 不限

语义:视觉降级的辅助动作 —— 跳过、了解更多、行内 [查看]/[编辑]/[删除]。不抢夺主流程注意力。

典型组合 // 一个区域如何摆放 4 种场景

// 1 · page-head 标题区 · 模式 [L2] + [L1]

// 2 · Modal 底栏 · 模式 [L2 取消] + [L1 确认] · 主操作永远在右

// 3 · 卡片 / 列表行内 · 模式 [L3] × N · 弱化避免抢戏

// 4 · 表单 / 向导底部 · 模式 [L3] + spacer + [L2] + [L1]

尺寸阶梯 // 独立于等级 · 按上下文密度选

尺寸跟等级正交 — 一级可以是 sm/默认/lg,二级三级同理。按上下文密度选尺寸。

// sm 用于:行内/列表行末/表格内/紧凑工具栏 · lg 用于:hero CTA / page-head 主操作(已全局覆盖)

常见错误 // Do / Don't 对照

L1 · 大胶囊 // h:28 / fs:13 / dot:8 · 项目状态 / 列表行主标签

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

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

L3 · 小胶囊 // h:18 / fs:10.5 / dot:5 · KPI 角标

对比 // 同色 3 级并列

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

// 关键坑:左侧 icon 必须 z-index: 2(否则被 input 白底盖住)· Ctrl K 用纯文本不用 ⌘(JetBrains Mono 不带该字形)

Checkbox

Radio

Switch

主 Tab

副 Tab · 灰度→彩色

快捷入口 // hover 我

完整对话面板 // .chat-pane · 试在输入框打字看 focus 反馈

消息气泡规则 // .msg.ai vs .msg.user

// 所有气泡共享:max-width 90% / padding 10·14 / font 13 / line-height 1.6 / radius 8 · 时间戳放气泡下用 mono 11px / alpha-48

打字指示器 // .ai-thinking · 1.2s 交替闪烁

三种形态对照 // 选谁?看场景

形态 1 · 网格主卡 // .product-card · 主网格用

// 缩图比例按内容类型选 · 商品 1.4:1(.product-thumb 默认)· 资产 1:1(加 .r-square)· 人物 3:4(加 .r-portrait)

形态 2 · 行卡 // .prod-row · 表单 / 侧栏用

// hover 右侧 X 变红 · 用于"已选商品"列表 / 流水线 stage 选中态

形态 3 · 选择器卡 // .pl-card · Modal 多选 picker · 点击切换 selected

// 3 种状态:默认浅灰 / hover 变白 / selected 橙边 + 浅橙底 + 右上勾

// 跟 .pl-card 同基础 · 只是 .m-thumb 用 aspect-ratio: 3/4(人物竖图标准) · 多了 .m-meta 行

// hover 边变橙 + 浅阴影 · 通常宽 240px(可放在 flex 横滑容器里) · 同样 class 也用于素材库 / 人物库 通用卡

§4.17.1 流程步骤条 // .stepper · 大尺寸主流程

// 已完成:黑底白字 · 进行中:橙底白字 + 600 字重 · 未开始:白底灰字 · 与 .prog 区别:.prog 是小徽标横在卡片角,.stepper 是大尺寸主流程

§4.17.2 分页 // .pagination · sticky bottom

// 激活页用橙底白字 600 · 页码按钮 30×30 / 4 px 圆角(密集场景小圆角不破节奏)

§4.17.3 视图切换 // .view-toggle · 模式切换组

§4.17.4 操作型胶囊 // .pill-tip · 可点击的链接式 CTA

// hover 时 bg → 橙 / 字 → 白 + shadow-cta · 与 .pill.info(静态状态徽标)区别:.pill-tip 是可点击操作

§4.17.5 卖点 / 编辑式列表 // .bullet-list · 表单常用

• 1 100% 棉麻 · 透气吸汗
• 2 独家设计 · 限量 200 件
• 3 隐形拉链 · 显瘦剪裁
• +

// 序号 .num 22×22 mono 700 字色 heat · 最后一行 .bl-add 用 dashed 虚线区别于已添加项 · hover 时删除按钮显示

完整示例 // hover 图片看右上浮层 · 点击图片看中央反馈 toast

变体 · 9:16 竖图 / 2 列 // --ratio: 9/16 --cols: 2

// 切换 --ratio 和 --cols 即可适配视频 9:16 / 横屏 16:9 / 海报 4:5 / 头像 1:1 · 悬浮按钮和底部按钮按业务定制

三个可变接口对照 // 决策表

Don't // 常见错误

方括号标签

注释样式时间戳

命令路径

数值后缀

// 主体大字 + 小字次级用 <small>

ASCII 散点(背景装饰)

强调单词上色

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

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