sai-assets可复用网页资产库
GitHub

Abyss Lab Record 暗黑实验记录

abyss-lab-record v1.0.0 MIT 主题 · 配色与字体 12 文件 · 549 KB
新窗口 ↗
载入预览…

近黑底 + 工程网格 + 等宽 HUD + 单关键词橙，深色主叙事、纸面只做独立反转章节；面板全透明虚线检测框;适用:近黑非纯黑底 + 单层工程网格（body 一层，透明度 <=0.14，不压文字）;标题无衬线 800-900，中文降一档；等宽管数据 HUD + tabular-nums；手写只做英文短句点缀;橙色只染单关键词/危险数值/选中态/光源，单屏 <=10%;面板全透明 + 1px 白线/虚线边框，检测框分静态虚线与描边流动两种;纸面只做独立 data-theme=light 反转章节（表单卡 + 墨字 + 单枚橙章）;动效只动 transform/opacity 150-300ms，描边流动是唯一的描边动画且降级静止;mono 栈永不落回系统中文字体，裸 monospace/Menlo/Consolas 禁入生产栈

不适用场景

禁用:衬线标题/正文（Georgia/Noto Serif/SimSun/宋体禁入）;面板实底色 + 投影（纸面表单卡除外）;整词橙色大标题（23/24 类必须降为关键词橙 + 描边混排）;描边空心字常驻正文（只许 display 大字，须验对比度）;低透明 mono 小字（须提到 14px 或提亮到 4.5:1）;为状态新增强调色（用下划线/字重/底色微变）

元数据

类目
主题 · 配色与字体
版本
v1.0.0
许可
MIT
规模
12 文件 · 549 KB
来源
sai-theme-lab · themes/abyss-lab-record.json

标签

  • dark
  • theme
  • paper
  • mono
  • grid
  • record

验证证据

2026-11-03 · python packs/abyss-lab-record/scripts/assert_tokens.py

PASS assert_tokens abyss-lab-record | variants=1 keys=22 hex=17 rgba=2 effects=3 contrast=ink/bg=17.57 onAccent/accent=5.54 | not_in_palette=['green']

归属与许可

  • Sai Theme Lab · themes/abyss-lab-record.json · MIT
    原色板来源(旧库原子,只读取用)

取用

固定版本(CDN)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nakamotosai/sai-assets@pack/[email protected]/packs/abyss-lab-record/css/default.css">
raw 直取(跟随 main)
curl -O https://raw.githubusercontent.com/nakamotosai/sai-assets/main/packs/abyss-lab-record/SKILL.md
仓库内落地
python scripts/apply.py abyss-lab-record --to <项目目录>
整包下载
https://assets.ouuut.com/downloads/abyss-lab-record.zip

源码与规则

pack.json
{
  "schema": 1,
  "id": "abyss-lab-record",
  "title": "Abyss Lab Record 暗黑实验记录",
  "kind": "theme",
  "category": "themes",
  "version": "1.0.0",
  "license": "MIT",
  "attribution": [
    {
      "name": "Sai Theme Lab · themes/abyss-lab-record.json",
      "license": "MIT",
      "what": "原色板来源(旧库原子,只读取用)"
    }
  ],
  "origin": {
    "project": "sai-theme-lab",
    "path": "themes/abyss-lab-record.json",
    "derived_from": null
  },
  "entry": "SKILL.md",
  "files": {
    "tokens": [
      "tokens/absolute.json",
      "tokens/index.json",
      "tokens/semantic/abyss-lab-record.json"
    ],
    "css": [
      "css/default.css",
      "css/all.css",
      "css/themes.css"
    ],
    "usage": "docs/usage.md",
    "assert": "scripts/assert_tokens.py",
    "preview": "preview/index.html"
  },
  "tags": [
    "dark",
    "theme",
    "paper",
    "mono",
    "grid",
    "record"
  ],
  "when": "近黑底 + 工程网格 + 等宽 HUD + 单关键词橙，深色主叙事、纸面只做独立反转章节；面板全透明虚线检测框;适用:近黑非纯黑底 + 单层工程网格（body 一层，透明度 <=0.14，不压文字）;标题无衬线 800-900，中文降一档；等宽管数据 HUD + tabular-nums；手写只做英文短句点缀;橙色只染单关键词/危险数值/选中态/光源，单屏 <=10%;面板全透明 + 1px 白线/虚线边框，检测框分静态虚线与描边流动两种;纸面只做独立 data-theme=light 反转章节（表单卡 + 墨字 + 单枚橙章）;动效只动 transform/opacity 150-300ms，描边流动是唯一的描边动画且降级静止;mono 栈永不落回系统中文字体，裸 monospace/Menlo/Consolas 禁入生产栈",
  "not_for": "禁用:衬线标题/正文（Georgia/Noto Serif/SimSun/宋体禁入）;面板实底色 + 投影（纸面表单卡除外）;整词橙色大标题（23/24 类必须降为关键词橙 + 描边混排）;描边空心字常驻正文（只许 display 大字，须验对比度）;低透明 mono 小字（须提到 14px 或提亮到 4.5:1）;为状态新增强调色（用下划线/字重/底色微变）",
  "default_variant": "abyss-lab-record",
  "verified": {
    "date": "2026-11-03",
    "how": "python packs/abyss-lab-record/scripts/assert_tokens.py",
    "evidence": "PASS assert_tokens abyss-lab-record | variants=1 keys=22 hex=17 rgba=2 effects=3 contrast=ink/bg=17.57 onAccent/accent=5.54 | not_in_palette=['green']"
  },
  "canonical_home": null,
  "changelog": [
    "1.0.0:语义层按 WCAG ≥4.5:1 修正 accent/on-accent 配对(见 tokens/semantic 的 a11y 与 docs/usage.md);tokens/absolute.json 未改。"
  ]
}
css/default.css
/* Default = abyss-lab-record — 只链接这一份即最快 apply */
/* Abyss Lab Record 暗黑实验记录 — 近黑底 + 工程网格 + 等宽 HUD + 单关键词橙，深色主叙事、纸面只做独立反转章节；面板全透明虚线检测框 */
/* 语义变量与 --theme-* 别名双发;字体/圆角透传源令牌 */

