---
title: 栖木 Perch · Warm Paper 设计系统
emoji: 🎨
colorFrom: yellow
colorTo: red
sdk: static
pinned: false
license: mit
short_description: 像纸一样温暖、像工具一样安静的界面语言
---

> ⭐ **这是栖木 Perch 的开源组件之一。**
> 核心应用（macOS 本地优先 AI 工作台 · 0.08s 首字）在这里 →
> [**🪵 栖木 Perch**](https://huggingface.co/datasets/hongcoding/perch)

# 🎨 perch-design

### 一套像纸一样温暖、像工具一样安静的界面语言。

> 大多数 AI 应用长这样：纯白背景 + 蓝紫渐变 + 冷冰冰的圆角。
> 那是"工具"的语言，不是"伙伴"的语言。
>
> 栖木选了**暖纸**——纸张泛黄的白、墨水的深棕、陶土橙的强调色。
> 用户要长时间盯着它，**暖色比冷色更不容易疲劳**。

[栖木 Perch](https://huggingface.co/datasets/hongcoding/perch) 的完整设计系统 · 48 个 CSS 文件 · MIT 开源

---

## ✨ 三个设计原则

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

---

## 🎨 调色板（一眼看懂）

```
┌─────────────────────────────────────────────────────────┐
│  暖纸底 #faf9f5     卡片 #f0eee6     凹陷 #e8e5db       │
│  墨水 #1f1e1b       次要 #6b6862     提示 #9c988d       │
│  陶土橙 #d97757  ← 唯一的强调色（不滥用）               │
└─────────────────────────────────────────────────────────┘
```

**只有一个强调色**。大多数界面之所以"脏"，就是因为用了太多颜色。
栖木只用一个陶土橙，其余全靠中性色的层次关系。

**深色模式**不是简单反色——是重新调的一套：
暖纸 `#faf9f5` → 炭黑 `#262521`，橙 `#d97757` → `#e08a6e`（深色下略提亮）。

---

## 📦 三种用法

### 1. 直接引入（最快）

```html
<link rel="stylesheet" href="tokens/theme.css" />
<link rel="stylesheet" href="css/chat.css" />
<!-- 按需引入其他模块 -->
```

### 2. 只取令牌（最灵活）

```css
:root {
  --bg: #faf9f5;
  --text: #1f1e1b;
  --accent: #d97757;
  /* ... */
}
```

### 3. 看效果（最直观）

打开 `preview/index.html` —— 一个零依赖的组件预览页。

---

## 🔧 主题切换

```html
<!-- 跟随系统（默认） -->
<html>

<!-- 强制浅色 -->
<html data-theme="light">

<!-- 强制深色 -->
<html data-theme="dark">
```

```css
/* 令牌文件里三套定义并存：
   1) @media (prefers-color-scheme: dark)  → 跟随系统
   2) [data-theme="light"]                 → 显式浅色
   3) [data-theme="dark"]                  → 显式深色
   顺序保证显式覆盖能盖过系统偏好。 */
```

---

## 📐 设计令牌速查

| 类别 | 令牌 | 值 |
|---|---|---|
| **圆角** | `--radius-control` | 10px |
| | `--radius-card` | 14px |
| | `--radius-float` | 16px |
| **阴影** | `--shadow-float` | `0 4px 24px rgba(31,30,27,0.08)` |
| **毛玻璃** | `--glass` / `--glass-blur` | 85% 暖纸 + 20px 模糊 |
| **动效** | `--ease` / `--dur` | 快进慢出 / 150ms |
| **字体** | `--font-serif` | Source Serif 4 |
| | `--font-sans` | Inter |
| | `--font-mono` | JetBrains Mono |

---

## 🗂️ 文件地图

```
perch-design/
├── tokens/
│   └── theme.css            全局令牌 + 三套主题 + 排版基线
├── css/                     48 个模块样式
│   ├── chat.css             对话区
│   ├── composer.css         输入区（思考滑块）
│   ├── markdown.css         Markdown 渲染
│   ├── materials.css        材质
│   ├── screensaver.css      待机屏保
│   └── ...                  各功能面板
├── docs/
│   └── design-system.md     ★ 完整设计文档（先读这个）
└── preview/
    └── index.html           零依赖预览页
```

---

## ♿ 可访问性

- 正文对背景对比度 **≥ 7:1**（WCAG AAA）
- 键盘导航有可见焦点环
- 尊重 `prefers-reduced-motion`
- 正文字号 14.5px 起（不玩 12px 小字）

---

## 🔗 相关项目

| 项目 | 说明 | 链接 |
|---|---|---|
| **栖木 Perch**（应用） | macOS 本地优先 AI 工作台 | https://huggingface.co/datasets/hongcoding/perch |
| **perch-ultrafast**（框架） | 混合流 + Ultrafast：首字 1s → 80ms | https://huggingface.co/hongcoding/perch-ultrafast |
| **perch-gpu**（工具） | 本机 GPU 加速：冷启动 5s → 0.08s | https://huggingface.co/hongcoding/perch-gpu |
| **perch-design**（本库） | 就是这套设计系统 | https://huggingface.co/hongcoding/perch-design |

## 📜 许可

MIT —— 随便用，注明出处即可。

---

**🎨 好的界面不抢戏。它只是安静地把内容递到你面前。**