RAGNARÖK Palette

通用色系之诸神黄昏 / RAGNARÖK Palette（Twilight of the Gods）— 深海蓝 × 日落赭金配色体系，出自 Link-R World。用于任何需要「深夜感 + 探索感 + 精致温暖」的界面、仪表板、SVG 图、数据大屏、海报、PPT、Word/Excel 版式。触发词（中）：诸神黄昏配色、通用色系之诸神黄昏、深海蓝配色、日落赭金、Link-R 配色、夜间仪表板配色、探索感界面、深海金色调、暗色系暖调。触发词（EN）：Ragnarok palette, RAGNARÖK, twilight of the gods, deep sea blue, suns

chenzhe223-tech@chenzhe223-tech

Install

openclaw skills install @chenzhe223-tech/ragnarok-palette

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

表面 / 描边 / 阴影

text

--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）。

css

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. 文件清单