中国风色卡设计：知简的色与形

设计哲学

「知简」的设计语言来自一间文人书斋——宣纸铺在案上，朱砂印章盖在卷首，浓墨写正文，淡墨写批注，青苔长在窗台缝隙里。

全站只用一个主色，零圆角，衬线标题，暖白底色。矩形像印章，红线像落款，赭色选中不用默认蓝。

---

色彩体系

墨色 · 文字

两级文字色，不引入第三级。浓墨写正文与标题，淡墨写描述、时间戳与辅助说明。

色值	用途	感觉
#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