HyperFrames Bold / Energetic 高能调色板：面向产品发布与社媒内容的高饱和配色实战指南

产品发布、社交媒体、公告类内容需要第一时间抓住眼球——高饱和、高对比、充满能量的配色是这类视频的核心视觉语言。HyperFrames 在 hyperframes-creative 技能中内置了九套命名调色板，其中 Bold / Energetic（大胆/高能） 就是为这类高能量场景准备的专用色板。本文以 palettes/bold-energetic.md 为骨架，结合 hyperframes-creative 技能的工作流、设计规范（design spec）与着色规范，讲解如何把这份色板落地成可渲染、可通过对比度检查的视频配色方案。

一、色板全览：40 个高能色值

Bold / Energetic 调色板由 8 行、每行 5 个色值组成，共 40 个十六进制颜色。原文的完整色值如下，使用时请原样引用（exact hex），不要自行改动或取近似值：

#FFBE0B #FB5607 #FF006E #8338EC #3A86FF
#F72585 #7209B7 #3A0CA3 #4361EE #4CC9F0
#EF476F #FFD166 #06D6A0 #118AB2 #073B4C
#FF595E #FFCA3A #8AC926 #1982C4 #6A4C93
#9B5DE5 #F15BB5 #FEE440 #00BBF9 #00F5D4
#390099 #9E0059 #FF0054 #FF5400 #FFBD00
#3D348B #7678ED #F7B801 #F18701 #F35B04
#FFBC42 #D81159 #8F2D56 #218380 #73D2DE

从色彩构成看，这 40 个色值覆盖了完整的色相环：暖橙（#FB5607、#FF5400、#F18701）、警示黄（#FFBE0B、#FFD166、#FEE440、#FFBD00、#FFCA3A、#F7B801）、电光粉/品红（#FF006E、#F72585、#F15BB5、#D81159、#FF595E）、高饱和紫（#8338EC、#7209B7、#9B5DE5、#6A4C93）、电光蓝（#3A86FF、#4361EE、#4CC9F0、#00BBF9）、荧光青绿（#06D6A0、#00F5D4、#8AC926），以及少量用于锚定对比的深色（#073B4C、#390099、#3D348B、#8F2D56、#218380）。

这份色板在技能路由表中被明确定位为：house-style.md 的 Palettes 一节列出了九套色板的用途对照表，其中 Bold / Energetic 专用于「Product launches, social media, announcements」（产品发布、社交媒体、公告）。与之相邻的 neon-electric.md（游戏/科技/夜生活）在色相上有所重叠，但 Bold / Energetic 的定位更偏向品牌化、面向大众的高能量传播，而非亚文化场景。

二、从色板到方案：先声明 bg / fg / accent

HyperFrames 的 house-style 规则非常明确：动手写 HTML 之前，先选好背景色（bg）、前景色（fg）和强调色（accent）三个核心 token，不要边写边临时发明颜色。这正是使用 Bold / Energetic 色板的第一步：

1. 定明暗基调：house-style 建议按内容匹配明暗——科技、电影、金融适合深色；食品、健康、儿童内容适合浅色。高能发布类内容两种都可以走，关键是同一个色板内 所有场景共享同一背景色，不要逐场景换底色。
2. 选一个强调色：从色板中挑一个饱和度最高的色值作为 accent（如 #FF006E 电光粉或 #FB5607 亮橙），全片只用一个强调色相。中性色（文字灰、面板灰）也要向强调色相轻微倾斜，避免死灰。
3. 中性色向主色倾斜：即使正文用接近白/黑的文字，也应加入极低饱和度的暖或冷倾向，让整体色调统一。

如果需要更结构化的落地方式，可以直接把色板色值写进项目的 design.md 前端元数据（frontmatter）。hyperframes-creative 的设计规范文档定义：frame.md（视频项目首选）或 design.md 采用「YAML frontmatter + Markdown 正文」结构，frontmatter 是规范层，其中的 colors、typography、spacing 是机器可读的真实值，必须逐字引用，不得四舍五入或改写。例如：

name: Bold Energetic Launch
colors:
  primary: "#073B4C"     # 深蓝黑锚点背景
  on-primary: "#ffffff"
  accent: "#FF006E"      # 电光粉强调
  accent-amber: "#FFBE0B" # 警示黄辅助强调
rounded:
  none: 0px
spacing:
  sm: 8px
  md: 16px
  lg: 32px

三、风格化落地：与 Maximalist Type 高能风格组合

visual-styles.md 提供了八套可直接复制 YAML token 块的命名视觉风格。其中与 Bold / Energetic 色板最契合的是 Maximalist Type（Paula Scher 式「文字即视觉」）——它的定位正是「Big product launches, milestone announcements, high-energy hype videos」，与色板用途完全同频：

• 配色：accent-red: "#E63946"、accent-yellow: "#FFD60A"——可替换为本色板的 #FF006E / #FFBE0B 等色值；
• 排版：Anton 8rem 全大写标题 + Space Grotesk 3rem 副标题，字号大、填充 50–80% 画幅；
• 动效：energy: high，入场 expo.out、退场 back.out(1.8)，0.3s 入场 / 0.8s 停留 / 0.4s 转场，快进快出、硬停；
• 氛围层（atmosphere）：type-layers（文字叠层）+ color-blocks（色块）；
• 转场：ridged-burn。

组合方式：把该风格的 YAML token 块复制进项目 design.md 的 frontmatter，再补充 ## Overview、## Colors、## Typography、## Layout、## Elevation、## Components、## Do's and Don'ts 等散文小节，即构成一份完整的、可直接被渲染端消费的设计规范。

四、视频画幅的着色与排版纪律

