mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-05 17:30:50 +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>
1167 lines
33 KiB
HTML
1167 lines
33 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>Broadside</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=Barlow:wght@400;600;700;800;900&family=IBM+Plex+Mono:wght@400;500&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<style id="ds-tokens">
|
||
:root {
|
||
--ink: #111111;
|
||
--ink-alt: #1a1a18;
|
||
--orange: #e85d26;
|
||
--cream: #f0ece5;
|
||
--cream-muted: #888880;
|
||
--cream-hint: #505048;
|
||
--border-dark: #282826;
|
||
--on-orange-muted: rgba(17, 17, 17, 0.75);
|
||
--on-orange-hint: rgba(17, 17, 17, 0.55);
|
||
--on-orange-faint: rgba(17, 17, 17, 0.4);
|
||
--on-orange-border: rgba(17, 17, 17, 0.2);
|
||
--sans: "Barlow", sans-serif;
|
||
--mono: "IBM Plex Mono", monospace;
|
||
}
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
html {
|
||
background: #000;
|
||
}
|
||
body {
|
||
background: var(--ink);
|
||
color: var(--cream);
|
||
font-family: var(--sans);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
.mono {
|
||
font-family: var(--mono);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
}
|
||
.disp {
|
||
font-family: var(--sans);
|
||
font-weight: 900;
|
||
letter-spacing: -0.04em;
|
||
line-height: 0.9;
|
||
}
|
||
|
||
section {
|
||
padding: 110px 88px;
|
||
position: relative;
|
||
}
|
||
.sec-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 18px;
|
||
border-bottom: 1px solid var(--border-dark);
|
||
padding-bottom: 18px;
|
||
margin-bottom: 56px;
|
||
}
|
||
.sec-head .k {
|
||
font-family: var(--mono);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
font-size: 13px;
|
||
color: var(--orange);
|
||
}
|
||
.sec-head h2 {
|
||
font-family: var(--sans);
|
||
font-weight: 900;
|
||
font-size: 52px;
|
||
line-height: 1;
|
||
letter-spacing: -0.03em;
|
||
text-transform: lowercase;
|
||
}
|
||
.sec-head .sp {
|
||
flex: 1;
|
||
}
|
||
.sec-head .num {
|
||
font-family: var(--mono);
|
||
font-size: 13px;
|
||
color: var(--cream-hint);
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
/* COVER (orange register) */
|
||
.cover {
|
||
min-height: 100vh;
|
||
background: var(--orange);
|
||
color: var(--ink);
|
||
padding: 80px 88px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
.cover .topnum {
|
||
position: absolute;
|
||
top: 64px;
|
||
left: 88px;
|
||
font-family: var(--mono);
|
||
font-size: 14px;
|
||
letter-spacing: 0.1em;
|
||
color: rgba(17, 17, 17, 0.45);
|
||
}
|
||
.cover .topmeta {
|
||
position: absolute;
|
||
top: 64px;
|
||
right: 88px;
|
||
font-family: var(--mono);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
font-size: 13px;
|
||
color: var(--on-orange-hint);
|
||
}
|
||
.cover .rule {
|
||
width: 48px;
|
||
height: 3px;
|
||
background: var(--ink);
|
||
margin-bottom: 28px;
|
||
}
|
||
.cover .kick {
|
||
font-family: var(--mono);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
font-size: 14px;
|
||
color: var(--on-orange-hint);
|
||
margin-bottom: 20px;
|
||
}
|
||
.cover h1 {
|
||
font-family: var(--sans);
|
||
font-weight: 900;
|
||
font-size: clamp(80px, 13vw, 210px);
|
||
line-height: 0.86;
|
||
letter-spacing: -0.04em;
|
||
text-transform: lowercase;
|
||
}
|
||
.cover .lead {
|
||
font-family: var(--sans);
|
||
font-weight: 400;
|
||
font-size: clamp(18px, 1.6vw, 26px);
|
||
line-height: 1.45;
|
||
color: var(--on-orange-muted);
|
||
margin-top: 32px;
|
||
max-width: 60%;
|
||
}
|
||
.cover .foot {
|
||
position: absolute;
|
||
bottom: 64px;
|
||
left: 88px;
|
||
right: 88px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-family: var(--mono);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
font-size: 13px;
|
||
color: var(--on-orange-hint);
|
||
}
|
||
|
||
/* PALETTE */
|
||
.swatches {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 0;
|
||
border: 1px solid var(--border-dark);
|
||
}
|
||
.sw {
|
||
border-right: 1px solid var(--border-dark);
|
||
border-bottom: 1px solid var(--border-dark);
|
||
padding: 0;
|
||
}
|
||
.sw:nth-child(4n) {
|
||
border-right: 0;
|
||
}
|
||
.sw:nth-child(n + 5) {
|
||
border-bottom: 0;
|
||
}
|
||
.sw .chip {
|
||
height: 120px;
|
||
border-bottom: 1px solid var(--border-dark);
|
||
}
|
||
.sw .meta {
|
||
padding: 16px 20px;
|
||
}
|
||
.sw .name {
|
||
font-family: var(--sans);
|
||
font-weight: 700;
|
||
font-size: 19px;
|
||
text-transform: lowercase;
|
||
}
|
||
.sw .hex {
|
||
font-family: var(--mono);
|
||
font-size: 11px;
|
||
letter-spacing: 0.06em;
|
||
color: var(--cream-hint);
|
||
margin-top: 6px;
|
||
}
|
||
.sw .role {
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
color: var(--cream-muted);
|
||
margin-top: 10px;
|
||
font-family: var(--sans);
|
||
}
|
||
|
||
/* TYPE */
|
||
.type-row {
|
||
display: grid;
|
||
grid-template-columns: 200px 1fr;
|
||
align-items: baseline;
|
||
padding: 24px 0;
|
||
border-bottom: 1px solid var(--border-dark);
|
||
}
|
||
.type-row .tok {
|
||
font-family: var(--mono);
|
||
font-size: 12px;
|
||
letter-spacing: 0.08em;
|
||
color: var(--orange);
|
||
text-transform: uppercase;
|
||
}
|
||
.type-row .m {
|
||
font-family: var(--mono);
|
||
font-size: 11px;
|
||
color: var(--cream-hint);
|
||
margin-top: 8px;
|
||
line-height: 1.6;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.type-row .spec {
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* COMPONENTS */
|
||
.cnote {
|
||
font-family: var(--mono);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
font-size: 12px;
|
||
color: var(--orange);
|
||
margin-bottom: 20px;
|
||
}
|
||
.cgrid {
|
||
display: grid;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
gap: 40px;
|
||
margin-bottom: 52px;
|
||
}
|
||
.s3 {
|
||
grid-column: span 3;
|
||
}
|
||
.s4 {
|
||
grid-column: span 4;
|
||
}
|
||
.s5 {
|
||
grid-column: span 5;
|
||
}
|
||
.s6 {
|
||
grid-column: span 6;
|
||
}
|
||
.s7 {
|
||
grid-column: span 7;
|
||
}
|
||
.statcard {
|
||
border-top: 1px solid var(--border-dark);
|
||
padding: 20px 20px 20px 0;
|
||
}
|
||
.statcard .v {
|
||
font-family: var(--sans);
|
||
font-weight: 900;
|
||
font-size: 64px;
|
||
line-height: 1;
|
||
letter-spacing: -0.04em;
|
||
color: var(--orange);
|
||
}
|
||
.statcard .l {
|
||
font-family: var(--sans);
|
||
font-size: 16px;
|
||
color: var(--cream);
|
||
margin-top: 8px;
|
||
}
|
||
.statcard .n {
|
||
font-family: var(--mono);
|
||
font-size: 11px;
|
||
letter-spacing: 0.1em;
|
||
color: var(--cream-hint);
|
||
margin-top: 6px;
|
||
text-transform: uppercase;
|
||
}
|
||
.blist {
|
||
list-style: none;
|
||
}
|
||
.blist li {
|
||
font-family: var(--sans);
|
||
font-weight: 400;
|
||
font-size: 22px;
|
||
color: var(--cream);
|
||
padding: 10px 0 10px 36px;
|
||
position: relative;
|
||
}
|
||
.blist li::before {
|
||
content: "/";
|
||
position: absolute;
|
||
left: 0;
|
||
font-family: var(--mono);
|
||
font-weight: 700;
|
||
color: var(--orange);
|
||
}
|
||
.tag {
|
||
display: inline-block;
|
||
font-family: var(--mono);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
font-size: 12px;
|
||
color: var(--orange);
|
||
border: 1px solid var(--orange);
|
||
padding: 0.3em 0.8em;
|
||
}
|
||
.barchart {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 18px;
|
||
height: 200px;
|
||
border-left: 1px solid var(--border-dark);
|
||
padding-left: 18px;
|
||
}
|
||
.barchart .bar {
|
||
flex: 1;
|
||
background: var(--cream-hint);
|
||
}
|
||
.barchart .bar.accent {
|
||
background: var(--orange);
|
||
}
|
||
.barlabels {
|
||
display: flex;
|
||
gap: 18px;
|
||
padding-left: 18px;
|
||
margin-top: 10px;
|
||
}
|
||
.barlabels span {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-family: var(--mono);
|
||
font-size: 11px;
|
||
letter-spacing: 0.08em;
|
||
color: var(--cream-hint);
|
||
}
|
||
.compare {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
border: 1px solid var(--border-dark);
|
||
}
|
||
.compare .l {
|
||
padding: 32px;
|
||
border-right: 1px solid var(--border-dark);
|
||
}
|
||
.compare .r {
|
||
padding: 32px;
|
||
background: var(--orange);
|
||
color: var(--ink);
|
||
}
|
||
.compare .ch {
|
||
font-family: var(--sans);
|
||
font-weight: 700;
|
||
font-size: 24px;
|
||
text-transform: lowercase;
|
||
}
|
||
.compare .cl {
|
||
font-family: var(--mono);
|
||
font-size: 11px;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 14px;
|
||
}
|
||
.compare .l .cl {
|
||
color: var(--orange);
|
||
}
|
||
.compare .r .cl {
|
||
color: var(--on-orange-hint);
|
||
}
|
||
.compare .cx {
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
margin-top: 10px;
|
||
}
|
||
.compare .l .cx {
|
||
color: var(--cream-muted);
|
||
}
|
||
.compare .r .cx {
|
||
color: var(--on-orange-muted);
|
||
}
|
||
|
||
/* 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);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
font-size: 12px;
|
||
color: var(--cream-hint);
|
||
}
|
||
.fw .flabel b {
|
||
color: var(--cream);
|
||
}
|
||
.frame {
|
||
aspect-ratio: 16/9;
|
||
container-type: size;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: var(--ink);
|
||
border: 1px solid var(--border-dark);
|
||
}
|
||
.frame.orange {
|
||
background: var(--orange);
|
||
}
|
||
.frame > .body {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* f1 cover orange */
|
||
.bf1 .body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 0 5.5cqw;
|
||
color: var(--ink);
|
||
}
|
||
.bf1 .topnum {
|
||
position: absolute;
|
||
top: 4cqw;
|
||
left: 5.5cqw;
|
||
font-family: var(--mono);
|
||
font-size: 1cqw;
|
||
letter-spacing: 0.1em;
|
||
color: rgba(17, 17, 17, 0.45);
|
||
z-index: 3;
|
||
}
|
||
.bf1 .rule {
|
||
width: 3.4cqw;
|
||
height: 0.22cqw;
|
||
background: var(--ink);
|
||
margin-bottom: 1.6cqw;
|
||
}
|
||
.bf1 .kick {
|
||
font-family: var(--mono);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
font-size: 1cqw;
|
||
color: var(--on-orange-hint);
|
||
margin-bottom: 1.4cqw;
|
||
}
|
||
.bf1 h3 {
|
||
font-family: var(--sans);
|
||
font-weight: 900;
|
||
font-size: 13cqw;
|
||
line-height: 0.84;
|
||
letter-spacing: -0.04em;
|
||
text-transform: lowercase;
|
||
}
|
||
|
||
/* f2 statement dark */
|
||
.bf2 .body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 0 5.5cqw;
|
||
}
|
||
.bf2 .kick {
|
||
font-family: var(--mono);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
font-size: 1cqw;
|
||
color: var(--orange);
|
||
margin-bottom: 1.6cqw;
|
||
}
|
||
.bf2 h3 {
|
||
font-family: var(--sans);
|
||
font-weight: 900;
|
||
font-size: 10cqw;
|
||
line-height: 0.86;
|
||
letter-spacing: -0.04em;
|
||
text-transform: lowercase;
|
||
color: var(--cream);
|
||
}
|
||
.bf2 h3 em {
|
||
font-style: normal;
|
||
color: var(--orange);
|
||
}
|
||
|
||
/* f3 stats dark */
|
||
.bf3 .body {
|
||
padding: 6cqw 5.5cqw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.bf3 .top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid var(--border-dark);
|
||
padding-bottom: 1.2cqw;
|
||
margin-bottom: 3cqw;
|
||
font-family: var(--mono);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
font-size: 1cqw;
|
||
color: var(--cream-hint);
|
||
}
|
||
.bf3 .top .k {
|
||
color: var(--orange);
|
||
}
|
||
.bf3 .row {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 3cqw;
|
||
}
|
||
.bf3 .sc {
|
||
border-top: 1px solid var(--border-dark);
|
||
padding-top: 1.4cqw;
|
||
}
|
||
.bf3 .sc .v {
|
||
font-family: var(--sans);
|
||
font-weight: 900;
|
||
font-size: 6cqw;
|
||
line-height: 1;
|
||
letter-spacing: -0.04em;
|
||
color: var(--orange);
|
||
}
|
||
.bf3 .sc .l {
|
||
font-family: var(--sans);
|
||
font-size: 1.3cqw;
|
||
color: var(--cream);
|
||
margin-top: 0.6cqw;
|
||
}
|
||
.bf3 .sc .n {
|
||
font-family: var(--mono);
|
||
font-size: 0.85cqw;
|
||
letter-spacing: 0.1em;
|
||
color: var(--cream-hint);
|
||
margin-top: 0.5cqw;
|
||
text-transform: uppercase;
|
||
}
|
||
.bf3 .foot {
|
||
margin-top: auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-top: 1px solid var(--border-dark);
|
||
padding-top: 1.2cqw;
|
||
font-family: var(--mono);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
font-size: 0.9cqw;
|
||
color: var(--cream-hint);
|
||
}
|
||
|
||
/* f4 fadelist */
|
||
.bf4 {
|
||
background: var(--ink);
|
||
}
|
||
.bf4 .body {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
align-items: center;
|
||
padding: 0 5.5cqw;
|
||
gap: 3cqw;
|
||
}
|
||
.bf4 .stack div {
|
||
font-family: var(--sans);
|
||
font-weight: 900;
|
||
font-size: 7cqw;
|
||
line-height: 1;
|
||
letter-spacing: -0.03em;
|
||
text-transform: lowercase;
|
||
color: var(--cream);
|
||
}
|
||
.bf4 .stack div:nth-child(2) {
|
||
opacity: 0.5;
|
||
}
|
||
.bf4 .stack div:nth-child(3) {
|
||
opacity: 0.22;
|
||
}
|
||
.bf4 .title {
|
||
font-family: var(--sans);
|
||
font-weight: 900;
|
||
font-size: 9cqw;
|
||
line-height: 0.9;
|
||
letter-spacing: -0.04em;
|
||
text-transform: lowercase;
|
||
color: var(--orange);
|
||
text-align: right;
|
||
}
|
||
|
||
/* PRINCIPLES */
|
||
.dos {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 0;
|
||
border: 1px solid var(--border-dark);
|
||
}
|
||
.do-card {
|
||
padding: 40px;
|
||
}
|
||
.do-card.do {
|
||
border-right: 1px solid var(--border-dark);
|
||
}
|
||
.do-card h4 {
|
||
font-family: var(--sans);
|
||
font-weight: 900;
|
||
font-size: 34px;
|
||
text-transform: lowercase;
|
||
margin-bottom: 24px;
|
||
}
|
||
.do-card.do h4 {
|
||
color: var(--orange);
|
||
}
|
||
.do-card ul {
|
||
list-style: none;
|
||
}
|
||
.do-card li {
|
||
font-family: var(--sans);
|
||
font-size: 15px;
|
||
line-height: 1.55;
|
||
padding-left: 28px;
|
||
position: relative;
|
||
margin-bottom: 14px;
|
||
color: var(--cream-muted);
|
||
}
|
||
.do-card li::before {
|
||
content: "/";
|
||
position: absolute;
|
||
left: 0;
|
||
font-family: var(--mono);
|
||
font-weight: 700;
|
||
color: var(--orange);
|
||
}
|
||
.do-card.dont li::before {
|
||
content: "\00d7";
|
||
color: var(--cream-hint);
|
||
}
|
||
|
||
.foot {
|
||
padding: 56px 88px;
|
||
border-top: 1px solid var(--border-dark);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.foot .l {
|
||
font-family: var(--sans);
|
||
font-weight: 900;
|
||
font-size: 30px;
|
||
text-transform: lowercase;
|
||
}
|
||
.foot .r {
|
||
font-family: var(--mono);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
font-size: 11px;
|
||
color: var(--cream-hint);
|
||
}
|
||
@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=Barlow:wght@400;600;700&display=swap"
|
||
/>
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
|
||
/>
|
||
<style id="ft-override">
|
||
:root {
|
||
--primary: #f0ece5 !important;
|
||
--secondary: #111111 !important;
|
||
--tertiary: #282826 !important;
|
||
--accent: #e85d26 !important;
|
||
--f-disp: "Barlow", sans-serif !important;
|
||
--f-body: "IBM Plex Mono", sans-serif !important;
|
||
--ink: #111111 !important;
|
||
--orange: #e85d26 !important;
|
||
--cream: #f0ece5 !important;
|
||
--border-dark: #282826 !important;
|
||
--sans: "Barlow", sans-serif !important;
|
||
--mono: "IBM Plex Mono", sans-serif !important;
|
||
--ink-alt: #1a1a18 !important;
|
||
--cream-muted: #888880 !important;
|
||
--cream-hint: #505048 !important;
|
||
--on-orange-muted: rgba(17, 17, 17, 0.75) !important;
|
||
--on-orange-hint: rgba(17, 17, 17, 0.55) !important;
|
||
--on-orange-faint: rgba(17, 17, 17, 0.4) !important;
|
||
--on-orange-border: rgba(17, 17, 17, 0.2) !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- COVER -->
|
||
<section class="cover">
|
||
<div class="topnum">No. 01 / 06</div>
|
||
<div class="topmeta">Broadside — Frame System</div>
|
||
<div class="rule"></div>
|
||
<div class="kick">Protest-Poster Editorial</div>
|
||
<h1>ink on fire.</h1>
|
||
<div class="lead">
|
||
Massive Barlow type as graphic primitive, one fire-orange environment, and a flat plane
|
||
built from negative space — dark to document, orange to declare.
|
||
</div>
|
||
<div class="foot"><span>Barlow 900 · IBM Plex Mono</span><span>1920 × 1080</span></div>
|
||
</section>
|
||
|
||
<!-- PALETTE -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="k">01</span>
|
||
<h2>palette</h2>
|
||
<span class="sp"></span><span class="num">TWO REGISTERS</span>
|
||
</div>
|
||
<div class="swatches">
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--ink)"></div>
|
||
<div class="meta">
|
||
<div class="name">ink black</div>
|
||
<div class="hex">#111111</div>
|
||
<div class="role">Dark canvas + ink on orange.</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--orange)"></div>
|
||
<div class="meta">
|
||
<div class="name">fire orange</div>
|
||
<div class="hex">#E85D26</div>
|
||
<div class="role">The accent and the environment.</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--cream)"></div>
|
||
<div class="meta">
|
||
<div class="name">cream</div>
|
||
<div class="hex">#F0ECE5</div>
|
||
<div class="role">Text on dark — never pure white.</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--cream-muted)"></div>
|
||
<div class="meta">
|
||
<div class="name">cream muted</div>
|
||
<div class="hex">#888880</div>
|
||
<div class="role">Secondary text on dark.</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--cream-hint)"></div>
|
||
<div class="meta">
|
||
<div class="name">cream hint</div>
|
||
<div class="hex">#505048</div>
|
||
<div class="role">Tertiary / axis labels.</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--ink-alt)"></div>
|
||
<div class="meta">
|
||
<div class="name">ink alt</div>
|
||
<div class="hex">#1A1A18</div>
|
||
<div class="role">Slightly raised dark surface.</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--border-dark)"></div>
|
||
<div class="meta">
|
||
<div class="name">border dark</div>
|
||
<div class="hex">#282826</div>
|
||
<div class="role">The 1px hairline on dark.</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--orange); opacity: 0.2"></div>
|
||
<div class="meta">
|
||
<div class="name">ink-on-orange</div>
|
||
<div class="hex">17,17,17 · .75–.20</div>
|
||
<div class="role">Muted ink tones on orange.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TYPOGRAPHY -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="k">02</span>
|
||
<h2>typography</h2>
|
||
<span class="sp"></span><span class="num">BARLOW · PLEX MONO</span>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">display</div>
|
||
<div class="m">Barlow 900 · 13vw · lowercase · −.04em</div>
|
||
</div>
|
||
<div class="spec"><span class="disp" style="font-size: 104px">shout.</span></div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">h2</div>
|
||
<div class="m">Barlow 700 · primary headline</div>
|
||
</div>
|
||
<div class="spec">
|
||
<span class="disp" style="font-weight: 700; font-size: 58px; letter-spacing: -0.02em"
|
||
>type as graphic primitive</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">stat-value</div>
|
||
<div class="m">Barlow 900 · orange on dark</div>
|
||
</div>
|
||
<div class="spec">
|
||
<span class="disp" style="font-size: 80px; color: var(--orange)">94%</span>
|
||
</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">body</div>
|
||
<div class="m">Barlow 400 · cream · line 1.6</div>
|
||
</div>
|
||
<div class="spec">
|
||
<p style="font-size: 18px; line-height: 1.6; max-width: 660px; color: var(--cream)">
|
||
Barlow carries every text role — the expressive range comes from weight and size, not a
|
||
second face.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="type-row" style="border-bottom: 0">
|
||
<div>
|
||
<div class="tok">label</div>
|
||
<div class="m">IBM Plex Mono 500 · uppercase · 0.14em</div>
|
||
</div>
|
||
<div class="spec">
|
||
<span class="mono" style="font-size: 14px; color: var(--orange)"
|
||
>Kicker / Catalogue Mark</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COMPONENTS -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="k">03</span>
|
||
<h2>components</h2>
|
||
<span class="sp"></span><span class="num">FLAT · ONE ACCENT</span>
|
||
</div>
|
||
|
||
<div class="cgrid">
|
||
<div class="s5">
|
||
<div class="cnote">Stat cards — top border only</div>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 32px">
|
||
<div class="statcard">
|
||
<div class="v">187px</div>
|
||
<div class="l">Display at 13vw</div>
|
||
<div class="n">Graphic primitive</div>
|
||
</div>
|
||
<div class="statcard">
|
||
<div class="v">2</div>
|
||
<div class="l">Color registers</div>
|
||
<div class="n">Dark / orange</div>
|
||
</div>
|
||
</div>
|
||
<div class="cnote" style="margin-top: 36px">Bullet list — capped at three</div>
|
||
<ul class="blist">
|
||
<li>one statement per slide</li>
|
||
<li>one accent color</li>
|
||
<li>breathing room</li>
|
||
</ul>
|
||
</div>
|
||
<div class="s3">
|
||
<div class="cnote">Vertical bars — one accent</div>
|
||
<div class="barchart">
|
||
<div class="bar" style="height: 52%"></div>
|
||
<div class="bar" style="height: 70%"></div>
|
||
<div class="bar accent" style="height: 100%"></div>
|
||
<div class="bar" style="height: 44%"></div>
|
||
</div>
|
||
<div class="barlabels"><span>q1</span><span>q2</span><span>q3</span><span>q4</span></div>
|
||
<div class="cnote" style="margin-top: 32px">Mono tag</div>
|
||
<span class="tag">Section / 03</span>
|
||
</div>
|
||
<div class="s4">
|
||
<div class="cnote">Compare panels — orange payoff</div>
|
||
<div class="compare">
|
||
<div class="l">
|
||
<div class="cl">Before</div>
|
||
<div class="ch">document</div>
|
||
<div class="cx">Dark register carries the evidence.</div>
|
||
</div>
|
||
<div class="r">
|
||
<div class="cl">After</div>
|
||
<div class="ch">declare</div>
|
||
<div class="cx">Orange register makes the call.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COMPOSITIONS -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="k">04</span>
|
||
<h2>frame compositions</h2>
|
||
<span class="sp"></span><span class="num">TRUE 16:9 · CQW</span>
|
||
</div>
|
||
<div class="gallery">
|
||
<div class="fw">
|
||
<div class="flabel"><b>Cover</b><span>· identity · orange register · left</span></div>
|
||
<div class="frame orange bf1">
|
||
<div class="topnum">No. 01 / 06</div>
|
||
<div class="body">
|
||
<div class="rule"></div>
|
||
<div class="kick">Protest-Poster Editorial</div>
|
||
<h3>ink on fire.</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel">
|
||
<b>Statement</b><span>· declarative · dark register · left</span>
|
||
</div>
|
||
<div class="frame bf2">
|
||
<div class="body">
|
||
<div class="kick">The Thesis</div>
|
||
<h3>type is the <em>composition.</em></h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel"><b>Stat Grid</b><span>· data · dark · the dense frame</span></div>
|
||
<div class="frame bf3">
|
||
<div class="body">
|
||
<div class="top"><span class="k">By The Numbers</span><span>FIG.03</span></div>
|
||
<div class="row">
|
||
<div class="sc">
|
||
<div class="v">13vw</div>
|
||
<div class="l">Display scale</div>
|
||
<div class="n">≈187px @1440</div>
|
||
</div>
|
||
<div class="sc">
|
||
<div class="v">3</div>
|
||
<div class="l">Bullets max</div>
|
||
<div class="n">Impact over info</div>
|
||
</div>
|
||
<div class="sc">
|
||
<div class="v">1</div>
|
||
<div class="l">Accent color</div>
|
||
<div class="n">Fire orange only</div>
|
||
</div>
|
||
</div>
|
||
<div class="foot"><span>Broadside</span><span>03 / 06</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel"><b>Fadelist</b><span>· narrative · before/during/after</span></div>
|
||
<div class="frame bf4">
|
||
<div class="body">
|
||
<div class="stack">
|
||
<div>past.</div>
|
||
<div>present.</div>
|
||
<div>future.</div>
|
||
</div>
|
||
<div class="title">the<br />arc.</div>
|
||
</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="num">INK ON FIRE</span>
|
||
</div>
|
||
<div class="dos">
|
||
<div class="do-card do">
|
||
<h4>do</h4>
|
||
<ul>
|
||
<li>Set every Barlow display in lowercase weight 900, negative-tracked.</li>
|
||
<li>
|
||
Make orange the full environment on declarative frames, the lone accent on dark.
|
||
</li>
|
||
<li>Keep chrome in IBM Plex Mono uppercase, 0.14em tracked.</li>
|
||
<li>Cap bullet lists at three; one statement per frame.</li>
|
||
<li>Build hierarchy from weight, size, and 1px hairlines only.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="do-card dont">
|
||
<h4>don't</h4>
|
||
<ul>
|
||
<li>Never uppercase Barlow display — lowercase is the identity.</li>
|
||
<li>No second accent color; no cream text on orange (ink on fire).</li>
|
||
<li>No drop shadows, rounded surfaces, or gradient grounds.</li>
|
||
<li>No serif companion; chrome is never set in Barlow.</li>
|
||
<li>Don't pack two display moments into one frame.</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(--cream);
|
||
--cap-accent: var(--orange);
|
||
--cap-accent-2: var(--orange);
|
||
}
|
||
.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: 82cqw;
|
||
padding: 1.2cqw 3cqw 1.5cqw;
|
||
background: var(--cap-ink);
|
||
border: 1px solid var(--cap-accent);
|
||
border-radius: 0;
|
||
}
|
||
.capdemo .line {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 0.04em 0.3em;
|
||
font-family: var(--sans);
|
||
font-weight: 900;
|
||
font-size: 3.2cqw;
|
||
line-height: 1.02;
|
||
letter-spacing: -0.03em;
|
||
text-transform: lowercase;
|
||
}
|
||
.capdemo .w {
|
||
display: inline-block;
|
||
padding: 0 0.08em;
|
||
color: color-mix(in srgb, var(--cap-canvas) 42%, var(--cap-ink));
|
||
}
|
||
.capdemo .w.spoken {
|
||
color: var(--cap-canvas);
|
||
}
|
||
.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 var(--border-dark);
|
||
z-index: 3;
|
||
}
|
||
.capdemo .bandtag {
|
||
position: absolute;
|
||
right: 3cqw;
|
||
bottom: calc(16.67cqh + 0.7cqw);
|
||
font-family: var(--mono);
|
||
text-transform: uppercase;
|
||
font-size: 0.9cqw;
|
||
letter-spacing: 0.1em;
|
||
color: var(--cream-hint);
|
||
z-index: 4;
|
||
}
|
||
</style>
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="k">06</span>
|
||
<h2>captions</h2>
|
||
<span class="sp"></span><span class="num">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>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel">
|
||
<b>Settled line</b><span>· all spoken · orange block 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>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="foot">
|
||
<span class="l">broadside</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="#E85D26" />
|
||
<rect x="14" y="40" width="26" height="4" fill="#111111" />
|
||
<text x="14" y="68" font-family="Arial" font-weight="900" font-size="22" fill="#111111">
|
||
ink.
|
||
</text>
|
||
</svg>
|
||
</template>
|
||
</body>
|
||
</html>
|