:root,
[data-theme="abyss-lab-record"],
.theme-abyss-lab-record {
  color-scheme: dark;
  --bg: #0B0B0E;
  --theme-bg: #0B0B0E;
  --surface: #14141B;
  --theme-surface: #14141B;
  --surface-2: #14161A;
  --theme-surface-2: #14161A;
  --border: rgba(245,242,234,0.16);
  --theme-border: rgba(245,242,234,0.16);
  --ink: #F5F2EA;
  --theme-ink: #F5F2EA;
  --ink-muted: #B8B4AC;
  --theme-ink-muted: #B8B4AC;
  --ink-dim: #B8B4AC;
  --theme-ink-dim: #B8B4AC;
  --accent: #FF5A1F;
  --theme-accent: #FF5A1F;
  --accent-2: #FF7A33;
  --theme-accent-2: #FF7A33;
  --red: #FF3B1F;
  --theme-red: #FF3B1F;
  --link: #FF7A33;
  --theme-link: #FF7A33;
  --grid: rgba(255,255,255,0.08);
  --theme-grid: rgba(255,255,255,0.08);
  --glow-w: 0 0 8px rgba(245,242,234,0.35), 0 0 24px rgba(245,242,234,0.16);
  --theme-glow-w: 0 0 8px rgba(245,242,234,0.35), 0 0 24px rgba(245,242,234,0.16);
  --glow-o: 0 0 8px rgba(255,90,31,0.55), 0 0 24px rgba(255,90,31,0.28), 0 0 64px rgba(255,90,31,0.16);
  --theme-glow-o: 0 0 8px rgba(255,90,31,0.55), 0 0 24px rgba(255,90,31,0.28), 0 0 64px rgba(255,90,31,0.16);
  --paper-bg: #F2EEE3;
  --theme-paper-bg: #F2EEE3;
  --paper-ink: #1B1B18;
  --theme-paper-ink: #1B1B18;
  --paper-stamp: #E8491D;
  --theme-paper-stamp: #E8491D;
  --paper-stamp-small: #B23A00;
  --theme-paper-stamp-small: #B23A00;
  --paper-field: #FFFFFF;
  --theme-paper-field: #FFFFFF;
  --paper-muted: #5C574D;
  --theme-paper-muted: #5C574D;
  --shadow: 0 8px 32px rgba(0,0,0,0.45);
  --theme-shadow: 0 8px 32px rgba(0,0,0,0.45);
  --on-accent: #1B1B18;
  --theme-on-accent: #1B1B18;
  --radius-sm: 8px;
  --theme-radius-sm: 8px;
  --radius-md: 8px;
  --theme-radius-md: 8px;
  --radius-lg: 8px;
  --theme-radius-lg: 8px;
  --font-display: "Abyss Display", "Archivo Black", "Arial Narrow Bold", "Noto Sans SC", sans-serif;
  --theme-font-display: "Abyss Display", "Archivo Black", "Arial Narrow Bold", "Noto Sans SC", sans-serif;
  --font-body: system-ui, "Noto Sans SC", "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --theme-font-body: system-ui, "Noto Sans SC", "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "Abyss Mono", "JetBrains Mono", "IBM Plex Mono", "Noto Sans Mono", "Maple Mono NF CN", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --theme-font-mono: "Abyss Mono", "JetBrains Mono", "IBM Plex Mono", "Noto Sans Mono", "Maple Mono NF CN", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-hand: "Abyss Hand", "Segoe Script", "Brush Script MT", "Snell Roundhand", "Caveat", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --theme-font-hand: "Abyss Hand", "Segoe Script", "Brush Script MT", "Snell Roundhand", "Caveat", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}
