mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-11 23:00:03 +00:00
WaterrrForeverandClaude Opus 4.8
d0f0ec29e7
* feat(hyperframes-creative): add frame-preset library Add a library of ready-made visual frame presets (claude, biennale-yellow, blockframe, blue-professional, bold-poster, broadside, capsule, cartesian, cobalt-grid, coral, creative-mode, daisy-days, editorial-forest, …), each with a FRAME.md spec, a frame-showcase.html, and a per-preset caption-skin.html. Registered in the creative design-spec so workflows can remix a preset onto brand tokens. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(hyperframes-media): shared TTS/BGM/SFX audio engine Add a shared audio engine under hyperframes-media (scripts/audio.mjs + lib/ tts.mjs, bgm.mjs, sfx.mjs, heygen.mjs) plus a bundled SFX pack and manifest. Workflows resolve this engine by path (../../hyperframes-media/scripts/ audio.mjs) for text-to-speech, background music, and sound effects, so audio is authored once and reused across skills instead of duplicated per workflow. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(skills): gate render on user review; refresh router, core, general-video - hyperframes-cli: render is now user-gated — preview opens Studio (the timeline editor where the user can hand-edit anything, not just watch); never auto-render once checks pass, pause at preview and render only after approval. - hyperframes (router): tighten the entry SKILL.md description + routing. - hyperframes-core: rewrite SKILL.md and add script-format.md + storyboard-format.md references for the script-driven authoring architecture. - general-video: tidy the fallback-workflow description and routing table. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * style(hyperframes-creative): reformat frame-preset showcase HTML Run the HTML formatter over the frame-showcase.html files (indentation, self-closing void tags, one CSS declaration per line). Formatting only — no content or markup changes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(hyperframes-media): correct wait-bgm field mapping and guard credential parse Two correctness fixes from review (#1632): - wait-bgm.mjs read audioMeta.bgm_path / audioMeta.bgm_enabled, but audio.mjs writes the path nested as bgm.path and the flag as bgm_pending. The detached generate path (Lyria/MusicGen) therefore always saw an empty path and exited status: disabled, silently dropping the music track even while generation was running. Read audioMeta.bgm?.path and gate on bgm_pending. - heygenCredential() had an unguarded JSON.parse despite documenting that it never throws — a malformed ~/.heygen credentials file crashed the engine at startup instead of degrading to no-credential. Wrap the parse and return null. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * chore(hyperframes): add router tag to entry skill metadata Fold the router metadata tag into the foundation rewrite of the entry SKILL.md. This file is owned by this PR (the full router rewrite); keeping the tag tweak here — instead of a separate edit on the pre-rewrite version in another PR — avoids a guaranteed merge conflict between the two. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1215 lines
34 KiB
HTML
1215 lines
34 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>Biennale Yellow</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Archivo:wght@400;600&family=JetBrains+Mono:wght@400&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<style id="ds-tokens">
|
||
:root {
|
||
--paper: #e9e5db;
|
||
--paper-deep: #dcd6c4;
|
||
--sun: #f1ee2e;
|
||
--sun-soft: #f8f39b;
|
||
--haze: #f0da7c;
|
||
--ink: #1b2566;
|
||
--ember: #e26b4a;
|
||
--serif: "Instrument Serif", Georgia, serif;
|
||
--sans: "Archivo", sans-serif;
|
||
--mono: "JetBrains Mono", ui-monospace, monospace;
|
||
--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%
|
||
);
|
||
}
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
html {
|
||
background: #0c0d1a;
|
||
}
|
||
body {
|
||
background: var(--paper);
|
||
color: var(--ink);
|
||
font-family: var(--sans);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
.serif {
|
||
font-family: var(--serif);
|
||
font-weight: 400;
|
||
letter-spacing: -0.018em;
|
||
line-height: 0.9;
|
||
}
|
||
.micro {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.18em;
|
||
font-size: 13px;
|
||
}
|
||
|
||
section {
|
||
padding: 120px 76px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.sec-head {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 24px;
|
||
border-bottom: 1px solid var(--ink);
|
||
padding-bottom: 18px;
|
||
margin-bottom: 56px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.sec-head .micro {
|
||
color: var(--ink);
|
||
}
|
||
.sec-head h2 {
|
||
font-family: var(--serif);
|
||
font-weight: 400;
|
||
font-size: 56px;
|
||
line-height: 1;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.sec-head .sp {
|
||
flex: 1;
|
||
}
|
||
|
||
/* COVER */
|
||
.cover {
|
||
min-height: 100vh;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.cover .bloom {
|
||
position: absolute;
|
||
width: 62%;
|
||
height: 70%;
|
||
left: 8%;
|
||
top: 14%;
|
||
background: var(--bloom);
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
}
|
||
.cover .ember {
|
||
position: absolute;
|
||
width: 36%;
|
||
height: 40%;
|
||
right: -6%;
|
||
bottom: -6%;
|
||
background: radial-gradient(
|
||
circle at 60% 60%,
|
||
rgba(226, 107, 74, 0.2) 0%,
|
||
rgba(226, 107, 74, 0) 70%
|
||
);
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
}
|
||
.cover .daterail {
|
||
position: absolute;
|
||
top: 64px;
|
||
right: 76px;
|
||
font-family: var(--serif);
|
||
font-weight: 400;
|
||
font-size: clamp(48px, 5.2vw, 84px);
|
||
line-height: 0.96;
|
||
text-align: right;
|
||
letter-spacing: -0.005em;
|
||
z-index: 2;
|
||
}
|
||
.cover .inner {
|
||
padding: 0 76px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.cover .micro {
|
||
margin-bottom: 28px;
|
||
}
|
||
.cover h1 {
|
||
font-family: var(--serif);
|
||
font-weight: 400;
|
||
font-size: clamp(110px, 15vw, 230px);
|
||
line-height: 0.84;
|
||
letter-spacing: -0.018em;
|
||
}
|
||
.cover h1 em {
|
||
font-style: italic;
|
||
letter-spacing: -0.005em;
|
||
}
|
||
.cover .footer {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
display: grid;
|
||
grid-template-columns: 1.1fr 1fr 1.4fr 2fr;
|
||
gap: 36px;
|
||
padding: 0 76px 56px;
|
||
z-index: 2;
|
||
}
|
||
.cover .fcell {
|
||
border-top: 1px solid var(--ink);
|
||
padding-top: 14px;
|
||
}
|
||
.cover .fcell .t {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
font-size: 11px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.cover .fcell .b {
|
||
font-family: var(--sans);
|
||
font-weight: 400;
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
color: var(--ink);
|
||
}
|
||
.cover .pagenum {
|
||
position: absolute;
|
||
bottom: 30px;
|
||
right: 48px;
|
||
font-family: var(--mono);
|
||
font-size: 13px;
|
||
letter-spacing: 0.08em;
|
||
opacity: 0.75;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* PALETTE */
|
||
.swatches {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 28px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.sw .chip {
|
||
height: 130px;
|
||
border: 1px solid var(--ink);
|
||
}
|
||
.sw .name {
|
||
font-family: var(--serif);
|
||
font-size: 26px;
|
||
margin-top: 14px;
|
||
}
|
||
.sw .hex {
|
||
font-family: var(--mono);
|
||
font-size: 12px;
|
||
color: var(--ink);
|
||
opacity: 0.7;
|
||
margin-top: 6px;
|
||
}
|
||
.sw .role {
|
||
font-family: var(--sans);
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
color: var(--ink);
|
||
margin-top: 8px;
|
||
}
|
||
|
||
/* TYPE */
|
||
.type-row {
|
||
display: grid;
|
||
grid-template-columns: 220px 1fr;
|
||
align-items: center;
|
||
padding: 26px 0;
|
||
border-bottom: 1px solid rgba(27, 37, 102, 0.2);
|
||
}
|
||
.type-row .tok {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
font-size: 11px;
|
||
}
|
||
.type-row .m {
|
||
font-family: var(--mono);
|
||
font-size: 11px;
|
||
color: var(--ink);
|
||
opacity: 0.65;
|
||
margin-top: 8px;
|
||
line-height: 1.5;
|
||
}
|
||
.type-row .spec {
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* COMPONENTS */
|
||
.cnote {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
font-size: 12px;
|
||
margin-bottom: 22px;
|
||
}
|
||
.cgrid {
|
||
display: grid;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
gap: 48px;
|
||
margin-bottom: 56px;
|
||
}
|
||
.s4 {
|
||
grid-column: span 4;
|
||
}
|
||
.s5 {
|
||
grid-column: span 5;
|
||
}
|
||
.s6 {
|
||
grid-column: span 6;
|
||
}
|
||
.s7 {
|
||
grid-column: span 7;
|
||
}
|
||
.s8 {
|
||
grid-column: span 8;
|
||
}
|
||
.ledger .row {
|
||
display: grid;
|
||
grid-template-columns: 92px 1.6fr 0.9fr 80px;
|
||
gap: 24px;
|
||
padding: 14px 0;
|
||
border-bottom: 1px solid rgba(27, 37, 102, 0.2);
|
||
align-items: baseline;
|
||
}
|
||
.ledger .dt {
|
||
font-family: var(--mono);
|
||
font-size: 14px;
|
||
}
|
||
.ledger .ti {
|
||
font-family: var(--serif);
|
||
font-size: 26px;
|
||
line-height: 1.1;
|
||
}
|
||
.ledger .vn {
|
||
font-family: var(--sans);
|
||
font-size: 13px;
|
||
color: var(--ink);
|
||
}
|
||
.ledger .du {
|
||
font-family: var(--mono);
|
||
font-size: 13px;
|
||
text-align: right;
|
||
}
|
||
.strand .row {
|
||
display: grid;
|
||
grid-template-columns: 56px 1fr;
|
||
gap: 20px;
|
||
padding: 14px 0;
|
||
border-bottom: 1px solid rgba(27, 37, 102, 0.2);
|
||
align-items: baseline;
|
||
}
|
||
.strand .nm {
|
||
font-family: var(--serif);
|
||
font-size: 34px;
|
||
line-height: 1;
|
||
}
|
||
.strand .ti {
|
||
font-family: var(--serif);
|
||
font-size: 24px;
|
||
line-height: 1.1;
|
||
}
|
||
.strand .bd {
|
||
font-family: var(--sans);
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
color: var(--ink);
|
||
margin-top: 4px;
|
||
}
|
||
.bars .row {
|
||
display: grid;
|
||
grid-template-columns: 60px 1fr 60px;
|
||
gap: 16px;
|
||
align-items: center;
|
||
margin-bottom: 14px;
|
||
}
|
||
.bars .yr {
|
||
font-family: var(--mono);
|
||
font-size: 13px;
|
||
}
|
||
.bars .bar {
|
||
height: 20px;
|
||
background: var(--ink);
|
||
}
|
||
.bars .bar.lit {
|
||
background: var(--sun);
|
||
border: 1px solid var(--ink);
|
||
}
|
||
.bars .vl {
|
||
font-family: var(--mono);
|
||
font-size: 13px;
|
||
text-align: right;
|
||
}
|
||
.ypanel {
|
||
background: var(--sun);
|
||
padding: 36px;
|
||
color: var(--ink);
|
||
}
|
||
.ypanel .l {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
font-size: 11px;
|
||
}
|
||
.ypanel .h {
|
||
font-family: var(--serif);
|
||
font-size: 44px;
|
||
line-height: 0.95;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
/* COMPOSITIONS */
|
||
.gallery {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 48px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.fw .flabel {
|
||
display: flex;
|
||
gap: 14px;
|
||
align-items: baseline;
|
||
margin-bottom: 16px;
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
font-size: 12px;
|
||
color: var(--ink);
|
||
opacity: 0.6;
|
||
}
|
||
.fw .flabel b {
|
||
opacity: 1;
|
||
}
|
||
.frame {
|
||
aspect-ratio: 16/9;
|
||
container-type: size;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: var(--paper);
|
||
box-shadow: 0 0 0 1px rgba(27, 37, 102, 0.15);
|
||
}
|
||
.frame > .body {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 3;
|
||
}
|
||
.frame .bloom {
|
||
position: absolute;
|
||
background: var(--bloom);
|
||
z-index: 1;
|
||
pointer-events: none;
|
||
}
|
||
.frame .pn {
|
||
position: absolute;
|
||
right: 3cqw;
|
||
bottom: 2.6cqw;
|
||
font-family: var(--mono);
|
||
font-size: 1cqw;
|
||
opacity: 0.75;
|
||
z-index: 4;
|
||
}
|
||
|
||
/* f1 cover */
|
||
.yf1 .bloom {
|
||
width: 58%;
|
||
height: 64%;
|
||
left: 6%;
|
||
top: 16%;
|
||
}
|
||
.yf1 .body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 0 5cqw;
|
||
}
|
||
.yf1 .micro {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.3cqw;
|
||
font-size: 1cqw;
|
||
margin-bottom: 1.8cqw;
|
||
}
|
||
.yf1 h3 {
|
||
font-family: var(--serif);
|
||
font-weight: 400;
|
||
font-size: 13cqw;
|
||
line-height: 0.84;
|
||
letter-spacing: -0.018em;
|
||
}
|
||
.yf1 h3 em {
|
||
font-style: italic;
|
||
}
|
||
.yf1 .dr {
|
||
position: absolute;
|
||
top: 4cqw;
|
||
right: 4cqw;
|
||
font-family: var(--serif);
|
||
font-size: 5cqw;
|
||
line-height: 0.96;
|
||
text-align: right;
|
||
letter-spacing: -0.005em;
|
||
z-index: 4;
|
||
}
|
||
|
||
/* f2 chapter divider */
|
||
.yf2 .bloom {
|
||
width: 60%;
|
||
height: 80%;
|
||
right: -10%;
|
||
top: -10%;
|
||
left: auto;
|
||
}
|
||
.yf2 .rail {
|
||
position: absolute;
|
||
left: 3cqw;
|
||
top: 50%;
|
||
transform: rotate(-90deg) translateX(50%);
|
||
transform-origin: left center;
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.32em;
|
||
font-size: 1cqw;
|
||
white-space: nowrap;
|
||
z-index: 4;
|
||
}
|
||
.yf2 .body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 0 5cqw 0 9cqw;
|
||
}
|
||
.yf2 .num {
|
||
font-family: var(--serif);
|
||
font-weight: 400;
|
||
font-size: 38cqw;
|
||
line-height: 0.84;
|
||
letter-spacing: -0.04em;
|
||
color: var(--ink);
|
||
}
|
||
.yf2 .ti {
|
||
font-family: var(--serif);
|
||
font-size: 3.6cqw;
|
||
line-height: 1.05;
|
||
margin-top: -2cqw;
|
||
max-width: 46cqw;
|
||
}
|
||
|
||
/* f3 ledger */
|
||
.yf3 .body {
|
||
padding: 6cqw 5cqw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.yf3 .top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
border-bottom: 1px solid var(--ink);
|
||
padding-bottom: 1.2cqw;
|
||
margin-bottom: 1.6cqw;
|
||
}
|
||
.yf3 .top h4 {
|
||
font-family: var(--serif);
|
||
font-size: 3.6cqw;
|
||
line-height: 1;
|
||
}
|
||
.yf3 .top .micro {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.2cqw;
|
||
font-size: 0.9cqw;
|
||
}
|
||
.yf3 .row {
|
||
display: grid;
|
||
grid-template-columns: 8cqw 1.6fr 0.9fr 6cqw;
|
||
gap: 1.6cqw;
|
||
padding: 1cqw 0;
|
||
border-bottom: 1px solid rgba(27, 37, 102, 0.2);
|
||
align-items: baseline;
|
||
}
|
||
.yf3 .dt {
|
||
font-family: var(--mono);
|
||
font-size: 1cqw;
|
||
}
|
||
.yf3 .ti {
|
||
font-family: var(--serif);
|
||
font-size: 1.9cqw;
|
||
line-height: 1.1;
|
||
}
|
||
.yf3 .vn {
|
||
font-family: var(--sans);
|
||
font-size: 0.95cqw;
|
||
}
|
||
.yf3 .du {
|
||
font-family: var(--mono);
|
||
font-size: 0.95cqw;
|
||
text-align: right;
|
||
}
|
||
|
||
/* f4 manifesto */
|
||
.yf4 .bloom {
|
||
width: 54%;
|
||
height: 60%;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.yf4 .body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: 0 9cqw;
|
||
}
|
||
.yf4 .qm {
|
||
font-family: var(--serif);
|
||
font-size: 14cqw;
|
||
line-height: 0.5;
|
||
height: 7cqw;
|
||
}
|
||
.yf4 .q {
|
||
font-family: var(--serif);
|
||
font-style: italic;
|
||
font-size: 5cqw;
|
||
line-height: 1.04;
|
||
letter-spacing: -0.005em;
|
||
}
|
||
.yf4 .at {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.25cqw;
|
||
font-size: 1cqw;
|
||
margin-top: 2.4cqw;
|
||
}
|
||
|
||
/* PRINCIPLES */
|
||
.dos {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 56px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.do-card h4 {
|
||
font-family: var(--serif);
|
||
font-size: 34px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.do-card .rule {
|
||
height: 1px;
|
||
background: var(--ink);
|
||
margin-bottom: 22px;
|
||
}
|
||
.do-card ul {
|
||
list-style: none;
|
||
}
|
||
.do-card li {
|
||
font-family: var(--sans);
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
padding-left: 22px;
|
||
position: relative;
|
||
margin-bottom: 13px;
|
||
color: var(--ink);
|
||
}
|
||
.do-card li::before {
|
||
position: absolute;
|
||
left: 0;
|
||
font-family: var(--serif);
|
||
}
|
||
.do-card.do li::before {
|
||
content: "\2014";
|
||
}
|
||
.do-card.dont li::before {
|
||
content: "\00d7";
|
||
color: var(--ember);
|
||
}
|
||
|
||
.foot {
|
||
padding: 64px 76px;
|
||
border-top: 1px solid var(--ink);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.foot .l {
|
||
font-family: var(--serif);
|
||
font-size: 30px;
|
||
}
|
||
.foot .r {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
font-size: 11px;
|
||
}
|
||
@media (max-width: 1100px) {
|
||
.gallery {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.swatches {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&display=swap"
|
||
/>
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap"
|
||
/>
|
||
<style id="ft-override">
|
||
:root {
|
||
--primary: #e9e5db !important;
|
||
--secondary: #1b2566 !important;
|
||
--tertiary: #dcd6c4 !important;
|
||
--accent: #f1ee2e !important;
|
||
--f-disp: "Instrument Serif", sans-serif !important;
|
||
--f-body: "Archivo", sans-serif !important;
|
||
--paper: #e9e5db !important;
|
||
--paper-deep: #dcd6c4 !important;
|
||
--sun: #f1ee2e !important;
|
||
--ink: #1b2566 !important;
|
||
--serif: "Instrument Serif", sans-serif !important;
|
||
--sans: "Archivo", sans-serif !important;
|
||
--sun-soft: #f8f39b !important;
|
||
--haze: #f0da7c !important;
|
||
--ember: #e26b4a !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- COVER -->
|
||
<section class="cover">
|
||
<div class="bloom"></div>
|
||
<div class="ember"></div>
|
||
<div class="daterail">2026<br />—2027</div>
|
||
<div class="inner">
|
||
<div class="micro">Frame System · Vol. 01</div>
|
||
<h1>Paper, ink<br />& <em>yellow.</em></h1>
|
||
</div>
|
||
<div class="footer">
|
||
<div class="fcell">
|
||
<div class="t">Register</div>
|
||
<div class="b">Literary-editorial, biennale catalogue.</div>
|
||
</div>
|
||
<div class="fcell">
|
||
<div class="t">Ground</div>
|
||
<div class="b">Warm parchment, never white.</div>
|
||
</div>
|
||
<div class="fcell">
|
||
<div class="t">Type</div>
|
||
<div class="b">Instrument Serif · Archivo · JetBrains Mono.</div>
|
||
</div>
|
||
<div class="fcell">
|
||
<div class="t">Depth</div>
|
||
<div class="b">Atmospheric blooms, no shadows, hairline rules.</div>
|
||
</div>
|
||
</div>
|
||
<div class="pagenum">01 / 06</div>
|
||
</section>
|
||
|
||
<!-- PALETTE -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="micro">01</span>
|
||
<h2>Palette</h2>
|
||
<span class="sp"></span><span class="micro">Paper · Ink · Yellow</span>
|
||
</div>
|
||
<div class="swatches">
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--paper)"></div>
|
||
<div class="name">Paper</div>
|
||
<div class="hex">#E9E5DB</div>
|
||
<div class="role">The warm parchment ground.</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--ink)"></div>
|
||
<div class="name">Ink</div>
|
||
<div class="hex">#1B2566</div>
|
||
<div class="role">The single text + rule color.</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--sun)"></div>
|
||
<div class="name">Sun</div>
|
||
<div class="hex">#F1EE2E</div>
|
||
<div class="role">Panel, bloom, tile underprint.</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--ember)"></div>
|
||
<div class="name">Ember</div>
|
||
<div class="hex">#E26B4A</div>
|
||
<div class="role">Subordinate counter-bloom only.</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--paper-deep)"></div>
|
||
<div class="name">Paper Deep</div>
|
||
<div class="hex">#DCD6C4</div>
|
||
<div class="role">Secondary parchment band.</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--sun-soft)"></div>
|
||
<div class="name">Sun Soft</div>
|
||
<div class="hex">#F8F39B</div>
|
||
<div class="role">Mid stop in sun blooms.</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--haze)"></div>
|
||
<div class="name">Haze</div>
|
||
<div class="hex">#F0DA7C</div>
|
||
<div class="role">Outer stop in sun blooms.</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--bloom), var(--paper)"></div>
|
||
<div class="name">Sun Bloom</div>
|
||
<div class="hex">radial · atmosphere</div>
|
||
<div class="role">The primary depth layer.</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TYPOGRAPHY -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="micro">02</span>
|
||
<h2>Typography</h2>
|
||
<span class="sp"></span><span class="micro">Serif · Sans · Mono</span>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">display</div>
|
||
<div class="m">Instrument Serif 400 · line 0.86 · −0.018em</div>
|
||
</div>
|
||
<div class="spec"><span class="serif" style="font-size: 104px">Biennale</span></div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">display-it</div>
|
||
<div class="m">Instrument Serif italic · slow-reading</div>
|
||
</div>
|
||
<div class="spec">
|
||
<span class="serif" style="font-style: italic; font-size: 72px; line-height: 1.04"
|
||
>quietly,</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">numeral-md</div>
|
||
<div class="m">Instrument Serif 400 · hero stat</div>
|
||
</div>
|
||
<div class="spec">
|
||
<span class="serif" style="font-size: 96px; letter-spacing: -0.04em">240</span>
|
||
</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">body</div>
|
||
<div class="m">Archivo 400 · line 1.5 · ink</div>
|
||
</div>
|
||
<div class="spec">
|
||
<p style="font-family: var(--sans); font-size: 16px; line-height: 1.5; max-width: 620px">
|
||
Archivo carries every paragraph — the quiet sans beneath the serif display, always in
|
||
ink.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="type-row" style="border-bottom: 0">
|
||
<div>
|
||
<div class="tok">micro-label</div>
|
||
<div class="m">Archivo 600 · uppercase · 0.18em</div>
|
||
</div>
|
||
<div class="spec">
|
||
<span class="micro">Programme · Section</span>
|
||
<span
|
||
class="serif"
|
||
style="font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em"
|
||
>12 — 14 JUN</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COMPONENTS -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="micro">03</span>
|
||
<h2>Components</h2>
|
||
<span class="sp"></span><span class="micro">Hairlines · Blooms · Panels</span>
|
||
</div>
|
||
|
||
<div class="cgrid">
|
||
<div class="s7">
|
||
<div class="cnote">
|
||
Ledger rows — mono date · serif title · sans venue · mono duration
|
||
</div>
|
||
<div class="ledger">
|
||
<div class="row">
|
||
<span class="dt">12 JUN</span><span class="ti">Opening Address</span
|
||
><span class="vn">Giardini Pavilion</span><span class="du">45m</span>
|
||
</div>
|
||
<div class="row">
|
||
<span class="dt">13 JUN</span><span class="ti">On Slow Reading</span
|
||
><span class="vn">Arsenale Hall</span><span class="du">90m</span>
|
||
</div>
|
||
<div class="row">
|
||
<span class="dt">14 JUN</span><span class="ti">Closing Colophon</span
|
||
><span class="vn">Central Library</span><span class="du">30m</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="s5">
|
||
<div class="cnote">Strand list + chart bars</div>
|
||
<div class="strand">
|
||
<div class="row">
|
||
<span class="nm">01</span>
|
||
<div><div class="ti">Parchment</div></div>
|
||
</div>
|
||
<div class="row">
|
||
<span class="nm">02</span>
|
||
<div><div class="ti">Ink</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="bars" style="margin-top: 20px">
|
||
<div class="row">
|
||
<span class="yr">'24</span><span class="bar" style="width: 60%"></span
|
||
><span class="vl">60</span>
|
||
</div>
|
||
<div class="row">
|
||
<span class="yr">'25</span><span class="bar lit" style="width: 88%"></span
|
||
><span class="vl">88</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cgrid" style="margin-bottom: 0">
|
||
<div class="s5">
|
||
<div class="cnote">Yellow panel — strongest color statement</div>
|
||
<div class="ypanel">
|
||
<div class="l">Poster Fill</div>
|
||
<div class="h">Ink on Sun.</div>
|
||
</div>
|
||
</div>
|
||
<div class="s7">
|
||
<div class="cnote">Sun bloom + ember counter-bloom</div>
|
||
<div
|
||
style="
|
||
position: relative;
|
||
height: 170px;
|
||
border: 1px solid rgba(27, 37, 102, 0.2);
|
||
overflow: hidden;
|
||
"
|
||
>
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
width: 60%;
|
||
height: 130%;
|
||
left: 6%;
|
||
top: -15%;
|
||
background: var(--bloom);
|
||
"
|
||
></div>
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
width: 40%;
|
||
height: 90%;
|
||
right: -8%;
|
||
bottom: -20%;
|
||
background: radial-gradient(circle, rgba(226, 107, 74, 0.22), transparent 70%);
|
||
"
|
||
></div>
|
||
<div style="position: absolute; left: 24px; bottom: 20px" class="serif">
|
||
<span style="font-size: 40px">atmosphere.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COMPOSITIONS -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="micro">04</span>
|
||
<h2>Frame Compositions</h2>
|
||
<span class="sp"></span><span class="micro">True 16:9 · cqw</span>
|
||
</div>
|
||
<div class="gallery">
|
||
<div class="fw">
|
||
<div class="flabel"><b>Cover</b><span>· identity · sun bloom · date rail</span></div>
|
||
<div class="frame yf1">
|
||
<div class="bloom"></div>
|
||
<div class="dr">2026<br />—27</div>
|
||
<div class="body">
|
||
<div class="micro">Frame System</div>
|
||
<h3>Paper, ink<br />& <em>yellow.</em></h3>
|
||
</div>
|
||
<div class="pn">01 / 06</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel">
|
||
<b>Chapter Divider</b><span>· section · jumbo numeral · vertical rail</span>
|
||
</div>
|
||
<div class="frame yf2">
|
||
<div class="bloom"></div>
|
||
<div class="rail">Section — Two</div>
|
||
<div class="body">
|
||
<div class="num">02</div>
|
||
<div class="ti">On measure & the slow page.</div>
|
||
</div>
|
||
<div class="pn">02 / 06</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel">
|
||
<b>Ledger</b><span>· catalog · hairline rows · the dense frame</span>
|
||
</div>
|
||
<div class="frame yf3">
|
||
<div class="body">
|
||
<div class="top">
|
||
<h4>Programme</h4>
|
||
<span class="micro">12 — 14 JUN</span>
|
||
</div>
|
||
<div class="row">
|
||
<span class="dt">12 JUN</span><span class="ti">Opening Address</span
|
||
><span class="vn">Giardini</span><span class="du">45m</span>
|
||
</div>
|
||
<div class="row">
|
||
<span class="dt">13 JUN</span><span class="ti">On Slow Reading</span
|
||
><span class="vn">Arsenale</span><span class="du">90m</span>
|
||
</div>
|
||
<div class="row">
|
||
<span class="dt">14 JUN</span><span class="ti">Closing Colophon</span
|
||
><span class="vn">Library</span><span class="du">30m</span>
|
||
</div>
|
||
</div>
|
||
<div class="pn">03 / 06</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel">
|
||
<b>Manifesto</b><span>· quote · italic serif · centered bloom</span>
|
||
</div>
|
||
<div class="frame yf4">
|
||
<div class="bloom"></div>
|
||
<div class="body">
|
||
<div class="qm">“</div>
|
||
<div class="q">Read it slowly,<br />or not at all.</div>
|
||
<div class="at">— The System Voice</div>
|
||
</div>
|
||
<div class="pn">04 / 06</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PRINCIPLES -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="micro">05</span>
|
||
<h2>Frame Rules</h2>
|
||
<span class="sp"></span><span class="micro">Restraint</span>
|
||
</div>
|
||
<div class="dos">
|
||
<div class="do-card do">
|
||
<h4>Do</h4>
|
||
<div class="rule"></div>
|
||
<ul>
|
||
<li>Start on warm parchment; add at least one sun bloom for atmosphere.</li>
|
||
<li>
|
||
Set every line in ink — display, body, label, mono; contrast is size, not color.
|
||
</li>
|
||
<li>Use Instrument Serif 400, tight line-height, negative tracking, for display.</li>
|
||
<li>
|
||
Make every separator a 1px ink hairline; flood a yellow panel for poster moments.
|
||
</li>
|
||
<li>Reserve JetBrains Mono for dates, numerals, and the bottom-right pagenum.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="do-card dont">
|
||
<h4>Don't</h4>
|
||
<div class="rule"></div>
|
||
<ul>
|
||
<li>No drop shadows, no rounded corners, no bordered cards.</li>
|
||
<li>No second text color; no bold Instrument Serif.</li>
|
||
<li>No borders thicker than 1px; no inverted ink grounds.</li>
|
||
<li>No mono for body or headlines; no font substitutes.</li>
|
||
<li>Don't crowd the canvas — sparse reads as elegant.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
|
||
<style>
|
||
/* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
|
||
.capdemo {
|
||
--cap-ink: var(--ink);
|
||
--cap-canvas: var(--paper);
|
||
--cap-accent: var(--sun);
|
||
--cap-accent-2: var(--ember);
|
||
}
|
||
.capdemo .stage {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: 16.67cqh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 4;
|
||
}
|
||
.capdemo .pill {
|
||
max-width: 80cqw;
|
||
padding: 1.4cqw 3cqw 1.7cqw;
|
||
background: var(--cap-canvas);
|
||
border: 1px solid var(--cap-ink);
|
||
border-radius: 0;
|
||
}
|
||
.capdemo .line {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 0.1em 0.34em;
|
||
font-family: var(--serif);
|
||
font-weight: 400;
|
||
font-size: 3.4cqw;
|
||
line-height: 1.16;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.capdemo .w {
|
||
display: inline-block;
|
||
padding: 0 0.06em;
|
||
color: color-mix(in srgb, var(--cap-ink) 42%, var(--cap-canvas));
|
||
}
|
||
.capdemo .w.spoken {
|
||
color: var(--cap-ink);
|
||
}
|
||
.capdemo .w.active {
|
||
color: var(--cap-ink);
|
||
background: var(--cap-accent);
|
||
box-shadow: 0 0 0 0.06em var(--cap-accent);
|
||
}
|
||
.capdemo .bandline {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 16.67cqh;
|
||
border-top: 1px dashed rgba(27, 37, 102, 0.28);
|
||
z-index: 3;
|
||
}
|
||
.capdemo .bandtag {
|
||
position: absolute;
|
||
right: 3cqw;
|
||
bottom: calc(16.67cqh + 0.7cqw);
|
||
font-family: var(--mono);
|
||
font-size: 0.95cqw;
|
||
letter-spacing: 0.04em;
|
||
color: var(--ink);
|
||
opacity: 0.5;
|
||
z-index: 4;
|
||
}
|
||
</style>
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="micro">06</span>
|
||
<h2>Captions</h2>
|
||
<span class="sp"></span><span class="micro">Lower-third · Karaoke</span>
|
||
</div>
|
||
<div class="gallery">
|
||
<div class="fw">
|
||
<div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
|
||
<div class="frame capdemo">
|
||
<div class="bloom" style="width: 54%; height: 60%; left: 10%; top: 12%"></div>
|
||
<div class="bandline"></div>
|
||
<div class="bandtag">caption band · 16.7%</div>
|
||
<div class="stage">
|
||
<div class="pill">
|
||
<div class="line">
|
||
<span class="w spoken">Built</span>
|
||
<span class="w spoken">for</span>
|
||
<span class="w active">teams</span>
|
||
<span class="w">who</span>
|
||
<span class="w">ship.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pn">05 / 06</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel">
|
||
<b>Settled line</b><span>· all spoken · underprint cleared</span>
|
||
</div>
|
||
<div class="frame capdemo">
|
||
<div
|
||
class="bloom"
|
||
style="width: 50%; height: 58%; right: -6%; bottom: -6%; left: auto"
|
||
></div>
|
||
<div class="stage">
|
||
<div class="pill">
|
||
<div class="line">
|
||
<span class="w spoken">Ship</span>
|
||
<span class="w spoken">faster</span>
|
||
<span class="w spoken">today.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pn">06 / 06</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="foot">
|
||
<span class="l">Biennale Yellow</span>
|
||
<span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
|
||
</div>
|
||
|
||
<template id="__bundler_thumbnail">
|
||
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||
<rect width="100" height="100" fill="#E9E5DB" />
|
||
<circle cx="42" cy="42" r="34" fill="#F1EE2E" opacity="0.55" />
|
||
<text x="14" y="64" font-family="Georgia" font-size="30" fill="#1B2566">Aa</text>
|
||
<rect x="14" y="74" width="60" height="1.5" fill="#1B2566" />
|
||
</svg>
|
||
</template>
|
||
</body>
|
||
</html>
|