HyperFrames Clean / Corporate 调色板全解面向讲解、教程与演示视频的 40 色企业级配色系统【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesClean / Corporate 是 HyperFrames 创意技能hyperframes-creative内置的 9 套主题调色板之一专为Explainers讲解视频、tutorials教程、presentations演示/汇报、professional content专业内容设计。它提供了 8 组、共 40 个经过搭配的十六进制色值覆盖从暖色奶油底到冷色蓝调、从深色权威感到浅色中性风的完整企业视觉谱系。读完本文你将掌握这套调色板的完整色值、每组配色的构成逻辑与适用场景并能依照 HyperFrames 的设计规范frame.md/design.md将其转化为可渲染的 YAML 颜色 tokens同时通过对比度校验与排版规则保证最终成片达到 WCAG AA 可读性标准。定位什么时候选择 Clean / Corporate在 hyperframes-creative 技能的路由表 中palettes/*.md被定义为 Palette-specific color tokens即调色板专属颜色令牌来源。当创作需求属于以下类型时clean-corporate.md是优先选择的配色来源Explainers产品/概念讲解类短视频需要一看就懂的清晰层级Tutorials教程类内容前景信息与背景装饰必须严格分离避免干扰注意力Presentations汇报、路演、投资者演示强调权威感与可信度Professional content面向企业客户、培训、行业分析等正式场景。从设计情绪上看它对应的是克制、可信、专业而不是高能、喧闹、潮流——后者的配色需求应转向 palettes/bold-energetic.md 等其它主题。选型时也可以对照 visual-styles.md 中的情绪速查表Clean / Corporate 与其中 Clinical, precise / 数据驱动、分析、技术 的Swiss Pulse风格、以及 Premium, enterprise / 高端企业 的Velvet Standard风格同属一个情绪区间是典型的 B2B / 咨询 / 开发者工具向表达。完整色板40 个色值逐行呈现原文档以 8 行、每行 5 色的代码块形式给出全部色值这是本调色板的原始契约使用时请原样引用十六进制值不要四舍五入或随意替换——正如 design-spec.md 所强调的规范中的 tokens 是规范性层normative layer必须逐字引用exact hex。#FFFCF2 #CCC5B9 #403D39 #252422 #EB5E28 #22223B #4A4E69 #9A8C98 #C9ADA7 #F2E9E4 #3D5A80 #98C1D9 #E0FBFC #EE6C4D #293241 #2B2D42 #8D99AE #EDF2F4 #EF233C #D90429 #353535 #3C6E71 #FFFFFF #D9D9D9 #284B63 #E7ECEF #274C77 #6096BA #A3CEF1 #8B8C89 #CFDBD5 #E8EDDF #F5CB5C #242423 #333533 #2F6690 #3A7CA5 #D9DCD6 #16425B #81C3D7逐行拆解8 组配色的构成逻辑与典型用法每一行的 5 个颜色通常可以按背景 / 中性层级 / 强调色的职能归类。结合 house-style.md 给出的落地规则——写 HTML 前先声明 bg、fg、accent 三个角色下面为每行给出建议的角色映射与适用场景。需要说明的是这些角色映射是基于色彩构成规律的推断具体以你项目的frame.md/design.md规范为准。行 1暖奶油 炭黑 橙焰#FFFCF2 #CCC5B9 #403D39 #252422 #EB5E28构成#FFFCF2暖白背景、#CCC5B9暖灰次级面、#403D39/#252422两级深炭文字、#EB5E28暖橙强调。气质最经典的暖调企业风——比纯白更亲和的米白底配合炭黑文字保证正式感暖橙只在 CTA、关键数据、进度条上少量出现。适用面向大众消费者的产品讲解SaaS onboarding、金融科普、健康指南希望在专业与友好之间取得平衡。注意#EB5E28明度中等作为文字色在浅底上对比度偏低更适合用作填充色按钮、条形、数字高亮而非正文文字。行 2午夜蓝紫 雾灰 暖藕#22223B #4A4E69 #9A8C98 #C9ADA7 #F2E9E4构成#22223B深蓝紫背景、#4A4E69次级深色、#9A8C98/#C9ADA7两级暖灰、#F2E9E4暖白前景文字。气质暗色权威感——深蓝紫底传递沉稳暖调前景避免死黑死白。适用金融、法律、咨询类企业演示、高管汇报开场/结尾帧、以及需要在暗色场景中呈现高级感的教程。深色底上务必让#F2E9E4承担正文前景#C9ADA7承担次级文字。行 3海军蓝 冰蓝 珊瑚橙#3D5A80 #98C1D9 #E0FBFC #EE6C4D #293241构成#293241/#3D5A80两级深蓝、#98C1D9/#E0FBFC两级浅蓝、#EE6C4D珊瑚橙强调。气质蓝白系企业标准配色——蓝色系天然带科技、可信联想珊瑚橙作为唯一暖色强调负责把观众视线拉向 CTA 或关键指标。适用科技公司产品发布、B2B 平台讲解、数据分析类视频。深蓝背景 浅蓝卡片 橙强调是三段式构图中最稳的组合之一。行 4炭蓝灰 冰白 双红强调#2B2D42 #8D99AE #EDF2F4 #EF233C #D90429构成#2B2D42深炭蓝、#8D99AE中灰、#EDF2F4冰白、#EF233C/#D90429两级鲜红。气质高对比强提醒——本组对比度极强红色是双份的适合需要传达紧迫感、风险警示或强烈数据对比的内容。适用安全/合规培训、风险提示、限时活动讲解。注意红色是情绪色应仅用于警示、负向数据、强调性数字不可大面积铺陈否则观众会产生不安感。行 5中性深灰 深青 纯白#353535 #3C6E71 #FFFFFF #D9D9D9 #284B63构成#FFFFFF/#D9D9D9/#353535构成标准灰阶#3C6E71深青与#284B63深蓝作为双冷色点缀。气质最低调的商务中性风——几乎所有画面都是灰阶只有零星冷色点缀克制到极致。适用审计/咨询报告、法律条款解读、任何内容比装饰重要的场景。它也是后续落地时最容易直接映射为bg/fg/accent三 token 的一组。行 6浅灰蓝底 蓝阶 灰#E7ECEF #274C77 #6096BA #A3CEF1 #8B8C89构成#E7ECEF浅灰蓝背景、#274C77/#6096BA/#A3CEF1深中浅三级蓝、#8B8C89中性灰。气质浅色蓝调专业风——浅底 蓝阶是演示文稿感最强的组合非常适合信息密度高、需要长时间阅读的教程帧。适用企业内部培训、软件功能教程、报告式讲解。#274C77可作标题与强调#A3CEF1可作卡片填充或图表色。行 7雾绿 奶油 金黄#CFDBD5 #E8EDDF #F5CB5C #242423 #333533构成#CFDBD5/#E8EDDF两级浅灰绿底、#F5CB5C金黄强调、#242423/#333533两级近黑文字。气质暖中带金的环保企业风——灰绿底比纯白更自然金黄强调带来积极、增长、阳光的信号。适用可持续发展/ESG 报告、教育类产品、增长数据讲解。金黄#F5CB5C适合做数字高亮、奖章、成功状态标识。行 8蓝阶 浅灰 亮蓝#2F6690 #3A7CA5 #D9DCD6 #16425B #81C3D7构成#16425B/#2F6690/#3A7CA5三级深蓝、#81C3D7亮蓝、#D9DCD6浅灰白。气质沉稳蓝调深色系——比行 3 更深、更企业背书亮蓝#81C3D7负责在深底上提供透气感。适用金融机构品牌内容、开发者工具文档视频、行业白皮书式讲解。深蓝底上#D9DCD6作正文、#81C3D7作链接与强调高亮。在 HyperFrames 项目中落地从色值到规范 tokens色板本身只是原料HyperFrames 的创作流程要求把配色写进设计规范再进入生产。依据 design-spec.md规范文件优先级frame.md→design.md→DESIGN.md读取存在的第一个其余忽略。视频项目优先使用frame.md。Frontmatter 是规范性层colors、typography、spacing等字段是机器可读的真实值必须逐字引用色值正文##段落只是解释性语境prose is context。从 preset 起步是可选项可以直接把frame-presets/下的现成FRAME.md模板复制为frame.md再覆盖品牌 tokens。以行 5中性深灰 深青 纯白为例落地为frame.mdfrontmatter 可以写成name: Clean Corporate — Neutral unit: the frame — 1920x1080 primary; 9:16 and 1:1 documented colors: bg: #FFFFFF surface: #D9D9D9 text: #353535 primary: #3C6E71 # 唯一强调色深青 secondary: #284B63 # 次级冷色深蓝 on-primary: #FFFFFF落地时的核心纪律来自 house-style.md 的 Color 一节先声明再写码动手写 HTML 之前声明好bg/fg/accent三个角色不要逐元素临场发明颜色单一强调色全片只用一个强调色accent hue背景在所有场景保持一致中性色向强调色倾斜即使是最中性的灰阶也向强调色方向做轻微冷暖倾斜避免死灰色按内容明暗匹配食品/健康/儿童类内容倾向浅色科技/影视/金融倾向深色——本调色板 8 行恰好同时覆盖了这两种方向。在 house-style.md 的调色板索引表 中Clean / Corporate 被正式标注为 Explainers, tutorials, presentations 场景的推荐来源与该 skill 的 SKILL.md 路由表互相印证。与 Design Picker 的配合把调色板送进交互式选择流程如果项目没有现成设计规范、需要给用户多套视觉方案做选择可走 design-picker.md 的交互式流程。该文档对调色板数据有硬性要求本色板完全符合数量 5-6 组每次给出 5-6 个候选调色板且必须混合深色、浅色与着色tinted背景——clean-corporate 的 8 行恰好覆盖深色行 2、行 8、浅色行 1、行 6、行 7与中性行 5三种背景明度swatch 尺寸可区分如果两个调色板在 14px 色块下看不出区别就必须删掉一个——本调色板每组的主背景明度与强调色相都不同暖橙 / 双红 / 深青 / 金黄 / 蓝阶天然满足该测试命名贴合品牌世界在 picker 中应把色板命名为与具体品牌相关、而非泛泛的 clean 之类情绪词。picker 最终产出的design.md是 google-labs-code/design.md 规范兼容文件YAML frontmatter 的colors/typography/rounded/spacingtokens 若干 prose 段落可直接作为后续创作的设计依据。可读性保障对比度校验是 Clean / Corporate 的底线企业类内容最怕看不清。HyperFrames 对此有强制约束与工具支持WCAG AA 强制据 house-style.md对比度由hyperframes check强制校验WCAG AA移除装饰元素后文字必须可读。因此在浅色底如行 1 的#FFFCF2、行 5 的#FFFFFF上正文请用深炭/近黑色#252422、#353535强调色只用于大号数字、填充元素不要用于小字号正文。像素级校验脚本scripts/contrast-report.mjs 会逐帧采样文本元素的声明前景色与实际背后合成像素的 WCAG 2.1 对比度输出contrast-report.json与contrast-overlay.png洋红未达 AA黄仅达 AA绿达 AAA任一文本元素不达 AA 即以退出码 1 结束。它采用隐藏文本后再截图采样真实背景的方法专门解决文字背后是玻璃模糊面板或半透明装饰时的误判问题。运行方式node skills/hyperframes-creative/scripts/contrast-report.mjs composition-dir \ [--samples N] [--out dir] [--width W] [--height H] [--fps N]装饰不挡信息house-style 建议每场布置 2-5 个背景装饰层强调色径向光晕、超大号 ghost text、发丝线、噪点等但所有装饰都应保持在低透明度并配以缓慢的 ambient 动画呼吸、漂移、脉冲确保与 Clean / Corporate 的信息优先定位不冲突。排版协同为 Corporate 视频选对字体配色与字体是一体的。据 typography.mdHyperFrames 编译器预打包 18 个字体族Inter、Roboto、Open Sans、Lato、Nunito、Montserrat、Poppins、Outfit、Oswald、League Gothic、Archivo Black、Playfair Display、EB Garamond、Space Mono、IBM Plex Mono、JetBrains Mono、Source Code Pro、Noto Sans JP写这些族名即可离线确定性渲染。对企业类内容建议跨类别配对严禁两套 sans-serif 并置这是最常见的 AI 设计败笔。企业内容典型做法是sans 标题 serif 正文或sans monomono 适合数据、代码、标注远离训练数据默认typography.md 的 banned 清单包含 Inter、Roboto、Playfair Display、EB Garamond 等——它们能渲染但读起来像默认模板安全且独特的组合可优先考虑Montserrat / Oswald / League Gothic / Archivo Black / Space Mono / IBM Plex Mono / JetBrains Mono / Source Code Pro视频字号而非网页字号全屏观看场景正文 ≥20px、标题 ≥60px、数据标签 ≥16px如果目标是信息流内嵌播放X / LinkedIn / Instagram feed还要再放大一档正文 ≥32px、标题 ≥90px、数据标签 ≥24px数字用表格数字企业视频大量堆叠指标记得开启font-variant-numeric: tabular-nums让多位数纵向对齐对比度陷阱深色底上的浅色文字会显粗、显挤正文字重从 400 降到 350 左右、行高增加 0.05-0.1 来补偿——这对行 2、行 8 两组深色方案尤为重要。现成预设参考blue-professional 的咨询级实现如果想直接看到Corporate 调色板如何被完整实现为一套帧级设计系统仓库内置的 blue-professional frame 预设 是最佳参照——它把同类理念落到 1920×1080 帧单位上暖奶油画布 单一饱和钴蓝强调#1e2bfa无第二品牌色、无粉彩Space Grotesk展示/数字/chrome眉标大写 0.08em 字距Inter正文灰阶、行高 1.6双字体系统着色卡片而非阴影4% 钴蓝填充 20% 钴蓝 1.5px 边框 10-14px 圆角零 box-shadow——无硬阴影本身就是高级信号药丸形 chrome100px 圆角、钴蓝进度条、以及仅用于封面/结尾的氛围层对角面板、点阵、同心环帧级自审清单Squint / Silence / Single accent / Type / Depth / Anchor / Fabrication可作为任何 Corporate 项目渲染前的检查模板。该预设还明确了数字与声明硬规则禁止在帧级别杜撰数字、财务、百分比或日期指标槽一律以占位符呈现直到脚本提供真实数据——这同样是 Clean / Corporate 内容的职业底线。小结Clean / Corporate 不只是 40 个十六进制色值而是一套面向讲解、教程、演示场景的完整企业视觉方法论8 组配色覆盖暖调友好、深色权威、蓝白科技、高对比警示、中性克制五种情绪区间通过 design-spec.md 的 frontmatter 规范转化为可执行 tokens以单一强调色 中性倾色 WCAG AA 对比度为硬约束再配合 typography.md 的字体纪律与 blue-professional 的帧级实现范式即可产出专业、可信、经得起像素级校验的企业级视频帧。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/10 14:44:02 · 阅读 1.2k HyperFrames Clean / Corporate 调色板全解：面向讲解、教程与演示视频的 40 色企业级配色系统
HyperFrames Clean / Corporate 调色板全解面向讲解、教程与演示视频的 40 色企业级配色系统【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesClean / Corporate 是 HyperFrames 创意技能hyperframes-creative内置的 9 套主题调色板之一专为Explainers讲解视频、tutorials教程、presentations演示/汇报、professional content专业内容设计。它提供了 8 组、共 40 个经过搭配的十六进制色值覆盖从暖色奶油底到冷色蓝调、从深色权威感到浅色中性风的完整企业视觉谱系。读完本文你将掌握这套调色板的完整色值、每组配色的构成逻辑与适用场景并能依照 HyperFrames 的设计规范frame.md/design.md将其转化为可渲染的 YAML 颜色 tokens同时通过对比度校验与排版规则保证最终成片达到 WCAG AA 可读性标准。定位什么时候选择 Clean / Corporate在 hyperframes-creative 技能的路由表 中palettes/*.md被定义为 Palette-specific color tokens即调色板专属颜色令牌来源。当创作需求属于以下类型时clean-corporate.md是优先选择的配色来源Explainers产品/概念讲解类短视频需要一看就懂的清晰层级Tutorials教程类内容前景信息与背景装饰必须严格分离避免干扰注意力Presentations汇报、路演、投资者演示强调权威感与可信度Professional content面向企业客户、培训、行业分析等正式场景。从设计情绪上看它对应的是克制、可信、专业而不是高能、喧闹、潮流——后者的配色需求应转向 palettes/bold-energetic.md 等其它主题。选型时也可以对照 visual-styles.md 中的情绪速查表Clean / Corporate 与其中 Clinical, precise / 数据驱动、分析、技术 的Swiss Pulse风格、以及 Premium, enterprise / 高端企业 的Velvet Standard风格同属一个情绪区间是典型的 B2B / 咨询 / 开发者工具向表达。完整色板40 个色值逐行呈现原文档以 8 行、每行 5 色的代码块形式给出全部色值这是本调色板的原始契约使用时请原样引用十六进制值不要四舍五入或随意替换——正如 design-spec.md 所强调的规范中的 tokens 是规范性层normative layer必须逐字引用exact hex。#FFFCF2 #CCC5B9 #403D39 #252422 #EB5E28 #22223B #4A4E69 #9A8C98 #C9ADA7 #F2E9E4 #3D5A80 #98C1D9 #E0FBFC #EE6C4D #293241 #2B2D42 #8D99AE #EDF2F4 #EF233C #D90429 #353535 #3C6E71 #FFFFFF #D9D9D9 #284B63 #E7ECEF #274C77 #6096BA #A3CEF1 #8B8C89 #CFDBD5 #E8EDDF #F5CB5C #242423 #333533 #2F6690 #3A7CA5 #D9DCD6 #16425B #81C3D7逐行拆解8 组配色的构成逻辑与典型用法每一行的 5 个颜色通常可以按背景 / 中性层级 / 强调色的职能归类。结合 house-style.md 给出的落地规则——写 HTML 前先声明 bg、fg、accent 三个角色下面为每行给出建议的角色映射与适用场景。需要说明的是这些角色映射是基于色彩构成规律的推断具体以你项目的frame.md/design.md规范为准。行 1暖奶油 炭黑 橙焰#FFFCF2 #CCC5B9 #403D39 #252422 #EB5E28构成#FFFCF2暖白背景、#CCC5B9暖灰次级面、#403D39/#252422两级深炭文字、#EB5E28暖橙强调。气质最经典的暖调企业风——比纯白更亲和的米白底配合炭黑文字保证正式感暖橙只在 CTA、关键数据、进度条上少量出现。适用面向大众消费者的产品讲解SaaS onboarding、金融科普、健康指南希望在专业与友好之间取得平衡。注意#EB5E28明度中等作为文字色在浅底上对比度偏低更适合用作填充色按钮、条形、数字高亮而非正文文字。行 2午夜蓝紫 雾灰 暖藕#22223B #4A4E69 #9A8C98 #C9ADA7 #F2E9E4构成#22223B深蓝紫背景、#4A4E69次级深色、#9A8C98/#C9ADA7两级暖灰、#F2E9E4暖白前景文字。气质暗色权威感——深蓝紫底传递沉稳暖调前景避免死黑死白。适用金融、法律、咨询类企业演示、高管汇报开场/结尾帧、以及需要在暗色场景中呈现高级感的教程。深色底上务必让#F2E9E4承担正文前景#C9ADA7承担次级文字。行 3海军蓝 冰蓝 珊瑚橙#3D5A80 #98C1D9 #E0FBFC #EE6C4D #293241构成#293241/#3D5A80两级深蓝、#98C1D9/#E0FBFC两级浅蓝、#EE6C4D珊瑚橙强调。气质蓝白系企业标准配色——蓝色系天然带科技、可信联想珊瑚橙作为唯一暖色强调负责把观众视线拉向 CTA 或关键指标。适用科技公司产品发布、B2B 平台讲解、数据分析类视频。深蓝背景 浅蓝卡片 橙强调是三段式构图中最稳的组合之一。行 4炭蓝灰 冰白 双红强调#2B2D42 #8D99AE #EDF2F4 #EF233C #D90429构成#2B2D42深炭蓝、#8D99AE中灰、#EDF2F4冰白、#EF233C/#D90429两级鲜红。气质高对比强提醒——本组对比度极强红色是双份的适合需要传达紧迫感、风险警示或强烈数据对比的内容。适用安全/合规培训、风险提示、限时活动讲解。注意红色是情绪色应仅用于警示、负向数据、强调性数字不可大面积铺陈否则观众会产生不安感。行 5中性深灰 深青 纯白#353535 #3C6E71 #FFFFFF #D9D9D9 #284B63构成#FFFFFF/#D9D9D9/#353535构成标准灰阶#3C6E71深青与#284B63深蓝作为双冷色点缀。气质最低调的商务中性风——几乎所有画面都是灰阶只有零星冷色点缀克制到极致。适用审计/咨询报告、法律条款解读、任何内容比装饰重要的场景。它也是后续落地时最容易直接映射为bg/fg/accent三 token 的一组。行 6浅灰蓝底 蓝阶 灰#E7ECEF #274C77 #6096BA #A3CEF1 #8B8C89构成#E7ECEF浅灰蓝背景、#274C77/#6096BA/#A3CEF1深中浅三级蓝、#8B8C89中性灰。气质浅色蓝调专业风——浅底 蓝阶是演示文稿感最强的组合非常适合信息密度高、需要长时间阅读的教程帧。适用企业内部培训、软件功能教程、报告式讲解。#274C77可作标题与强调#A3CEF1可作卡片填充或图表色。行 7雾绿 奶油 金黄#CFDBD5 #E8EDDF #F5CB5C #242423 #333533构成#CFDBD5/#E8EDDF两级浅灰绿底、#F5CB5C金黄强调、#242423/#333533两级近黑文字。气质暖中带金的环保企业风——灰绿底比纯白更自然金黄强调带来积极、增长、阳光的信号。适用可持续发展/ESG 报告、教育类产品、增长数据讲解。金黄#F5CB5C适合做数字高亮、奖章、成功状态标识。行 8蓝阶 浅灰 亮蓝#2F6690 #3A7CA5 #D9DCD6 #16425B #81C3D7构成#16425B/#2F6690/#3A7CA5三级深蓝、#81C3D7亮蓝、#D9DCD6浅灰白。气质沉稳蓝调深色系——比行 3 更深、更企业背书亮蓝#81C3D7负责在深底上提供透气感。适用金融机构品牌内容、开发者工具文档视频、行业白皮书式讲解。深蓝底上#D9DCD6作正文、#81C3D7作链接与强调高亮。在 HyperFrames 项目中落地从色值到规范 tokens色板本身只是原料HyperFrames 的创作流程要求把配色写进设计规范再进入生产。依据 design-spec.md规范文件优先级frame.md→design.md→DESIGN.md读取存在的第一个其余忽略。视频项目优先使用frame.md。Frontmatter 是规范性层colors、typography、spacing等字段是机器可读的真实值必须逐字引用色值正文##段落只是解释性语境prose is context。从 preset 起步是可选项可以直接把frame-presets/下的现成FRAME.md模板复制为frame.md再覆盖品牌 tokens。以行 5中性深灰 深青 纯白为例落地为frame.mdfrontmatter 可以写成name: Clean Corporate — Neutral unit: the frame — 1920x1080 primary; 9:16 and 1:1 documented colors: bg: #FFFFFF surface: #D9D9D9 text: #353535 primary: #3C6E71 # 唯一强调色深青 secondary: #284B63 # 次级冷色深蓝 on-primary: #FFFFFF落地时的核心纪律来自 house-style.md 的 Color 一节先声明再写码动手写 HTML 之前声明好bg/fg/accent三个角色不要逐元素临场发明颜色单一强调色全片只用一个强调色accent hue背景在所有场景保持一致中性色向强调色倾斜即使是最中性的灰阶也向强调色方向做轻微冷暖倾斜避免死灰色按内容明暗匹配食品/健康/儿童类内容倾向浅色科技/影视/金融倾向深色——本调色板 8 行恰好同时覆盖了这两种方向。在 house-style.md 的调色板索引表 中Clean / Corporate 被正式标注为 Explainers, tutorials, presentations 场景的推荐来源与该 skill 的 SKILL.md 路由表互相印证。与 Design Picker 的配合把调色板送进交互式选择流程如果项目没有现成设计规范、需要给用户多套视觉方案做选择可走 design-picker.md 的交互式流程。该文档对调色板数据有硬性要求本色板完全符合数量 5-6 组每次给出 5-6 个候选调色板且必须混合深色、浅色与着色tinted背景——clean-corporate 的 8 行恰好覆盖深色行 2、行 8、浅色行 1、行 6、行 7与中性行 5三种背景明度swatch 尺寸可区分如果两个调色板在 14px 色块下看不出区别就必须删掉一个——本调色板每组的主背景明度与强调色相都不同暖橙 / 双红 / 深青 / 金黄 / 蓝阶天然满足该测试命名贴合品牌世界在 picker 中应把色板命名为与具体品牌相关、而非泛泛的 clean 之类情绪词。picker 最终产出的design.md是 google-labs-code/design.md 规范兼容文件YAML frontmatter 的colors/typography/rounded/spacingtokens 若干 prose 段落可直接作为后续创作的设计依据。可读性保障对比度校验是 Clean / Corporate 的底线企业类内容最怕看不清。HyperFrames 对此有强制约束与工具支持WCAG AA 强制据 house-style.md对比度由hyperframes check强制校验WCAG AA移除装饰元素后文字必须可读。因此在浅色底如行 1 的#FFFCF2、行 5 的#FFFFFF上正文请用深炭/近黑色#252422、#353535强调色只用于大号数字、填充元素不要用于小字号正文。像素级校验脚本scripts/contrast-report.mjs 会逐帧采样文本元素的声明前景色与实际背后合成像素的 WCAG 2.1 对比度输出contrast-report.json与contrast-overlay.png洋红未达 AA黄仅达 AA绿达 AAA任一文本元素不达 AA 即以退出码 1 结束。它采用隐藏文本后再截图采样真实背景的方法专门解决文字背后是玻璃模糊面板或半透明装饰时的误判问题。运行方式node skills/hyperframes-creative/scripts/contrast-report.mjs composition-dir \ [--samples N] [--out dir] [--width W] [--height H] [--fps N]装饰不挡信息house-style 建议每场布置 2-5 个背景装饰层强调色径向光晕、超大号 ghost text、发丝线、噪点等但所有装饰都应保持在低透明度并配以缓慢的 ambient 动画呼吸、漂移、脉冲确保与 Clean / Corporate 的信息优先定位不冲突。排版协同为 Corporate 视频选对字体配色与字体是一体的。据 typography.mdHyperFrames 编译器预打包 18 个字体族Inter、Roboto、Open Sans、Lato、Nunito、Montserrat、Poppins、Outfit、Oswald、League Gothic、Archivo Black、Playfair Display、EB Garamond、Space Mono、IBM Plex Mono、JetBrains Mono、Source Code Pro、Noto Sans JP写这些族名即可离线确定性渲染。对企业类内容建议跨类别配对严禁两套 sans-serif 并置这是最常见的 AI 设计败笔。企业内容典型做法是sans 标题 serif 正文或sans monomono 适合数据、代码、标注远离训练数据默认typography.md 的 banned 清单包含 Inter、Roboto、Playfair Display、EB Garamond 等——它们能渲染但读起来像默认模板安全且独特的组合可优先考虑Montserrat / Oswald / League Gothic / Archivo Black / Space Mono / IBM Plex Mono / JetBrains Mono / Source Code Pro视频字号而非网页字号全屏观看场景正文 ≥20px、标题 ≥60px、数据标签 ≥16px如果目标是信息流内嵌播放X / LinkedIn / Instagram feed还要再放大一档正文 ≥32px、标题 ≥90px、数据标签 ≥24px数字用表格数字企业视频大量堆叠指标记得开启font-variant-numeric: tabular-nums让多位数纵向对齐对比度陷阱深色底上的浅色文字会显粗、显挤正文字重从 400 降到 350 左右、行高增加 0.05-0.1 来补偿——这对行 2、行 8 两组深色方案尤为重要。现成预设参考blue-professional 的咨询级实现如果想直接看到Corporate 调色板如何被完整实现为一套帧级设计系统仓库内置的 blue-professional frame 预设 是最佳参照——它把同类理念落到 1920×1080 帧单位上暖奶油画布 单一饱和钴蓝强调#1e2bfa无第二品牌色、无粉彩Space Grotesk展示/数字/chrome眉标大写 0.08em 字距Inter正文灰阶、行高 1.6双字体系统着色卡片而非阴影4% 钴蓝填充 20% 钴蓝 1.5px 边框 10-14px 圆角零 box-shadow——无硬阴影本身就是高级信号药丸形 chrome100px 圆角、钴蓝进度条、以及仅用于封面/结尾的氛围层对角面板、点阵、同心环帧级自审清单Squint / Silence / Single accent / Type / Depth / Anchor / Fabrication可作为任何 Corporate 项目渲染前的检查模板。该预设还明确了数字与声明硬规则禁止在帧级别杜撰数字、财务、百分比或日期指标槽一律以占位符呈现直到脚本提供真实数据——这同样是 Clean / Corporate 内容的职业底线。小结Clean / Corporate 不只是 40 个十六进制色值而是一套面向讲解、教程、演示场景的完整企业视觉方法论8 组配色覆盖暖调友好、深色权威、蓝白科技、高对比警示、中性克制五种情绪区间通过 design-spec.md 的 frontmatter 规范转化为可执行 tokens以单一强调色 中性倾色 WCAG AA 对比度为硬约束再配合 typography.md 的字体纪律与 blue-professional 的帧级实现范式即可产出专业、可信、经得起像素级校验的企业级视频帧。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考