SCHEME C2 / paper-neumorphic-ui · dark

纸雕·暗面 深墨纸上浮雕

纸雕的暗色模式:几何完全不变——同一光源、同一圆角、同一阴影参数表;只把纸面换成深墨纸、把文字换成浅色、把强调红提亮一档。暗环境下浮雕依然成立,因为亮边与暗边的明暗差在深色上同样可辨。

底色#1E2026
强调#F05260
材质暗面双向浮雕
关系纸雕的暗色模式
适合夜间工具 / 长时面板
01

明暗对照 Light / Dark

同一套设计系统的两种明度:几何共享,只换表面色与文字色。

Paper Light纸雕 · 明面
Paper Dark · this纸雕 · 暗面
02

色彩 Palette

页面与卡片依旧同色;层次只靠光影。暗面下禁用彩色卡片这一条不变。

纸底 Paper#1E2026

亮面 Lightrgba(255,255,255,.055)

暗面 Darkrgba(0,0,0,.55)

强调红 Accent#F05260

主文字#E9EAEF

次文字#A2A6B4

弱文字#707482

深红#8C1A26

/* 纸雕·暗面 · 令牌(与明面共用几何) */
:root{
  --paper: #1E2026;
  --light: rgba(255,255,255,.055); --dark: rgba(0,0,0,.55);
  --ink-1: #E9EAEF; --ink-2: #A2A6B4; --ink-3: #707482;
  --accent: #F05260; --accent-glow: rgba(240,82,96,.4);
  --shadow-out: 8px 8px 16px var(--dark), -8px -8px 16px var(--light);
  --shadow-in: inset 5px 5px 10px rgba(0,0,0,.62), inset -5px -5px 10px var(--light);
  --r-card: 18px; --r-inset: 14px; --r-nav: 12px;
}
03

组件 Components

Buttons
Form
72%
凹凸日历 · 凸=普通 凹=今天 红点=有事件
2829301234 567891011
能量核 · 暗面上红晕可读性更好
42
12待办 7进行中 3成员
04

立体配方 Depth

光源恒在左上。暗面下亮边强度降到 .055(约一半),暗边提到 .55——因为暗面上的白光太亮会发光糊边,黑影太浅会贴底。

凸起 · Raised 亮边 .055 + 暗边 .55
凹陷 · Inset 内阴影 .62 + 内亮边 .055
05

布局模式 Patterns

与明面完全同构:胶囊导航凹陷槽 + 选中凸起 → 主视觉能量核 → 底部数据条。同一页面只选一档,不要明暗混用。

+18%
项目42
本周新增+18%
存储6.8GB
成员3
06

规则 Rules

该做 / DO

  • 明面暗面共用同一圆角、间距、光源方向与阴影参数表。
  • 暗面强调红用提亮后的 #F05260,正文用 #E9EAEF。
  • 凸 = 普通、凹 = 激活 / 今天,语义两档一致。
  • 暗面上把红色面积继续压在 5% 以内。

不该做 / DON'T

  • 不要把明面的白色亮边直接搬到暗面,会糊成雾。
  • 不要给卡片单独上色,明暗两档同理。
  • 不要在暗面用 #E03546 原文本红,对比度不够。
  • 不要明面暗面混用——同一页面只选一档。