编号 07 · Dark Mode(OLED)

纯黑之上,霓虹为引

以 #000000 为底:OLED 像素逐颗熄灭,功耗随黑而降。文字保持 7:1 以上对比,辉光只留给最关键的一处强调。

  • 类别 通用风格
  • 年代 2020s 现代
  • 复杂度
  • 最适合 夜间应用 · 代码平台 · OLED 设备
  • 无障碍 WCAG AAA · 对比 7:1+

为什么选择 OLED 深色

深色不是把白色反转,而是一套围绕自发光屏幕重新设计的对比、辉光与能耗策略。

纯黑省电

OLED 面板上 #000000 像素完全熄灭,深色界面可显著降低屏幕功耗,暗处越多越省电。

夜视护眼

低白光发射减少夜间眩光与视疲劳;正文对比度保持 7:1 以上,暗而不糊、字字清晰。

霓虹聚焦

极少量辉光(text-shadow: 0 0 10px)只用于关键强调,让视线第一时间落在重点上。

按钮与控件

悬停增亮并出现极简辉光,按下下沉 1px,禁用态降为碳灰——状态差异一眼可辨。

PRO 会员 BETA 频道

开关、徽标与按钮均满足 44px 触控高度,焦点环为 3px 电光蓝。

夜间订阅

订阅深色模式设计周刊,只在夜里十点后发送。

提交即表示同意夜间通讯协议,可随时一键退订。

配色板

三层黑作底,四色霓虹作笔:黑负责熄灭像素,霓虹负责点亮层级。

#000000纯黑 · 主底色
#121212碳灰 · 卡片面
#0A0E27午夜蓝 · 信息条
#39FF14霓虹绿 · 主强调
#0080FF电光蓝 · 焦点环
#FFD700鎏金 · 徽标
#BF00FF等离子紫 · 点缀

字体级阶

Space Grotesk 负责展示与标题的机能感,Inter 负责正文的夜读舒适度。

显示级 · Space Grotesk · 48px

夜航 Nightfall

标题 · Space Grotesk · 28px

深色是屏幕的睡眠姿态

正文 · Inter · 16px

OLED 面板上每一颗熄灭的像素,都是省下的一毫安时。高对比让夜读依然清晰,而辉光被克制地留在了最重要的地方。

标签 · Inter · 13px

Dark Mode · OLED Ready