HyperFrames Biennale Yellow 帧设计系统用纸、墨与日光黄构建文学编辑式视频帧【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesBiennale Yellow 是 HyperFrames 创意技能库skills/hyperframes-creative内置的一档「文学编辑式」帧预设frame preset以暖羊皮纸为底、单一深靛蓝为墨、日光黄作氛围层在 1920×1080 的视频帧尺度上复刻艺术双年展目录册的克制气质。本文完整解析其FRAME.md规格文件的全部令牌tokens、六种帧版式treatments、构成规则与渲染前自检清单并结合仓库中的frame-showcase.html与caption-skin.html展示真实 CSS 落地写法帮助你在 HyperFrames 视频项目中直接采纳该预设或基于其原子atoms派生自有风格。定位frame.md 是什么Biennale Yellow 在技能体系中的位置在skills/hyperframes-creative的设计流程中frame.md是视频/HyperFrames 项目的帧尺度设计系统是design.md面向网页/静态页面的视频优先版本两者共用同一文件格式YAML frontmatter Markdown 正文。按 design-spec.md 的解析约定frontmatter 是规范层colors、typography、spacing、components是真实、可机读的值必须逐字引用精确 hex、字族、字重不得臆造或取整正文是上下文层Overview、The Frame、Composition Rules 等##段落承载意图、适用时机与令牌无法表达的约束用于判断而非取值。规格解析优先级为frame.md → design.md → DESIGN.md且frame.md恒为小写帧预设仓库交付的是大写FRAME.md模板采纳时复制为小写frame.md并叠加品牌令牌。skills/hyperframes-creative/SKILL.md的路由表将biennale-yellow定位为「自信 / 氛围感 / 克制」风格的即用预设——适合需要博物馆目录册式优雅与编辑权威感的产品。技能边界同时规定不得覆盖hyperframes-core的技术规则预设仅提供品牌约束版式是自由的The Design Spec Is Brand, Not Layout。核心设计命题纸、墨与黄Biennale Yellow 在帧尺度上是文学编辑系统注册表register为艺术双年展目录册暖羊皮纸、单一深靛蓝墨、作为氛围存在的日光黄。没有卡片、没有按钮、没有阴影、没有圆角——结构词汇只有纸、墨、黄三样深度由柔和的径向「日光光晕」sun bloom而非抬升elevation传达。声音由三副面孔承担、角色严格固定Instrument Serif字重 400、紧凑行高、负字距承载一切 display、数字与引文覆盖约 40px 至 720px 的字号Archivo承载正文与大字距大写 micro-labelJetBrains Mono承载所有日期、数字与页码。文字永远是墨色——对比来自字号与字重而非颜色。整体情绪介于折叠的博物馆宣传册与慢读文学季刊之间自信、有氛围、极度克制。帧尺度上的关键特征原文五条逐条保留暖羊皮纸底出现在每一帧永远不是白色也永远不是灰色单一墨色{colors.ink}用于所有文字与所有规则线日光黄只以 bloom / panel / tile 三种方式部署Instrument Serif 400做 display紧凑、负字距Archivo做正文与 micro-labelJetBrains Mono做数据1px 发丝线是唯一边框——不存在更粗的权重无阴影、无圆角日光光晕是每帧的主要深度层可选的余烬色embercounter-bloom 增加暖冷张力编辑式克制——稀疏即优雅拥挤会破坏目录册气质。The Frame画布、安全区与容器法则Frame Craft Bar三道目测关卡任何结构检查之前每一帧必须先通过三道「肉眼测试」Squint眯眼——必须有一个 Instrument Serif 主视觉瞬间其体量是相邻元素的 3–6 倍日光光晕把视线引向中心Silence静默——普通帧保持55–60% 空白ledger 是唯一的密度例外密度来自安静的重复发丝线而非丰富度Restraint克制——所有文字与规则线只用一种墨色每帧一个日光光晕可选一个从属 ember永不反色不存在墨底黄字Reference参照系——目标气质是「艺术双年展目录册 / 慢展海报 / 文学季刊」失败样貌是「扁平 CMS 模板」没有 bloom或「边框卡片堆」。尺寸、安全区与容器法则主尺寸1920×108016:9display 用cqw单位编写换算公式px ÷ 1920 × 100 cqw竖版1080×19209:16方形1080×10801:1安全区pad-edge为 4cqw约 40–76px——优雅依赖边缘负空间只有 bloom、tile、panel 可以出血bleed。容器法则承重墙每一帧的地面ground都设置container-type: size所有帧相对单位必须是cqw/cqh对着它计算——绝不用vw。发丝线保持 1pxbloom 尺寸按帧的%缩放。该法则在 frame-showcase.html 中有直接实现佐证第 404–431 行附近.frame类同时声明aspect-ratio: 16/9; container-type: size;页码.pn使用right: 3cqw; bottom: 2.6cqw; font-size: 1cqw全部为帧相对单位。色彩令牌与三路部署法则令牌与源设计完全一致原文表格原样保留令牌值角色paper#E9E5DB暖羊皮纸通用地面paper-deep#DCD6C4次级羊皮纸色带sun#F1EE2E日光黄——bloom / panel / tilesun-soft#F8F39Bbloom 中段停靠色haze#F0DA7Cbloom 外段停靠色ink#1B2566深靛蓝——每一行文字与每一条规则线ember#E26B4A余烬——仅作 15–22% counter-bloom部署规则{colors.paper}是通用地面{colors.ink}是每一行文字与每一条规则线——不存在第二种文字颜色。{colors.sun}有三种合法用法bloom径向氛围、yellow-panel满出血海报填充、墨字在上、block-tileunderprint。{colors.ember}只以 15–22% 的 counter-bloom 出现——永远不是填充、不是文字。系统永不反色墨在黄上正确黄字在墨上不存在。frame-showcase.html中:root令牌的 CSS 变量声明与色板Palette区逐一对应可直接对照取用。排版阅读/数据阶梯与 display 阶梯两套阶梯。阅读/数据阶梯Archivo 正文 0.85cqw 墨色、micro-label 用 px、JetBrains Mono 数据承载正文与 chromedisplay 阶梯Instrument Serif从ledger-title1.55cqw 到numeral-jumbo28cqw承载一切标题、数字与引文。完整令牌表frontmatter 原文令牌字族尺寸字重行高其他bodyArchivo0.85cqw4001.5墨色body-ledeArchivo0.95cqw4001.55—micro-labelArchivo13px600—tracking 0.18em大写rail-labelArchivo13px600—tracking 0.32em大写mono-dataJetBrains Mono0.73cqw400—tracking 0.04empagenumJetBrains Mono13px400—tracking 0.08emopacity 0.75ledger-titleInstrument Serif1.55cqw4001.15—strand-titleInstrument Serif1.7cqw4001.1—headline-smInstrument Serif2.9cqw4001.0—headlineInstrument Serif4.6cqw4001.06tracking -0.005emdate-railInstrument Serif5.0cqw4000.96tracking -0.005emdisplay-itInstrument Serif7.0cqw4001.04italictracking -0.005emnumeral-mdInstrument Serif7.5cqw4000.92tracking -0.01emdisplayInstrument Serif14.6cqw4000.86tracking -0.018emnumeral-jumboInstrument Serif28.0cqw4000.84tracking -0.04em排版硬规则可读性底线任何承重行load-bearing line≥1.4cqwmono/label 的 px 尺寸仅是 chromeFit-to-measure按标题长度匹配字号。文本块上限≤ 78cqw≤3 词用display4–6 词用headline7 词以上用headline-sm。巨型数字是分隔页存在的全部意义——不要缩小它Instrument Serif 仅 400 字重其对比度本身就是字重信号紧凑行高0.84–1.06、负字距micro-label 为 Archivo 600 大写、≥0.16em所有数字/日期用 mono。禁止粗衬线、禁止第二种文字颜色、禁止正文/display 使用 mono。frame-showcase.html的排版区将上述令牌具象化.serif类统一定义font-weight: 400; letter-spacing: -0.018em; line-height: 0.9.micro类为Archivo 600 uppercase 0.18em封面h1用clamp(110px, 15vw, 230px)的 Instrument Serif 并让em斜体充当唯一显示性转折。深度与表面氛围而非结构深度完全来自大气层atmospheric绝非结构性抬升Sun bloom主层——分层径向渐变sun 70–95% 核心 → sun-soft → haze 18–22% → paper 0%占帧的 42–70%每帧一个。frame-showcase.html的--bloom变量给出精确实现radial-gradient(circle at 50% 50%, rgba(241,238,46,0.92) 0%, rgba(241,238,46,0.5) 30%, rgba(240,218,124,0.22) 55%, rgba(233,229,219,0) 78%)Ember bloom——对角的 15–22% 蜜桃色 counter-bloom永远从属。实现为radial-gradient(circle, rgba(226,107,74,0.2) 0%, rgba(226,107,74,0) 70%)置于与 sun-bloom 相反的角落Block-tile underprint——8×4 网格上的半透明黄色矩形cover/colophon 用Yellow panel——唯一的「硬」色彩陈述整列或 1/3 宽满出血填充墨字在上#F1EE2E底 #1B2566字frame-showcase.html的.ypanel即为该实现Hairline rules——1px 墨色结构分隔线密集行用 18–20% 的柔和变体即rgba(27, 37, 102, 0.2)。天花板Ceiling零 box-shadow、零 text-shadow、零圆角、边框不得粗于 1px。形状严格矩形所有元素 0 圆角——严格矩形。Blooms 无边缘渐隐入纸。caption-skin.html中的字幕卡片亦遵循border-radius: 0、无阴影、单一 1px 墨色发丝线边框。组件清单sun-bloom / ember-bloom / block-tile——大气深度三件套yellow-panel——海报填充式陈述hairline-rule——唯一边框1px 墨色密集行用柔和变体strand-row / ledger-row / footer-band——编辑式列表、表格日历与元数据条vertical-rail——旋转的章节标记pagenum——右下角 mono chrome。其中三类行组件的规格原文如下strand-rowborderBottom: 1px ink 18–20%排版组合strand-title body——衬线数字 衬线标题 无衬线正文编号编辑式列表ledger-rowborderBottom: 1px ink 18–20%排版组合mono-date · ledger-title · body · mono-data——四列表格mono 日期 · 衬线标题 · 无衬线场馆 · mono 时长右对齐。frame-showcase.html的.ledger .row用grid-template-columns: 92px 1.6fr 0.9fr 80px实现了这一四列骨架footer-band每格borderTop: 1px solid ink排版组合micro-label body-sm——cover/colophon 底部四列元数据条。六种帧版式Frame Treatments每种版式遵循统一配方ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density。每一帧都有 sun bloom 右下角 pagenum稀疏是默认。1 · Cover身份 · 动作display sun bloom · 左对齐Groundpaper 大 sun-bloom中左偏移 对角 ember counter-bloomComposesmicro-label、display、date-rail、footer-band、pagenumFocal两行 Instrument Serifdisplay关键词语斜体墨色、左对齐、位于 micro-label 之下Chrome右上角衬线 date-rail底部四列 footer-bandAccentsun bloom 黄色Silencebloom 撑起开放空间Fixed墨色文字、一个 bloom、1px footer 规则线、无阴影Free标题、日期、footer 单元格Density低。frame-showcase.html的.yf1给出可运行实现.bloom占width: 58%; height: 64%; left: 6%; top: 16%标题h3为font-size: 13cqw的 Instrument Serif、斜体em收尾date-rail.dr用5cqw衬线置于top: 4cqw; right: 4cqw。2 · Chapter Divider章节 · 动作巨型数字 · 竖轨Groundpaper 角落锚定 sun-bloomComposesvertical-rail、numeral-jumbo、headline-smFocal一个巨大的 Instrument Serifnumeral-jumbo≈28cqw主导下方衬线标题Chrome左缘旋转竖轨标签rail-labelpagenumAccent数字背后的 bloomSilence约 60%Fixedserif 400、jumbo 数字、rail 标签Free序数词、标题、rail 文本Density低。实现佐证.yf2.num为font-size: 38cqw; letter-spacing: -0.04em的 Instrument Serif.rail用transform: rotate(-90deg) translateX(50%)沿左缘上旋letter-spacing: 0.32em大写。3 · Ledger目录 · 动作发丝线表格行 · 密集帧Groundpaperbloom 可选需柔和Composesheadline-sm micro-label 顶栏、ledger-rowsFocal四列表格日历——mono 日期 · 衬线标题 · 无衬线场馆 · mono 时长行间以 hairline-soft 分隔下衬 1px 墨色头部规则线ChromepagenumAccent无——密度来自安静的重复而非颜色Silence紧凑——密度例外通过重复而非丰富实现Fixed发丝线、mono 日期、衬线标题Free行、场馆Density密集例外。4 · Manifesto / Quote引文 · 动作斜体衬线 · 居中 bloomGroundpaper 居中 sun-bloomComposes超大衬线引号、display-it、署名Focal两行 Instrument Serif斜体display-it引文、墨色、居中、位于超大引号之下Chromemicro-label 署名Accent居中 bloomSilence约 60%——刻意留白Fixed斜体衬线、一个 bloom、墨色Free引文、署名Density低。.yf4实现bloom 通过left: 50%; top: 50%; transform: translate(-50%, -50%)严格居中引文5cqw斜体、行高 1.04、负字距 -0.005em。5 · Poster Panel陈述 · 动作黄色面板 · 分割Groundpaper 满出血{colors.sun}yellow-panel整列或 1/3Composesyellow-panel、micro-label、headlineFocalInstrument Serifheadline墨色、落在 sun 面板上墨在黄上——签名式组合Chromemicro-labelpagenumAccent面板本身Silence纸面一侧保持开放Fixed墨在黄上、面板直接贴合纸面无边框、无阴影Free标题、面板方位/宽度Density低。6 · Strand List节目单 · 动作编号编辑行 · 左对齐Groundpaper 柔和 sun-bloomComposesmicro-label、headline-sm、strand-rowsFocal编号列表——衬线数字 衬线标题 无衬线正文hairline-soft 分隔Chromemicro-labelpagenumAccentbloomSilence中等行与行之间呼吸Fixed衬线数字、hairline-soft 规则线Free条目、文案Density标准。.strand .row实现为grid-template-columns: 56px 1fr序号用 34px 衬线、标题 24px 衬线、正文 13px 无衬线。构成规则Do 与 DontDo起始于暖羊皮纸加一个 sun bloom可选 ember counter-bloom——氛围即深度每一行都设为墨色display 用Instrument Serif 400紧凑、负字距、正文用Archivo、所有数字/日期用JetBrains Mono每个分隔符都做成1px 墨色发丝线密集行用柔和变体海报时刻用满出血 yellow panel墨在上micro-label 保持Archivo 600 大写、0.16–0.32empagenum 固定右下角倾向稀疏cover/chapter/list 用左侧/非对称manifesto 用居中。Dont无投影、无圆角、无边框卡片、无粗于 1px 的边框无第二种文字颜色无加粗 Instrument Serif无反色墨底正文/display 不用 mono不替换字体不拥挤画布——稀疏即优雅不省略 bloom无 bloom 的羊皮纸会退化成 CMS 模板不把标题撑满左右边距——按阶梯逐级下调字号。宽高比行为版式16:99:161:1Coverdisplay 左侧date-rail 右上footer 底部display 顶部footer 堆叠display 上部footer 底部Chapter Dividerjumbo 数字rail 左侧数字居中rail 顶部数字居中Ledger四列行去掉场馆列 → 三列三列Manifesto居中斜体居中、更高居中Poster Panel侧面板 纸顶部/底部面板带面板 1/3Strand List编号行行更紧凑行pad-edge在短边上保持成立display 的 clamp 使用较短轴避免竖版被撑爆标题。承重行保持 ≥ 1.4cqw。Ledger/strand 的首列在 9:16 下可适当收紧。9:16 / 1:1 属于指导性内容实际需按比例验证min(vw,vh)clamp 模式。数字与声明硬规则帧尺度上永不虚构数字、日期、时长或计数。渲染占位槽slot为— figure —、{metric}、NN JUN、N m。Ledger 日期/时长与图表值尤其要保持占位符直到脚本提供真实数据。章节序数01、02…是装饰性的。渲染前自检清单Pre-Render Self-AuditSquint——一个衬线 display 时刻主导bloom 把视线引向中心Silence——稀疏帧 55–60% 留白只有 ledger 可密集通过重复而非丰富One color——所有文字 规则线用墨色sun 只作 bloom/panel/tileember 仅作 counter-bloom无反色Type——Instrument Serif 400 紧凑负字距、fit-to-measuremicro-label 大写 0.16em数字用 mono≥1.4cqw 底线Depth——0 阴影、0 圆角、仅 1px 发丝线必须有一个 sun bloomAnchor——cover/chapter/list 左锚定、manifesto 居中pagenum 右下角Fabrication——每个数字/日期都能追溯到脚本否则用占位符。同款字幕皮caption-skin.html 的卡拉 OK 低三分位预设目录还随附 caption-skin.html——该预设专属的低三分位卡拉 OK 字幕外观。它遵循同样的品牌约束暖羊皮纸卡片、唯一一条 1px 靛蓝发丝线边框、方角、无阴影Instrument Serif 句子大小写墨色字形。三态卡拉 OK 语义为未说词呈淡墨、当前词获得日光黄正方形 underprint用box-shadow: 0 0 0 0.06em var(--cap-accent)硬方块实现、无模糊、无布局位移墨字在上、已说词沉回实墨并清除 underprint。可选词级点缀.cap-brand用 Instrument Serif 斜体该品牌唯一的 display 转折、.cap-num用 mono 微缩、.cap-cta用 ember 发丝下划线counter-temperature 强调色。其令牌契约固定为--cap-ink · --cap-canvas · --cap-accent · --cap-accent-2 · --font-display · --font-body · --cap-band-top · --cap-band-height由captions.mjs从项目的frame.md注入:root令牌字幕时间轴挂载于window.__timelines[captions]状态切换用gsap.set({className})而非tl.call()回调因为引擎逐帧 seek 不会触发回调后者会在渲染时产生错误状态。这正是本帧系统与 HyperFrames 渲染管线帧容器 data-composition-id 逐帧 seek衔接的实际示例。已知边界Known Gaps动效有意排除在范围外FRAME.md只规定构成源设计中 280ms 的 crossfade 是幻灯deck机制不属于帧系统本身字体Instrument Serif Archivo JetBrains Mono 走 Google Fonts。CJK 场景下display 用 Smiley Sans、正文用 Noto Serif SC、标签用 Noto Sans SC斜体衬线与 mono 表格数字在汉字中无精确对等物——Ledger 日期保持拉丁文9:16 / 1:1 为指导min(vw,vh)clamp 模式防止 display 撑爆需按比例逐一验证零外部素材sun/ember blooms、block tiles、yellow panels 与 hairline rules 全部为纯 CSS无需任何外部图片。如何在项目中使用该预设按 design-spec.md 的采纳流程将 FRAME.md 复制为项目中的小写frame.mdfrontmatter 即规范层逐字保留把 frame-showcase.html 作为预览接触片在浏览器中打开查看各版式的实际观感——但不要把它纳入项目需要字幕皮时再引入caption-skin.html。之后即可按上文的六种版式配方与构成规则逐帧编排并以自检清单做渲染前验收。预设只是可选起点——按 SKILL.md 的流程自行编写的frame.md或经设计选择器生成的规格同样合法而 Biennale Yellow 提供的正是「原子神圣atoms are sacred、构成自由composition is free、数字来自脚本numbers come from the script」这三条可复用的设计纪律。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考