README.md

metadata

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

⭐ 这是栖木 Perch 的开源组件之一。 核心应用（macOS 本地优先 AI 工作台 · 0.08s 首字）在这里 → 🪵 栖木 Perch

🎨 perch-design

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

大多数 AI 应用长这样：纯白背景 + 蓝紫渐变 + 冷冰冰的圆角。 那是"工具"的语言，不是"伙伴"的语言。

栖木选了暖纸——纸张泛黄的白、墨水的深棕、陶土橙的强调色。 用户要长时间盯着它，暖色比冷色更不容易疲劳。

栖木 Perch 的完整设计系统 · 48 个 CSS 文件 · MIT 开源

---

✨ 三个设计原则

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

---

🎨 调色板（一眼看懂）

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

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

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

---

📦 三种用法

1. 直接引入（最快）

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

2. 只取令牌（最灵活）

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

3. 看效果（最直观）

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

---

🔧 主题切换

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

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

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

/* 令牌文件里三套定义并存：
   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 —— 随便用，注明出处即可。

---

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