Spaces:
Running
Running
| 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 —— 随便用，注明出处即可。 | |
| --- | |
| **🎨 好的界面不抢戏。它只是安静地把内容递到你面前。** | |