AirShelf/v1/DESIGN_SPEC.md

流·Studio 设计规范

风格代号: Restraint(克制)· Firecrawl-inspired 适用范围: 流·Studio 全产品(工作台 / 项目 / 商品库 / 流水线 / 资产库 / 编辑器 / 账户) 最后更新: 2026-05-14

---

1. 设计哲学

一句话: 不是 SaaS,不是工具站,而是「一台精密设备的工作面板」。

三条铁律:

1. 克制大于装饰 — 留白 > 容器 > 内容,大量空气感,绝不堆砌
2. 单色锚点 — 全场只有一种 accent(橙色),且只用于 CTA / 关键状态 / 强调单词
3. 结构清晰可见 — 用 1px 边框、网格背景、"+" 准星、mono 标签暴露"图纸感",而不是用阴影/渐变去隐藏结构

避免的"AI 味":

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

---

2. 色彩系统

2.1 中性色(主体 95%)

Token	Hex	用途
--bg	#FAF9F5	页面底色 · 米白(暖调,不是纯白)
--bg-soft	#F4F2EC	hover 态底色 / mono 标签背景
--card	#FFFFFF	卡片 / 容器底色
--border	#E9E5DB	主分隔线 · 1px 实线
--border-soft	#EFEBE0	次级边框 / 缩略图边框

2.2 文字层级(4 层)

Token	Hex	权重 / 用途
--ink	#15140F	一级 · 标题 / 数值 / 主文本
--ink-2	#5A584F	二级 · 描述 / 次要按钮文字
--ink-3	#9C988C	三级 · 标签 / 辅助说明 / 占位
--ink-4	#C8C4B8	四级 · ASCII 散点 / 极弱装饰

2.3 主题色(只用于关键点)

Token	Hex	用途
--orange	#E55B26	唯一 accent · 主 CTA / active 态 / 关键单词强调
--orange-soft	#FAE8DC	主色边框软化 / pill 边框
--orange-tint	#FFF4ED	主色背景软化 / active nav 底色

2.4 状态色(仅状态使用,克制)

含义	Token	Hex	配套底色	配套边框
成功	--green	#3F6B3F	#EAF2EA	#D5E5D5
失败/告警	--red	#B33A2A	#FBEBE7	#F2D6CE

注: 没有蓝、紫、黄、青等「企业 dashboard 五彩斑斓色」。状态用色仅在 pill / 进度条段位上出现,绝不用作大面积背景。

---

3. 字体系统

3.1 字体族

用途	字体
正文 / UI	Inter, 'PingFang SC', 'Microsoft YaHei', sans-serif
Mono 装饰	'JetBrains Mono', monospace

Mono 字体不是用来写代码的,是用来做装饰元素:[ 200 OK ] 标签、时间戳 // 05.14、小注释 /v2、deltas ↑ 本月 +3 等。

3.2 字号 / 字重 / 行高

角色	字号	字重	字距	用途
H1 欢迎语	26 px	600	-0.018em	页面主标题
数值 (KPI)	30 px	600	-0.02em	统计大数字
H2 区块标题	15 px	600	-0.01em	"最近项目""快捷入口"
卡片标题	13.5 px	600	normal	项目名 / 商品名
正文 / nav	13.5 px	500	normal	默认
按钮	13 px	500/600	normal	btn / pill-btn
描述次级	12.5 px	400	normal	meta / 描述行
Pill 文字	11.5 px	500	normal	状态徽标
Mono 标签	10.5–11.5 px	400/500	0.04em (letter-spacing)	[ STATUS ]
Mono 散点	8.5 px	400	0.04em	背景 ASCII 装饰

行高: 默认 1.5,标题 1.2,提示文本 1.6–1.7。

关键属性: 数值类必须加 font-variant-numeric: tabular-nums,保证等宽对齐。

---

4. 圆角规则(最关键的一条)

核心原则:结构性容器 = 0 圆角 · 交互元素 = 适度圆角 · 状态徽标 = 完全圆

