Cinderfolio-Rspress
Rspress 是基于 Rsbuild 的静态站点生成器。
深色
g0#121212浅色
g16bg#fafaf8品牌色
brand#f97316显示职责
背景层次
- 画布bg
#fafaf8g16· 页面、导航、侧栏、代码块、提示框内行内代码与图表节点 - 浅层底色
#ececeag15· 行内代码、提示区域、轻底色容器与卡片渐变 - 悬浮与分组底色
#dddddbg14· 未选中项悬浮、图表分组
文字层次
- 正文与标题
#121212g0· 正文、标题、主图标、图表文字与连线 - 次要文字
#3e3e3dg3· 摘要、说明与侧栏目录 - 辅助文字
#5b5b5ag5· 时间、路径、行号与元信息
边界与控件
- 淡分隔线
#dddddbg14· 导航底线、表格、卡片、图表外框与滚动条 - 强分隔线
#c0c0bfg12· 弹窗外框、明确分组与滚动条悬停 - 控件边界
#5b5b5ag5· 次要按钮、切换按钮与搜索输入框的边界 - 控件选中底色
#f97316brand· 切换按钮等控件的品牌色实底 - 控件选中文字
#121212g0· 品牌色实底上的文字与滑块，自动选择对比更高的端点
品牌与状态
- 交互提示
#f97316brand· 导航强调、悬浮提示、焦点、搜索当前项边框、代码高亮线与复制成功提示 - 链接与当前项目文字
#ef6606dark· 正文链接、当前项目文字与语法关键词 - 图表描边
#d65b06darker· 图表节点与分组描边 - 文字选区底色
#fad8c0brand 25% + bg 75%· 鼠标或键盘选择文字；正文、说明与链接保留原字色 - 当前项目底色
#fae6d6brand 15% + bg 85%· 当前导航、项目与代码高亮行的淡品牌色底
固定色阶
g00%
#121212g16.25%
#212120g212.5%
#2f2f2fg318.75%
#3e3e3dg425%
#4c4c4cg531.25%
#5b5b5ag637.5%
#696968g743.75%
#787877g850%
#868685g956.25%
#959593g1062.5%
#a3a3a2g1168.75%
#b2b2b0g1275%
#c0c0bfg1381.25%
#cfcfcdg1487.5%
#dddddbg1593.75%
#ececeag16bg100%
#fafaf8darkerΔL −10
#d65b06darkΔL −5
#ef6606brandΔL 0
#f97316lightΔL +10
#fa9148lighterΔL +20
#fcaf79