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 |
— | 危险 |
主题切换机制
/* 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. 圆角与阴影
--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）
--glass: rgba(250, 249, 245, 0.85);
--glass-blur: blur(20px);
用于浮窗、命令面板、侧边抽屉——85% 暖纸底 + 20px 模糊。 既保持内容可读，又透出底层氛围。
6. 动效
--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. 怎么用这套设计
- 引入
tokens/theme.css（令牌层） - 按需引入
css/*.css（组件层） - 主题切换：给
<html>加data-theme="light" | "dark"，或不加（跟随系统） - 所有自定义样式都用
var(--token)，不要写死颜色
详见 preview/index.html（一个可直接打开的效果预览）。
MIT License · 来自 栖木 Perch