Spaces:
Running
Running
File size: 4,976 Bytes
f402bb3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 | # 栖木 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)
|