css/all.css
/* Abyss Lab Record 暗黑实验记录 — 全部变体 + 基础 chrome */
/* 近黑底 + 工程网格 + 等宽 HUD + 单关键词橙，深色主叙事、纸面只做独立反转章节；面板全透明虚线检测框 */
/* 含 :root:单主题整站直接链接本文件 */

:root,
[data-theme="abyss-lab-record"],
.theme-abyss-lab-record {
  color-scheme: dark;
  --bg: #0B0B0E;
  --theme-bg: #0B0B0E;
  --surface: #14141B;
  --theme-surface: #14141B;
  --surface-2: #14161A;
  --theme-surface-2: #14161A;
  --border: rgba(245,242,234,0.16);
  --theme-border: rgba(245,242,234,0.16);
  --ink: #F5F2EA;
  --theme-ink: #F5F2EA;
  --ink-muted: #B8B4AC;
  --theme-ink-muted: #B8B4AC;
  --ink-dim: #B8B4AC;
  --theme-ink-dim: #B8B4AC;
  --accent: #FF5A1F;
  --theme-accent: #FF5A1F;
  --accent-2: #FF7A33;
  --theme-accent-2: #FF7A33;
  --red: #FF3B1F;
  --theme-red: #FF3B1F;
  --link: #FF7A33;
  --theme-link: #FF7A33;
  --grid: rgba(255,255,255,0.08);
  --theme-grid: rgba(255,255,255,0.08);
  --glow-w: 0 0 8px rgba(245,242,234,0.35), 0 0 24px rgba(245,242,234,0.16);
  --theme-glow-w: 0 0 8px rgba(245,242,234,0.35), 0 0 24px rgba(245,242,234,0.16);
  --glow-o: 0 0 8px rgba(255,90,31,0.55), 0 0 24px rgba(255,90,31,0.28), 0 0 64px rgba(255,90,31,0.16);
  --theme-glow-o: 0 0 8px rgba(255,90,31,0.55), 0 0 24px rgba(255,90,31,0.28), 0 0 64px rgba(255,90,31,0.16);
  --paper-bg: #F2EEE3;
  --theme-paper-bg: #F2EEE3;
  --paper-ink: #1B1B18;
  --theme-paper-ink: #1B1B18;
  --paper-stamp: #E8491D;
  --theme-paper-stamp: #E8491D;
  --paper-stamp-small: #B23A00;
  --theme-paper-stamp-small: #B23A00;
  --paper-field: #FFFFFF;
  --theme-paper-field: #FFFFFF;
  --paper-muted: #5C574D;
  --theme-paper-muted: #5C574D;
  --shadow: 0 8px 32px rgba(0,0,0,0.45);
  --theme-shadow: 0 8px 32px rgba(0,0,0,0.45);
  --on-accent: #1B1B18;
  --theme-on-accent: #1B1B18;
  --radius-sm: 8px;
  --theme-radius-sm: 8px;
  --radius-md: 8px;
  --theme-radius-md: 8px;
  --radius-lg: 8px;
  --theme-radius-lg: 8px;
  --font-display: "Abyss Display", "Archivo Black", "Arial Narrow Bold", "Noto Sans SC", sans-serif;
  --theme-font-display: "Abyss Display", "Archivo Black", "Arial Narrow Bold", "Noto Sans SC", sans-serif;
  --font-body: system-ui, "Noto Sans SC", "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --theme-font-body: system-ui, "Noto Sans SC", "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "Abyss Mono", "JetBrains Mono", "IBM Plex Mono", "Noto Sans Mono", "Maple Mono NF CN", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --theme-font-mono: "Abyss Mono", "JetBrains Mono", "IBM Plex Mono", "Noto Sans Mono", "Maple Mono NF CN", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-hand: "Abyss Hand", "Segoe Script", "Brush Script MT", "Snell Roundhand", "Caveat", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --theme-font-hand: "Abyss Hand", "Segoe Script", "Brush Script MT", "Snell Roundhand", "Caveat", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

/* 基础 chrome(opt-in):<body class="theme-apply"> 或 [data-theme-apply] 上底色与基础件 */
.theme-apply,
[data-theme-apply] {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body, system-ui, sans-serif);
  line-height: 1.6;
}

.theme-apply a,
[data-theme-apply] a {
  color: var(--link, var(--accent));
}

.theme-apply code,
.theme-apply pre,
[data-theme-apply] code,
[data-theme-apply] pre {
  font-family: var(--font-mono, ui-monospace, monospace);
  background: var(--code-bg, var(--surface2, var(--surface)));
  border-radius: var(--radius-sm, 4px);
}

.theme-apply .panel,
[data-theme-apply] .panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  box-shadow: var(--shadow, 0 8px 32px rgba(0,0,0,0.45));
}

.theme-apply .btn-primary,
[data-theme-apply] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-sm, 4px);
}
css/themes.css
/* Abyss Lab Record 暗黑实验记录 · 共存版:只出 [data-theme] / .theme-<id> 作用域,不含 :root
   多主题应用(站点自带主题切换器)用这一份,避免全局覆盖项目自己的 token;
   单主题直接应用请用 css/default.css。color-scheme 只在 [data-theme] 块里给。 */

