# 视觉设计语言

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

## 色板

### Loop 三主色

#### L1 · Unit

<!-- 图见原 HTML -->

> _`#0E8C5A` · emerald<br/>tint: `#E2F2EA`_

#### L2 · Integration

<!-- 图见原 HTML -->

> _`#C77C2C` · amber<br/>tint: `#F7E8D2`_

#### L3 · Human

<!-- 图见原 HTML -->

> _`#6E48C3` · violet<br/>tint: `#ECE4FB`_

### 语义辅助色

#### Alert

<!-- 图见原 HTML -->

> _`#C7341A` · 错误 / failure / blocked_

#### Warn

<!-- 图见原 HTML -->

> _`#8a6b00` · testing / retry_

#### Ink

<!-- 图见原 HTML -->

> _`#0E0E10` · 文字 / 边框_

#### Paper

<!-- 图见原 HTML -->

> _`#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) 作为定位锚。<br/>正文段落首字 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 上下 |