E 官网设计规范 v3.0

单一令牌真源 · 全站 46 页统一 · 两套可切换主题。本页自身就是规范的示例(它只加载 main.css,不含任何页面级样式)。

一、真源与接入

配色与组件只在一个文件里定义,页面不再各写一套:

assets/css/main.css     ← 令牌 + 组件(唯一真源)
assets/js/theme.js      ← 主题切换(只决定选哪套)

<!-- 每个页面 <head> 末尾加两行,须在页面内联 <style> 之后 -->
<link rel="stylesheet" href="assets/css/main.css">
<script src="assets/js/theme.js"></script>

页面里旧的内联 :root 与旧变量名无需逐页删除:main.css §0c 已把全站 30 个旧变量名重定向到统一令牌,旧值会被整站接管。

二、两套主题

右下角按钮切换,选择记在 localStorage["e-theme"]。主题只换令牌值,不动任何规则。

主题定位主色辅色强调
ink(默认)冷调·靛蓝紫#6b8afd#b388ff#ffc95e
neon暖调·霓虹紫青#8b5cf6#22d3ee#ffb020

三、色板

语义令牌ink 值neon 值用途
页面底--bg-base#07070f#070510body 背景
卡片底--bg-surface#10101e#120c22卡片/面板
正文--text-primary#eef0fa#f4f2ff主文字
次要文字--text-secondary#9aa0bd#a8a3c7说明/副文
弱化文字--text-muted#676d8f#6f6893脚注/占位
主色--primary#6b8afd#8b5cf6品牌/链接
辅色--secondary#b388ff#22d3ee次级强调
强调--accent#ffc95e#ffb020指标/高亮
成功--success#6ee7c8#4ade80已验证/通过
警告--warning#ffc95e#ffb020进行中
危险--danger#ff6b8b#ff5f6d失败/必做
信息--info#7ec8ff#22d3ee提示
描边--border-subtlergba(148,163,255,.14) → rgba(139,92,246,.25)分隔线

四、字阶 / 间距 / 圆角

字阶  --fs-display 60 / --fs-h1 38 / --fs-h2 28 / --fs-h3 20
      --fs-body 16 / --fs-small 14 / --fs-caption 12
字体  --font-sans(Inter / PingFang SC 系)   --font-mono(等宽)
间距  --space-1..24 = 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96
圆角  --radius-sm 8 / -md 12 / -lg 18 / -xl 24 / -full 999
阴影  --shadow-card / --shadow-pop       光晕 --glow-primary / --glow-hover

五、组件示例

主按钮 次按钮 警示按钮 标签

任务总数27,029
状态标签已验证
状态标签进行中
表头 A表头 B
行一code
行二+ 涨 / − 跌

六、旧变量映射(全站 30 个)

旧名→ 新令牌旧名→ 新令牌
--bg--bg-base--ok / --okbg--success / -dim
--txt / --t1 / --ink--text-primary--warn / --warnbg--warning / -dim
--dim / --t2 / --ink2 / --mut--text-secondary--red / --err / --bad / --must--danger
--line / --bd / --bs--border-subtle--mustbg--danger-dim
--pri / --accent--primary--opt--text-muted
--pri2 / --acc2 / --vio--secondary--optbg--bg-elevated
--acc--primary-strong--mono--font-mono
--gold--warning--code--code-bg

七、边界

本规范只覆盖视觉层:颜色 / 字体 / 间距 / 圆角 / 阴影 / 组件样式。
不包含、不修改任何数据:*.json、docs/ 数据、.db 一律不碰;页面数据全部由 fetch 动态拉取,与样式解耦。
master 与 mos/bootstrap 为 M 团队代码线,不在本规范范围内。