[data-theme="abyss-lab-record"],
.theme-abyss-lab-record {
  color-scheme: dark;
  --bg: #0B0B0E;
  --theme-bg: #0B0B0E;
  --surface: #14141B;
  --theme-surface: #14141B;
  --surface-2: #14161A;
  --theme-surface-2: #14161A;
  --border: rgba(245,242,234,0.16);
  --theme-border: rgba(245,242,234,0.16);
  --ink: #F5F2EA;
  --theme-ink: #F5F2EA;
  --ink-muted: #B8B4AC;
  --theme-ink-muted: #B8B4AC;
  --ink-dim: #B8B4AC;
  --theme-ink-dim: #B8B4AC;
  --accent: #FF5A1F;
  --theme-accent: #FF5A1F;
  --accent-2: #FF7A33;
  --theme-accent-2: #FF7A33;
  --red: #FF3B1F;
  --theme-red: #FF3B1F;
  --link: #FF7A33;
  --theme-link: #FF7A33;
  --grid: rgba(255,255,255,0.08);
  --theme-grid: rgba(255,255,255,0.08);
  --glow-w: 0 0 8px rgba(245,242,234,0.35), 0 0 24px rgba(245,242,234,0.16);
  --theme-glow-w: 0 0 8px rgba(245,242,234,0.35), 0 0 24px rgba(245,242,234,0.16);
  --glow-o: 0 0 8px rgba(255,90,31,0.55), 0 0 24px rgba(255,90,31,0.28), 0 0 64px rgba(255,90,31,0.16);
  --theme-glow-o: 0 0 8px rgba(255,90,31,0.55), 0 0 24px rgba(255,90,31,0.28), 0 0 64px rgba(255,90,31,0.16);
  --paper-bg: #F2EEE3;
  --theme-paper-bg: #F2EEE3;
  --paper-ink: #1B1B18;
  --theme-paper-ink: #1B1B18;
  --paper-stamp: #E8491D;
  --theme-paper-stamp: #E8491D;
  --paper-stamp-small: #B23A00;
  --theme-paper-stamp-small: #B23A00;
  --paper-field: #FFFFFF;
  --theme-paper-field: #FFFFFF;
  --paper-muted: #5C574D;
  --theme-paper-muted: #5C574D;
  --shadow: 0 8px 32px rgba(0,0,0,0.45);
  --theme-shadow: 0 8px 32px rgba(0,0,0,0.45);
  --on-accent: #1B1B18;
  --theme-on-accent: #1B1B18;
  --radius-sm: 8px;
  --theme-radius-sm: 8px;
  --radius-md: 8px;
  --theme-radius-md: 8px;
  --radius-lg: 8px;
  --theme-radius-lg: 8px;
  --font-display: "Abyss Display", "Archivo Black", "Arial Narrow Bold", "Noto Sans SC", sans-serif;
  --theme-font-display: "Abyss Display", "Archivo Black", "Arial Narrow Bold", "Noto Sans SC", sans-serif;
  --font-body: system-ui, "Noto Sans SC", "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --theme-font-body: system-ui, "Noto Sans SC", "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "Abyss Mono", "JetBrains Mono", "IBM Plex Mono", "Noto Sans Mono", "Maple Mono NF CN", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --theme-font-mono: "Abyss Mono", "JetBrains Mono", "IBM Plex Mono", "Noto Sans Mono", "Maple Mono NF CN", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-hand: "Abyss Hand", "Segoe Script", "Brush Script MT", "Snell Roundhand", "Caveat", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --theme-font-hand: "Abyss Hand", "Segoe Script", "Brush Script MT", "Snell Roundhand", "Caveat", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

/* 基础 chrome(opt-in):<body class="theme-apply"> 或 [data-theme-apply] 上底色与基础件 */
.theme-apply,
[data-theme-apply] {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body, system-ui, sans-serif);
  line-height: 1.6;
}

.theme-apply a,
[data-theme-apply] a {
  color: var(--link, var(--accent));
}

.theme-apply code,
.theme-apply pre,
[data-theme-apply] code,
[data-theme-apply] pre {
  font-family: var(--font-mono, ui-monospace, monospace);
  background: var(--code-bg, var(--surface2, var(--surface)));
  border-radius: var(--radius-sm, 4px);
}

.theme-apply .panel,
[data-theme-apply] .panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  box-shadow: var(--shadow, 0 8px 32px rgba(0,0,0,0.45));
}

