Light / Dark typography palettes

明暗模式字体配色对照

每一组都是同一套气质的 明亮模式 + 黑暗模式。 明亮模式背景固定为 #FFFFFF;黑暗模式不使用纯黑,而是用更软的冷黑、石墨黑或蓝黑。

这里仍然只是独立设计稿,不会影响真实文章页、网格页或筛选页。重点只看文字、标签、链接、线条和弱信息。

明亮模式 #ffffff

一个很长的文章标题,用来测试明暗模式下的标题重量和换行节奏

这是一段正文示例。我们主要看标题、正文、辅助文字和链接之间的距离感: 链接颜色 不能太跳,也不能弱到像普通正文。明暗模式要像同一套系统,而不是两个互不相干的页面。

理想状态是标题清楚压住页面,正文稳定,日期、标签、目录、反链和推荐阅读安静地退到后面。 黑暗模式需要避免纯黑压迫,白色模式需要避免灰度太浅导致发虚。

Toc 文章目录 / 章节标题 / 当前阅读位置
Back 反向链接 12,只显示数字,不加圆形背景
body #343434
muted #696969
accent #111111
黑暗模式 #111315

一个很长的文章标题,用来测试明暗模式下的标题重量和换行节奏

这是一段正文示例。我们主要看标题、正文、辅助文字和链接之间的距离感: 链接颜色 不能太跳,也不能弱到像普通正文。明暗模式要像同一套系统,而不是两个互不相干的页面。

理想状态是标题清楚压住页面,正文稳定,日期、标签、目录、反链和推荐阅读安静地退到后面。 黑暗模式需要避免纯黑压迫,白色模式需要避免灰度太浅导致发虚。

Toc 文章目录 / 章节标题 / 当前阅读位置
Back 反向链接 12,只显示数字,不加圆形背景
body #c9ced6
muted #8d96a3
accent #dfe5ec
明亮模式 #ffffff

一个很长的文章标题,用来测试明暗模式下的标题重量和换行节奏

这是一段正文示例。我们主要看标题、正文、辅助文字和链接之间的距离感: 链接颜色 不能太跳,也不能弱到像普通正文。明暗模式要像同一套系统,而不是两个互不相干的页面。

理想状态是标题清楚压住页面,正文稳定,日期、标签、目录、反链和推荐阅读安静地退到后面。 黑暗模式需要避免纯黑压迫,白色模式需要避免灰度太浅导致发虚。

Toc 文章目录 / 章节标题 / 当前阅读位置
Back 反向链接 12,只显示数字,不加圆形背景
body #3f3f46
muted #71717a
accent #27272a
黑暗模式 #131316

一个很长的文章标题,用来测试明暗模式下的标题重量和换行节奏

这是一段正文示例。我们主要看标题、正文、辅助文字和链接之间的距离感: 链接颜色 不能太跳,也不能弱到像普通正文。明暗模式要像同一套系统,而不是两个互不相干的页面。

理想状态是标题清楚压住页面,正文稳定,日期、标签、目录、反链和推荐阅读安静地退到后面。 黑暗模式需要避免纯黑压迫,白色模式需要避免灰度太浅导致发虚。

Toc 文章目录 / 章节标题 / 当前阅读位置
Back 反向链接 12,只显示数字,不加圆形背景
body #c5c7ce
muted #8c9099
accent #f3f4f6
明亮模式 #ffffff

一个很长的文章标题,用来测试明暗模式下的标题重量和换行节奏

这是一段正文示例。我们主要看标题、正文、辅助文字和链接之间的距离感: 链接颜色 不能太跳,也不能弱到像普通正文。明暗模式要像同一套系统,而不是两个互不相干的页面。

理想状态是标题清楚压住页面,正文稳定,日期、标签、目录、反链和推荐阅读安静地退到后面。 黑暗模式需要避免纯黑压迫,白色模式需要避免灰度太浅导致发虚。

Toc 文章目录 / 章节标题 / 当前阅读位置
Back 反向链接 12,只显示数字,不加圆形背景
body #263447
muted #667386
accent #123a63
黑暗模式 #0d1119

