通用色系之诸神黄昏 · RAGNARÖK Palette
> Twilight of the Gods — A Deep Sea × Sunset Color System
> 诸神黄昏不是毁灭，而是「光沉入深海之前最后、最浓的那一抹金」。
> 深海蓝承载沉静与纵深，日落赭金承载方向与温度；其余一切让位。
- 中文名：通用色系之诸神黄昏
- 英文名：RAGNARÖK（全称 RAGNARÖK Palette — Twilight of the Gods Color System，简称 ROK）
- 技术标识：
ragnarok-palette - 版本：1.0.0
- 同源项目：Link-R World（游戏化 AI 旅行规划器）
0. 一句话指令（可直接贴给任意 AI）
> 采用 RAGNARÖK（通用色系之诸神黄昏） 配色：深海蓝 #06131f / #0c2b3e 作背景层（占 80%，必须叠两层 radial-gradient，禁止平涂）；日落赭金 #E8A24A / #F2B96B / #C9812F 作唯一强调色（占 ≤10%，只给当前项、主按钮、关键数字与路径，金底必配深字 #20140a）；辅助色只用低饱和雾青 #6FB3A8、紫灰 #8E86B8、板岩灰 #8FA6B8（各 ≤5%）；文字走 #F2F6F9 → #DCE6EE → #AFC1D0 → #7E94A6 → #5C7186 五级灰阶，禁纯白纯黑；警示 #E2B34C、危险 #D98A6A，禁粉红与纯红；柔和光效 0 0 28px rgba(232,162,74,.35) 只给金色元素；动效只有 140 / 260 / 420ms 三档，缓动 cubic-bezier(.22,.61,.36,1)，并写 prefers-reduced-motion 降级；按钮 min-height 46px，焦点环 #F2B96B。
1. 色板（唯一真源，禁止自行调色）
背景层 · Deep Sea 深海（≈80%）
| Token | HEX | RGB | 用途 |
|---|---|---|---|
--sea-900 |
#04101a |
4,16,26 | 遮罩 / 弹层底（最深） |
--sea-800 |
#06131f |
6,19,31 | 页面主背景 |
--sea-700 |
#08202f |
8,32,47 | 次级面板 |
--sea-600 |
#0c2b3e |
12,43,62 | 卡片 / 输入框 |
--sea-500 |
#123a52 |
18,58,82 | 悬浮态 / 按钮底 |
--sea-400 |
#1b4d69 |
27,77,105 | 渐变高光端 |
强调层 · Sunset Ochre 日落赭金（≤10%，唯一）
| Token | HEX | RGB | 用途 |
|---|---|---|---|
--gold-500 |
#E8A24A |
232,162,74 | 主强调：主按钮、路径、当前节点 |
--gold-400 |
#F2B96B |
242,185,107 | 亮端：渐变起点、文字强调、焦点环 |
--gold-600 |
#C9812F |
201,129,47 | 暗端：渐变终点、按下态 |
--gold-glow |
rgba(232,162,74,.45) |
— | 发光变量 |
辅助层 · 低饱和（各 ≤5%）
| Token | HEX | RGB | 语义 |
|---|---|---|---|
--mist-400 |
#6FB3A8 |
111,179,168 | 雾青：成功 / 自然 / 次要序列 |
--mist-600 |
#3E7C74 |
62,124,116 | 雾青暗端 |
--violet-400 |
#8E86B8 |
142,134,184 | 紫灰：第三序列 |
--slate-400 |
#8FA6B8 |
143,166,184 | 板岩灰：描边基线 |
--warn |
#E2B34C |
226,179,76 | 警示（金调，不用红） |
--danger |
#D98A6A |
217,138,106 | 危险（陶土橙，不用纯红） |
--ok |
#6FB3A8 |
111,179,168 | 成功 |
文字灰阶（不用纯白，不用纯黑）
--ink-100 #F2F6F9 标题 → --ink-200 #DCE6EE 正文 → --ink-300 #AFC1D0 说明 → --ink-400 #7E94A6 弱化 → --ink-500 #5C7186 占位
表面 / 描边 / 阴影
--surface-1: rgba(12,43,62,.72) 卡片（配 backdrop-filter: blur(10px)）
--surface-2: rgba(8,32,47,.86) 抽屉 / 底部栏
--surface-solid: #0a2436 下拉 / 弹层实底
--surface-elev: rgba(18,58,82,.55) 按钮 / chip
--hairline: rgba(143,166,184,.18) 常规描边
--hairline-strong: rgba(143,166,184,.32) 聚焦描边
--shadow-1: 0 4px 18px rgba(2,8,14,.4)
--shadow-2: 0 18px 48px rgba(2,8,14,.55)
--glow-gold: 0 0 28px rgba(232,162,74,.35)
2. 八条硬规则（违反即返工）
- 强调色唯一性 — 赭金只出现在「当前 / 关键 / 待行动」三处。同级并列元素中只有一个可用金色，其余一律
surface-elev+hairline。 - 禁色清单 — 粉红、玫红、纯红
#F00系、亮紫、荧光绿、糖果色渐变。危险用--danger #D98A6A，警示用--warn #E2B34C。 - 背景必须分层 —
body用双 radial-gradient 叠加再垫--sea-800；禁止平涂单色。 - 文字对比度 — 正文 ≥
--ink-200；--ink-400只做辅助说明，不得承载关键数据。 - 金底深字 — 金色按钮 / 徽标底上，文字必须是
#20140a，禁止金底白字（对比度不足）。 - 圆角统一 — 8 / 14 / 20 / 28 / 999 五档，同一层级不得混用。
- 动效克制 — 只用 140 / 260 / 420ms，缓动
cubic-bezier(.22,.61,.36,1)；必须写prefers-reduced-motion降级块。 - 光效只给金色 —
drop-shadow/glow只施加于金色元素；深色卡片、普通按钮不发光。
3. 载体映射（同一色板，十种落地形态）
| 载体 | 落地规则 |
|---|---|
| SVG 地图 / 路径 | 画布 #071b28 → #05131e；路径 --gold-500 2.2px + drop-shadow(0 0 5px rgba(232,162,74,.45))；已走过实线金，未走 --hairline 虚线；节点填 --sea-700 + 金描边，完成态填 --gold-600 |
| 折线 / 面积图 | 主线 --gold-500；面积 rgba(232,162,74,.18)；网格 rgba(143,166,184,.12)；对比序列 --mist-400 |
| 饼图 / 环图 | 序列固定 #E8A24A → #C9812F → #6FB3A8 → #8E86B8 → #8FA6B8；最大扇区用金色 |
| 柱状 / 条形 | 柱体 --gold-500，基线网格 rgba(143,166,184,.12)；第二序列 --mist-400 |
| 雷达图 | 面 rgba(232,162,74,.18)，边 --gold-500，网格 --hairline |
| 甘特图 | 五段：金 → 赭 → 雾青 → 紫灰 → 板岩灰；条尾标工期与 DDL；周末阴影 rgba(2,8,14,.4)；当前日期线 --gold-400 |
| 状态徽标 | 正常 --mist 系 / 进行中 --gold 系 / 待确认 --warn 系 / 异常 --danger 系；一律 pill + 半透明底 |
| KPI 数字 | 数字 --ink-100，单位与涨幅用金色；不使用彩色大数字 |
| 表格 | 表头 --ink-400 12px；斑马纹 rgba(143,166,184,.05)；描边只用 --hairline；合计行 rgba(232,162,74,.08) |
| PPT / Word / Excel | PPT 页底 #06131f、标题 #F2F6F9、关键数字 #F2B96B；Excel 表头填充 #0c2b3e + 白字、关键列 #F2B96B、条件格式「高」金「低」雾青 |
4. 起步代码
完整令牌见 assets/tokens.css；骨架样式见 assets/body-bg.css；可视化色板页见 assets/showcase.html（浏览器直接打开，点击色块即复制 HEX）。
body {
background:
radial-gradient(120% 80% at 20% -10%, rgba(27,77,105,.55) 0%, transparent 60%),
radial-gradient(90% 70% at 110% 10%, rgba(232,162,74,.12) 0%, transparent 55%),
var(--sea-800);
background-attachment: fixed;
}
.btn--primary {
background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
color: #20140a; /* 金底深字 */
box-shadow: var(--glow-gold);
}
5. 交付前自检清单
- [ ] 金色面积 ≤10%，且只落在关键交互上？
- [ ] 并列元素中金色唯一？
- [ ] 背景是分层渐变而非平涂？
- [ ] 金色底上是
#20140a深字？ - [ ] 文字最低
--ink-300，无#FFF/#000？ - [ ] 有
prefers-reduced-motion降级？ - [ ] 按钮 ≥46px、焦点环
--gold-400？ - [ ] 无粉红 / 纯红 / 高饱和渐变？
- [ ] 图表序列色遵循 §3 固定顺序？
6. 变体与边界
- 浅色变体（谨慎使用）：底
#F5F2EC暖白 / 卡片#FFFFFF/ 强调色降亮度为#C9812F（浅底上#E8A24A不可读）/ 标题#1A2B36/ 正文#33454F/ 描边rgba(26,43,54,.12)。不要把深海蓝直接反色成浅蓝。 - 不适用场景：儿童教育类产品、医疗警示界面（需要标准红）、需要严格无障碍 AAA 的小字号正文（深底对比度需实测）、品牌主色已为蓝绿系且不可更改的场合。
- 与 Morandi 商务风的分工：Morandi（钢蓝 / 赭石
#B5791F/ 雾青 / 紫灰 / 卡其）用于白天汇报类交付（PPT、Word、供应商看板）；RAGNARÖK 用于夜间感 / 探索感 / 交互产品 / 移动端 / 数据大屏。两套不在同一页面混用。
7. 文件清单
ragnarok-palette/
├── SKILL.md 本文件（规范真源）
├── README.md 介绍 · 应用场景 · 安装 · 版本
├── assets/
│ ├── tokens.css 完整设计令牌（复制即用）
│ ├── body-bg.css 起始骨架
│ └── showcase.html 自包含色板展示页（可点击取色）
└── references/
├── prompt-snippet.md 4 段可复制指令（完整/短/改稿/浅色）
└── use-cases.md 10 类应用场景逐条落地说明
