色板
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 上下 |