# 栖木 Perch · 设计系统（Warm Paper）

> 一套"像纸一样温暖、像工具一样安静"的界面语言。
> 目标是让 AI 应用**不像一个聊天机器人**，而像你桌上一本笔记本。

---

## 1. 设计哲学

### 1.1 为什么是"暖纸"

大多数 AI 应用用的是**冷色科技感**：纯白/纯黑背景 + 蓝紫渐变。
那是"工具"的语言，不是"伙伴"的语言。

栖木选了**暖纸**：

- 背景 `#faf9f5`——不是纯白，是纸张微微泛黄的白
- 文字 `#1f1e1b`——不是纯黑，是墨水的深棕
- 强调色 `#d97757`——陶土橙，温暖但不刺眼

**用户长时间盯着它**，暖色比冷色更不容易疲劳。

### 1.2 三条原则

| 原则 | 含义 | 体现 |
|---|---|---|
| **安静优先** | 界面不抢注意力 | 低饱和、少动画、无渐变噪点 |
| **内容为王** | 结构和排版服务于阅读 | 衬线标题 + 无衬线正文 |
| **物理感** | 元素像真的纸/玻璃 | 柔和阴影、毛玻璃、微圆角 |

---

## 2. 色彩令牌

所有颜色都是 CSS 变量（`tokens/theme.css`），三套主题自动切换：

| 令牌 | 浅色（Warm Paper） | 深色（Dark Side） | 用途 |
|---|---|---|---|
| `--bg` | `#faf9f5` | `#262521` | 页面底色 |
| `--bg-elevated` | `#f0eee6` | `#2f2e29` | 卡片/浮层 |
| `--bg-sunken` | `#e8e5db` | `#1e1d1a` | 凹陷区/代码块 |
| `--border` | `#e3dfd3` | `#3b3a34` | 分隔线/描边 |
| `--text` | `#1f1e1b` | `#edeae0` | 主文字 |
| `--text-secondary` | `#6b6862` | `#a8a49a` | 次要文字 |
| `--text-tertiary` | `#9c988d` | `#79766d` | 提示/占位 |
| `--accent` | `#d97757` | `#e08a6e` | 强调/主按钮 |
| `--accent-soft` | `#f4e3dc` | `#45342d` | 强调背景 |
| `--success` | `#7a9b76` | — | 成功 |
| `--warning` | `#c9a227` | — | 警告 |
| `--danger` | `#c05b4d` | — | 危险 |

### 主题切换机制

```css
/* 1) 默认跟随系统 */
@media (prefers-color-scheme: dark) { :root { ... } }

/* 2) 显式覆盖（设置里选浅色/深色时挂到 <html data-theme="...">） */
[data-theme="light"] { ... }
[data-theme="dark"]  { ... }
```

**顺序很重要**：显式段写在 `matchMedia` 之后，同特异性下后写者赢 → 能覆盖系统偏好。

---

## 3. 字体

| 用途 | 令牌 | 字体栈 |
|---|---|---|
| 标题 | `--font-serif` | Source Serif 4 / Songti SC / Georgia |
| 正文 | `--font-sans` | Inter / PingFang SC / system-ui |
| 代码 | `--font-mono` | JetBrains Mono / SF Mono / Menlo |

**为什么标题用衬线**：衬线有"书"的质感，让长文阅读更舒服，也拉开与"聊天机器人"的距离。

正文 `14.5px` / 行高 `1.65`——比常规 UI 略大，因为 AI 应用的主要行为是**读**。

---

## 4. 圆角与阴影

```css
--radius-control: 10px;   /* 按钮/输入框 */
--radius-card:    14px;   /* 卡片 */
--radius-float:   16px;   /* 浮层/弹窗 */
--radius-chip:     8px;   /* 小标签 */
--shadow-float: 0 4px 24px rgba(31,30,27,0.08);   /* 浮起 */
```

**原则**：圆角随"层级"递增——控件 < 卡片 < 浮层。
阴影很淡（8% 透明度），只用来暗示层级，不制造视觉噪音。

---

## 5. 毛玻璃（Glass）

```css
--glass: rgba(250, 249, 245, 0.85);
--glass-blur: blur(20px);
```

用于浮窗、命令面板、侧边抽屉——**85% 暖纸底 + 20px 模糊**。
既保持内容可读，又透出底层氛围。

---

## 6. 动效

```css
--ease: cubic-bezier(0.2, 0, 0, 1);   /* 快进慢出 */
--dur: 150ms;
```

**原则**：
- 只用 `opacity` / `transform`（GPU 友好）
- 时长 150ms——快到不打断，慢到可感知
- 缓动是"快进慢出"，模拟物理惯性

---

## 7. 组件样式地图

48 个 CSS 文件按模块拆分（见 `css/`），核心几个：

| 文件 | 模块 |
|---|---|
| `theme.css` | 全局令牌、清空、排版基线 |
| `chat.css` | 对话区（消息气泡、流式光标） |
| `composer.css` | 输入区（思考强度滑块、ultrafast 徽章） |
| `markdown.css` | Markdown 渲染（代码块/表格/引用） |
| `materials.css` | 材质（毛玻璃/纸张/凹陷） |
| `screensaver.css` | 待机屏保（四色流体 + 视频） |

其余是各功能面板（知识库、任务、启动器、讨论区…）。

---

## 8. 可访问性

- **对比度**：正文对背景 ≥ 7:1（AAA）
- **焦点环**：键盘导航有可见焦点（不靠颜色单独传达状态）
- **动效偏好**：尊重 `prefers-reduced-motion`
- **字号**：正文 14.5px 起（不玩 12px 小字）

---

## 9. 怎么用这套设计

1. 引入 `tokens/theme.css`（令牌层）
2. 按需引入 `css/*.css`（组件层）
3. 主题切换：给 `<html>` 加 `data-theme="light" | "dark"`，或不加（跟随系统）
4. 所有自定义样式都用 `var(--token)`，不要写死颜色

详见 `preview/index.html`（一个可直接打开的效果预览）。

---

MIT License · 来自 [栖木 Perch](https://huggingface.co/datasets/hongcoding/perch)