拓冰网站定制 
HyperFrames 自然大地调色板Nature / Earth实战指南为可持续、户外、有机与健康类视频构建色彩体系【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本文围绕 HyperFrames 创意技能包hyperframes-creative内置的 Nature / Earth 调色板展开讲解如何为可持续、户外、有机、健康类视频内容选定与落地一套大地系配色从 40 个色值的语义分组到design.md/frame.md规范中的 YAML 色彩令牌再到 WCAG AA 对比度校验与 HTML 实践。读完你可以直接把这套色板用于 HyperFrames 项目的frame.md设计规范写出有品牌感、可渲染、可过检的大地系视频合成。Nature / Earth 调色板定位它解决什么问题在 palettes/nature-earth.md 中这组色板的用途被一句话点明Sustainability, outdoor, organic, wellness content.即**可持续Sustainability、户外Outdoor、有机Organic、健康养生Wellness**类内容。它是 house-style.md 的 Palettes 章节表格入口所列的九个默认调色板之一与 Bold/Energetic、Warm/Editorial、Dark/Premium、Clean/Corporate、Neon/Electric、Pastel/Soft、Jewel/Rich、Monochrome 并列。凡涉及环保品牌、露营与户外装备、有机食品、自然纪录片、疗愈健康产品的 HyperFrames 视频都可以从这里起步。在 HyperFrames 的创意工作流中调色板不是孤立的好看的颜色清单而是设计规范design spec的一个输入。按 SKILL.md 的定义hyperframes-creative负责非动画的视觉方向——设计规范处理、调色板、排版、旁白、节拍规划等动手写 HTML 之前应当先完成声明 bg背景、fg前景、accent强调色这一步这正是 Nature / Earth 色板发挥作用的环节。完整色板8 组 × 5 色共 40 个色值原文档完整给出 8 行色板每行 5 个十六进制色值。为避免任何信息丢失这里逐行完整呈现保持原文档顺序随后进行语义拆解。#606C38 #283618 #FEFAE0 #DDA15E #BC6C25 #DAD7CD #A3B18A #588157 #3A5A40 #344E41 #386641 #6A994E #A7C957 #F2E8CF #BC4749 #CAD2C5 #84A98C #52796F #354F52 #2F3E46 #F0EAD2 #DDE5B6 #ADC178 #A98467 #6C584C #132A13 #31572C #4F772D #90A955 #ECF39E #6B9080 #A4C3B2 #CCE3DE #EAF4F4 #F6FFF8 #233D4D #FE7F2D #FCCA46 #A1C181 #619B8A逐组语义拆解行主色相说明典型角色1橄榄绿 奶油 焦橙棕经典土壤—叶绿—沙土组合#FEFAE0是暖奶油底深绿标题 奶油背景 焦橙强调2鼠尾草灰绿低饱和、克制的自然灰绿#DAD7CD/#A3B18A与深森林绿#588157→#344E41渐变中灰绿背景 深绿前景3亮绿 浆果红#386641→#A7C957的绿色跨度最大#BC4749是整张表中唯一的暖红有机食品、活力农业红作强调4雾蓝灰绿#CAD2C5→#2F3E46带冷调、接近石板灰户外装备、中性冷静风5麦秆米 驼色#F0EAD2/#DDE5B6/#ADC178是暖黄绿#A98467/#6C584C是泥土棕谷物、木料、手作感6深林绿 荧光黄绿#132A13接近墨绿黑#ECF39E是高亮黄绿深底 高亮强调强对比7薄荷雾绿最清新疗愈的一行#F6FFF8→#6B9080从白到雾绿健康养生、疗愈、SPA 场景8深海蓝 活力橙黄#233D4D深蓝绿、#FE7F2D/#FCCA46橙黄户外运动登山、骑行活力组合整体来看这 40 个色值呈现几个显著特征绿色系占绝对主体从墨绿#132A13到荧光黄绿#ECF39E覆盖了完整的明度跨度暖中性色丰富奶油#FEFAE0、米色#F0EAD2、驼棕#A98467冷调补充雾蓝灰绿第 4 行、薄荷第 7 行、深蓝第 8 行以及零星的高饱和强调色焦橙#BC6C25、浆果红#BC4749、活力橙#FE7F2D。这与 house-style.md 的每场景一个强调色One accent hue原则天然契合——绿色与奶油承担大面积的 bg/fg强调色只需取一行中的第三个或第五个角色。在 HyperFrames 设计规范中落地YAML 色彩令牌HyperFrames 的设计规范文件是frame.md/design.mdframe.md为视频优先design.md面向网页/静态页两者格式相同。按 design-spec.md 的解析约定frontmatter 是规范性层机器可读的真实值必须逐字引用十六进制prose 是语境层意图与约束。调色板被引入项目的方式就是把选定的色值写进 frontmatter 的colors令牌。以第 1 行橄榄绿 × 奶油 × 焦橙棕为基底一份可持续/有机内容项目的frame.mdfrontmatter 示例name: Nature Earth — Organic Harvest colors: primary: #283618 # 深橄榄绿标题与主前景 on-primary: #FEFAE0 # 暖奶油深绿之上的正文 surface: #FEFAE0 # 场景背景暖奶油 on-surface: #283618 # 背景之上的主文字 accent: #BC6C25 # 焦橙棕唯一强调色CTA、数据高亮 muted: #606C38 # 次级橄榄绿标签/次级文本 hairline: #DDA15E # 沙金色细线分隔 typography: headline: fontFamily: EB Garamond # 或从 bundled 字体中另选 fontSize: 4rem fontWeight: 700 body: fontFamily: Montserrat fontSize: 1.5rem fontWeight: 400 rounded: sm: 8px md: 16px spacing: sm: 8px md: 16px lg: 32px也可以参考 visual-styles.md 中完整风格如面向健康养生的 Soft Signal的 YAML 组织方式colors2–5 个令牌typography2–3 个字号层级roundedspacing然后补上## Overview、## Colors、## Typography、## Components、## Dos and Donts等 prose 小节即可得到一份完整的design.md。如果不想手写也可以走交互式路线按 design-picker.md 生成可视化选择器用户选定后把design.md粘贴回对话并保存到项目根目录。色彩使用规则先声明、单一强调、中性向强调色偏移Nature / Earth 色板只有配合 house-style 的色彩纪律才能避免五颜六色的网页风。以下规则直接来自 house-style.md先声明再写代码动手写 HTML 前声明一个背景、一个前景、一个强调色。Palettes 章节明确规定Declare one background, one foreground, one accent before writing HTML。Nature / Earth 的 40 色只是候选池落到每个场景只能三选一。单场景一个强调色#BC6C25、#BC4749、#FE7F2D、#ECF39E都是强色不能在一帧里同时出现——那是典型的 AI 设计痕迹。中性色向强调色偏移即使是大面积奶油/米色也尽量带一点暖意#FEFAE0、#F0EAD2本身就含黄相避免死灰。明暗匹配内容house-style 建议food、wellness、kids → 浅色tech、cinema、finance → 深色。因此有机食品、健康内容优先用第 1/5/7 行的浅色组合而纪录片式的自然叙事可用第 6 行深林绿做暗场。背景层必须有景深每场景需要 2–5 个常驻装饰元素强调色径向光晕、3–8% 透明度的幽灵文字、发丝线分隔线、颗粒/噪点覆盖层等并配以缓慢的呼吸/漂移动画——这能避免入场动画交错期画面空荡。排版配合大地系色板 × HyperFrames 字体规则色彩与字体共同构成品牌。按 typography.md 的规则不要用两个无衬线体配对跨越字体类别serif sans或 sans mono。Nature / Earth 的天然气质适合衬线展示字 现代无衬线正文如 EB Garamond Montserrat或衬线 等宽数据标签用 JetBrains Mono / Space Mono。优先使用预打包的 18 个字体族离线确定渲染、无 lint 警告、云端渲染不失败。其中既在预打包中又未被禁用的安全选择是Montserrat、Oswald、League Gothic、Archivo Black、Space Mono、IBM Plex Mono、JetBrains Mono、Source Code Pro、Noto Sans JP。Inter、EB Garamond、Playfair Display 等虽能渲染但已被列入千篇一律禁用清单。字号按视频而非网页正文 ≥ 20px信息流内嵌观看 ≥ 32px标题 ≥ 60px信息流 ≥ 90px数据标签 ≥ 16px字重对比要极端300 vs 900。深色场景如第 6 行深林绿底浅字在深底上视觉更重、字距更紧正文用 350 而非 400line-height增加 0.05–0.1display 字号加 0.01emletter-spacing。对比度校验WCAG AA 是硬门槛选色不是审美自由发挥——HyperFrames 用 WCAG AA 对比度强制约束文字可读性。house-style 明确Contrast:enforced byhyperframes check(WCAG AA). Text must be readable with decoratives removed.仓库为此提供了一等公民工具 contrast-report.mjs它读取合成目录在 N 个采样时刻遍历 DOM 中的文本元素测量每个元素声明的前景色与它背后真实合成像素之间的 WCAG 2.1 对比度输出contrast-report.json机器可读每个文本元素 × 采样点一条记录contrast-overlay.png精灵网格品红 AA 不通过黄色 仅 AA 通过绿色 AAA用法node skills/hyperframes-creative/scripts/contrast-report.mjs composition-dir \ [--samples N] [--out dir] [--width W] [--height H] [--fps N]其实现细节值得注意为了测出文字背后真实像素脚本会把每个候选元素的文本绘制color/fill/-webkit-text-stroke-color→transparent且强制transition: none防止截图中途过渡隐藏后截屏再在元素自身 bbox 内以有界网格采样中位数——这比在 bbox 外侧采样 4px 环的方法对玻璃拟态、半透明装饰等场景更稳健。任一文本元素未达 AA大字 ≥ 3:1普通文本 ≥ 4.5:1即退出码 1。以 Nature / Earth 色板自检第 1 行#283618前景在#FEFAE0背景上对比度极高适合正文#BC6C25焦橙作强调文字时要留意与奶油的对比度约 3:1 上下做大字/加粗可过 AA做小字需实测。第 7 行薄荷雾绿#6B9080与#EAF4F4对比温和适合大面积装饰与大标题但不适合小字号正文——这正是contrast-report.mjs这类工具存在的意义不要凭感觉跑一次测量。写作规范阶段的对应检查在 design-adherence.md 中定义无设计规范时验证所有场景使用同一组 bg/fg/accent、无逐场景发明颜色并对照 house-style 的 Lazy Defaults to Question 清单渐变文字、左侧强调条、纯黑/纯白、相同卡片网格等逐项核查。实战示例一帧有机农产品场景的骨架把上述规则落成一帧的 HTML 骨架假设已把第 1 行色板声明进frame.mdfrontmatterbody stylebackground:#FEFAE0;color:#283618;font-family:Montserrat,sans-serif; !-- 背景层常驻装饰缓慢呼吸 -- div styleposition:absolute;border-radius:50%;background:radial-gradient(circle,rgba(221,161,94,0.18),transparent 70%);width:60vw;height:60vw;left:-20vw;top:-20vw;/div div styleposition:absolute;font-family:EB Garamond,serif;font-size:18vw;color:rgba(40,54,24,0.05);right:0;bottom:0;field/div !-- 前景层 -- h1 stylefont-family:EB Garamond,serif;font-weight:700;font-size:5rem;color:#283618;Harvest, not hurry/h1 p stylefont-size:1.4rem;line-height:1.7;max-width:40ch;Small farms, slow soil, honest produce — grown within a days drive./p div stylebackground:#606C38;color:#FEFAE0;border-radius:999px;padding:12px 28px;display:inline-block;Shop the season/div !-- 数据大数字 等宽字体 tabular-nums -- div stylefont-family:Space Mono,monospace;font-variant-numeric:tabular-nums;font-size:3rem;color:#BC6C25;2,400/div /body要点背景色/前景色/强调色三色一致深绿#283618作标题与主文本焦橙#BC6C25只用于数据高亮这一个强调点奶油底上的衬线标题 无衬线正文 等宽数据符合跨类别配对数据用tabular-nums保证纵向数字对齐。写完后跑hyperframes check与contrast-report.mjs验证对比度再按 design-adherence.md 的清单检查是否引入了清单外的发明颜色。与其他色板及资源的边界Nature / Earth 与相邻色板的分工在 house-style.md 的 Palettes 表中写明健康养生内容若更偏精致柔美可参考 pastel-soft.md时尚、美妆、生活方式若更偏温暖叙事可参考 warm-editorial.md科技/高端感则不属于本板应转向 dark-premium.md。Nature / Earth 的独特点在于它的绿色跨度——从墨绿到荧光黄绿、从冷雾绿到暖橄榄绿几乎覆盖了自然类品牌的全部明度需求这也是它在可持续与户外内容中被优先选择的原因。小结Nature / Earth 调色板是 HyperFrames 创意技能包为可持续、户外、有机与健康内容准备的大地系配色基座40 个色值覆盖了从暖奶油、麦秆米到深林绿、雾蓝灰绿的完整明度与色温跨度。正确的用法不是每帧换色而是——从这 40 色中先声明 bg/fg/accent 三个角色写入frame.md/design.md的 frontmatter 色彩令牌配合 house-style 的单一强调色与背景层规则、typography 的字体配对纪律最后用hyperframes check与 contrast-report.mjs 的 WCAG AA 实测收尾。这样产出的合成既有大地系品牌的一致性又经得起渲染与可读性校验。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HyperFrames 自然大地调色板（Nature / Earth）实战指南：为可持续、户外、有机与健康类视频构建色彩体系
HyperFrames 自然大地调色板Nature / Earth实战指南为可持续、户外、有机与健康类视频构建色彩体系【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本文围绕 HyperFrames 创意技能包hyperframes-creative内置的 Nature / Earth 调色板展开讲解如何为可持续、户外、有机、健康类视频内容选定与落地一套大地系配色从 40 个色值的语义分组到design.md/frame.md规范中的 YAML 色彩令牌再到 WCAG AA 对比度校验与 HTML 实践。读完你可以直接把这套色板用于 HyperFrames 项目的frame.md设计规范写出有品牌感、可渲染、可过检的大地系视频合成。Nature / Earth 调色板定位它解决什么问题在 palettes/nature-earth.md 中这组色板的用途被一句话点明Sustainability, outdoor, organic, wellness content.即**可持续Sustainability、户外Outdoor、有机Organic、健康养生Wellness**类内容。它是 house-style.md 的 Palettes 章节表格入口所列的九个默认调色板之一与 Bold/Energetic、Warm/Editorial、Dark/Premium、Clean/Corporate、Neon/Electric、Pastel/Soft、Jewel/Rich、Monochrome 并列。凡涉及环保品牌、露营与户外装备、有机食品、自然纪录片、疗愈健康产品的 HyperFrames 视频都可以从这里起步。在 HyperFrames 的创意工作流中调色板不是孤立的好看的颜色清单而是设计规范design spec的一个输入。按 SKILL.md 的定义hyperframes-creative负责非动画的视觉方向——设计规范处理、调色板、排版、旁白、节拍规划等动手写 HTML 之前应当先完成声明 bg背景、fg前景、accent强调色这一步这正是 Nature / Earth 色板发挥作用的环节。完整色板8 组 × 5 色共 40 个色值原文档完整给出 8 行色板每行 5 个十六进制色值。为避免任何信息丢失这里逐行完整呈现保持原文档顺序随后进行语义拆解。#606C38 #283618 #FEFAE0 #DDA15E #BC6C25 #DAD7CD #A3B18A #588157 #3A5A40 #344E41 #386641 #6A994E #A7C957 #F2E8CF #BC4749 #CAD2C5 #84A98C #52796F #354F52 #2F3E46 #F0EAD2 #DDE5B6 #ADC178 #A98467 #6C584C #132A13 #31572C #4F772D #90A955 #ECF39E #6B9080 #A4C3B2 #CCE3DE #EAF4F4 #F6FFF8 #233D4D #FE7F2D #FCCA46 #A1C181 #619B8A逐组语义拆解行主色相说明典型角色1橄榄绿 奶油 焦橙棕经典土壤—叶绿—沙土组合#FEFAE0是暖奶油底深绿标题 奶油背景 焦橙强调2鼠尾草灰绿低饱和、克制的自然灰绿#DAD7CD/#A3B18A与深森林绿#588157→#344E41渐变中灰绿背景 深绿前景3亮绿 浆果红#386641→#A7C957的绿色跨度最大#BC4749是整张表中唯一的暖红有机食品、活力农业红作强调4雾蓝灰绿#CAD2C5→#2F3E46带冷调、接近石板灰户外装备、中性冷静风5麦秆米 驼色#F0EAD2/#DDE5B6/#ADC178是暖黄绿#A98467/#6C584C是泥土棕谷物、木料、手作感6深林绿 荧光黄绿#132A13接近墨绿黑#ECF39E是高亮黄绿深底 高亮强调强对比7薄荷雾绿最清新疗愈的一行#F6FFF8→#6B9080从白到雾绿健康养生、疗愈、SPA 场景8深海蓝 活力橙黄#233D4D深蓝绿、#FE7F2D/#FCCA46橙黄户外运动登山、骑行活力组合整体来看这 40 个色值呈现几个显著特征绿色系占绝对主体从墨绿#132A13到荧光黄绿#ECF39E覆盖了完整的明度跨度暖中性色丰富奶油#FEFAE0、米色#F0EAD2、驼棕#A98467冷调补充雾蓝灰绿第 4 行、薄荷第 7 行、深蓝第 8 行以及零星的高饱和强调色焦橙#BC6C25、浆果红#BC4749、活力橙#FE7F2D。这与 house-style.md 的每场景一个强调色One accent hue原则天然契合——绿色与奶油承担大面积的 bg/fg强调色只需取一行中的第三个或第五个角色。在 HyperFrames 设计规范中落地YAML 色彩令牌HyperFrames 的设计规范文件是frame.md/design.mdframe.md为视频优先design.md面向网页/静态页两者格式相同。按 design-spec.md 的解析约定frontmatter 是规范性层机器可读的真实值必须逐字引用十六进制prose 是语境层意图与约束。调色板被引入项目的方式就是把选定的色值写进 frontmatter 的colors令牌。以第 1 行橄榄绿 × 奶油 × 焦橙棕为基底一份可持续/有机内容项目的frame.mdfrontmatter 示例name: Nature Earth — Organic Harvest colors: primary: #283618 # 深橄榄绿标题与主前景 on-primary: #FEFAE0 # 暖奶油深绿之上的正文 surface: #FEFAE0 # 场景背景暖奶油 on-surface: #283618 # 背景之上的主文字 accent: #BC6C25 # 焦橙棕唯一强调色CTA、数据高亮 muted: #606C38 # 次级橄榄绿标签/次级文本 hairline: #DDA15E # 沙金色细线分隔 typography: headline: fontFamily: EB Garamond # 或从 bundled 字体中另选 fontSize: 4rem fontWeight: 700 body: fontFamily: Montserrat fontSize: 1.5rem fontWeight: 400 rounded: sm: 8px md: 16px spacing: sm: 8px md: 16px lg: 32px也可以参考 visual-styles.md 中完整风格如面向健康养生的 Soft Signal的 YAML 组织方式colors2–5 个令牌typography2–3 个字号层级roundedspacing然后补上## Overview、## Colors、## Typography、## Components、## Dos and Donts等 prose 小节即可得到一份完整的design.md。如果不想手写也可以走交互式路线按 design-picker.md 生成可视化选择器用户选定后把design.md粘贴回对话并保存到项目根目录。色彩使用规则先声明、单一强调、中性向强调色偏移Nature / Earth 色板只有配合 house-style 的色彩纪律才能避免五颜六色的网页风。以下规则直接来自 house-style.md先声明再写代码动手写 HTML 前声明一个背景、一个前景、一个强调色。Palettes 章节明确规定Declare one background, one foreground, one accent before writing HTML。Nature / Earth 的 40 色只是候选池落到每个场景只能三选一。单场景一个强调色#BC6C25、#BC4749、#FE7F2D、#ECF39E都是强色不能在一帧里同时出现——那是典型的 AI 设计痕迹。中性色向强调色偏移即使是大面积奶油/米色也尽量带一点暖意#FEFAE0、#F0EAD2本身就含黄相避免死灰。明暗匹配内容house-style 建议food、wellness、kids → 浅色tech、cinema、finance → 深色。因此有机食品、健康内容优先用第 1/5/7 行的浅色组合而纪录片式的自然叙事可用第 6 行深林绿做暗场。背景层必须有景深每场景需要 2–5 个常驻装饰元素强调色径向光晕、3–8% 透明度的幽灵文字、发丝线分隔线、颗粒/噪点覆盖层等并配以缓慢的呼吸/漂移动画——这能避免入场动画交错期画面空荡。排版配合大地系色板 × HyperFrames 字体规则色彩与字体共同构成品牌。按 typography.md 的规则不要用两个无衬线体配对跨越字体类别serif sans或 sans mono。Nature / Earth 的天然气质适合衬线展示字 现代无衬线正文如 EB Garamond Montserrat或衬线 等宽数据标签用 JetBrains Mono / Space Mono。优先使用预打包的 18 个字体族离线确定渲染、无 lint 警告、云端渲染不失败。其中既在预打包中又未被禁用的安全选择是Montserrat、Oswald、League Gothic、Archivo Black、Space Mono、IBM Plex Mono、JetBrains Mono、Source Code Pro、Noto Sans JP。Inter、EB Garamond、Playfair Display 等虽能渲染但已被列入千篇一律禁用清单。字号按视频而非网页正文 ≥ 20px信息流内嵌观看 ≥ 32px标题 ≥ 60px信息流 ≥ 90px数据标签 ≥ 16px字重对比要极端300 vs 900。深色场景如第 6 行深林绿底浅字在深底上视觉更重、字距更紧正文用 350 而非 400line-height增加 0.05–0.1display 字号加 0.01emletter-spacing。对比度校验WCAG AA 是硬门槛选色不是审美自由发挥——HyperFrames 用 WCAG AA 对比度强制约束文字可读性。house-style 明确Contrast:enforced byhyperframes check(WCAG AA). Text must be readable with decoratives removed.仓库为此提供了一等公民工具 contrast-report.mjs它读取合成目录在 N 个采样时刻遍历 DOM 中的文本元素测量每个元素声明的前景色与它背后真实合成像素之间的 WCAG 2.1 对比度输出contrast-report.json机器可读每个文本元素 × 采样点一条记录contrast-overlay.png精灵网格品红 AA 不通过黄色 仅 AA 通过绿色 AAA用法node skills/hyperframes-creative/scripts/contrast-report.mjs composition-dir \ [--samples N] [--out dir] [--width W] [--height H] [--fps N]其实现细节值得注意为了测出文字背后真实像素脚本会把每个候选元素的文本绘制color/fill/-webkit-text-stroke-color→transparent且强制transition: none防止截图中途过渡隐藏后截屏再在元素自身 bbox 内以有界网格采样中位数——这比在 bbox 外侧采样 4px 环的方法对玻璃拟态、半透明装饰等场景更稳健。任一文本元素未达 AA大字 ≥ 3:1普通文本 ≥ 4.5:1即退出码 1。以 Nature / Earth 色板自检第 1 行#283618前景在#FEFAE0背景上对比度极高适合正文#BC6C25焦橙作强调文字时要留意与奶油的对比度约 3:1 上下做大字/加粗可过 AA做小字需实测。第 7 行薄荷雾绿#6B9080与#EAF4F4对比温和适合大面积装饰与大标题但不适合小字号正文——这正是contrast-report.mjs这类工具存在的意义不要凭感觉跑一次测量。写作规范阶段的对应检查在 design-adherence.md 中定义无设计规范时验证所有场景使用同一组 bg/fg/accent、无逐场景发明颜色并对照 house-style 的 Lazy Defaults to Question 清单渐变文字、左侧强调条、纯黑/纯白、相同卡片网格等逐项核查。实战示例一帧有机农产品场景的骨架把上述规则落成一帧的 HTML 骨架假设已把第 1 行色板声明进frame.mdfrontmatterbody stylebackground:#FEFAE0;color:#283618;font-family:Montserrat,sans-serif; !-- 背景层常驻装饰缓慢呼吸 -- div styleposition:absolute;border-radius:50%;background:radial-gradient(circle,rgba(221,161,94,0.18),transparent 70%);width:60vw;height:60vw;left:-20vw;top:-20vw;/div div styleposition:absolute;font-family:EB Garamond,serif;font-size:18vw;color:rgba(40,54,24,0.05);right:0;bottom:0;field/div !-- 前景层 -- h1 stylefont-family:EB Garamond,serif;font-weight:700;font-size:5rem;color:#283618;Harvest, not hurry/h1 p stylefont-size:1.4rem;line-height:1.7;max-width:40ch;Small farms, slow soil, honest produce — grown within a days drive./p div stylebackground:#606C38;color:#FEFAE0;border-radius:999px;padding:12px 28px;display:inline-block;Shop the season/div !-- 数据大数字 等宽字体 tabular-nums -- div stylefont-family:Space Mono,monospace;font-variant-numeric:tabular-nums;font-size:3rem;color:#BC6C25;2,400/div /body要点背景色/前景色/强调色三色一致深绿#283618作标题与主文本焦橙#BC6C25只用于数据高亮这一个强调点奶油底上的衬线标题 无衬线正文 等宽数据符合跨类别配对数据用tabular-nums保证纵向数字对齐。写完后跑hyperframes check与contrast-report.mjs验证对比度再按 design-adherence.md 的清单检查是否引入了清单外的发明颜色。与其他色板及资源的边界Nature / Earth 与相邻色板的分工在 house-style.md 的 Palettes 表中写明健康养生内容若更偏精致柔美可参考 pastel-soft.md时尚、美妆、生活方式若更偏温暖叙事可参考 warm-editorial.md科技/高端感则不属于本板应转向 dark-premium.md。Nature / Earth 的独特点在于它的绿色跨度——从墨绿到荧光黄绿、从冷雾绿到暖橄榄绿几乎覆盖了自然类品牌的全部明度需求这也是它在可持续与户外内容中被优先选择的原因。小结Nature / Earth 调色板是 HyperFrames 创意技能包为可持续、户外、有机与健康内容准备的大地系配色基座40 个色值覆盖了从暖奶油、麦秆米到深林绿、雾蓝灰绿的完整明度与色温跨度。正确的用法不是每帧换色而是——从这 40 色中先声明 bg/fg/accent 三个角色写入frame.md/design.md的 frontmatter 色彩令牌配合 house-style 的单一强调色与背景层规则、typography 的字体配对纪律最后用hyperframes check与 contrast-report.mjs 的 WCAG AA 实测收尾。这样产出的合成既有大地系品牌的一致性又经得起渲染与可读性校验。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考