.theme-apply .btn-primary,
[data-theme-apply] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-sm, 4px);
}
tokens/absolute.json
{
  "id": "abyss-lab-record",
  "name": "Abyss Lab Record 暗黑实验记录",
  "mode": "dark",
  "signature": "近黑底 + 工程网格 + 等宽 HUD + 单关键词橙，深色主叙事、纸面只做独立反转章节；面板全透明虚线检测框",
  "source": "themes/abyss-lab-record.json",
  "colors": {
    "bg": "#0B0B0E",
    "bgPanel": "#14141B",
    "bgRaise": "#14161A",
    "ink": "#F5F2EA",
    "inkDim": "#B8B4AC",
    "accent": "#FF5A1F",
    "accentSoft": "#FF7A33",
    "danger": "#FF3B1F",
    "grid": "rgba(255,255,255,0.08)",
    "line": "rgba(245,242,234,0.16)",
    "glowW": "0 0 8px rgba(245,242,234,0.35), 0 0 24px rgba(245,242,234,0.16)",
    "glowO": "0 0 8px rgba(255,90,31,0.55), 0 0 24px rgba(255,90,31,0.28), 0 0 64px rgba(255,90,31,0.16)",
    "paperBg": "#F2EEE3",
    "paperInk": "#1B1B18",
    "paperStamp": "#E8491D",
    "paperStampSmall": "#B23A00",
    "paperField": "#FFFFFF",
    "paperMuted": "#5C574D",
    "shadow": "0 8px 32px rgba(0,0,0,0.45)"
  }
}
tokens/index.json
{
  "default": "abyss-lab-record",
  "themes": [
    {
      "id": "abyss-lab-record",
      "name": "Abyss Lab Record 暗黑实验记录",
      "mode": "dark",
      "path": "tokens/semantic/abyss-lab-record.json",
      "default": true
    }
  ]
}
tokens/semantic/abyss-lab-record.json
{
  "id": "abyss-lab-record",
  "name": "Abyss Lab Record 暗黑实验记录",
  "mode": "dark",
  "signature": "近黑底 + 工程网格 + 等宽 HUD + 单关键词橙，深色主叙事、纸面只做独立反转章节；面板全透明虚线检测框",
  "colors": {
    "bg": "#0B0B0E",
    "surface": "#14141B",
    "surface2": "#14161A",
    "border": "rgba(245,242,234,0.16)",
    "ink": "#F5F2EA",
    "inkMuted": "#B8B4AC",
    "inkDim": "#B8B4AC",
    "accent": "#FF5A1F",
    "accent2": "#FF7A33",
    "red": "#FF3B1F",
    "link": "#FF7A33",
    "grid": "rgba(255,255,255,0.08)",
    "glowW": "0 0 8px rgba(245,242,234,0.35), 0 0 24px rgba(245,242,234,0.16)",
    "glowO": "0 0 8px rgba(255,90,31,0.55), 0 0 24px rgba(255,90,31,0.28), 0 0 64px rgba(255,90,31,0.16)",
    "paperBg": "#F2EEE3",
    "paperInk": "#1B1B18",
    "paperStamp": "#E8491D",
    "paperStampSmall": "#B23A00",
    "paperField": "#FFFFFF",
    "paperMuted": "#5C574D",
    "shadow": "0 8px 32px rgba(0,0,0,0.45)",
    "onAccent": "#1B1B18"
  },
  "fonts": {
    "display": "\"Abyss Display\", \"Archivo Black\", \"Arial Narrow Bold\", \"Noto Sans SC\", sans-serif",
    "body": "system-ui, \"Noto Sans SC\", \"Noto Sans\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
    "mono": "\"Abyss Mono\", \"JetBrains Mono\", \"IBM Plex Mono\", \"Noto Sans Mono\", \"Maple Mono NF CN\", \"Noto Sans SC\", \"Microsoft YaHei\", system-ui, sans-serif",
    "hand": "\"Abyss Hand\", \"Segoe Script\", \"Brush Script MT\", \"Snell Roundhand\", \"Caveat\", \"Noto Sans SC\", \"Microsoft YaHei\", system-ui, sans-serif"
  },
  "radius": {
    "sm": "8px",
    "md": "8px",
    "lg": "8px"
  },
  "derived": {
    "bg": "bg",
    "surface": "bgPanel",
    "surface2": "bgRaise",
    "border": "line",
    "ink": "ink",
    "inkMuted": "inkDim",
    "inkDim": "inkDim",
    "accent": "accent",
    "accent2": "accentSoft",
    "red": "danger",
    "link": "accentSoft",
    "onAccent": "paperInk"
  },
  "a11y": {
    "contrast_min": 4.5,
    "pairs": {
      "ink/bg": 17.57,
      "onAccent/accent": 5.54
    },
    "adjusted": true,
    "notes": [
      "源无可用 on-accent 配对;--on-accent 取源 paperInk(#1B1B18),配对 5.54:1"
    ]
  }
}
docs/usage.md
# Abyss Lab Record 暗黑实验记录 · 用法与配对规则

`abyss-lab-record` · mode `dark` · 默认变体 `abyss-lab-record`

**signature**:近黑底 + 工程网格 + 等宽 HUD + 单关键词橙，深色主叙事、纸面只做独立反转章节；面板全透明虚线检测框

