Design System · Quiet Tech

把复杂的事
讲得干净。

暗色只用在首屏,强调色只有一个,分隔靠发丝线不靠阴影。这套约束的目的不是好看,是让内容始终是主角。

01强调色
22px点阵尺度
2px圆角上限
1.85正文行高
Scroll to explore
01

版块与卡片

编号负责定位,标题负责结论,说明放右侧。三者基线对齐,不居中。

Type / Mono

等宽字体只做标记

编号、标签、数字用等宽字体,正文一律用无衬线。等宽在这里是「仪器刻度」,不是装饰。

11px · 字距 .22em · 大写
Color / Single

只允许一个强调色

靛蓝负责可点击、当前项与主按钮。第二种彩色一旦引入,视觉秩序就开始崩。

#2D6CDF · 悬停 #1F55B8
Space / Hairline

用线分隔,不用阴影

10% 不透明度的发丝线能切分空间,又不会像阴影那样制造「浮起来」的错觉。

rgba(11,11,12,.10) · 1px
02

列表

用于文章索引、日志、更新记录。悬停时整行左移 8px 并出现强调色底纹。

01 色板只有九个值墨三级、纸两级、强调三级、辅助两色——够了 → 02 字号用 clamp,不写断点一个公式覆盖 320px 到 1440px,少一层维护 → 03 动效只做位移与透明度不缩放、不旋转、不发光:这三种最容易显得廉价 →
03

两栏说明

左边放论述,右边放可核对的事实。事实表用等宽字体右对齐,因为它本质是一张数据表,不是一段文案。

这种结构适合放「关于」「规格」「技术参数」——凡是需要读者快速扫读并取信的内容。

强调色#2D6CDF
主墨色#0B0B0C
圆角2px
正文15.5px / 1.85
动效曲线cubic-bezier(.22,.61,.36,1)
04

长文排版

用 .qt-prose 包裹。暗色不进入正文区——长文黑底阅读疲劳。

这是一段正文的样子

行高 1.85,字号 15.5px,颜色 #24262B。正文不用纯黑,纯黑在浅底上对比过强,长时间阅读会有闪烁感。链接用强调色,不用下划线——下划线是「旧网页」的视觉噪音。

引用用左侧 3px 强调色竖线加浅底。竖线是这套系统里唯一允许的粗线。
npm run build
# 没有构建步骤时,这一行就是跑个检查
层级用途色值
墨首屏、代码、页脚#0B0B0C
纸正文底色#FFFFFF
强调链接、当前项、按钮#2D6CDF