通用色系之诸神黄昏 · 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%）

强调层 · Sunset Ochre 日落赭金（≤10%，唯一）

辅助层 · 低饱和（各 ≤5%）

文字灰阶（不用纯白，不用纯黑）

--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. 八条硬规则（违反即返工）

1. 强调色唯一性 — 赭金只出现在「当前 / 关键 / 待行动」三处。同级并列元素中只有一个可用金色，其余一律 surface-elev + hairline。
2. 禁色清单 — 粉红、玫红、纯红 #F00 系、亮紫、荧光绿、糖果色渐变。危险用 --danger #D98A6A，警示用 --warn #E2B34C。
3. 背景必须分层 — body 用双 radial-gradient 叠加再垫 --sea-800；禁止平涂单色。
4. 文字对比度 — 正文 ≥ --ink-200；--ink-400 只做辅助说明，不得承载关键数据。
5. 金底深字 — 金色按钮 / 徽标底上，文字必须是 #20140a，禁止金底白字（对比度不足）。
6. 圆角统一 — 8 / 14 / 20 / 28 / 999 五档，同一层级不得混用。
7. 动效克制 — 只用 140 / 260 / 420ms，缓动 cubic-bezier(.22,.61,.36,1)；必须写 prefers-reduced-motion 降级块。
8. 光效只给金色 — drop-shadow / glow 只施加于金色元素；深色卡片、普通按钮不发光。

3. 载体映射（同一色板，十种落地形态）

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 类应用场景逐条落地说明