- 原色表:`tokens/absolute.json`(源盘 `colors` 原样,不改名不近似)。
- 语义映射:`tokens/semantic/abyss-lab-record.json`(`derived` 记每个语义键取自哪个源键;`a11y` 记对比度实测)。
- 变量双发:裸语义名(`--bg`)与 `--theme-` 前缀别名(`--theme-bg`)同值,便于接既有项目。
- 你不需要发明 hex:缺哪个角色就用对应变量,不要拿别的色近似。

## 变体表

| id | mode | 何时用 |
|---|---|---|
| `abyss-lab-record` | `dark` | **默认**;近黑底 + 工程网格 + 等宽 HUD + 单关键词橙，深色主叙事、纸面只做独立反转章节；面板全透明虚线检测框 |

## 变量表(语义名 ↔ 前缀别名)

| 语义键 | CSS 变量 | 别名 |
|---|---|---|
| `bg` | `--bg` | `--theme-bg` |
| `surface` | `--surface` | `--theme-surface` |
| `surface2` | `--surface-2` | `--theme-surface-2` |
| `border` | `--border` | `--theme-border` |
| `ink` | `--ink` | `--theme-ink` |
| `inkMuted` | `--ink-muted` | `--theme-ink-muted` |
| `inkDim` | `--ink-dim` | `--theme-ink-dim` |
| `accent` | `--accent` | `--theme-accent` |
| `accent2` | `--accent-2` | `--theme-accent-2` |
| `red` | `--red` | `--theme-red` |
| `link` | `--link` | `--theme-link` |
| `grid` | `--grid` | `--theme-grid` |
| `glowW` | `--glow-w` | `--theme-glow-w` |
| `glowO` | `--glow-o` | `--theme-glow-o` |
| `paperBg` | `--paper-bg` | `--theme-paper-bg` |
| `paperInk` | `--paper-ink` | `--theme-paper-ink` |
| `paperStamp` | `--paper-stamp` | `--theme-paper-stamp` |
| `paperStampSmall` | `--paper-stamp-small` | `--theme-paper-stamp-small` |
| `paperField` | `--paper-field` | `--theme-paper-field` |
| `paperMuted` | `--paper-muted` | `--theme-paper-muted` |
| `shadow` | `--shadow` | `--theme-shadow` |
| `onAccent` | `--on-accent` | `--theme-on-accent` |

## 配对规则(谁配谁)

| 用途 | 变量 | 口径 |
|---|---|---|
| 正文 / 段落 | `--ink` | 页面主文字色,始终用于 `--bg` 之上 |
| 次要文字 | `--ink-muted` / `--ink-dim` | 说明、元信息、时间戳;`--ink-muted` 比 `--ink-dim` 更接近正文 |
| 卡面 / 面板 | `--surface` + `--border` | 卡底用 `--surface`,描边用 `--border`;需要抬升时 `--surface-2` |
| 主按钮 | `--accent` + `--on-accent` | 一个视区只放一个主 CTA;文字色必须用 `--on-accent`(实测 5.54:1) |
| 链接 | `--link` | 链接一律用 `--link`;**强调色(`--accent`)不与链接同色** —— 本主题 `--link` = `#FF7A33` 与 `--accent` = `#FF5A1F` 不同值,可直接并置 |
| 危险 / 破坏性 | `--red` | 删除、错误、警报 |
| 成功 | `--green` | 通过、已完成(源色板无 green 角色,本包不发该变量) |
| 页面底 | `--bg` / `--bg-deep` | 大底用 `--bg`,更深的分层用 `--bg-deep` |

一行口径:正文 `--ink`,次要 `--ink-muted`/`--ink-dim`,卡面 `--surface`+`--border`,主按钮 `--accent`+`--on-accent`,链接 `--link`,危险 `--red`,成功 `--green`;强调色不做链接色。

## 字体配方(源 `fonts` 透传)

| 角色 | 变量 | 栈 |
|---|---|---|
| `display` | `--font-display` | "Abyss Display", "Archivo Black", "Arial Narrow Bold", "Noto Sans SC", sans-serif |
| `body` | `--font-body` | system-ui, "Noto Sans SC", "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif |
| `mono` | `--font-mono` | "Abyss Mono", "JetBrains Mono", "IBM Plex Mono", "Noto Sans Mono", "Maple Mono NF CN", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif |
| `hand` | `--font-hand` | "Abyss Hand", "Segoe Script", "Brush Script MT", "Snell Roundhand", "Caveat", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif |

- 标题用 `var(--font-display)`,正文 `var(--font-body)`,代码/数字 `var(--font-mono)`;字重与字号档位不在本包内,按下方 `do` 的约束落地。

## 圆角(源 `radius` 透传)

| 变量 | 值 |
|---|---|
| `--radius-sm` | 8px |
| `--radius-md` | 8px |
| `--radius-lg` | 8px |

## 推荐做法(源 `do`)

