Spaces:
Running
Running
| # 栖木 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) | |