元素类型	圆角值	例子
大卡片 / 区块容器	0 px	.stats .list-card .shortcut .tip .modal
缩略图 / 画面占位	0 px	.thumb .ic
按钮 / 输入框 / icon-btn	9 px	.btn .pill-btn .icon-btn .search
nav 项	7 px	nav a
头像 / 小色块	6 px	.av .team .p
Mono 标签 / badge	3–4 px	.kbd .badge
Pill 状态徽标 / dot	999 px	.pill .dot
进度条段位	2–3 px	.prog span .bar

为什么这样定: 大容器走硬边像「图纸框」,有工程感;按钮走中圆角保留可点击的友好感;状态徽标走全圆形成强对比,视觉跳脱出来。

---

5. 边框 / 阴影 / 描边

5.1 边框

• 统一规格: 1px solid var(--border)
• 次级:1px solid var(--border-soft)
• 不允许 2px / 3px 实线(粗边破坏轻盈感)
• 虚线仅用于 .tip 提示框:1px dashed var(--border)

5.2 阴影

• 默认无阴影(关键!)
• 唯一例外:Toast 浮层 box-shadow: 0 4px 20px rgba(21,20,15,0.06)
• 弹窗用半透明遮罩 rgba(21,20,15,0.42) 拉开层级,不靠 shadow

5.3 容器四角"+" 注册标(签名元素)

所有重要区块容器的四角放 + 字符,模拟印刷套版准星:

.stats::before,.stats::after { content:'+'; position:absolute; color:var(--ink-3); font-family:'JetBrains Mono',monospace; font-size:13px; }
.stats::before { top:-8px; left:-8px }
.stats::after { bottom:-8px; right:-8px }
/* 另外两角用额外 .corner-tr / .corner-bl span 补齐 */

---

6. 间距 / 栅格

基础栅格: 4 px

常用间距: 4 / 6 / 8 / 12 / 14 / 16 / 18 / 22 / 24 / 36 / 48 / 56

主区块布局:

• 侧边栏宽度:248px
• 主内容 padding:48px 56px 56px
• 内容最大宽度:1480px
• 区块之间垂直间距:36px(welcome → stats → grid2)
• 卡片网格间距:24px(主区) / 12px(子区)
• 卡片内 padding:22px 24px(stats) / 14px 18px(列表行) / 14px(快捷入口)

---

7. 背景:制图纸网格

7.1 三层叠加

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

配色:

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

7.2 视觉聚焦遮罩

整个网格背景用径向遮罩,中心实、四周淡:

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

效果:网格在屏幕中心隐约可见,边缘消失,不抢内容。

7.3 装饰散点(Mono ASCII)

主区域 4 个固定位置撒 ASCII 散点,模拟手稿污点 / 颗粒感:

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

字号 8.5px / 颜色 --ink-4 / 透明度 0.8 / pointer-events:none。

7.4 边角 Mono 标签

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

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

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

作用: 让页面看起来像「在某个开发环境 / 调试视图里」,而不是普通官网。这是区分 AI 味和高级感的关键。

---

8. 组件规范

8.1 按钮

3 种且仅 3 种:

类型	背景	文字	边框	圆角	字重
.btn 默认	--card 白	--ink	--border	9px	500
.btn-primary 主 CTA	--orange	白	--orange	9px	600
.btn-sm 小按钮	同上,padding 5px 11px / fontsize 12px

Hover:默认 → --bg-soft;主按钮 → #D04E1F(橙色加深一档)。

8.2 Pill(状态徽标)

[ ● 状态文字 ]    完全圆角 / 1px 边框 / 11.5px 字号 / 4px 10px padding

状态	文字色	底色	边框
info	--orange	--orange-tint	--orange-soft
ok	--green	#EAF2EA	#D5E5D5
err	--red	#FBEBE7	#F2D6CE

每个 pill 前置 6px 圆点(.dot,颜色继承文字色)。

8.3 输入框 / 搜索

• 背景白 / 1px 边框 / 9px 圆角 / 9px 12px padding
• 占位字色 --ink-3
• 聚焦态可选橙色边框,但克制使用
• 右侧带 mono ⌘K 提示徽标

8.4 KPI 统计行(.stats)