- 近黑非纯黑底 + 单层工程网格（body 一层，透明度 <=0.14，不压文字）
- 标题无衬线 800-900，中文降一档；等宽管数据 HUD + tabular-nums；手写只做英文短句点缀
- 橙色只染单关键词/危险数值/选中态/光源，单屏 <=10%
- 面板全透明 + 1px 白线/虚线边框，检测框分静态虚线与描边流动两种
- 纸面只做独立 data-theme=light 反转章节（表单卡 + 墨字 + 单枚橙章）
- 动效只动 transform/opacity 150-300ms，描边流动是唯一的描边动画且降级静止
- mono 栈永不落回系统中文字体，裸 monospace/Menlo/Consolas 禁入生产栈

## 反模式(源 `dont`)

- 衬线标题/正文（Georgia/Noto Serif/SimSun/宋体禁入）
- 面板实底色 + 投影（纸面表单卡除外）
- 整词橙色大标题（23/24 类必须降为关键词橙 + 描边混排）
- 描边空心字常驻正文（只许 display 大字，须验对比度）
- 低透明 mono 小字（须提到 14px 或提亮到 4.5:1）
- 为状态新增强调色（用下划线/字重/底色微变）

## 对比度实测(WCAG,自写公式)

| 组合 | 实测 | 门槛 |
|---|---|---|
| `ink` on `bg` | 17.57:1 | ≥ 4.5:1 |
| `onAccent` on `accent` | 5.54:1 | ≥ 4.5:1 |

### 语义层留痕(透明记录)

