设计哲学
「知简」的设计语言来自一间文人书斋——宣纸铺在案上，朱砂印章盖在卷首，浓墨写正文，淡墨写批注，青苔长在窗台缝隙里。
全站只用一个主色，零圆角，衬线标题，暖白底色。矩形像印章，红线像落款，赭色选中不用默认蓝。
色彩体系
墨色 · 文字
两级文字色，不引入第三级。浓墨写正文与标题，淡墨写描述、时间戳与辅助说明。
| 色值 | 用途 | 感觉 |
|---|
#1d1b20 | 正文、标题 | 浓墨 |
#6f655c | 副文、描述、时间戳 | 淡墨 |
宣纸 · 背景
四级暖色背景，从浅到深形成空间层次。色差很小，但人眼能感知到"这个区域和那个区域不一样"——这就是宣纸的质感，有温度的白，有深浅的白。
| 色值 | 用途 | 感觉 |
|---|
#fbf9f9 | 页面底色、卡片背景 | 温白纸 |
#faf7f4 | hover 底色、文章容器 | 米白 |
#f6efe7 | 侧边栏、表格头、引用块 | 米黄宣纸 |
#f3ece4 | 次级按钮、斑马纹 | 旧纸色 |
朱砂 · 主色
全站唯一签名色。朱砂是中国传统印泥的颜色，偏暗偏沉，不是鲜亮的正红。出现在一切需要"注意"的地方。
| 色值 | 用途 | 感觉 |
|---|
#9f000f | 边框、主按钮、活跃态、链接 | 朱砂红 |
#c41e3a | 主按钮按压态、hover | 略亮朱砂 |
#ffffff | 主色上的白字 | — |
朱砂渗透
主色在不同透明度下的渗透效果，用于 hover 底色、标签底色、焦点环等。不是灰色，是朱砂在宣纸上的渗透。
| 色值 | 用途 | 透明度 |
|---|
#f9f4f4 | 标签底色、formMessage | 4% |
#f8f1f1 | 页眉标签背景 | 6% |
#f7eeee | hover 背景、错误提示底色 | 8% |
#f6ecec | 输入框 focus ring | 10% |
青苔与驼色
冷绿点缀在暖色体系里，像窗台缝隙的苔藓。驼色是宣纸氧化后的颜色，和朱砂红线形成"线与印"的视觉关系。
| 色值 | 用途 | 感觉 |
|---|
#e6efe5 | 标签背景、表格行 hover | 青苔绿 |
#31483f | 青苔绿上的深色文字 | 青苔深 |
#e7ddd1 | 分割线、边框 | 驼色 |
#d9cbbc | 输入框边框 | 深驼色 |
功能色
| 色值 | 用途 | 感觉 |
|---|
#ba1a1a | 删除按钮、错误提示 | 危险红 |
#f4e2d7 | 文字选中背景 | 赭色选中 |
设计规则
约束
| 规则 | 说明 |
|---|
| 一个主色 | 全站只用一个签名色，不引入第二强调色。需要层次时用主色的透明度变体，而不是换颜色 |
| 零圆角 | border-radius: 0，矩形是这套风格的骨骼，圆角会稀释品牌感 |
| 不用默认蓝 | 选中色、链接色、focus ring 全部走主色系，禁止出现 #3B82F6 及类似蓝 |
| 不用纯白底 | 背景用温白 #fbf9f9 而非 #fff，纯白太冷，和暖色体系冲突 |
| 两级文字色 | 只设正文色和辅助色，不引入第三级灰色。层次靠字号和字重拉开，不靠颜色 |
节奏
| 规则 | 说明 |
|---|
| 主色红线作分割 | 1px solid 主色 是签名性元素，用于卡片边框、面板边框、活跃指示器 |
| 驼色线作弱分割 | 次级分割线、输入框边框用驼色，和红线形成"强/弱"两级分割 |
| 衬线作标题 | 所有标题和装饰数字用衬线体，正文用无衬线——两种字体各司其职，不混用 |
| 1.85~2 行高 | 中文正文行高留足，紧凑行高在暖色底上会显得局促 |
交互
| 规则 | 说明 |
|---|
| 微动反馈 | hover 上浮 2px，active 回缩 scale(0.98)，幅度小但可感知 |
| 渐显边框 | hover 时边框色从弱分割色渐变到主色，不是突变，像印章慢慢盖下去 |
| 0.2s 过渡 | 所有交互统一 0.2s ease，不快不慢，安静有节 |
| 透明度叠层 | hover 底色、标签底色、焦点环都用主色透明度，而不是另选颜色 |
字体
| 用途 | 字体 |
|---|
| 标题 / 装饰 | Noto Serif SC, Songti SC, STSong, Georgia, serif |
| 正文 / UI | system-ui, PingFang SC, Microsoft YaHei, sans-serif |
知简 · zhijian
