mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-05 00:56:23 +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>
1141 lines
32 KiB
HTML
1141 lines
32 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>Bold Poster</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=Shrikhand&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Space+Grotesk:wght@400;600&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<style id="ds-tokens">
|
||
:root {
|
||
--bg: #ffffff;
|
||
--dark: #1c1410;
|
||
--red: #d8000f;
|
||
--light: #f5f2ef;
|
||
--disp: "Shrikhand", cursive;
|
||
--body: "Libre Baskerville", serif;
|
||
--mono: "Space Grotesk", sans-serif;
|
||
--stack-shadow:
|
||
2px 2px 0 rgba(28, 20, 16, 0.25), 4px 4px 0 rgba(28, 20, 16, 0.2),
|
||
6px 6px 0 rgba(28, 20, 16, 0.15);
|
||
}
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
html {
|
||
background: #0c0a08;
|
||
}
|
||
body {
|
||
background: var(--bg);
|
||
color: var(--dark);
|
||
font-family: var(--body);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
.disp {
|
||
font-family: var(--disp);
|
||
font-weight: 400;
|
||
color: var(--dark);
|
||
}
|
||
.label {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
font-size: 11px;
|
||
color: var(--red);
|
||
}
|
||
|
||
section {
|
||
padding: 100px 64px;
|
||
position: relative;
|
||
}
|
||
.sec-head {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 20px;
|
||
margin-bottom: 52px;
|
||
border-bottom: 3px solid var(--dark);
|
||
padding-bottom: 18px;
|
||
}
|
||
.sec-head .k {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 3px;
|
||
font-size: 12px;
|
||
color: var(--red);
|
||
}
|
||
.sec-head h2 {
|
||
font-family: var(--disp);
|
||
font-weight: 400;
|
||
font-size: 52px;
|
||
line-height: 1;
|
||
color: var(--dark);
|
||
}
|
||
.sec-head .sp {
|
||
flex: 1;
|
||
}
|
||
.sec-head .n {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
font-size: 11px;
|
||
color: var(--dark);
|
||
}
|
||
|
||
/* COVER */
|
||
.cover {
|
||
min-height: 100vh;
|
||
padding: 7vh 64px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
.cover .meta {
|
||
font-family: var(--body);
|
||
font-size: 14px;
|
||
color: var(--dark);
|
||
margin-bottom: 24px;
|
||
}
|
||
.cover .meta .label {
|
||
display: inline-block;
|
||
margin-bottom: 8px;
|
||
}
|
||
.cover .stack h1 {
|
||
font-family: var(--disp);
|
||
font-weight: 400;
|
||
line-height: 0.84;
|
||
}
|
||
.cover .l1 {
|
||
font-size: clamp(60px, 12vw, 150px);
|
||
color: var(--dark);
|
||
}
|
||
.cover .l2 {
|
||
font-size: clamp(72px, 14vw, 180px);
|
||
color: var(--red);
|
||
transform: rotate(-4deg);
|
||
transform-origin: left;
|
||
display: inline-block;
|
||
margin: 4px 0;
|
||
}
|
||
.cover .l3 {
|
||
font-size: clamp(56px, 11vw, 140px);
|
||
color: var(--dark);
|
||
transform: rotate(2deg);
|
||
transform-origin: left;
|
||
display: inline-block;
|
||
}
|
||
.cover .tagline {
|
||
font-family: var(--body);
|
||
font-size: clamp(15px, 1.5vw, 19px);
|
||
line-height: 1.6;
|
||
color: var(--dark);
|
||
max-width: 560px;
|
||
margin-top: 36px;
|
||
}
|
||
.cover .pbar {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 5px;
|
||
width: 16%;
|
||
background: var(--red);
|
||
}
|
||
.cover .counter {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
right: 32px;
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
font-size: 11px;
|
||
color: var(--dark);
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* PALETTE */
|
||
.swatches {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 0;
|
||
border: 3px solid var(--dark);
|
||
}
|
||
.sw {
|
||
border-right: 1.5px solid var(--dark);
|
||
}
|
||
.sw:last-child {
|
||
border-right: 0;
|
||
}
|
||
.sw .chip {
|
||
height: 150px;
|
||
border-bottom: 1.5px solid var(--dark);
|
||
}
|
||
.sw .meta {
|
||
padding: 18px 20px;
|
||
}
|
||
.sw .name {
|
||
font-family: var(--disp);
|
||
font-size: 24px;
|
||
color: var(--dark);
|
||
}
|
||
.sw .hex {
|
||
font-family: var(--mono);
|
||
font-size: 11px;
|
||
letter-spacing: 0.06em;
|
||
color: var(--dark);
|
||
opacity: 0.6;
|
||
margin-top: 8px;
|
||
}
|
||
.sw .role {
|
||
font-family: var(--body);
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
color: var(--dark);
|
||
margin-top: 10px;
|
||
}
|
||
|
||
/* TYPE */
|
||
.type-row {
|
||
display: grid;
|
||
grid-template-columns: 200px 1fr;
|
||
align-items: center;
|
||
padding: 26px 0;
|
||
border-bottom: 1.5px solid var(--dark);
|
||
}
|
||
.type-row .tok {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
font-size: 11px;
|
||
letter-spacing: 2px;
|
||
text-transform: uppercase;
|
||
color: var(--red);
|
||
}
|
||
.type-row .m {
|
||
font-family: var(--body);
|
||
font-size: 12px;
|
||
color: var(--dark);
|
||
opacity: 0.65;
|
||
margin-top: 8px;
|
||
line-height: 1.5;
|
||
}
|
||
.type-row .spec {
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* COMPONENTS */
|
||
.cnote {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
font-size: 11px;
|
||
color: var(--red);
|
||
margin-bottom: 20px;
|
||
}
|
||
.cgrid {
|
||
display: grid;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
gap: 36px;
|
||
margin-bottom: 48px;
|
||
}
|
||
.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;
|
||
}
|
||
.fingrid {
|
||
border: 3px solid var(--dark);
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
.fingrid .cell {
|
||
border: 1.5px solid var(--dark);
|
||
padding: 22px 20px;
|
||
}
|
||
.fingrid .cell .num {
|
||
font-family: var(--disp);
|
||
font-size: 44px;
|
||
color: var(--red);
|
||
line-height: 1;
|
||
}
|
||
.fingrid .cell .lab {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
font-size: 10px;
|
||
color: var(--dark);
|
||
margin-top: 10px;
|
||
}
|
||
.fingrid .cell .bd {
|
||
font-family: var(--body);
|
||
font-size: 12px;
|
||
line-height: 1.55;
|
||
color: var(--dark);
|
||
margin-top: 8px;
|
||
}
|
||
.leftcard {
|
||
border-left: 4px solid var(--red);
|
||
padding-left: 18px;
|
||
}
|
||
.leftcard .t {
|
||
font-family: var(--disp);
|
||
font-size: 30px;
|
||
color: var(--dark);
|
||
line-height: 1.1;
|
||
}
|
||
.leftcard .bd {
|
||
font-family: var(--body);
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
color: var(--dark);
|
||
margin-top: 10px;
|
||
}
|
||
.leftcard ul {
|
||
list-style: none;
|
||
margin-top: 14px;
|
||
}
|
||
.leftcard li {
|
||
font-family: var(--mono);
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
color: var(--dark);
|
||
padding-left: 16px;
|
||
position: relative;
|
||
margin-bottom: 6px;
|
||
}
|
||
.leftcard li::before {
|
||
content: "—";
|
||
position: absolute;
|
||
left: 0;
|
||
color: var(--red);
|
||
font-weight: 700;
|
||
}
|
||
.redpanel {
|
||
background: var(--red);
|
||
color: var(--bg);
|
||
padding: 48px;
|
||
}
|
||
.redpanel .q {
|
||
font-family: var(--disp);
|
||
font-size: 48px;
|
||
line-height: 1.15;
|
||
color: var(--bg);
|
||
text-shadow: var(--stack-shadow);
|
||
}
|
||
.redpanel .cite {
|
||
font-family: var(--body);
|
||
font-size: 14px;
|
||
color: var(--bg);
|
||
margin-top: 24px;
|
||
opacity: 0.85;
|
||
}
|
||
.tag {
|
||
display: inline-block;
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 3px;
|
||
font-size: 11px;
|
||
color: var(--red);
|
||
border: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* COMPOSITIONS */
|
||
.gallery {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 48px;
|
||
}
|
||
.fw .flabel {
|
||
display: flex;
|
||
gap: 14px;
|
||
align-items: baseline;
|
||
margin-bottom: 16px;
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
font-size: 11px;
|
||
color: var(--dark);
|
||
opacity: 0.55;
|
||
}
|
||
.fw .flabel b {
|
||
color: var(--dark);
|
||
opacity: 1;
|
||
}
|
||
.frame {
|
||
aspect-ratio: 16/9;
|
||
container-type: size;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: var(--bg);
|
||
border: 1.5px solid var(--dark);
|
||
}
|
||
.frame.red {
|
||
background: var(--red);
|
||
}
|
||
.frame.dark {
|
||
background: var(--dark);
|
||
}
|
||
.frame > .body {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 2;
|
||
}
|
||
.frame .pbar {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 0.5cqw;
|
||
background: var(--red);
|
||
z-index: 5;
|
||
}
|
||
|
||
/* f1 hero stack */
|
||
.pf1 .body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 0 5cqw;
|
||
}
|
||
.pf1 .label {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.25cqw;
|
||
font-size: 1cqw;
|
||
color: var(--red);
|
||
margin-bottom: 1.6cqw;
|
||
}
|
||
.pf1 h3 {
|
||
font-family: var(--disp);
|
||
font-weight: 400;
|
||
line-height: 0.84;
|
||
}
|
||
.pf1 .a {
|
||
font-size: 11cqw;
|
||
color: var(--dark);
|
||
}
|
||
.pf1 .b {
|
||
font-size: 13cqw;
|
||
color: var(--red);
|
||
transform: rotate(-4deg);
|
||
transform-origin: left;
|
||
display: inline-block;
|
||
margin: 0.3cqw 0;
|
||
}
|
||
.pf1 .c {
|
||
font-size: 10cqw;
|
||
color: var(--dark);
|
||
transform: rotate(2deg);
|
||
transform-origin: left;
|
||
display: inline-block;
|
||
}
|
||
|
||
/* f2 stat-big red panel */
|
||
.pf2 {
|
||
background: var(--red);
|
||
}
|
||
.pf2 .body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
color: var(--bg);
|
||
}
|
||
.pf2 .label {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.3cqw;
|
||
font-size: 1.1cqw;
|
||
color: var(--bg);
|
||
opacity: 0.8;
|
||
margin-bottom: 1cqw;
|
||
}
|
||
.pf2 .big {
|
||
font-family: var(--disp);
|
||
font-weight: 400;
|
||
font-size: 30cqw;
|
||
line-height: 0.82;
|
||
color: var(--bg);
|
||
transform: rotate(-6deg);
|
||
text-shadow:
|
||
0.15cqw 0.15cqw 0 rgba(28, 20, 16, 0.25),
|
||
0.3cqw 0.3cqw 0 rgba(28, 20, 16, 0.2),
|
||
0.45cqw 0.45cqw 0 rgba(28, 20, 16, 0.15);
|
||
}
|
||
.pf2 .sub {
|
||
font-family: var(--body);
|
||
font-size: 1.6cqw;
|
||
color: var(--bg);
|
||
margin-top: 2cqw;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* f3 financial grid */
|
||
.pf3 .body {
|
||
padding: 6cqw 5cqw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.pf3 .label {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.25cqw;
|
||
font-size: 0.95cqw;
|
||
color: var(--red);
|
||
margin-bottom: 0.8cqw;
|
||
}
|
||
.pf3 h3 {
|
||
font-family: var(--disp);
|
||
font-size: 4.4cqw;
|
||
color: var(--dark);
|
||
margin-bottom: 2cqw;
|
||
}
|
||
.pf3 .grid {
|
||
border: 0.3cqw solid var(--dark);
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
flex: 1;
|
||
}
|
||
.pf3 .cell {
|
||
border: 0.15cqw solid var(--dark);
|
||
padding: 1.6cqw;
|
||
}
|
||
.pf3 .cell .num {
|
||
font-family: var(--disp);
|
||
font-size: 4cqw;
|
||
color: var(--red);
|
||
line-height: 1;
|
||
}
|
||
.pf3 .cell .lab {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.15cqw;
|
||
font-size: 0.8cqw;
|
||
color: var(--dark);
|
||
margin-top: 0.8cqw;
|
||
}
|
||
.pf3 .cell .bd {
|
||
font-family: var(--body);
|
||
font-size: 0.95cqw;
|
||
line-height: 1.5;
|
||
color: var(--dark);
|
||
margin-top: 0.6cqw;
|
||
}
|
||
|
||
/* f4 quote red panel */
|
||
.pf4 {
|
||
background: var(--red);
|
||
}
|
||
.pf4 .body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 0 7cqw;
|
||
color: var(--bg);
|
||
}
|
||
.pf4 .q {
|
||
font-family: var(--disp);
|
||
font-weight: 400;
|
||
font-size: 5.2cqw;
|
||
line-height: 1.15;
|
||
color: var(--bg);
|
||
text-shadow:
|
||
0.15cqw 0.15cqw 0 rgba(28, 20, 16, 0.25),
|
||
0.3cqw 0.3cqw 0 rgba(28, 20, 16, 0.2),
|
||
0.45cqw 0.45cqw 0 rgba(28, 20, 16, 0.15);
|
||
}
|
||
.pf4 .cite {
|
||
font-family: var(--body);
|
||
font-size: 1.3cqw;
|
||
color: var(--bg);
|
||
opacity: 0.85;
|
||
margin-top: 2.4cqw;
|
||
}
|
||
|
||
/* PRINCIPLES */
|
||
.dos {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 0;
|
||
border: 3px solid var(--dark);
|
||
}
|
||
.do-card {
|
||
padding: 38px;
|
||
}
|
||
.do-card.do {
|
||
border-right: 1.5px solid var(--dark);
|
||
}
|
||
.do-card h4 {
|
||
font-family: var(--disp);
|
||
font-size: 34px;
|
||
color: var(--dark);
|
||
margin-bottom: 22px;
|
||
}
|
||
.do-card ul {
|
||
list-style: none;
|
||
}
|
||
.do-card li {
|
||
font-family: var(--body);
|
||
font-size: 14px;
|
||
line-height: 1.55;
|
||
padding-left: 24px;
|
||
position: relative;
|
||
margin-bottom: 13px;
|
||
color: var(--dark);
|
||
}
|
||
.do-card li::before {
|
||
position: absolute;
|
||
left: 0;
|
||
font-weight: 700;
|
||
}
|
||
.do-card.do li::before {
|
||
content: "—";
|
||
color: var(--red);
|
||
}
|
||
.do-card.dont li::before {
|
||
content: "\00d7";
|
||
color: var(--dark);
|
||
opacity: 0.4;
|
||
}
|
||
|
||
.foot {
|
||
padding: 48px 64px;
|
||
border-top: 3px solid var(--dark);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.foot .l {
|
||
font-family: var(--disp);
|
||
font-size: 30px;
|
||
color: var(--dark);
|
||
}
|
||
.foot .r {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
font-size: 11px;
|
||
color: var(--dark);
|
||
opacity: 0.55;
|
||
}
|
||
@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=Shrikhand&display=swap" />
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap"
|
||
/>
|
||
<style id="ft-override">
|
||
:root {
|
||
--primary: #ffffff !important;
|
||
--secondary: #1c1410 !important;
|
||
--tertiary: #f5f2ef !important;
|
||
--accent: #d8000f !important;
|
||
--f-disp: "Shrikhand", sans-serif !important;
|
||
--f-body: "Libre Baskerville", sans-serif !important;
|
||
--bg: #ffffff !important;
|
||
--dark: #1c1410 !important;
|
||
--red: #d8000f !important;
|
||
--light: #f5f2ef !important;
|
||
--disp: "Shrikhand", sans-serif !important;
|
||
--body: "Libre Baskerville", sans-serif !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- COVER -->
|
||
<section class="cover">
|
||
<div class="meta">
|
||
<span class="label">Frame System · Vol. 01</span><br />A populist editorial poster system —
|
||
printed, loud, unmistakable.
|
||
</div>
|
||
<div class="stack">
|
||
<h1 class="l1">ink,</h1>
|
||
<br />
|
||
<h1 class="l2">red &</h1>
|
||
<br />
|
||
<h1 class="l3">paper.</h1>
|
||
</div>
|
||
<div class="tagline">
|
||
Vintage Italian sports-magazine display, classical serif body, one saturated tomato red, and
|
||
grids ruled in ink.
|
||
</div>
|
||
<div class="pbar"></div>
|
||
<div class="counter">01 / 06</div>
|
||
</section>
|
||
|
||
<!-- PALETTE -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="k">01</span>
|
||
<h2>Palette</h2>
|
||
<span class="sp"></span><span class="n">Four Colors, No More</span>
|
||
</div>
|
||
<div class="swatches">
|
||
<div class="sw">
|
||
<div
|
||
class="chip"
|
||
style="background: var(--bg); border-bottom: 1.5px solid var(--dark)"
|
||
></div>
|
||
<div class="meta">
|
||
<div class="name">Paper</div>
|
||
<div class="hex">#FFFFFF</div>
|
||
<div class="role">Fresh newsprint canvas.</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--dark)"></div>
|
||
<div class="meta">
|
||
<div class="name">Ink</div>
|
||
<div class="hex">#1C1410</div>
|
||
<div class="role">Warm brown-black — text + rules.</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--red)"></div>
|
||
<div class="meta">
|
||
<div class="name">Red</div>
|
||
<div class="hex">#D8000F</div>
|
||
<div class="role">The only accent — numerals, rules, panels.</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--light)"></div>
|
||
<div class="meta">
|
||
<div class="name">Off-White</div>
|
||
<div class="hex">#F5F2EF</div>
|
||
<div class="role">Alternating striped panels.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TYPOGRAPHY -->
|
||
<section style="background: var(--light)">
|
||
<div class="sec-head">
|
||
<span class="k">02</span>
|
||
<h2>Typography</h2>
|
||
<span class="sp"></span><span class="n">Shrikhand · Baskerville · Grotesk</span>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">stat-big</div>
|
||
<div class="m">Shrikhand 400 · rotated −6° · always red</div>
|
||
</div>
|
||
<div class="spec">
|
||
<span
|
||
class="disp"
|
||
style="
|
||
font-size: 110px;
|
||
color: var(--red);
|
||
display: inline-block;
|
||
transform: rotate(-6deg);
|
||
"
|
||
>94</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">section-header</div>
|
||
<div class="m">Shrikhand 400 · ink</div>
|
||
</div>
|
||
<div class="spec"><span class="disp" style="font-size: 60px">The Printed Page</span></div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">body</div>
|
||
<div class="m">Libre Baskerville 400 · line 1.75 · ink</div>
|
||
</div>
|
||
<div class="spec">
|
||
<p style="font-family: var(--body); font-size: 16px; line-height: 1.75; max-width: 640px">
|
||
Libre Baskerville carries every paragraph — the literary serif is what makes the system
|
||
feel printed, not digital.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="type-row" style="border-bottom: 0">
|
||
<div>
|
||
<div class="tok">label</div>
|
||
<div class="m">Space Grotesk 600 · uppercase · 2–3px</div>
|
||
</div>
|
||
<div class="spec">
|
||
<span class="label" style="font-size: 13px; letter-spacing: 3px"
|
||
>Section Eyebrow / Metadata</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COMPONENTS -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="k">03</span>
|
||
<h2>Components</h2>
|
||
<span class="sp"></span><span class="n">Heavy Rules · One Shadow</span>
|
||
</div>
|
||
|
||
<div class="cgrid">
|
||
<div class="s7">
|
||
<div class="cnote">Financial grid — 3px outer + 1.5px inner double border</div>
|
||
<div class="fingrid">
|
||
<div class="cell">
|
||
<div class="num">$24M</div>
|
||
<div class="lab">Revenue</div>
|
||
<div class="bd">Up across every region this year.</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="num">+18%</div>
|
||
<div class="lab">Growth</div>
|
||
<div class="bd">Year over year, compounding.</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="num">3.4×</div>
|
||
<div class="lab">Multiple</div>
|
||
<div class="bd">On invested capital to date.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="s5">
|
||
<div class="cnote">Red leftbar card</div>
|
||
<div class="leftcard">
|
||
<div class="t">Editorial Block</div>
|
||
<div class="bd">
|
||
Cantilevered off a 4px red rule — the card reads without an enclosing outline.
|
||
</div>
|
||
<ul>
|
||
<li>red em-dash bullets</li>
|
||
<li>capped at three</li>
|
||
<li>serif body, mono markers</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cgrid" style="margin-bottom: 0">
|
||
<div class="s7">
|
||
<div class="cnote">Red panel — the one stacked text-shadow</div>
|
||
<div class="redpanel">
|
||
<div class="q">printed and pressed.</div>
|
||
<div class="cite">— White Shrikhand on red, stamped three times off-register.</div>
|
||
</div>
|
||
</div>
|
||
<div class="s5">
|
||
<div class="cnote">Tilted statement + tags</div>
|
||
<div style="display: flex; flex-direction: column; gap: 24px">
|
||
<span
|
||
class="disp"
|
||
style="
|
||
font-size: 80px;
|
||
color: var(--red);
|
||
transform: rotate(-5deg);
|
||
transform-origin: left;
|
||
display: inline-block;
|
||
"
|
||
>loud.</span
|
||
>
|
||
<div style="display: flex; gap: 18px">
|
||
<span class="tag">Sports Annual</span><span class="tag">Wine Catalogue</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COMPOSITIONS -->
|
||
<section style="background: var(--light)">
|
||
<div class="sec-head">
|
||
<span class="k">04</span>
|
||
<h2>Frame Compositions</h2>
|
||
<span class="sp"></span><span class="n">True 16:9 · cqw</span>
|
||
</div>
|
||
<div class="gallery">
|
||
<div class="fw">
|
||
<div class="flabel"><b>Hero Stack</b><span>· identity · 3-line tilted · left</span></div>
|
||
<div class="frame pf1">
|
||
<div class="body">
|
||
<div class="label">Frame System · Vol. 01</div>
|
||
<h3>
|
||
<span class="a">ink,</span><br /><span class="b">red &</span><br /><span
|
||
class="c"
|
||
>paper.</span
|
||
>
|
||
</h3>
|
||
</div>
|
||
<div class="pbar" style="width: 16%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel"><b>Hero Stat</b><span>· statement · red panel · centered</span></div>
|
||
<div class="frame red pf2">
|
||
<div class="body">
|
||
<div class="label">Readership</div>
|
||
<div class="big">94</div>
|
||
<div class="sub">percent recall, unaided.</div>
|
||
</div>
|
||
<div class="pbar" style="width: 48%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel">
|
||
<b>Financial Grid</b><span>· data · double border · the dense frame</span>
|
||
</div>
|
||
<div class="frame pf3">
|
||
<div class="body">
|
||
<div class="label">By The Numbers</div>
|
||
<h3>The Annual</h3>
|
||
<div class="grid">
|
||
<div class="cell">
|
||
<div class="num">$24M</div>
|
||
<div class="lab">Revenue</div>
|
||
<div class="bd">Up across every region.</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="num">+18%</div>
|
||
<div class="lab">Growth</div>
|
||
<div class="bd">Year over year.</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="num">3.4×</div>
|
||
<div class="lab">Multiple</div>
|
||
<div class="bd">On capital to date.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pbar" style="width: 64%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel">
|
||
<b>Pull Quote</b><span>· quote · red panel · stacked shadow</span>
|
||
</div>
|
||
<div class="frame red pf4">
|
||
<div class="body">
|
||
<div class="q">type that<br />shouts.</div>
|
||
<div class="cite">— The system voice, printed and pressed.</div>
|
||
</div>
|
||
<div class="pbar" style="width: 82%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PRINCIPLES -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="k">05</span>
|
||
<h2>Frame Rules</h2>
|
||
<span class="sp"></span><span class="n">One Red · Square Corners</span>
|
||
</div>
|
||
<div class="dos">
|
||
<div class="do-card do">
|
||
<h4>Do</h4>
|
||
<ul>
|
||
<li>Stack hero titles in 3 Shrikhand lines — at least one tilted, one red.</li>
|
||
<li>Make every numeral red Shrikhand; tilt statement display −5° to −6°.</li>
|
||
<li>Set eyebrows in Space Grotesk 600 uppercase, 2–3px tracked, red.</li>
|
||
<li>Build data grids with 3px outer + 1.5px inner double borders.</li>
|
||
<li>Use red em-dash bullets, capped at three; serif body at line 1.75.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="do-card dont">
|
||
<h4>Don't</h4>
|
||
<ul>
|
||
<li>No second accent color; no rounded corners (square only).</li>
|
||
<li>No drop shadows — the stacked text-shadow on red is the only one.</li>
|
||
<li>No font substitutes; no Shrikhand body, no Baskerville labels.</li>
|
||
<li>No default disc bullets; no untilted red statement display.</li>
|
||
<li>Don't crowd a statement frame — reserve the negative space.</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(--dark);
|
||
--cap-canvas: var(--bg);
|
||
--cap-accent: var(--red);
|
||
--cap-accent-2: var(--light);
|
||
}
|
||
.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: 1.5px solid var(--cap-ink);
|
||
border-left: 0.35cqw solid var(--cap-accent);
|
||
border-radius: 0;
|
||
}
|
||
.capdemo .line {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 0.1em 0.34em;
|
||
font-family: var(--body);
|
||
font-weight: 400;
|
||
font-size: 3.2cqw;
|
||
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-canvas);
|
||
background: var(--cap-accent);
|
||
box-shadow: 0 0 0 0.06em var(--cap-accent);
|
||
text-shadow:
|
||
0.03em 0.03em 0 rgba(28, 20, 16, 0.25),
|
||
0.06em 0.06em 0 rgba(28, 20, 16, 0.2),
|
||
0.09em 0.09em 0 rgba(28, 20, 16, 0.15);
|
||
}
|
||
.capdemo .bandline {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 16.67cqh;
|
||
border-top: 1px dashed rgba(28, 20, 16, 0.3);
|
||
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(--dark);
|
||
opacity: 0.5;
|
||
z-index: 4;
|
||
}
|
||
</style>
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="k">06</span>
|
||
<h2>Captions</h2>
|
||
<span class="sp"></span><span class="n">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="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="pbar" style="width: 88%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel"><b>Settled line</b><span>· all spoken · red panel cleared</span></div>
|
||
<div class="frame capdemo">
|
||
<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="pbar" style="width: 100%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="foot">
|
||
<span class="l">Bold Poster</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="#FFFFFF" />
|
||
<text x="12" y="42" font-family="Georgia" font-weight="700" font-size="26" fill="#1C1410">
|
||
ink
|
||
</text>
|
||
<text
|
||
x="14"
|
||
y="70"
|
||
font-family="Georgia"
|
||
font-weight="700"
|
||
font-size="30"
|
||
fill="#D8000F"
|
||
transform="rotate(-5 14 70)"
|
||
>
|
||
red.
|
||
</text>
|
||
<rect x="0" y="96" width="58" height="4" fill="#D8000F" />
|
||
</svg>
|
||
</template>
|
||
</body>
|
||
</html>
|