- 源无可用 on-accent 配对;--on-accent 取源 paperInk(#1B1B18),配对 5.54:1

## 应用片段

```css
/* 单主题:把 css/default.css 全文贴进项目,或在 <head> 里 link 它 */
/* 多主题共存:link css/themes.css,用 <html data-theme="abyss-lab-record"> 决定何时生效(无 :root,不覆盖项目 token) */
```

```html
<html data-theme="abyss-lab-record" class="theme-abyss-lab-record" lang="zh-CN">
  <link rel="stylesheet" href="css/default.css">
```

## 来源 / Provenance

- 风格观测：桌面参考视频 @pleometric thats pretty cool（Opus 纯代码成片，156s/60fps），31 抽帧取 25 张关键帧
- 14 视角 workflow 合成（色彩/字体/版式/装饰/数据/材质/组件/对比度/动效/文案/层级/品牌/交互/响应式），全文见 opus55-motion/keyframes/lens-summary.md
- 本地验证：[本机路径已移除] demo，双视口截图已验）
SKILL.md
---
name: abyss-lab-record
description: "Abyss Lab Record 暗黑实验记录(dark 近黑底 + 工程网格 + 等宽 HUD + 单关键词橙，深色主叙事、纸面只做独立反转章节；面板全透明虚线检测框)。触发:Abyss Lab Record 暗黑实验记录 / abyss-lab-record / 近黑底 + 工程网格 + 等宽 HUD + 单关键词橙，深色主叙事、纸面只做独立反转章节；面板全透明虚线检测框。不做整站重构。"

---

# abyss-lab-record

让任何网页/面板变成 **Abyss Lab Record 暗黑实验记录** 的样子,不用 agent 自己编 hex。

近黑底 + 工程网格 + 等宽 HUD + 单关键词橙，深色主叙事、纸面只做独立反转章节；面板全透明虚线检测框

## When to use

- 用户点名 Abyss Lab Record 暗黑实验记录 / abyss-lab-record / 近黑底 + 工程网格 + 等宽 HUD + 单关键词橙，深色主叙事、纸面只做独立反转章节；面板全透明虚线检测框
- 需要整套配色(bg / bg-deep / surface / ink / accent / 状态色)而不是单个色值
- 需要 近黑非纯黑底 + 单层工程网格（body 一层，透明度 <=0.14，不压文字）
- 需要 标题无衬线 800-900，中文降一档；等宽管数据 HUD + tabular-nums；手写只做英文短句点缀
- 需要 橙色只染单关键词/危险数值/选中态/光源，单屏 <=10%
- 需要 面板全透明 + 1px 白线/虚线边框，检测框分静态虚线与描边流动两种
- 需要 纸面只做独立 data-theme=light 反转章节（表单卡 + 墨字 + 单枚橙章）
- 需要 动效只动 transform/opacity 150-300ms，描边流动是唯一的描边动画且降级静止
- 需要 mono 栈永不落回系统中文字体，裸 monospace/Menlo/Consolas 禁入生产栈

## When not to use

- 整站品牌设计系统(要自定义组件/字体体系)→ 用设计类 skill
- 别的主题族(用户点名其它风格)
- 衬线标题/正文（Georgia/Noto Serif/SimSun/宋体禁入）
- 面板实底色 + 投影（纸面表单卡除外）
- 整词橙色大标题（23/24 类必须降为关键词橙 + 描边混排）
- 描边空心字常驻正文（只许 display 大字，须验对比度）
- 低透明 mono 小字（须提到 14px 或提亮到 4.5:1）
- 为状态新增强调色（用下划线/字重/底色微变）

## Default

**`abyss-lab-record`**(mode `dark`)

| role | hex |
|---|---|
| `bg` | `#0B0B0E` |
| `surface` | `#14141B` |
| `ink` | `#F5F2EA` |
| `accent` | `#FF5A1F` |
| `link` | `#FF7A33` |
| `red` | `#FF3B1F` |

## Sub-themes (id → when)

| id | mode | contrast | pick when |
|---|---|---|---|
| `abyss-lab-record` | `dark` | — | **默认**;近黑底 + 工程网格 + 等宽 HUD + 单关键词橙，深色主叙事、纸面只做独立反转章节；面板全透明虚线检测框 |

## Files

| path | use |
|---|---|
| `tokens/absolute.json` | 源盘原色表(原样,含未参与语义映射的色) |
| `tokens/index.json` | 变体目录 + default |
| `tokens/semantic/abyss-lab-record.json` | 语义映射 + `derived`(取源哪个键)+ `a11y`(对比度实测) |
| `css/default.css` | 默认变体一份,含 `:root`,最快 apply |
| `css/all.css` | 全部变体 + 基础 chrome,含 `:root` |
| `css/themes.css` | 共存版:同 all.css 但**无 `:root`**,只 `[data-theme]` / `.theme-<id>` 作用域 |
| `docs/usage.md` | 配对规则 / 字体配方 / 反模式(中文) |
| `preview/index.html` | 活预览(独立单文件) |

## Agent apply steps

1. **Pick variant** — 用户点名变体就用它;否则 `abyss-lab-record`。
2. **Read tokens** — `tokens/semantic/abyss-lab-record.json`(`colors` 是语义键,`derived` 说明它取自源盘哪个键)。
3. **写入 CSS 变量** — 项目已有 `--bg/--ink/--accent` 就沿用同名;否则整份贴,或同时写 `--theme-*` 别名。
4. **挂主题作用域** — `<html data-theme="abyss-lab-record" class="theme-abyss-lab-record">`;多主题站点用 `css/themes.css`。
5. **选文件** — 单主题 `css/default.css`;多主题 `css/all.css`(带 `:root`)或 `css/themes.css`(不带)。
6. **按角色套件**:
   - 页面底 → `--bg` / `--bg-deep`
   - 卡面面板 → `--surface` + `--border`
   - 正文 → `--ink`;次要 → `--ink-muted` / `--ink-dim`
   - 主按钮 → `--accent` + `--on-accent`(一屏一个 CTA)
   - 链接 → `--link`(**不**用 `--accent`,强调色不做链接色)
   - 危险 → `--red`;成功 → `--green`
7. **不要发明 hex** — 颜色只能来自 `tokens/absolute.json`;缺角色就跳过该变量。
8. **自检** — `python scripts/assert_tokens.py` 必须打印 `PASS assert_tokens abyss-lab-record`。

### Minimal `:root` snippet (`abyss-lab-record`)

```css
:root {
  color-scheme: dark;
  --bg: #0B0B0E;
  --surface: #14141B;
  --surface-2: #14161A;
  --border: rgba(245,242,234,0.16);
  --ink: #F5F2EA;
  --ink-muted: #B8B4AC;
  --ink-dim: #B8B4AC;
  --accent: #FF5A1F;
  --accent-2: #FF7A33;
  --red: #FF3B1F;
  --link: #FF7A33;
  --grid: rgba(255,255,255,0.08);
  --glow-w: 0 0 8px rgba(245,242,234,0.35), 0 0 24px rgba(245,242,234,0.16);
  --glow-o: 0 0 8px rgba(255,90,31,0.55), 0 0 24px rgba(255,90,31,0.28), 0 0 64px rgba(255,90,31,0.16);
  --paper-bg: #F2EEE3;
  --paper-ink: #1B1B18;
  --paper-stamp: #E8491D;
  --paper-stamp-small: #B23A00;
  --paper-field: #FFFFFF;
  --paper-muted: #5C574D;
  --shadow: 0 8px 32px rgba(0,0,0,0.45);
  --on-accent: #1B1B18;
}
```

### HTML switch

```html
<html data-theme="abyss-lab-record" class="theme-abyss-lab-record">
  <link rel="stylesheet" href="css/default.css">
```

## Hard rules

- **Never** 衬线标题/正文（Georgia/Noto Serif/SimSun/宋体禁入）(源 `dont`)
- **Never** 面板实底色 + 投影（纸面表单卡除外）(源 `dont`)
- **Never** 整词橙色大标题（23/24 类必须降为关键词橙 + 描边混排）(源 `dont`)
- **Never** 描边空心字常驻正文（只许 display 大字，须验对比度）(源 `dont`)
- **Never** 低透明 mono 小字（须提到 14px 或提亮到 4.5:1）(源 `dont`)
- **Never** 为状态新增强调色（用下划线/字重/底色微变）(源 `dont`)

## Notes

- 预览:`preview/index.html`,单文件可直接打开
- 来源与语义层修正:`docs/usage.md` 末节。

← 回索引