视觉设计语言

学院派文档 + Console 的混合气质：暖白纸面（PRD 阅读感），JetBrains Mono 装饰运行时数据（开发者熟悉），Fraunces 处理标题（克制的庄重）。

色板

Loop 三主色

L1 · Unit

#0E8C5A · emerald
tint: #E2F2EA

L2 · Integration

#C77C2C · amber
tint: #F7E8D2

L3 · Human

#6E48C3 · violet
tint: #ECE4FB

语义辅助色

Alert

#C7341A · 错误 / failure / blocked

Warn

#8a6b00 · testing / retry

Ink

#0E0E10 · 文字 / 边框

Paper

#FAF7F1 · 背景

字体阶梯

角色	字体	字号	用途
Display	Fraunces 300	34–56 px	页面 Hero / 项目名
H2	Fraunces 500	24–34 px	章节标题
H3	Fraunces 600	20 px	子标题
H4 / Tag	Inter 700 · uppercase	11–13 px	类别标签
Body	Inter 400	16 px	正文
Mono	JetBrains Mono 500	11–13 px	状态码 / API / 日志 / kbd

字体使用规则

• 所有装饰性 / 表意性的文字（标题、品牌名、Hero）→ Fraunces。
• 所有运行时数据 / 技术标识（状态、API、命令、Unit id）→ JetBrains Mono。两者并用能立刻区分「这是设计」vs「这是状态」。
• 其他 → Inter。

排版规则

纸面节奏

章节顶部用 h4 全大写小标签 (类似 Section 01) 作为定位锚。
正文段落首字 dropcap 仅在长篇章节用，强调起势。

表格

表头 paper-soft 背景 + Mono uppercase；行 hover 高亮；行内 code 用米色背景区分纯文本。

代码块

黑底 #0E0E10 + 米色 #F3EFE5 文字。彩色 token：橙 (k)、绿 (s)、蓝 (n)、黄 (p)。终端感不夸张。

组件目录

本 PRD HTML 文档中复用的核心组件，全部 token 化、可在 LemonBoss 前端 Dashboard 中复刻：

组件	CSS class	变体
Tag pill	.tag	L1 / L2 / L3 / NEW / REUSE / PATCH
Card	.card	.l1 / .l2 / .l3 边色
Callout	.callout	默认（红） / .warn（黄） / .ok（绿）
Code block	pre.code	含 .k .s .n .p .v token
File tree	pre.tree	含 .new .reuse .com
Tabs	.tabs	data-tabs 自动初始化
Accordion	details.acc	原生 details + 自定义 marker
Mock browser	.mock	含 .topbar + .url
Sidebar	aside.sidebar	Section group 折叠

留白与节奏

页面布局基于 8px 网格。常用间距：

token	px	用途
xs	8	tag 内距
sm	16	段间距
md	24	卡片内距
lg	40	section 间距
xl	64	页边
xxl	80	Hero 上下