• 1 行 4 格,共用一个 1px 边框容器,无 gap
• 列与列之间用 border-right: 1px 分隔(最后一列去掉)
• 容器四角加 "+" 注册标
• 每格结构:label + badge → 大数字(30px) → delta / progress

8.5 列表(.recent)

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

• grid 5 列:54px 1fr auto auto auto
• 行高 padding 14px 18px
• 行间 1px 分隔线,最后行去掉
• 整行 hover → --bg-soft

8.6 进度条段位(流水线 5 阶段专用)

5 个 18×5px 小段,3px 间距,每段独立颜色:

状态	颜色
未开始	--bg-soft
已完成	--ink-2
当前	--orange
失败	--red

8.7 快捷入口卡(.shortcut)

• 白底 / 1px 边框 / 0 圆角 / 14px padding
• 左侧 30×30 橙色 tint 图标块(0 圆角)
• 右侧:标题(13px 600)+ Mono 描述(11.5px,--ink-3)
• Hover → --bg-soft

8.8 提示框(.tip)

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

8.9 Toast

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

8.10 弹窗(Modal)

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

---

9. 微观细节(决定"高级感"的)

9.1 标签全部包方括号

不要写 200 OK,要写 [ 200 OK ](方括号 + 单空格)。 不要写 MP4 9:16,要写 [ .MP4 · 9:16 ](中点分隔)。 路径用 /v2、/sidebar collapse 这种伪命令。

9.2 注释样式时间

// 05.14 · 周五 —— 双斜杠开头,模拟代码注释。

9.3 数值后缀

¥327 主体大字 + .40 小字次级(<small>),让数字主体更突出。

9.4 强调单词上色

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

9.5 ASCII 字符做装饰

进度箭头:↑ 本月 +3 ↓ -1.2% 用 Unicode 箭头。 中文标点 + 英文单位混排:本月 +3 较上月 +33% 中间用半角空格分隔。

9.6 链接式"更多"按钮

"查看全部"不要写成按钮,写成 [ ALL · 12 ] →(Mono 标签 + 箭头),颜色 --ink-3,hover 橙色。

9.7 缩略图不放图,放比例

9:16 这种 Mono 字符占位,模拟「未渲染图片的草稿状态」,呼应工程感。

---

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

• ❌ 渐变背景(只有 hero 区可考虑,但首选纯色)
• ❌ 玻璃拟态(backdrop-filter 只用于 modal 遮罩,不用于卡片)
• ❌ 彩色 emoji 图标(用 SVG line icon,1.8px stroke)
• ❌ 多个 accent 色(全场只有橙色一个 accent)
• ❌ 大圆角容器(>=10px 的卡片直接判错)
• ❌ 投影 / 内阴影 / 文字阴影
• ❌ 鲜艳的状态色(避免荧光绿、电光蓝、霓虹粉这类)
• ❌ 居中对齐大段正文(全部左对齐)
• ❌ 把装饰当主角(场记板、丝绒、霓虹灯都不要)
• ❌ 无意义的微动效(hover 旋转、缩放、彩虹流光等)

---

11. Sass / CSS Token 速查

:root{
  /* 中性 */
  --bg:#FAF9F5; --bg-soft:#F4F2EC; --card:#FFFFFF;
  --border:#E9E5DB; --border-soft:#EFEBE0;

  /* 文字 4 层 */
  --ink:#15140F; --ink-2:#5A584F; --ink-3:#9C988C; --ink-4:#C8C4B8;

  /* 主色 */
  --orange:#E55B26; --orange-soft:#FAE8DC; --orange-tint:#FFF4ED;
  --orange-hover:#D04E1F;

  /* 状态 */
  --green:#3F6B3F; --green-bg:#EAF2EA; --green-bd:#D5E5D5;
  --red:#B33A2A; --red-bg:#FBEBE7; --red-bd:#F2D6CE;
}

---

12. 参考与来源

• 视觉灵感: Firecrawl(克制 / 单橙 accent / mono 装饰)
• 结构灵感: Linear / Stripe Dashboard(信息密度 / 1px 分层)
• 图纸感来源: 印刷套版准星 + 老 Unix 终端
• 当前实现: demo.html · restraint-2.html