SCHEME A / meter-dark-contrast

曜金 暗色高对比立体

近黑底 + 高饱和强调色 + 暗色新拟态。层次不靠灰度渐变,靠「亮边白光 + 纯黑投影」把控件从深面挤出来;颜色只用于数据与状态,正文一律接近纯白,保证在暗环境下依然一眼可读。

明度深色
强调色#F2C42E
材质暗色立体 / 双层影
正文对比度15.8:1 AAA
适合控制台 / 用量面板

01 色彩 Palette

强调色只承担数据 + 状态 + 主操作

同屏最多三种颜色,其余全部交给暗色中性阶。中性阶负责层次,强调色负责含义。

#F2C42E电光黄 / 主色

#FF6A45珊瑚橙 / 危险

#35C759荧光绿 / 成功

#35D0C6青蓝 / 提示

#A98BFF紫罗兰 / 数据

#F272A8蜜桃粉 / 数据

#C7E85A柠檬 / 数据

#4E9BFF天蓝 / 链接

N900 #0B0C0D页面底

N850 #101216凹槽底

N800 #17191E禁用面

N700 #23262C凸起面

N500 #5C6169弱文字

N300 #A8AEB6次要文字 7.4:1

N0 #F2F4F7正文 15.8:1

/* 暗色高对比 · 令牌 */
:root {
  --bg: #0B0C0D;      /* 页面底 */
  --surface: #14161B; /* 卡片面 */
  --raised: #1C1F25;  /* 凸起面 */
  --line: #262A31;    /* 描边 */
  --accent: #F2C42E;  /* 主色:黄 */
  --danger: #FF6A45;
  --success: #35C759;
  --info: #35D0C6;
  --ink: #F2F4F7;    /* 正文 15.8:1 */
  --ink-2: #A8AEB6;  /* 次要 7.4:1 */
  --ink-3: #6B7078;  /* 弱化,仅装饰 */
  --shadow-out: 0 10px 22px -4px rgba(0,0,0,.6),
                -2px -2px 6px rgba(255,255,255,.05);
  --shadow-in: inset 2px 3px 7px rgba(0,0,0,.9),
               inset -1px -1px 2px rgba(255,255,255,.05);
  --r-card: 18px; --r-ctrl: 11px; --r-pill: 99px;
}

02 组件配方 Components

全部为真实 CSS 渲染,可直接复制
Buttons · 按钮
Form · 输入 / 选择 / 开关 / 滑块 / 分段
68%
Status · 状态徽章
运行中 接近上限 同步中 未启用
Table · 数据表
令牌用量占比状态
deepseek-flash1.24 M62%正常
doubao-pro0.48 M24%正常
gpt-4o0.28 M14%限额 80%

03 立体配方 Depth

光源恒在左上

亮边 rgba(255,255,255,.07),暗边纯黑 .8;凹陷反向使用内阴影。

凸起 · Raised按钮 / 卡片 / 图标键
凹陷 · Inset输入 / 滑轨 / 未选开关
发光 · 选中 / 聚焦1px 强调边 + 同色外发光

04 布局模式 Patterns

A · 侧栏控制台

左侧 226px 固定导航 + 顶栏 + 内容三行:额度卡(3 等分)→ 图表 → 排行 / 表格。适合数据密度中等的后台。

用量概览实时
本月调用2.0 M较上月 +18%
额度剩余68%约 12 天
平均延迟410msP95 1.2s

B · 单列仪表盘:无侧栏,顶栏吸顶 + 单列卡片流,宽度上限 1180px。适合报表、账单、单任务视图。

05 使用规则 Rules

违反即破风格

该做 / DO

  • 主操作只用黄底黑字,一屏一个。
  • 数据色最多三种,且与图例一一对应。
  • 凸起只给主按钮、图标按钮、卡片;输入 / 滑轨 / 未选开关用凹陷。
  • 聚焦态 = 1px 强调色描边 + 同色外发光。

不该做 / DON'T

  • 不要用 #6B7078 以下的灰写正文(对比度不足)。
  • 不要给彩色文字再用同色背景块,暗面上会糊。
  • 不要满屏浮雕,超过三成面积就没有层次了。
  • 不要用纯黑 #000 做卡片底,会和页底粘住。