Setting the file. One moment. Frame Showcase · Hyperframes Creative · heygen-com/hyperframes · Skills Docs22.10
Narration
(opens in a new tab)
frame-presets/biennale-yellow/frame-showcase.html
HTML·1,214 lines·34 KB
link
rel
=
"preconnect"
href
=
"https://fonts.googleapis.com"
/>
8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9 <link
10 href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Archivo:wght@400;600&family=JetBrains+Mono:wght@400&display=swap"
11 rel="stylesheet"
12 />
13 <style id="ds-tokens">
14 :root {
15 --paper: #e9e5db;
16 --paper-deep: #dcd6c4;
17 --sun: #f1ee2e;
18 --sun-soft: #f8f39b;
19 --haze: #f0da7c;
20 --ink: #1b2566;
21 --ember: #e26b4a;
22 --serif: "Instrument Serif", Georgia, serif;
23 --sans: "Archivo", sans-serif;
24 --mono: "JetBrains Mono", ui-monospace, monospace;
25 --bloom: radial-gradient(
26 circle at 50% 50%,
27 rgba(241, 238, 46, 0.92) 0%,
28 rgba(241, 238, 46, 0.5) 30%,
29 rgba(240, 218, 124, 0.22) 55%,
30 rgba(233, 229, 219, 0) 78%
31 );
32 }
33 * {
34 margin: 0;
35 padding: 0;
36 box-sizing: border-box;
37 }
38 html {
39 background: #0c0d1a;
40 }
41 body {
42 background: var(--paper);
43 color: var(--ink);
44 font-family: var(--sans);
45 -webkit-font-smoothing: antialiased;
46 }
47 .serif {
48 font-family: var(--serif);
49 font-weight: 400;
50 letter-spacing: -0.018em;
51 line-height: 0.9;
52 }
53 .micro {
54 font-family: var(--sans);
55 font-weight: 600;
56 text-transform: uppercase;
57 letter-spacing: 0.18em;
58 font-size: 13px;
59 }
60
61 section {
62 padding: 120px 76px;
63 position: relative;
64 overflow: hidden;
65 }
66 .sec-head {
67 display: flex;
68 align-items: baseline;
69 gap: 24px;
70 border-bottom: 1px solid var(--ink);
71 padding-bottom: 18px;
72 margin-bottom: 56px;
73 position: relative;
74 z-index: 2;
75 }
76 .sec-head .micro {
77 color: var(--ink);
78 }
79 .sec-head h2 {
80 font-family: var(--serif);
81 font-weight: 400;
82 font-size: 56px;
83 line-height: 1;
84 letter-spacing: -0.01em;
85 }
86 .sec-head .sp {
87 flex: 1;
88 }
89
90 /* COVER */
91 .cover {
92 min-height: 100vh;
93 padding: 0;
94 display: flex;
95 flex-direction: column;
96 justify-content: center;
97 position: relative;
98 overflow: hidden;
99 }
100 .cover .bloom {
101 position: absolute;
102 width: 62%;
103 height: 70%;
104 left: 8%;
105 top: 14%;
106 background: var(--bloom);
107 z-index: 0;
108 pointer-events: none;
109 }
110 .cover .ember {
111 position: absolute;
112 width: 36%;
113 height: 40%;
114 right: -6%;
115 bottom: -6%;
116 background: radial-gradient(
117 circle at 60% 60%,
118 rgba(226, 107, 74, 0.2) 0%,
119 rgba(226, 107, 74, 0) 70%
120 );
121 z-index: 0;
122 pointer-events: none;
123 }
124 .cover .daterail {
125 position: absolute;
126 top: 64px;
127 right: 76px;
128 font-family: var(--serif);
129 font-weight: 400;
130 font-size: clamp(48px, 5.2vw, 84px);
131 line-height: 0.96;
132 text-align: right;
133 letter-spacing: -0.005em;
134 z-index: 2;
135 }
136 .cover .inner {
137 padding: 0 76px;
138 position: relative;
139 z-index: 2;
140 }
141 .cover .micro {
142 margin-bottom: 28px;
143 }
144 .cover h1 {
145 font-family: var(--serif);
146 font-weight: 400;
147 font-size: clamp(110px, 15vw, 230px);
148 line-height: 0.84;
149 letter-spacing: -0.018em;
150 }
151 .cover h1 em {
152 font-style: italic;
153 letter-spacing: -0.005em;
154 }
155 .cover .footer {
156 position: absolute;
157 bottom: 0;
158 left: 0;
159 right: 0;
160 display: grid;
161 grid-template-columns: 1.1fr 1fr 1.4fr 2fr;
162 gap: 36px;
163 padding: 0 76px 56px;
164 z-index: 2;
165 }
166 .cover .fcell {
167 border-top: 1px solid var(--ink);
168 padding-top: 14px;
169 }
170 .cover .fcell .t {
171 font-family: var(--sans);
172 font-weight: 600;
173 text-transform: uppercase;
174 letter-spacing: 0.16em;
175 font-size: 11px;
176 margin-bottom: 8px;
177 }
178 .cover .fcell .b {
179 font-family: var(--sans);
180 font-weight: 400;
181 font-size: 13px;
182 line-height: 1.5;
183 color: var(--ink);
184 }
185 .cover .pagenum {
186 position: absolute;
187 bottom: 30px;
188 right: 48px;
189 font-family: var(--mono);
190 font-size: 13px;
191 letter-spacing: 0.08em;
192 opacity: 0.75;
193 z-index: 2;
194 }
195
196 /* PALETTE */
197 .swatches {
198 display: grid;
199 grid-template-columns: repeat(4, 1fr);
200 gap: 28px;
201 position: relative;
202 z-index: 2;
203 }
204 .sw .chip {
205 height: 130px;
206 border: 1px solid var(--ink);
207 }
208 .sw .name {
209 font-family: var(--serif);
210 font-size: 26px;
211 margin-top: 14px;
212 }
213 .sw .hex {
214 font-family: var(--mono);
215 font-size: 12px;
216 color: var(--ink);
217 opacity: 0.7;
218 margin-top: 6px;
219 }
220 .sw .role {
221 font-family: var(--sans);
222 font-size: 12px;
223 line-height: 1.5;
224 color: var(--ink);
225 margin-top: 8px;
226 }
227
228 /* TYPE */
229 .type-row {
230 display: grid;
231 grid-template-columns: 220px 1fr;
232 align-items: center;
233 padding: 26px 0;
234 border-bottom: 1px solid rgba(27, 37, 102, 0.2);
235 }
236 .type-row .tok {
237 font-family: var(--sans);
238 font-weight: 600;
239 text-transform: uppercase;
240 letter-spacing: 0.16em;
241 font-size: 11px;
242 }
243 .type-row .m {
244 font-family: var(--mono);
245 font-size: 11px;
246 color: var(--ink);
247 opacity: 0.65;
248 margin-top: 8px;
249 line-height: 1.5;
250 }
251 .type-row .spec {
252 overflow: hidden;
253 }
254
255 /* COMPONENTS */
256 .cnote {
257 font-family: var(--sans);
258 font-weight: 600;
259 text-transform: uppercase;
260 letter-spacing: 0.16em;
261 font-size: 12px;
262 margin-bottom: 22px;
263 }
264 .cgrid {
265 display: grid;
266 grid-template-columns: repeat(12, 1fr);
267 gap: 48px;
268 margin-bottom: 56px;
269 }
270 .s4 {
271 grid-column: span 4;
272 }
273 .s5 {
274 grid-column: span 5;
275 }
276 .s6 {
277 grid-column: span 6;
278 }
279 .s7 {
280 grid-column: span 7;
281 }
282 .s8 {
283 grid-column: span 8;
284 }
285 .ledger .row {
286 display: grid;
287 grid-template-columns: 92px 1.6fr 0.9fr 80px;
288 gap: 24px;
289 padding: 14px 0;
290 border-bottom: 1px solid rgba(27, 37, 102, 0.2);
291 align-items: baseline;
292 }
293 .ledger .dt {
294 font-family: var(--mono);
295 font-size: 14px;
296 }
297 .ledger .ti {
298 font-family: var(--serif);
299 font-size: 26px;
300 line-height: 1.1;
301 }
302 .ledger .vn {
303 font-family: var(--sans);
304 font-size: 13px;
305 color: var(--ink);
306 }
307 .ledger .du {
308 font-family: var(--mono);
309 font-size: 13px;
310 text-align: right;
311 }
312 .strand .row {
313 display: grid;
314 grid-template-columns: 56px 1fr;
315 gap: 20px;
316 padding: 14px 0;
317 border-bottom: 1px solid rgba(27, 37, 102, 0.2);
318 align-items: baseline;
319 }
320 .strand .nm {
321 font-family: var(--serif);
322 font-size: 34px;
323 line-height: 1;
324 }
325 .strand .ti {
326 font-family: var(--serif);
327 font-size: 24px;
328 line-height: 1.1;
329 }
330 .strand .bd {
331 font-family: var(--sans);
332 font-size: 13px;
333 line-height: 1.5;
334 color: var(--ink);
335 margin-top: 4px;
336 }
337 .bars .row {
338 display: grid;
339 grid-template-columns: 60px 1fr 60px;
340 gap: 16px;
341 align-items: center;
342 margin-bottom: 14px;
343 }
344 .bars .yr {
345 font-family: var(--mono);
346 font-size: 13px;
347 }
348 .bars .bar {
349 height: 20px;
350 background: var(--ink);
351 }
352 .bars .bar.lit {
353 background: var(--sun);
354 border: 1px solid var(--ink);
355 }
356 .bars .vl {
357 font-family: var(--mono);
358 font-size: 13px;
359 text-align: right;
360 }
361 .ypanel {
362 background: var(--sun);
363 padding: 36px;
364 color: var(--ink);
365 }
366 .ypanel .l {
367 font-family: var(--sans);
368 font-weight: 600;
369 text-transform: uppercase;
370 letter-spacing: 0.16em;
371 font-size: 11px;
372 }
373 .ypanel .h {
374 font-family: var(--serif);
375 font-size: 44px;
376 line-height: 0.95;
377 margin-top: 12px;
378 }
379
380 /* COMPOSITIONS */
381 .gallery {
382 display: grid;
383 grid-template-columns: 1fr 1fr;
384 gap: 48px;
385 position: relative;
386 z-index: 2;
387 }
388 .fw .flabel {
389 display: flex;
390 gap: 14px;
391 align-items: baseline;
392 margin-bottom: 16px;
393 font-family: var(--sans);
394 font-weight: 600;
395 text-transform: uppercase;
396 letter-spacing: 0.14em;
397 font-size: 12px;
398 color: var(--ink);
399 opacity: 0.6;
400 }
401 .fw .flabel b {
402 opacity: 1;
403 }
404 .frame {
405 aspect-ratio: 16/9;
406 container-type: size;
407 position: relative;
408 overflow: hidden;
409 background: var(--paper);
410 box-shadow: 0 0 0 1px rgba(27, 37, 102, 0.15);
411 }
412 .frame > .body {
413 position: absolute;
414 inset: 0;
415 z-index: 3;
416 }
417 .frame .bloom {
418 position: absolute;
419 background: var(--bloom);
420 z-index: 1;
421 pointer-events: none;
422 }
423 .frame .pn {
424 position: absolute;
425 right: 3cqw;
426 bottom: 2.6cqw;
427 font-family: var(--mono);
428 font-size: 1cqw;
429 opacity: 0.75;
430 z-index: 4;
431 }
432
433 /* f1 cover */
434 .yf1 .bloom {
435 width: 58%;
436 height: 64%;
437 left: 6%;
438 top: 16%;
439 }
440 .yf1 .body {
441 display: flex;
442 flex-direction: column;
443 justify-content: center;
444 padding: 0 5cqw;
445 }
446 .yf1 .micro {
447 font-family: var(--sans);
448 font-weight: 600;
449 text-transform: uppercase;
450 letter-spacing: 0.3cqw;
451 font-size: 1cqw;
452 margin-bottom: 1.8cqw;
453 }
454 .yf1 h3 {
455 font-family: var(--serif);
456 font-weight: 400;
457 font-size: 13cqw;
458 line-height: 0.84;
459 letter-spacing: -0.018em;
460 }
461 .yf1 h3 em {
462 font-style: italic;
463 }
464 .yf1 .dr {
465 position: absolute;
466 top: 4cqw;
467 right: 4cqw;
468 font-family: var(--serif);
469 font-size: 5cqw;
470 line-height: 0.96;
471 text-align: right;
472 letter-spacing: -0.005em;
473 z-index: 4;
474 }
475
476 /* f2 chapter divider */
477 .yf2 .bloom {
478 width: 60%;
479 height: 80%;
480 right: -10%;
481 top: -10%;
482 left: auto;
483 }
484 .yf2 .rail {
485 position: absolute;
486 left: 3cqw;
487 top: 50%;
488 transform: rotate(-90deg) translateX(50%);
489 transform-origin: left center;
490 font-family: var(--sans);
491 font-weight: 600;
492 text-transform: uppercase;
493 letter-spacing: 0.32em;
494 font-size: 1cqw;
495 white-space: nowrap;
496 z-index: 4;
497 }
498 .yf2 .body {
499 display: flex;
500 flex-direction: column;
501 justify-content: center;
502 padding: 0 5cqw 0 9cqw;
503 }
504 .yf2 .num {
505 font-family: var(--serif);
506 font-weight: 400;
507 font-size: 38cqw;
508 line-height: 0.84;
509 letter-spacing: -0.04em;
510 color: var(--ink);
511 }
512 .yf2 .ti {
513 font-family: var(--serif);
514 font-size: 3.6cqw;
515 line-height: 1.05;
516 margin-top: -2cqw;
517 max-width: 46cqw;
518 }
519
520 /* f3 ledger */
521 .yf3 .body {
522 padding: 6cqw 5cqw;
523 display: flex;
524 flex-direction: column;
525 }
526 .yf3 .top {
527 display: flex;
528 justify-content: space-between;
529 align-items: baseline;
530 border-bottom: 1px solid var(--ink);
531 padding-bottom: 1.2cqw;
532 margin-bottom: 1.6cqw;
533 }
534 .yf3 .top h4 {
535 font-family: var(--serif);
536 font-size: 3.6cqw;
537 line-height: 1;
538 }
539 .yf3 .top .micro {
540 font-family: var(--sans);
541 font-weight: 600;
542 text-transform: uppercase;
543 letter-spacing: 0.2cqw;
544 font-size: 0.9cqw;
545 }
546 .yf3 .row {
547 display: grid;
548 grid-template-columns: 8cqw 1.6fr 0.9fr 6cqw;
549 gap: 1.6cqw;
550 padding: 1cqw 0;
551 border-bottom: 1px solid rgba(27, 37, 102, 0.2);
552 align-items: baseline;
553 }
554 .yf3 .dt {
555 font-family: var(--mono);
556 font-size: 1cqw;
557 }
558 .yf3 .ti {
559 font-family: var(--serif);
560 font-size: 1.9cqw;
561 line-height: 1.1;
562 }
563 .yf3 .vn {
564 font-family: var(--sans);
565 font-size: 0.95cqw;
566 }
567 .yf3 .du {
568 font-family: var(--mono);
569 font-size: 0.95cqw;
570 text-align: right;
571 }
572
573 /* f4 manifesto */
574 .yf4 .bloom {
575 width: 54%;
576 height: 60%;
577 left: 50%;
578 top: 50%;
579 transform: translate(-50%, -50%);
580 }
581 .yf4 .body {
582 display: flex;
583 flex-direction: column;
584 justify-content: center;
585 align-items: center;
586 text-align: center;
587 padding: 0 9cqw;
588 }
589 .yf4 .qm {
590 font-family: var(--serif);
591 font-size: 14cqw;
592 line-height: 0.5;
593 height: 7cqw;
594 }
595 .yf4 .q {
596 font-family: var(--serif);
597 font-style: italic;
598 font-size: 5cqw;
599 line-height: 1.04;
600 letter-spacing: -0.005em;
601 }
602 .yf4 .at {
603 font-family: var(--sans);
604 font-weight: 600;
605 text-transform: uppercase;
606 letter-spacing: 0.25cqw;
607 font-size: 1cqw;
608 margin-top: 2.4cqw;
609 }
610
611 /* PRINCIPLES */
612 .dos {
613 display: grid;
614 grid-template-columns: 1fr 1fr;
615 gap: 56px;
616 position: relative;
617 z-index: 2;
618 }
619 .do-card h4 {
620 font-family: var(--serif);
621 font-size: 34px;
622 margin-bottom: 8px;
623 }
624 .do-card .rule {
625 height: 1px;
626 background: var(--ink);
627 margin-bottom: 22px;
628 }
629 .do-card ul {
630 list-style: none;
631 }
632 .do-card li {
633 font-family: var(--sans);
634 font-size: 14px;
635 line-height: 1.6;
636 padding-left: 22px;
637 position: relative;
638 margin-bottom: 13px;
639 color: var(--ink);
640 }
641 .do-card li::before {
642 position: absolute;
643 left: 0;
644 font-family: var(--serif);
645 }
646 .do-card.do li::before {
647 content: "\2014";
648 }
649 .do-card.dont li::before {
650 content: "\00d7";
651 color: var(--ember);
652 }
653
654 .foot {
655 padding: 64px 76px;
656 border-top: 1px solid var(--ink);
657 display: flex;
658 justify-content: space-between;
659 align-items: center;
660 }
661 .foot .l {
662 font-family: var(--serif);
663 font-size: 30px;
664 }
665 .foot .r {
666 font-family: var(--sans);
667 font-weight: 600;
668 text-transform: uppercase;
669 letter-spacing: 0.16em;
670 font-size: 11px;
671 }
672 @media (max-width: 1100px) {
673 .gallery {
674 grid-template-columns: 1fr;
675 }
676 .swatches {
677 grid-template-columns: 1fr 1fr;
678 }
679 }
680 </style>
681 <link
682 rel="stylesheet"
683 href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&display=swap"
684 />
685 <link
686 rel="stylesheet"
687 href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap"
688 />
689 <style id="ft-override">
690 :root {
691 --primary: #e9e5db !important;
692 --secondary: #1b2566 !important;
693 --tertiary: #dcd6c4 !important;
694 --accent: #f1ee2e !important;
695 --f-disp: "Instrument Serif", sans-serif !important;
696 --f-body: "Archivo", sans-serif !important;
697 --paper: #e9e5db !important;
698 --paper-deep: #dcd6c4 !important;
699 --sun: #f1ee2e !important;
700 --ink: #1b2566 !important;
701 --serif: "Instrument Serif", sans-serif !important;
702 --sans: "Archivo", sans-serif !important;
703 --sun-soft: #f8f39b !important;
704 --haze: #f0da7c !important;
705 --ember: #e26b4a !important;
706 }
707 </style>
708 </head>
709 <body>
710 <!-- COVER -->
711 <section class="cover">
712 <div class="bloom"></div>
713 <div class="ember"></div>
714 <div class="daterail">2026<br />—2027</div>
715 <div class="inner">
716 <div class="micro">Frame System · Vol. 01</div>
717 <h1>Paper, ink<br />& <em>yellow.</em></h1>
718 </div>
719 <div class="footer">
720 <div class="fcell">
721 <div class="t">Register</div>
722 <div class="b">Literary-editorial, biennale catalogue.</div>
723 </div>
724 <div class="fcell">
725 <div class="t">Ground</div>
726 <div class="b">Warm parchment, never white.</div>
727 </div>
728 <div class="fcell">
729 <div class="t">Type</div>
730 <div class="b">Instrument Serif · Archivo · JetBrains Mono.</div>
731 </div>
732 <div class="fcell">
733 <div class="t">Depth</div>
734 <div class="b">Atmospheric blooms, no shadows, hairline rules.</div>
735 </div>
736 </div>
737 <div class="pagenum">01 / 06</div>
738 </section>
739
740 <!-- PALETTE -->
741 <section>
742 <div class="sec-head">
743 <span class="micro">01</span>
744 <h2>Palette</h2>
745 <span class="sp"></span><span class="micro">Paper · Ink · Yellow</span>
746 </div>
747 <div class="swatches">
748 <div class="sw">
749 <div class="chip" style="background: var(--paper)"></div>
750 <div class="name">Paper</div>
751 <div class="hex">#E9E5DB</div>
752 <div class="role">The warm parchment ground.</div>
753 </div>
754 <div class="sw">
755 <div class="chip" style="background: var(--ink)"></div>
756 <div class="name">Ink</div>
757 <div class="hex">#1B2566</div>
758 <div class="role">The single text + rule color.</div>
759 </div>
760 <div class="sw">
761 <div class="chip" style="background: var(--sun)"></div>
762 <div class="name">Sun</div>
763 <div class="hex">#F1EE2E</div>
764 <div class="role">Panel, bloom, tile underprint.</div>
765 </div>
766 <div class="sw">
767 <div class="chip" style="background: var(--ember)"></div>
768 <div class="name">Ember</div>
769 <div class="hex">#E26B4A</div>
770 <div class="role">Subordinate counter-bloom only.</div>
771 </div>
772 <div class="sw">
773 <div class="chip" style="background: var(--paper-deep)"></div>
774 <div class="name">Paper Deep</div>
775 <div class="hex">#DCD6C4</div>
776 <div class="role">Secondary parchment band.</div>
777 </div>
778 <div class="sw">
779 <div class="chip" style="background: var(--sun-soft)"></div>
780 <div class="name">Sun Soft</div>
781 <div class="hex">#F8F39B</div>
782 <div class="role">Mid stop in sun blooms.</div>
783 </div>
784 <div class="sw">
785 <div class="chip" style="background: var(--haze)"></div>
786 <div class="name">Haze</div>
787 <div class="hex">#F0DA7C</div>
788 <div class="role">Outer stop in sun blooms.</div>
789 </div>
790 <div class="sw">
791 <div class="chip" style="background: var(--bloom), var(--paper)"></div>
792 <div class="name">Sun Bloom</div>
793 <div class="hex">radial · atmosphere</div>
794 <div class="role">The primary depth layer.</div>
795 </div>
796 </div>
797 </section>
798
799 <!-- TYPOGRAPHY -->
800 <section>
801 <div class="sec-head">
802 <span class="micro">02</span>
803 <h2>Typography</h2>
804 <span class="sp"></span><span class="micro">Serif · Sans · Mono</span>
805 </div>
806 <div class="type-row">
807 <div>
808 <div class="tok">display</div>
809 <div class="m">Instrument Serif 400 · line 0.86 · −0.018em</div>
810 </div>
811 <div class="spec"><span class="serif" style="font-size: 104px">Biennale</span></div>
812 </div>
813 <div class="type-row">
814 <div>
815 <div class="tok">display-it</div>
816 <div class="m">Instrument Serif italic · slow-reading</div>
817 </div>
818 <div class="spec">
819 <span class="serif" style="font-style: italic; font-size: 72px; line-height: 1.04"
820 >quietly,</span
821 >
822 </div>
823 </div>
824 <div class="type-row">
825 <div>
826 <div class="tok">numeral-md</div>
827 <div class="m">Instrument Serif 400 · hero stat</div>
828 </div>
829 <div class="spec">
830 <span class="serif" style="font-size: 96px; letter-spacing: -0.04em">240</span>
831 </div>
832 </div>
833 <div class="type-row">
834 <div>
835 <div class="tok">body</div>
836 <div class="m">Archivo 400 · line 1.5 · ink</div>
837 </div>
838 <div class="spec">
839 <p style="font-family: var(--sans); font-size: 16px; line-height: 1.5; max-width: 620px">
840 Archivo carries every paragraph — the quiet sans beneath the serif display, always in
841 ink.
842 </p>
843 </div>
844 </div>
845 <div class="type-row" style="border-bottom: 0">
846 <div>
847 <div class="tok">micro-label</div>
848 <div class="m">Archivo 600 · uppercase · 0.18em</div>
849 </div>
850 <div class="spec">
851 <span class="micro">Programme · Section</span>
852 <span
853 class="serif"
854 style="font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em"
855 >12 — 14 JUN</span
856 >
857 </div>
858 </div>
859 </section>
860
861 <!-- COMPONENTS -->
862 <section>
863 <div class="sec-head">
864 <span class="micro">03</span>
865 <h2>Components</h2>
866 <span class="sp"></span><span class="micro">Hairlines · Blooms · Panels</span>
867 </div>
868
869 <div class="cgrid">
870 <div class="s7">
871 <div class="cnote">
872 Ledger rows — mono date · serif title · sans venue · mono duration
873 </div>
874 <div class="ledger">
875 <div class="row">
876 <span class="dt">12 JUN</span><span class="ti">Opening Address</span
877 ><span class="vn">Giardini Pavilion</span><span class="du">45m</span>
878 </div>
879 <div class="row">
880 <span class="dt">13 JUN</span><span class="ti">On Slow Reading</span
881 ><span class="vn">Arsenale Hall</span><span class="du">90m</span>
882 </div>
883 <div class="row">
884 <span class="dt">14 JUN</span><span class="ti">Closing Colophon</span
885 ><span class="vn">Central Library</span><span class="du">30m</span>
886 </div>
887 </div>
888 </div>
889 <div class="s5">
890 <div class="cnote">Strand list + chart bars</div>
891 <div class="strand">
892 <div class="row">
893 <span class="nm">01</span>
894 <div><div class="ti">Parchment</div></div>
895 </div>
896 <div class="row">
897 <span class="nm">02</span>
898 <div><div class="ti">Ink</div></div>
899 </div>
900 </div>
901 <div class="bars" style="margin-top: 20px">
902 <div class="row">
903 <span class="yr">'24</span><span class="bar" style="width: 60%"></span
904 ><span class="vl">60</span>
905 </div>
906 <div class="row">
907 <span class="yr">'25</span><span class="bar lit" style="width: 88%"></span
908 ><span class="vl">88</span>
909 </div>
910 </div>
911 </div>
912 </div>
913
914 <div class="cgrid" style="margin-bottom: 0">
915 <div class="s5">
916 <div class="cnote">Yellow panel — strongest color statement</div>
917 <div class="ypanel">
918 <div class="l">Poster Fill</div>
919 <div class="h">Ink on Sun.</div>
920 </div>
921 </div>
922 <div class="s7">
923 <div class="cnote">Sun bloom + ember counter-bloom</div>
924 <div
925 style="
926 position: relative;
927 height: 170px;
928 border: 1px solid rgba(27, 37, 102, 0.2);
929 overflow: hidden;
930 "
931 >
932 <div
933 style="
934 position: absolute;
935 width: 60%;
936 height: 130%;
937 left: 6%;
938 top: -15%;
939 background: var(--bloom);
940 "
941 ></div>
942 <div
943 style="
944 position: absolute;
945 width: 40%;
946 height: 90%;
947 right: -8%;
948 bottom: -20%;
949 background: radial-gradient(circle, rgba(226, 107, 74, 0.22), transparent 70%);
950 "
951 ></div>
952 <div style="position: absolute; left: 24px; bottom: 20px" class="serif">
953 <span style="font-size: 40px">atmosphere.</span>
954 </div>
955 </div>
956 </div>
957 </div>
958 </section>
959
960 <!-- COMPOSITIONS -->
961 <section>
962 <div class="sec-head">
963 <span class="micro">04</span>
964 <h2>Frame Compositions</h2>
965 <span class="sp"></span><span class="micro">True 16:9 · cqw</span>
966 </div>
967 <div class="gallery">
968 <div class="fw">
969 <div class="flabel"><b>Cover</b><span>· identity · sun bloom · date rail</span></div>
970 <div class="frame yf1">
971 <div class="bloom"></div>
972 <div class="dr">2026<br />—27</div>
973 <div class="body">
974 <div class="micro">Frame System</div>
975 <h3>Paper, ink<br />& <em>yellow.</em></h3>
976 </div>
977 <div class="pn">01 / 06</div>
978 </div>
979 </div>
980
981 <div class="fw">
982 <div class="flabel">
983 <b>Chapter Divider</b><span>· section · jumbo numeral · vertical rail</span>
984 </div>
985 <div class="frame yf2">
986 <div class="bloom"></div>
987 <div class="rail">Section — Two</div>
988 <div class="body">
989 <div class="num">02</div>
990 <div class="ti">On measure & the slow page.</div>
991 </div>
992 <div class="pn">02 / 06</div>
993 </div>
994 </div>
995
996 <div class="fw">
997 <div class="flabel">
998 <b>Ledger</b><span>· catalog · hairline rows · the dense frame</span>
999 </div>
1000 <div class="frame yf3">
1001 <div class="body">
1002 <div class="top">
1003 <h4>Programme</h4>
1004 <span class="micro">12 — 14 JUN</span>
1005 </div>
1006 <div class="row">
1007 <span class="dt">12 JUN</span><span class="ti">Opening Address</span
1008 ><span class="vn">Giardini</span><span class="du">45m</span>
1009 </div>
1010 <div class="row">
1011 <span class="dt">13 JUN</span><span class="ti">On Slow Reading</span
1012 ><span class="vn">Arsenale</span><span class="du">90m</span>
1013 </div>
1014 <div class="row">
1015 <span class="dt">14 JUN</span><span class="ti">Closing Colophon</span
1016 ><span class="vn">Library</span><span class="du">30m</span>
1017 </div>
1018 </div>
1019 <div class="pn">03 / 06</div>
1020 </div>
1021 </div>
1022
1023 <div class="fw">
1024 <div class="flabel">
1025 <b>Manifesto</b><span>· quote · italic serif · centered bloom</span>
1026 </div>
1027 <div class="frame yf4">
1028 <div class="bloom"></div>
1029 <div class="body">
1030 <div class="qm">“</div>
1031 <div class="q">Read it slowly,<br />or not at all.</div>
1032 <div class="at">— The System Voice</div>
1033 </div>
1034 <div class="pn">04 / 06</div>
1035 </div>
1036 </div>
1037 </div>
1038 </section>
1039
1040 <!-- PRINCIPLES -->
1041 <section>
1042 <div class="sec-head">
1043 <span class="micro">05</span>
1044 <h2>Frame Rules</h2>
1045 <span class="sp"></span><span class="micro">Restraint</span>
1046 </div>
1047 <div class="dos">
1048 <div class="do-card do">
1049 <h4>Do</h4>
1050 <div class="rule"></div>
1051 <ul>
1052 <li>Start on warm parchment; add at least one sun bloom for atmosphere.</li>
1053 <li>
1054 Set every line in ink — display, body, label, mono; contrast is size, not color.
1055 </li>
1056 <li>Use Instrument Serif 400, tight line-height, negative tracking, for display.</li>
1057 <li>
1058 Make every separator a 1px ink hairline; flood a yellow panel for poster moments.
1059 </li>
1060 <li>Reserve JetBrains Mono for dates, numerals, and the bottom-right pagenum.</li>
1061 </ul>
1062 </div>
1063 <div class="do-card dont">
1064 <h4>Don't</h4>
1065 <div class="rule"></div>
1066 <ul>
1067 <li>No drop shadows, no rounded corners, no bordered cards.</li>
1068 <li>No second text color; no bold Instrument Serif.</li>
1069 <li>No borders thicker than 1px; no inverted ink grounds.</li>
1070 <li>No mono for body or headlines; no font substitutes.</li>
1071 <li>Don't crowd the canvas — sparse reads as elegant.</li>
1072 </ul>
1073 </div>
1074 </div>
1075 </section>
1076
1077 <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
1078 <style>
1079 /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
1080 .capdemo {
1081 --cap-ink: var(--ink);
1082 --cap-canvas: var(--paper);
1083 --cap-accent: var(--sun);
1084 --cap-accent-2: var(--ember);
1085 }
1086 .capdemo .stage {
1087 position: absolute;
1088 left: 0;
1089 right: 0;
1090 bottom: 0;
1091 height: 16.67cqh;
1092 display: flex;
1093 align-items: center;
1094 justify-content: center;
1095 z-index: 4;
1096 }
1097 .capdemo .pill {
1098 max-width: 80cqw;
1099 padding: 1.4cqw 3cqw 1.7cqw;
1100 background: var(--cap-canvas);
1101 border: 1px solid var(--cap-ink);
1102 border-radius: 0;
1103 }
1104 .capdemo .line {
1105 display: flex;
1106 flex-wrap: wrap;
1107 justify-content: center;
1108 gap: 0.1em 0.34em;
1109 font-family: var(--serif);
1110 font-weight: 400;
1111 font-size: 3.4cqw;
1112 line-height: 1.16;
1113 letter-spacing: -0.01em;
1114 }
1115 .capdemo .w {
1116 display: inline-block;
1117 padding: 0 0.06em;
1118 color: color-mix(in srgb, var(--cap-ink) 42%, var(--cap-canvas));
1119 }
1120 .capdemo .w.spoken {
1121 color: var(--cap-ink);
1122 }
1123 .capdemo .w.active {
1124 color: var(--cap-ink);
1125 background: var(--cap-accent);
1126 box-shadow: 0 0 0 0.06em var(--cap-accent);
1127 }
1128 .capdemo .bandline {
1129 position: absolute;
1130 left: 0;
1131 right: 0;
1132 bottom: 16.67cqh;
1133 border-top: 1px dashed rgba(27, 37, 102, 0.28);
1134 z-index: 3;
1135 }
1136 .capdemo .bandtag {
1137 position: absolute;
1138 right: 3cqw;
1139 bottom: calc(16.67cqh + 0.7cqw);
1140 font-family: var(--mono);
1141 font-size: 0.95cqw;
1142 letter-spacing: 0.04em;
1143 color: var(--ink);
1144 opacity: 0.5;
1145 z-index: 4;
1146 }
1147 </style>
1148 <section>
1149 <div class="sec-head">
1150 <span class="micro">06</span>
1151 <h2>Captions</h2>
1152 <span class="sp"></span><span class="micro">Lower-third · Karaoke</span>
1153 </div>
1154 <div class="gallery">
1155 <div class="fw">
1156 <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
1157 <div class="frame capdemo">
1158 <div class="bloom" style="width: 54%; height: 60%; left: 10%; top: 12%"></div>
1159 <div class="bandline"></div>
1160 <div class="bandtag">caption band · 16.7%</div>
1161 <div class="stage">
1162 <div class="pill">
1163 <div class="line">
1164 <span class="w spoken">Built</span>
1165 <span class="w spoken">for</span>
1166 <span class="w active">teams</span>
1167 <span class="w">who</span>
1168 <span class="w">ship.</span>
1169 </div>
1170 </div>
1171 </div>
1172 <div class="pn">05 / 06</div>
1173 </div>
1174 </div>
1175
1176 <div class="fw">
1177 <div class="flabel">
1178 <b>Settled line</b><span>· all spoken · underprint cleared</span>
1179 </div>
1180 <div class="frame capdemo">
1181 <div
1182 class="bloom"
1183 style="width: 50%; height: 58%; right: -6%; bottom: -6%; left: auto"
1184 ></div>
1185 <div class="stage">
1186 <div class="pill">
1187 <div class="line">
1188 <span class="w spoken">Ship</span>
1189 <span class="w spoken">faster</span>
1190 <span class="w spoken">today.</span>
1191 </div>
1192 </div>
1193 </div>
1194 <div class="pn">06 / 06</div>
1195 </div>
1196 </div>
1197 </div>
1198 </section>
1199
1200 <div class="foot">
1201 <span class="l">Biennale Yellow</span>
1202 <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
1203 </div>
1204
1205 <template id="__bundler_thumbnail">
1206 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
1207 <rect width="100" height="100" fill="#E9E5DB" />
1208 <circle cx="42" cy="42" r="34" fill="#F1EE2E" opacity="0.55" />
1209 <text x="14" y="64" font-family="Georgia" font-size="30" fill="#1B2566">Aa</text>
1210 <rect x="14" y="74" width="60" height="1.5" fill="#1B2566" />
1211 </svg>
1212 </template>
1213 </body>
1214</html>