一个很长的文章标题,用来测试明暗模式下的标题重量和换行节奏

这是一段正文示例。我们主要看标题、正文、辅助文字和链接之间的距离感: 链接颜色 不能太跳,也不能弱到像普通正文。明暗模式要像同一套系统,而不是两个互不相干的页面。

理想状态是标题清楚压住页面,正文稳定,日期、标签、目录、反链和推荐阅读安静地退到后面。 黑暗模式需要避免纯黑压迫,白色模式需要避免灰度太浅导致发虚。

Toc 文章目录 / 章节标题 / 当前阅读位置
Back 反向链接 12,只显示数字,不加圆形背景
body #c4ccda
muted #8490a3
accent #aebfda
明亮模式 #ffffff

一个很长的文章标题,用来测试明暗模式下的标题重量和换行节奏

这是一段正文示例。我们主要看标题、正文、辅助文字和链接之间的距离感: 链接颜色 不能太跳,也不能弱到像普通正文。明暗模式要像同一套系统,而不是两个互不相干的页面。

理想状态是标题清楚压住页面,正文稳定,日期、标签、目录、反链和推荐阅读安静地退到后面。 黑暗模式需要避免纯黑压迫,白色模式需要避免灰度太浅导致发虚。

Toc 文章目录 / 章节标题 / 当前阅读位置
Back 反向链接 12,只显示数字,不加圆形背景
body #3d3d3d
muted #767676
accent #202020
黑暗模式 #151517

一个很长的文章标题,用来测试明暗模式下的标题重量和换行节奏

这是一段正文示例。我们主要看标题、正文、辅助文字和链接之间的距离感: 链接颜色 不能太跳,也不能弱到像普通正文。明暗模式要像同一套系统,而不是两个互不相干的页面。

理想状态是标题清楚压住页面,正文稳定,日期、标签、目录、反链和推荐阅读安静地退到后面。 黑暗模式需要避免纯黑压迫,白色模式需要避免灰度太浅导致发虚。

Toc 文章目录 / 章节标题 / 当前阅读位置
Back 反向链接 12,只显示数字,不加圆形背景
body #c7c7cb
muted #8e8e96
accent #f0f0f2
明亮模式 #ffffff

一个很长的文章标题,用来测试明暗模式下的标题重量和换行节奏

这是一段正文示例。我们主要看标题、正文、辅助文字和链接之间的距离感: 链接颜色 不能太跳,也不能弱到像普通正文。明暗模式要像同一套系统,而不是两个互不相干的页面。

理想状态是标题清楚压住页面,正文稳定,日期、标签、目录、反链和推荐阅读安静地退到后面。 黑暗模式需要避免纯黑压迫,白色模式需要避免灰度太浅导致发虚。

Toc 文章目录 / 章节标题 / 当前阅读位置
Back 反向链接 12,只显示数字,不加圆形背景
body #2b3648
muted #687386
accent #1e3a70
黑暗模式 #0b0f17

一个很长的文章标题,用来测试明暗模式下的标题重量和换行节奏

这是一段正文示例。我们主要看标题、正文、辅助文字和链接之间的距离感: 链接颜色 不能太跳,也不能弱到像普通正文。明暗模式要像同一套系统,而不是两个互不相干的页面。

理想状态是标题清楚压住页面,正文稳定,日期、标签、目录、反链和推荐阅读安静地退到后面。 黑暗模式需要避免纯黑压迫,白色模式需要避免灰度太浅导致发虚。

Toc 文章目录 / 章节标题 / 当前阅读位置
Back 反向链接 12,只显示数字,不加圆形背景
body #c2cad8
muted #838fa2
accent #b7c7e4

我会先看

A 作为安全默认,D 作为最接近线性编辑版的方向,C/E 如果你想要一点蓝黑墨水感再考虑。

避免方向

明亮模式避免正文过浅;黑暗模式避免纯黑背景加纯白正文,那会显得硬、累、像终端。

下一步

你挑中一组后,我再单独做文章页、网格页、筛选页、时间线的明暗模式预览,不直接改真实页面。