Bold / Energetic 色板能量很高，但高饱和不等于乱用。hyperframes-creative 的视频构图规范（video-composition.md）给出了着色纪律：

• 强调色必须可见：品牌 accent 不能是 5% 透明度、压缩后消失的光晕。氛围用途用 15–25% 透明度，焦点元素用全饱和。Bold / Energetic 的色值天然全饱和，适合直接做焦点。
• 深色底上不要整屏线性渐变：H.264 压缩下会明显条带化。改用径向渐变、纯色填充或「纯色 + 局部光晕」。
• 视频字号不是网页字号：标题 64–120px、正文 28–42px、标签 18–24px；装饰元素透明度 12–25%（低于 10% 在视频里等于看不见）；边框 2–4px；内边距 60–140px。如果作品面向 X / LinkedIn / Instagram 信息流，字号还要再放大一档（正文 ≥32px、标题 ≥90px、数据标签 ≥24px）。
• 结构性元素：分隔线、边框面板、注册标记（registration marks）能提供视觉路径，也方便做 scaleX: 0 → 1 的入场动画。

排版上，hyperframes-creative 的字体规范（typography.md）要求：不要两个无衬线搭配（要跨类别：衬线 + 无衬线，或无衬线 + 等宽）；每场景只有一个表现性字体；字重对比要极端（视频需要 300 vs 900，而不是 400 vs 700）；显示字号字距收紧到 -0.03em ~ -0.05em。高能发布内容如果选 font-family: Montserrat（几何无衬线，预捆绑且未被禁用）配 JetBrains Mono（等宽元数据），就是一套「既安全又有个性」的搭配——这两者都在渲染器预捆绑的 18 个字体族内，离线可确定性渲染。

五、对比度校验：npx hyperframes check

高饱和亮色配亮背景是常见踩坑点——例如 #FEE440（亮黄）或 #FFCA3A 直接配白色文字，对比度会远低于 WCAG AA。house-style 明确要求：对比度由 hyperframes check 强制执行（WCAG AA），移除装饰元素后文字必须可读。

在 CLI 里对应的命令是 docs/developers/cli.mdx 中的「Run browser, layout, motion, and contrast checks」：

npx hyperframes check

该命令会同时跑浏览器、布局、动效与对比度检查。除此之外，技能目录还提供了脚本 scripts/contrast-report.mjs，可专门「inspect contrast warnings from rendered frames」（检查渲染帧的对比度警告），用于渲染出帧之后的二次核验。

实操建议：用 Bold / Energetic 色板时，深色文字一律落在 #073B4C、#390099、#3D348B、#8F2D56、#218380 这几个深色锚点上；浅色文字（白或近白）落在深色锚点之上；亮黄、亮橙、亮青这类高亮色只做强调/装饰，不作为正文底色承载深色小字号文字。写完 HTML、渲染前先跑一遍 npx hyperframes check，把对比度违规当作 checklist 逐项修复（详见 design-adherence.md 的验证步骤：颜色是否全部来自色板、字体字重是否匹配、圆角/间距/阴影是否符合声明的层级、是否出现规范禁止的「Do's and Don'ts」项）。

六、完整工作流：从色板到成片

综合 hyperframes-creative 技能（SKILL.md）的 Workflow 路由，使用 Bold / Energetic 色板制作一支发布视频的推荐路径是：

1. 读取设计规范：若项目已有 frame.md / design.md，先读（优先级 frame.md → design.md → DESIGN.md），frontmatter 的 token 视为品牌真相；没有设计规范时，从 palettes/bold-energetic.md 直接取色。
2. 声明三色：确定 bg / fg / accent，写入 HTML 之前先定稿。
3. 选字体：跑 typography.md 中的字体发现脚本（curl -s 'https://fonts.google.com/metadata/fonts' 后经 Python 脚本过滤），从趋势无衬线/衬线/等宽/重展示/手写五类中按注册表（register）挑选，优先预捆绑且未被禁用的字体。
4. 规划节奏与构图：多场景先规划 beats 与节奏（beat-direction.md）；单场景按「背景层 → 中景内容 → 前景细节」三层填充，每场景 2–5 个背景装饰元素并配慢速 ambient 动画（呼吸/漂移/脉冲），避免入场交错时画面空洞。
5. 动效：入场 0.3–0.6s、变化 ease、入场时组合变换、错峰入场；高能内容可参考 Maximalist Type 的快进硬停参数。
6. 校验：npx hyperframes check 跑对比度与布局检查，必要时用 contrast-report.mjs 复核渲染帧；修复所有违规后再对外预览。

七、与其他色板的边界

为帮助按需选择，house-style.md 给出的九套色板用途对照中，与 Bold / Energetic 最容易混淆的是 Neon / Electric（neon-electric.md，面向 Gaming / tech / nightlife / Gen Z）——两者都含高饱和粉紫蓝，但 Bold / Energetic 更适合大众向的产品发布与公告传播，Neon / Electric 更适合亚文化、夜店、游戏美学。Warm / Editorial（叙事/纪录片/案例研究）则适合把部分暖橙黄借去做克制叙事。选择时先问「观众应该感受到什么」，再决定取哪套色板，而不是按内容类型机械套用。

八、小结

Bold / Energetic 是 HyperFrames 为高能量传播场景预置的一套「即取即用」色板：40 个全饱和色值覆盖完整色相环，配合「先声明三色、逐字引用色值、视频画幅字号、hyperframes check 对比度校验」这一整套纪律，即可稳定产出可渲染、可读性达标的产品发布与社媒视频。其全部规则与配套参考都集中在 skills/hyperframes-creative 目录下，色板本身则是 palettes/bold-energetic.md 这一个文件——需要时直接打开取色即可。