mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-10 22:20:14 +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>
1469 lines
46 KiB
HTML
1469 lines
46 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>Cobalt Grid</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=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,400&family=Hanken+Grotesk:wght@400;600&family=DM+Mono:wght@400&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<style id="ds-tokens">
|
||
:root {
|
||
--paper: #f0ebde;
|
||
--paper-2: #e6e0ce;
|
||
--ink: #1f2be0;
|
||
--ink-soft: #5560e5;
|
||
--grid: rgba(31, 43, 224, 0.1);
|
||
--ink-faint: rgba(31, 43, 224, 0.18);
|
||
--serif: "Newsreader", Georgia, serif;
|
||
--sans: "Hanken Grotesk", sans-serif;
|
||
--mono: "DM Mono", ui-monospace, monospace;
|
||
}
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
html {
|
||
background: #0c0c14;
|
||
}
|
||
body {
|
||
background: var(--paper);
|
||
background-image:
|
||
linear-gradient(to right, var(--grid) 1px, transparent 1px),
|
||
linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
|
||
background-size: 40px 40px;
|
||
color: var(--ink);
|
||
font-family: var(--sans);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
.serif {
|
||
font-family: var(--serif);
|
||
font-weight: 400;
|
||
}
|
||
.micro {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
}
|
||
.mono {
|
||
font-family: var(--mono);
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
section {
|
||
padding: 110px 80px;
|
||
position: relative;
|
||
}
|
||
.sec-head {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 20px;
|
||
border-bottom: 1.5px solid var(--ink);
|
||
padding-bottom: 16px;
|
||
margin-bottom: 56px;
|
||
}
|
||
.sec-head .tag {
|
||
font-family: var(--mono);
|
||
font-size: 13px;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.sec-head h2 {
|
||
font-family: var(--serif);
|
||
font-weight: 400;
|
||
font-size: 54px;
|
||
line-height: 0.95;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.sec-head .sp {
|
||
flex: 1;
|
||
}
|
||
.sec-head .lab {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* pixel-glitch column (CSS, stair-stepped scanline blocks) */
|
||
.glitch {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 0;
|
||
pointer-events: none;
|
||
}
|
||
.glitch .step {
|
||
background-image: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 8px);
|
||
background-color: var(--paper);
|
||
}
|
||
/* QR block */
|
||
.qr {
|
||
display: grid;
|
||
grid-template-columns: repeat(8, 1fr);
|
||
grid-template-rows: repeat(8, 1fr);
|
||
gap: 1.5px;
|
||
background: var(--paper);
|
||
padding: 4px;
|
||
box-shadow: 0 0 0 1.5px var(--paper);
|
||
}
|
||
.qr i {
|
||
background: var(--grid);
|
||
}
|
||
.qr i.on {
|
||
background: var(--ink);
|
||
}
|
||
|
||
/* COVER */
|
||
.cover {
|
||
min-height: 100vh;
|
||
padding: 0;
|
||
position: relative;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.cover .hair-t {
|
||
position: absolute;
|
||
left: 80px;
|
||
right: 80px;
|
||
top: 28px;
|
||
height: 1.5px;
|
||
background: var(--ink);
|
||
}
|
||
.cover .hair-b {
|
||
position: absolute;
|
||
left: 80px;
|
||
right: 80px;
|
||
bottom: 30px;
|
||
height: 1.5px;
|
||
background: var(--ink);
|
||
}
|
||
.cover .top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
padding: 64px 80px 0;
|
||
}
|
||
.cover .top .lab {
|
||
font-family: var(--mono);
|
||
font-size: 14px;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.cover .stage {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 0 80px;
|
||
position: relative;
|
||
z-index: 4;
|
||
}
|
||
.cover .kick {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.18em;
|
||
font-size: 15px;
|
||
margin-bottom: 28px;
|
||
}
|
||
.cover h1 {
|
||
font-family: var(--serif);
|
||
font-weight: 400;
|
||
font-size: clamp(58px, 8.2vw, 142px);
|
||
line-height: 0.92;
|
||
letter-spacing: -0.01em;
|
||
max-width: 66%;
|
||
}
|
||
.cover .ed {
|
||
font-family: var(--serif);
|
||
font-weight: 400;
|
||
font-style: italic;
|
||
font-size: clamp(22px, 2.5vw, 38px);
|
||
line-height: 1.15;
|
||
color: var(--ink-soft);
|
||
margin-top: 22px;
|
||
max-width: 52%;
|
||
}
|
||
.cover .foot {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 80px 64px;
|
||
font-family: var(--mono);
|
||
font-size: 13px;
|
||
letter-spacing: 0.05em;
|
||
position: relative;
|
||
z-index: 4;
|
||
}
|
||
.cover .glitch {
|
||
right: 0;
|
||
width: 30vw;
|
||
opacity: 0.7;
|
||
z-index: 2;
|
||
}
|
||
.cover .qrwrap {
|
||
position: absolute;
|
||
top: 124px;
|
||
right: 80px;
|
||
width: 88px;
|
||
height: 88px;
|
||
z-index: 5;
|
||
}
|
||
|
||
/* PALETTE */
|
||
.swatches {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 0;
|
||
border: 1.5px solid var(--ink);
|
||
}
|
||
.sw {
|
||
border-right: 1.5px solid var(--ink);
|
||
border-bottom: 1.5px solid var(--ink);
|
||
}
|
||
.sw:nth-child(3n) {
|
||
border-right: 0;
|
||
}
|
||
.sw:nth-child(n + 4) {
|
||
border-bottom: 0;
|
||
}
|
||
.sw .chip {
|
||
height: 140px;
|
||
border-bottom: 1.5px solid var(--ink);
|
||
}
|
||
.sw .meta {
|
||
padding: 18px 22px;
|
||
background: var(--paper);
|
||
}
|
||
.sw .name {
|
||
font-family: var(--serif);
|
||
font-size: 28px;
|
||
line-height: 1;
|
||
}
|
||
.sw .hex {
|
||
font-family: var(--mono);
|
||
font-size: 12px;
|
||
margin-top: 6px;
|
||
}
|
||
.sw .role {
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
color: var(--ink);
|
||
margin-top: 10px;
|
||
font-family: var(--sans);
|
||
}
|
||
|
||
/* TYPE */
|
||
.type-row {
|
||
display: grid;
|
||
grid-template-columns: 240px 1fr;
|
||
border-bottom: 1px solid var(--ink-faint);
|
||
align-items: center;
|
||
padding: 8px 0;
|
||
}
|
||
.type-row .lbl .tok {
|
||
font-family: var(--mono);
|
||
font-size: 13px;
|
||
}
|
||
.type-row .lbl .m {
|
||
font-family: var(--sans);
|
||
font-size: 11px;
|
||
color: var(--ink-soft);
|
||
margin-top: 6px;
|
||
line-height: 1.5;
|
||
}
|
||
.type-row .spec {
|
||
padding: 20px 0 20px 36px;
|
||
border-left: 1px solid var(--ink-faint);
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* COMPONENTS */
|
||
.cnote {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
font-size: 12px;
|
||
margin-bottom: 18px;
|
||
}
|
||
.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;
|
||
}
|
||
/* topbar */
|
||
.topbar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
border-bottom: 1.5px solid var(--ink);
|
||
padding-bottom: 14px;
|
||
}
|
||
.topbar .h {
|
||
font-family: var(--serif);
|
||
font-size: 40px;
|
||
line-height: 1;
|
||
}
|
||
.topbar .t {
|
||
font-family: var(--mono);
|
||
font-size: 13px;
|
||
}
|
||
/* ledger */
|
||
.ledger {
|
||
margin-top: 8px;
|
||
}
|
||
.lrow {
|
||
display: grid;
|
||
grid-template-columns: 64px 0.7fr 1.5fr 0.6fr;
|
||
gap: 24px;
|
||
padding: 16px 0;
|
||
border-bottom: 1px solid var(--ink-faint);
|
||
align-items: baseline;
|
||
}
|
||
.lrow.head {
|
||
border-bottom: 1.5px solid var(--ink);
|
||
}
|
||
.lrow .num {
|
||
font-family: var(--mono);
|
||
font-size: 14px;
|
||
}
|
||
.lrow .nm {
|
||
font-family: var(--serif);
|
||
font-size: 24px;
|
||
line-height: 1.1;
|
||
}
|
||
.lrow .ds {
|
||
font-family: var(--sans);
|
||
font-size: 14px;
|
||
color: var(--ink);
|
||
line-height: 1.45;
|
||
}
|
||
.lrow .dl {
|
||
font-family: var(--mono);
|
||
font-size: 14px;
|
||
text-align: right;
|
||
}
|
||
.lrow.head span {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
font-size: 11px;
|
||
}
|
||
/* pixel stack chart */
|
||
.pchart {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 14px;
|
||
height: 200px;
|
||
border-bottom: 1.5px solid var(--ink);
|
||
padding-bottom: 0;
|
||
}
|
||
.pstack {
|
||
display: flex;
|
||
flex-direction: column-reverse;
|
||
gap: 3px;
|
||
flex: 1;
|
||
}
|
||
.pstack .cell {
|
||
height: 12px;
|
||
background: var(--grid);
|
||
}
|
||
.pstack .cell.on {
|
||
background: var(--ink);
|
||
}
|
||
.pticks {
|
||
display: flex;
|
||
gap: 14px;
|
||
margin-top: 10px;
|
||
}
|
||
.pticks span {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-family: var(--mono);
|
||
font-size: 12px;
|
||
}
|
||
/* vertical stack labels */
|
||
.vstack {
|
||
display: flex;
|
||
gap: 28px;
|
||
font-family: var(--mono);
|
||
font-size: 14px;
|
||
}
|
||
.vstack span {
|
||
writing-mode: vertical-rl;
|
||
text-orientation: mixed;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
/* 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(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
font-size: 12px;
|
||
color: var(--ink-soft);
|
||
}
|
||
.fw .flabel b {
|
||
color: var(--ink);
|
||
}
|
||
.frame {
|
||
aspect-ratio: 16/9;
|
||
container-type: size;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: var(--paper);
|
||
background-image:
|
||
linear-gradient(to right, var(--grid) 1px, transparent 1px),
|
||
linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
|
||
background-size: 2cqw 2cqw;
|
||
box-shadow: 0 0 0 1px var(--ink-faint);
|
||
}
|
||
.frame .ht {
|
||
position: absolute;
|
||
left: 4cqw;
|
||
right: 4cqw;
|
||
top: 3cqw;
|
||
height: 0.12cqw;
|
||
background: var(--ink);
|
||
z-index: 5;
|
||
}
|
||
.frame .hb {
|
||
position: absolute;
|
||
left: 4cqw;
|
||
right: 4cqw;
|
||
bottom: 3cqw;
|
||
height: 0.12cqw;
|
||
background: var(--ink);
|
||
z-index: 5;
|
||
}
|
||
.frame .pg {
|
||
position: absolute;
|
||
right: 4cqw;
|
||
bottom: 4cqw;
|
||
font-family: var(--mono);
|
||
font-size: 1cqw;
|
||
z-index: 6;
|
||
}
|
||
.frame > .body {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 4;
|
||
}
|
||
|
||
/* f1 cover */
|
||
.cf1 .body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 0 5cqw;
|
||
}
|
||
.cf1 .kick {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.2cqw;
|
||
font-size: 1.1cqw;
|
||
margin-bottom: 2cqw;
|
||
}
|
||
.cf1 h3 {
|
||
font-family: var(--serif);
|
||
font-size: 11cqw;
|
||
line-height: 0.9;
|
||
letter-spacing: -0.1cqw;
|
||
max-width: 62cqw;
|
||
}
|
||
.cf1 .ed {
|
||
font-family: var(--serif);
|
||
font-style: italic;
|
||
font-size: 2.6cqw;
|
||
color: var(--ink-soft);
|
||
margin-top: 1.6cqw;
|
||
max-width: 50cqw;
|
||
}
|
||
.cf1 .glitch {
|
||
right: 0;
|
||
width: 26cqw;
|
||
z-index: 2;
|
||
opacity: 0.7;
|
||
}
|
||
.cf1 .qr {
|
||
position: absolute;
|
||
top: 6cqw;
|
||
right: 5cqw;
|
||
width: 9cqw;
|
||
height: 9cqw;
|
||
z-index: 6;
|
||
gap: 0.2cqw;
|
||
padding: 0.4cqw;
|
||
}
|
||
|
||
/* f2 index ledger (dense) */
|
||
.cf2 .body {
|
||
padding: 7cqw 5cqw 6cqw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.cf2 .tb {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
border-bottom: 0.12cqw solid var(--ink);
|
||
padding-bottom: 1cqw;
|
||
margin-bottom: 2.2cqw;
|
||
}
|
||
.cf2 .tb .h {
|
||
font-family: var(--serif);
|
||
font-size: 3.8cqw;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
}
|
||
.cf2 .tb .t {
|
||
font-family: var(--mono);
|
||
font-size: 1.1cqw;
|
||
}
|
||
.cf2 .r {
|
||
display: grid;
|
||
grid-template-columns: 5cqw 1fr;
|
||
gap: 2cqw;
|
||
padding: 1.1cqw 0;
|
||
border-bottom: 0.06cqw solid var(--ink-faint);
|
||
align-items: baseline;
|
||
}
|
||
.cf2 .r .n {
|
||
font-family: var(--mono);
|
||
font-size: 1.2cqw;
|
||
}
|
||
.cf2 .r .nm {
|
||
font-family: var(--serif);
|
||
font-size: 2.4cqw;
|
||
line-height: 1;
|
||
}
|
||
.cf2 .r .dx {
|
||
font-family: var(--sans);
|
||
font-size: 1.1cqw;
|
||
color: var(--ink);
|
||
margin-top: 0.4cqw;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* f3 chapter (sparse) */
|
||
.cf3 .body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 0 6cqw;
|
||
}
|
||
.cf3 .ix {
|
||
font-family: var(--mono);
|
||
font-size: 1.4cqw;
|
||
margin-bottom: 2cqw;
|
||
}
|
||
.cf3 h3 {
|
||
font-family: var(--serif);
|
||
font-size: 9cqw;
|
||
line-height: 0.98;
|
||
letter-spacing: -0.05cqw;
|
||
}
|
||
.cf3 .lede {
|
||
font-family: var(--sans);
|
||
font-size: 1.5cqw;
|
||
line-height: 1.5;
|
||
color: var(--ink);
|
||
max-width: 42cqw;
|
||
margin-top: 2.4cqw;
|
||
}
|
||
.cf3 .glitch {
|
||
left: 0;
|
||
width: 14cqw;
|
||
z-index: 2;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* f4 data chart */
|
||
.cf4 .body {
|
||
padding: 7cqw 5cqw 6cqw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.cf4 .tb {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
border-bottom: 0.12cqw solid var(--ink);
|
||
padding-bottom: 1cqw;
|
||
margin-bottom: 2.4cqw;
|
||
}
|
||
.cf4 .tb .h {
|
||
font-family: var(--serif);
|
||
font-size: 4.2cqw;
|
||
line-height: 1;
|
||
}
|
||
.cf4 .tb .t {
|
||
font-family: var(--mono);
|
||
font-size: 1.1cqw;
|
||
}
|
||
.cf4 .chart {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 1.4cqw;
|
||
flex: 1;
|
||
border-bottom: 0.12cqw solid var(--ink);
|
||
}
|
||
.cf4 .st {
|
||
display: flex;
|
||
flex-direction: column-reverse;
|
||
gap: 0.4cqw;
|
||
flex: 1;
|
||
}
|
||
.cf4 .st .c {
|
||
height: 1.4cqw;
|
||
background: var(--grid);
|
||
}
|
||
.cf4 .st .c.on {
|
||
background: var(--ink);
|
||
}
|
||
.cf4 .tk {
|
||
display: flex;
|
||
gap: 1.4cqw;
|
||
margin-top: 1cqw;
|
||
}
|
||
.cf4 .tk span {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-family: var(--mono);
|
||
font-size: 1cqw;
|
||
}
|
||
|
||
/* PRINCIPLES */
|
||
.dos {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 0;
|
||
border: 1.5px solid var(--ink);
|
||
}
|
||
.do-card {
|
||
padding: 40px;
|
||
}
|
||
.do-card.do {
|
||
border-right: 1.5px solid var(--ink);
|
||
}
|
||
.do-card h4 {
|
||
font-family: var(--serif);
|
||
font-size: 36px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.do-card ul {
|
||
list-style: none;
|
||
}
|
||
.do-card li {
|
||
font-size: 15px;
|
||
line-height: 1.55;
|
||
padding-left: 24px;
|
||
position: relative;
|
||
margin-bottom: 14px;
|
||
color: var(--ink);
|
||
font-family: var(--sans);
|
||
}
|
||
.do-card li::before {
|
||
position: absolute;
|
||
left: 0;
|
||
font-family: var(--mono);
|
||
}
|
||
.do-card.do li::before {
|
||
content: "+";
|
||
}
|
||
.do-card.dont li::before {
|
||
content: "\2715";
|
||
opacity: 0.55;
|
||
}
|
||
|
||
.foot {
|
||
padding: 56px 80px;
|
||
border-top: 1.5px 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(--mono);
|
||
font-size: 13px;
|
||
}
|
||
@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=Newsreader:ital,wght@0,400;0,500;0,700;1,400&display=swap"
|
||
/>
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap"
|
||
/>
|
||
<style id="ft-override">
|
||
:root {
|
||
--primary: #f0ebde !important;
|
||
--secondary: #1f2be0 !important;
|
||
--tertiary: #e6e0ce !important;
|
||
--accent: #5560e5 !important;
|
||
--f-disp: "Newsreader", sans-serif !important;
|
||
--f-body: "Hanken Grotesk", sans-serif !important;
|
||
--paper: #f0ebde !important;
|
||
--paper-2: #e6e0ce !important;
|
||
--ink: #1f2be0 !important;
|
||
--ink-soft: #5560e5 !important;
|
||
--serif: "Newsreader", sans-serif !important;
|
||
--sans: "Hanken Grotesk", sans-serif !important;
|
||
--grid: rgba(31, 43, 224, 0.1) !important;
|
||
--ink-faint: rgba(31, 43, 224, 0.18) !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- COVER -->
|
||
<section class="cover">
|
||
<div class="hair-t"></div>
|
||
<div class="hair-b"></div>
|
||
<div class="glitch">
|
||
<div class="step" style="width: 60%; height: 18%; align-self: flex-end"></div>
|
||
<div class="step" style="width: 100%; height: 16%; align-self: flex-end"></div>
|
||
<div class="step" style="width: 44%; height: 14%; align-self: flex-end"></div>
|
||
<div class="step" style="width: 78%; height: 20%; align-self: flex-end"></div>
|
||
<div class="step" style="width: 34%; height: 12%; align-self: flex-end"></div>
|
||
</div>
|
||
<div class="qrwrap">
|
||
<div class="qr">
|
||
<i class="on"></i><i></i><i class="on"></i><i class="on"></i><i></i><i class="on"></i
|
||
><i></i><i class="on"></i> <i></i><i class="on"></i><i></i><i class="on"></i
|
||
><i class="on"></i><i></i><i class="on"></i><i></i> <i class="on"></i><i></i
|
||
><i class="on"></i><i></i><i></i><i class="on"></i><i></i><i class="on"></i> <i></i
|
||
><i class="on"></i><i></i><i class="on"></i><i class="on"></i><i></i><i class="on"></i
|
||
><i></i> <i class="on"></i><i></i><i class="on"></i><i></i><i class="on"></i><i></i
|
||
><i class="on"></i><i></i> <i></i><i class="on"></i><i></i><i class="on"></i><i></i
|
||
><i class="on"></i><i></i><i class="on"></i> <i class="on"></i><i></i><i class="on"></i
|
||
><i class="on"></i><i></i><i class="on"></i><i></i><i></i> <i></i><i class="on"></i><i></i
|
||
><i></i><i class="on"></i><i></i><i class="on"></i><i class="on"></i>
|
||
</div>
|
||
</div>
|
||
<div class="top">
|
||
<span class="lab">COBALT GRID / TREND REPORT</span>
|
||
<span class="lab">VOL.01 — 2026</span>
|
||
</div>
|
||
<div class="stage">
|
||
<div class="kick">Two-Color Risograph Monograph</div>
|
||
<h1>The Grid Is the Canvas.</h1>
|
||
<div class="ed">
|
||
Cream paper, electric cobalt, and graph-paper drafting tone behind every frame.
|
||
</div>
|
||
</div>
|
||
<div class="foot">
|
||
<span>FRAME SYSTEM — NEWSREADER · HANKEN · DM MONO</span>
|
||
<span>01 / 06</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PALETTE -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="tag">01</span>
|
||
<h2>Palette</h2>
|
||
<span class="sp"></span><span class="lab">Strictly Two-Color</span>
|
||
</div>
|
||
<div class="swatches">
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--paper)"></div>
|
||
<div class="meta">
|
||
<div class="name">Paper</div>
|
||
<div class="hex">#F0EBDE</div>
|
||
<div class="role">The canvas — warm newsprint cream.</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--ink)"></div>
|
||
<div class="meta">
|
||
<div class="name">Ink (Cobalt)</div>
|
||
<div class="hex">#1F2BE0</div>
|
||
<div class="role">The only ink — type, rules, grid, decoration.</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--ink-soft)"></div>
|
||
<div class="meta">
|
||
<div class="name">Ink Soft</div>
|
||
<div class="hex">#5560E5</div>
|
||
<div class="role">Secondary cobalt for editorial subtitles.</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--paper-2)"></div>
|
||
<div class="meta">
|
||
<div class="name">Paper 2</div>
|
||
<div class="hex">#E6E0CE</div>
|
||
<div class="role">Deeper cream for subtle region shifts.</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div
|
||
class="chip"
|
||
style="
|
||
background: var(--paper);
|
||
background-image:
|
||
linear-gradient(to right, var(--grid) 1px, transparent 1px),
|
||
linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
|
||
background-size: 22px 22px;
|
||
"
|
||
></div>
|
||
<div class="meta">
|
||
<div class="name">Grid 10%</div>
|
||
<div class="hex">cobalt · .10</div>
|
||
<div class="role">Permanent graph paper + chart "off" cells.</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div
|
||
class="chip"
|
||
style="
|
||
background: var(--paper);
|
||
box-shadow:
|
||
inset 0 -1px 0 var(--ink-faint),
|
||
inset 0 60px 0 var(--ink-faint);
|
||
"
|
||
></div>
|
||
<div class="meta">
|
||
<div class="name">Ink Faint 18%</div>
|
||
<div class="hex">cobalt · .18</div>
|
||
<div class="role">Faint row dividers in dense lists.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TYPOGRAPHY -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="tag">02</span>
|
||
<h2>Typography</h2>
|
||
<span class="sp"></span><span class="lab">Serif · Sans · Mono</span>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="lbl">
|
||
<div class="tok">display-hero</div>
|
||
<div class="m">Newsreader 400 · up to 18vh · -0.008em</div>
|
||
</div>
|
||
<div class="spec">
|
||
<span class="serif" style="font-size: 104px; line-height: 0.9; letter-spacing: -0.01em"
|
||
>Trend Index</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="lbl">
|
||
<div class="tok">vbig-numeral</div>
|
||
<div class="m">Newsreader 400 · to 240px · -0.015em</div>
|
||
</div>
|
||
<div class="spec">
|
||
<span class="serif" style="font-size: 120px; line-height: 0.9; letter-spacing: -0.02em"
|
||
>240</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="lbl">
|
||
<div class="tok">headline</div>
|
||
<div class="m">Newsreader 400 · section header</div>
|
||
</div>
|
||
<div class="spec"><span class="serif" style="font-size: 60px">The Cobalt Ledger</span></div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="lbl">
|
||
<div class="tok">body</div>
|
||
<div class="m">Hanken Grotesk 400 · line 1.5</div>
|
||
</div>
|
||
<div class="spec">
|
||
<p style="font-size: 16px; line-height: 1.5; max-width: 680px; font-family: var(--sans)">
|
||
Hanken Grotesk carries every body paragraph and supporting line — the quiet sans against
|
||
the serif statement.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="lbl">
|
||
<div class="tok">micro</div>
|
||
<div class="m">Hanken 600 · 0.16em · uppercase</div>
|
||
</div>
|
||
<div class="spec">
|
||
<span class="micro" style="font-size: 14px">Section Label / Lab-Tag</span>
|
||
</div>
|
||
</div>
|
||
<div class="type-row" style="border-bottom: 0">
|
||
<div class="lbl">
|
||
<div class="tok">mono-tag</div>
|
||
<div class="m">DM Mono 400 · 0.05em</div>
|
||
</div>
|
||
<div class="spec">
|
||
<span class="mono" style="font-size: 15px">CAT—001 · 2026.Q2 · ↑ 4.2</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COMPONENTS -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="tag">03</span>
|
||
<h2>Components</h2>
|
||
<span class="sp"></span><span class="lab">Flat · Structural Rules</span>
|
||
</div>
|
||
|
||
<div class="cgrid">
|
||
<div class="s7">
|
||
<div class="cnote">Topbar rule + ledger rows</div>
|
||
<div class="topbar">
|
||
<span class="h">Trend Ledger</span><span class="t">LAB—02 / N=08</span>
|
||
</div>
|
||
<div class="ledger">
|
||
<div class="lrow head">
|
||
<span>No.</span><span>Signal</span><span>Reading</span
|
||
><span style="text-align: right">Δ</span>
|
||
</div>
|
||
<div class="lrow">
|
||
<span class="num">001</span><span class="nm">Risograph</span
|
||
><span class="ds">Two-color print revival in editorial design.</span
|
||
><span class="dl">↑ 4.2</span>
|
||
</div>
|
||
<div class="lrow">
|
||
<span class="num">002</span><span class="nm">Graph Tone</span
|
||
><span class="ds">Drafting-paper grids as permanent canvas.</span
|
||
><span class="dl">↑ 3.1</span>
|
||
</div>
|
||
<div class="lrow">
|
||
<span class="num">003</span><span class="nm">Pixel Glitch</span
|
||
><span class="ds">Stair-stepped scanline decoration.</span
|
||
><span class="dl" style="opacity: 0.6">— 0.0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="s5">
|
||
<div class="cnote">Pixel-stack bar chart</div>
|
||
<div class="pchart">
|
||
<div class="pstack">
|
||
<div class="cell on"></div>
|
||
<div class="cell on"></div>
|
||
<div class="cell on"></div>
|
||
<div class="cell"></div>
|
||
<div class="cell"></div>
|
||
<div class="cell"></div>
|
||
</div>
|
||
<div class="pstack">
|
||
<div class="cell on"></div>
|
||
<div class="cell on"></div>
|
||
<div class="cell on"></div>
|
||
<div class="cell on"></div>
|
||
<div class="cell on"></div>
|
||
<div class="cell"></div>
|
||
</div>
|
||
<div class="pstack">
|
||
<div class="cell on"></div>
|
||
<div class="cell on"></div>
|
||
<div class="cell"></div>
|
||
<div class="cell"></div>
|
||
<div class="cell"></div>
|
||
<div class="cell"></div>
|
||
</div>
|
||
<div class="pstack">
|
||
<div class="cell on"></div>
|
||
<div class="cell on"></div>
|
||
<div class="cell on"></div>
|
||
<div class="cell on"></div>
|
||
<div class="cell"></div>
|
||
<div class="cell"></div>
|
||
</div>
|
||
<div class="pstack">
|
||
<div class="cell on"></div>
|
||
<div class="cell on"></div>
|
||
<div class="cell on"></div>
|
||
<div class="cell on"></div>
|
||
<div class="cell on"></div>
|
||
<div class="cell on"></div>
|
||
</div>
|
||
<div class="pstack">
|
||
<div class="cell on"></div>
|
||
<div class="cell on"></div>
|
||
<div class="cell"></div>
|
||
<div class="cell"></div>
|
||
<div class="cell"></div>
|
||
<div class="cell"></div>
|
||
</div>
|
||
</div>
|
||
<div class="pticks">
|
||
<span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span><span>Q5</span
|
||
><span>Q6</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cgrid" style="margin-bottom: 0">
|
||
<div class="s4">
|
||
<div class="cnote">QR-block patch</div>
|
||
<div class="qr" style="width: 120px; height: 120px">
|
||
<i class="on"></i><i></i><i class="on"></i><i class="on"></i><i></i><i class="on"></i
|
||
><i></i><i class="on"></i> <i></i><i class="on"></i><i></i><i class="on"></i
|
||
><i class="on"></i><i></i><i class="on"></i><i></i> <i class="on"></i><i></i
|
||
><i class="on"></i><i></i><i></i><i class="on"></i><i></i><i class="on"></i> <i></i
|
||
><i class="on"></i><i></i><i class="on"></i><i class="on"></i><i></i><i class="on"></i
|
||
><i></i> <i class="on"></i><i></i><i class="on"></i><i></i><i class="on"></i><i></i
|
||
><i class="on"></i><i></i> <i></i><i class="on"></i><i></i><i class="on"></i><i></i
|
||
><i class="on"></i><i></i><i class="on"></i> <i class="on"></i><i></i><i class="on"></i
|
||
><i class="on"></i><i></i><i class="on"></i><i></i><i></i> <i></i><i class="on"></i
|
||
><i></i><i></i><i class="on"></i><i></i><i class="on"></i><i class="on"></i>
|
||
</div>
|
||
</div>
|
||
<div class="s4">
|
||
<div class="cnote">Pixel-glitch column</div>
|
||
<div style="position: relative; height: 140px; background: var(--paper-2)">
|
||
<div class="glitch" style="right: 0; width: 80%; opacity: 0.8">
|
||
<div class="step" style="width: 50%; height: 22%; align-self: flex-end"></div>
|
||
<div class="step" style="width: 90%; height: 20%; align-self: flex-end"></div>
|
||
<div class="step" style="width: 38%; height: 18%; align-self: flex-end"></div>
|
||
<div class="step" style="width: 70%; height: 24%; align-self: flex-end"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="s4">
|
||
<div class="cnote">Vertical-stack labels</div>
|
||
<div class="vstack" style="height: 140px">
|
||
<span>CATALOGUE · 2026</span><span>COBALT — GRID</span><span>EDITION No.01</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COMPOSITIONS -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="tag">04</span>
|
||
<h2>Frame Compositions</h2>
|
||
<span class="sp"></span><span class="lab">True 16:9 · cqw Scaled</span>
|
||
</div>
|
||
<div class="gallery">
|
||
<div class="fw">
|
||
<div class="flabel"><b>Hero Cover</b><span>· identity · glitch + QR · left</span></div>
|
||
<div class="frame cf1">
|
||
<div class="ht"></div>
|
||
<div class="hb"></div>
|
||
<div class="glitch">
|
||
<div class="step" style="width: 55%; height: 18%; align-self: flex-end"></div>
|
||
<div class="step" style="width: 100%; height: 16%; align-self: flex-end"></div>
|
||
<div class="step" style="width: 40%; height: 14%; align-self: flex-end"></div>
|
||
<div class="step" style="width: 74%; height: 20%; align-self: flex-end"></div>
|
||
</div>
|
||
<div class="qr">
|
||
<i class="on"></i><i></i><i class="on"></i><i class="on"></i><i></i><i class="on"></i
|
||
><i></i><i class="on"></i> <i></i><i class="on"></i><i></i><i class="on"></i
|
||
><i class="on"></i><i></i><i class="on"></i><i></i> <i class="on"></i><i></i
|
||
><i class="on"></i><i></i><i></i><i class="on"></i><i></i><i class="on"></i> <i></i
|
||
><i class="on"></i><i></i><i class="on"></i><i class="on"></i><i></i><i class="on"></i
|
||
><i></i> <i class="on"></i><i></i><i class="on"></i><i></i><i class="on"></i><i></i
|
||
><i class="on"></i><i></i> <i></i><i class="on"></i><i></i><i class="on"></i><i></i
|
||
><i class="on"></i><i></i><i class="on"></i> <i class="on"></i><i></i
|
||
><i class="on"></i><i class="on"></i><i></i><i class="on"></i><i></i><i></i> <i></i
|
||
><i class="on"></i><i></i><i></i><i class="on"></i><i></i><i class="on"></i
|
||
><i class="on"></i>
|
||
</div>
|
||
<div class="body">
|
||
<div class="kick">Trend Report</div>
|
||
<h3>The grid is the canvas.</h3>
|
||
<div class="ed">Cream + cobalt, drafting tone behind every frame.</div>
|
||
</div>
|
||
<div class="pg">01 / 06</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel"><b>Index Ledger</b><span>· catalog · dense frame</span></div>
|
||
<div class="frame cf2">
|
||
<div class="ht"></div>
|
||
<div class="hb"></div>
|
||
<div class="body">
|
||
<div class="tb">
|
||
<span class="h">Six Signals</span><span class="t">LAB—02 / 2026</span>
|
||
</div>
|
||
<div class="r">
|
||
<span class="n">01</span>
|
||
<div>
|
||
<div class="nm">Risograph Revival</div>
|
||
<div class="dx">Two-color print as editorial register.</div>
|
||
</div>
|
||
</div>
|
||
<div class="r">
|
||
<span class="n">02</span>
|
||
<div>
|
||
<div class="nm">Graph-Paper Tone</div>
|
||
<div class="dx">Drafting grids as permanent canvas.</div>
|
||
</div>
|
||
</div>
|
||
<div class="r">
|
||
<span class="n">03</span>
|
||
<div>
|
||
<div class="nm">Pixel Glitch</div>
|
||
<div class="dx">Stair-stepped scanline decoration.</div>
|
||
</div>
|
||
</div>
|
||
<div class="r">
|
||
<span class="n">04</span>
|
||
<div>
|
||
<div class="nm">QR Mosaic</div>
|
||
<div class="dx">8×8 patches as graphic punctuation.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pg">02 / 06</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel"><b>Chapter Opener</b><span>· section · sparse · left</span></div>
|
||
<div class="frame cf3">
|
||
<div class="ht"></div>
|
||
<div class="hb"></div>
|
||
<div class="glitch">
|
||
<div class="step" style="width: 60%; height: 24%; align-self: flex-start"></div>
|
||
<div class="step" style="width: 100%; height: 20%; align-self: flex-start"></div>
|
||
<div class="step" style="width: 42%; height: 22%; align-self: flex-start"></div>
|
||
</div>
|
||
<div class="body">
|
||
<div class="ix">CHAPTER 02</div>
|
||
<h3>On Measure<br />& Margin.</h3>
|
||
<div class="lede">
|
||
The grid wants to be filled — but the chapter opener lets it breathe.
|
||
</div>
|
||
</div>
|
||
<div class="pg">03 / 06</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel"><b>Data Frame</b><span>· chart · pixel-stack</span></div>
|
||
<div class="frame cf4">
|
||
<div class="ht"></div>
|
||
<div class="hb"></div>
|
||
<div class="body">
|
||
<div class="tb">
|
||
<span class="h">Signal Strength</span><span class="t">FIG.04 / INDEX</span>
|
||
</div>
|
||
<div class="chart">
|
||
<div class="st">
|
||
<div class="c on"></div>
|
||
<div class="c on"></div>
|
||
<div class="c on"></div>
|
||
<div class="c"></div>
|
||
<div class="c"></div>
|
||
<div class="c"></div>
|
||
</div>
|
||
<div class="st">
|
||
<div class="c on"></div>
|
||
<div class="c on"></div>
|
||
<div class="c on"></div>
|
||
<div class="c on"></div>
|
||
<div class="c on"></div>
|
||
<div class="c"></div>
|
||
</div>
|
||
<div class="st">
|
||
<div class="c on"></div>
|
||
<div class="c on"></div>
|
||
<div class="c"></div>
|
||
<div class="c"></div>
|
||
<div class="c"></div>
|
||
<div class="c"></div>
|
||
</div>
|
||
<div class="st">
|
||
<div class="c on"></div>
|
||
<div class="c on"></div>
|
||
<div class="c on"></div>
|
||
<div class="c on"></div>
|
||
<div class="c"></div>
|
||
<div class="c"></div>
|
||
</div>
|
||
<div class="st">
|
||
<div class="c on"></div>
|
||
<div class="c on"></div>
|
||
<div class="c on"></div>
|
||
<div class="c on"></div>
|
||
<div class="c on"></div>
|
||
<div class="c on"></div>
|
||
</div>
|
||
<div class="st">
|
||
<div class="c on"></div>
|
||
<div class="c on"></div>
|
||
<div class="c on"></div>
|
||
<div class="c"></div>
|
||
<div class="c"></div>
|
||
<div class="c"></div>
|
||
</div>
|
||
</div>
|
||
<div class="tk">
|
||
<span>01</span><span>02</span><span>03</span><span>04</span><span>05</span
|
||
><span>06</span>
|
||
</div>
|
||
</div>
|
||
<div class="pg">04 / 06</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PRINCIPLES -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="tag">05</span>
|
||
<h2>Frame Rules</h2>
|
||
<span class="sp"></span><span class="lab">Two-Color · Flat</span>
|
||
</div>
|
||
<div class="dos">
|
||
<div class="do-card do">
|
||
<h4>Do</h4>
|
||
<ul>
|
||
<li>Keep the graph-paper grid behind every frame — it is the canvas tone.</li>
|
||
<li>Frame every slide with top + bottom 1.5px cobalt hairlines.</li>
|
||
<li>Set Newsreader at weight 400 in cobalt; size, not weight, makes hierarchy.</li>
|
||
<li>Track Hanken labels uppercase at 0.16em; mono chrome at 0.05em.</li>
|
||
<li>Render data as pixel-stack cells — cobalt on / 10% off.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="do-card dont">
|
||
<h4>Don't</h4>
|
||
<ul>
|
||
<li>Never introduce a second ink color — cream + cobalt only.</li>
|
||
<li>No bold Newsreader, no rounded corners, no drop shadows.</li>
|
||
<li>Don't disable the grid or suppress the hairlines.</li>
|
||
<li>Don't crowd chapter / quote / colophon — let the grid breathe.</li>
|
||
<li>Don't blow a serif headline edge-to-edge — fit to measure.</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(--ink-soft);
|
||
--cap-accent-2: var(--paper-2);
|
||
}
|
||
.capdemo .stage {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: 16.67cqh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 7;
|
||
}
|
||
.capdemo .pill {
|
||
position: relative;
|
||
max-width: 80cqw;
|
||
padding: 1.4cqw 3cqw 1.7cqw;
|
||
background: var(--cap-canvas);
|
||
background-image:
|
||
linear-gradient(to right, var(--grid) 1px, transparent 1px),
|
||
linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
|
||
background-size: 1.2cqw 1.2cqw;
|
||
border-top: 0.16cqw solid var(--cap-ink);
|
||
border-bottom: 0.16cqw 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);
|
||
}
|
||
/* the cobalt flat block — risograph knockout: cobalt fill, cream paper on top */
|
||
.capdemo .w.active {
|
||
color: var(--cap-canvas);
|
||
background: var(--cap-ink);
|
||
box-shadow: 0 0 0 0.06em var(--cap-ink);
|
||
}
|
||
.capdemo .bandline {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 16.67cqh;
|
||
border-top: 1px dashed var(--ink-faint);
|
||
z-index: 6;
|
||
}
|
||
.capdemo .bandtag {
|
||
position: absolute;
|
||
right: 4cqw;
|
||
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: 7;
|
||
}
|
||
</style>
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="tag">06</span>
|
||
<h2>Captions</h2>
|
||
<span class="sp"></span><span class="lab">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="ht"></div>
|
||
<div class="hb"></div>
|
||
<div class="glitch" style="right: 0; width: 16cqw; opacity: 0.5; z-index: 2">
|
||
<div class="step" style="width: 60%; height: 18%; align-self: flex-end"></div>
|
||
<div class="step" style="width: 100%; height: 16%; align-self: flex-end"></div>
|
||
<div class="step" style="width: 42%; height: 14%; align-self: flex-end"></div>
|
||
</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="pg">05 / 06</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel"><b>Settled line</b><span>· all spoken · block cleared</span></div>
|
||
<div class="frame capdemo">
|
||
<div class="ht"></div>
|
||
<div class="hb"></div>
|
||
<div
|
||
class="qr"
|
||
style="
|
||
position: absolute;
|
||
top: 6cqw;
|
||
right: 5cqw;
|
||
width: 7cqw;
|
||
height: 7cqw;
|
||
z-index: 6;
|
||
gap: 0.2cqw;
|
||
padding: 0.4cqw;
|
||
"
|
||
>
|
||
<i class="on"></i><i></i><i class="on"></i><i class="on"></i><i></i><i class="on"></i
|
||
><i></i><i class="on"></i> <i></i><i class="on"></i><i></i><i class="on"></i
|
||
><i class="on"></i><i></i><i class="on"></i><i></i> <i class="on"></i><i></i
|
||
><i class="on"></i><i></i><i></i><i class="on"></i><i></i><i class="on"></i> <i></i
|
||
><i class="on"></i><i></i><i class="on"></i><i class="on"></i><i></i><i class="on"></i
|
||
><i></i> <i class="on"></i><i></i><i class="on"></i><i></i><i class="on"></i><i></i
|
||
><i class="on"></i><i></i> <i></i><i class="on"></i><i></i><i class="on"></i><i></i
|
||
><i class="on"></i><i></i><i class="on"></i> <i class="on"></i><i></i
|
||
><i class="on"></i><i class="on"></i><i></i><i class="on"></i><i></i><i></i> <i></i
|
||
><i class="on"></i><i></i><i></i><i class="on"></i><i></i><i class="on"></i
|
||
><i class="on"></i>
|
||
</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="pg">06 / 06</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="foot">
|
||
<span class="l">Cobalt Grid</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="#F0EBDE" />
|
||
<g stroke="#1F2BE0" stroke-opacity="0.25" stroke-width="1">
|
||
<line x1="0" y1="25" x2="100" y2="25" />
|
||
<line x1="0" y1="50" x2="100" y2="50" />
|
||
<line x1="0" y1="75" x2="100" y2="75" />
|
||
<line x1="25" y1="0" x2="25" y2="100" />
|
||
<line x1="50" y1="0" x2="50" y2="100" />
|
||
<line x1="75" y1="0" x2="75" y2="100" />
|
||
</g>
|
||
<rect x="20" y="40" width="44" height="11" fill="#1F2BE0" />
|
||
<rect x="70" y="20" width="14" height="14" fill="#1F2BE0" />
|
||
</svg>
|
||
</template>
|
||
</body>
|
||
</html>
|