Setting the file. One moment. Frame Showcase · Hyperframes Creative · heygen-com/hyperframes · Skills Docs22.10
Narration
(opens in a new tab)
frame-presets/broadside/frame-showcase.html
HTML·1,166 lines·33 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=Barlow:wght@400;600;700;800;900&family=IBM+Plex+Mono:wght@400;500&display=swap"
11 rel="stylesheet"
12 />
13 <style id="ds-tokens">
14 :root {
15 --ink: #111111;
16 --ink-alt: #1a1a18;
17 --orange: #e85d26;
18 --cream: #f0ece5;
19 --cream-muted: #888880;
20 --cream-hint: #505048;
21 --border-dark: #282826;
22 --on-orange-muted: rgba(17, 17, 17, 0.75);
23 --on-orange-hint: rgba(17, 17, 17, 0.55);
24 --on-orange-faint: rgba(17, 17, 17, 0.4);
25 --on-orange-border: rgba(17, 17, 17, 0.2);
26 --sans: "Barlow", sans-serif;
27 --mono: "IBM Plex Mono", monospace;
28 }
29 * {
30 margin: 0;
31 padding: 0;
32 box-sizing: border-box;
33 }
34 html {
35 background: #000;
36 }
37 body {
38 background: var(--ink);
39 color: var(--cream);
40 font-family: var(--sans);
41 -webkit-font-smoothing: antialiased;
42 }
43 .mono {
44 font-family: var(--mono);
45 text-transform: uppercase;
46 letter-spacing: 0.14em;
47 }
48 .disp {
49 font-family: var(--sans);
50 font-weight: 900;
51 letter-spacing: -0.04em;
52 line-height: 0.9;
53 }
54
55 section {
56 padding: 110px 88px;
57 position: relative;
58 }
59 .sec-head {
60 display: flex;
61 align-items: center;
62 gap: 18px;
63 border-bottom: 1px solid var(--border-dark);
64 padding-bottom: 18px;
65 margin-bottom: 56px;
66 }
67 .sec-head .k {
68 font-family: var(--mono);
69 text-transform: uppercase;
70 letter-spacing: 0.14em;
71 font-size: 13px;
72 color: var(--orange);
73 }
74 .sec-head h2 {
75 font-family: var(--sans);
76 font-weight: 900;
77 font-size: 52px;
78 line-height: 1;
79 letter-spacing: -0.03em;
80 text-transform: lowercase;
81 }
82 .sec-head .sp {
83 flex: 1;
84 }
85 .sec-head .num {
86 font-family: var(--mono);
87 font-size: 13px;
88 color: var(--cream-hint);
89 letter-spacing: 0.1em;
90 }
91
92 /* COVER (orange register) */
93 .cover {
94 min-height: 100vh;
95 background: var(--orange);
96 color: var(--ink);
97 padding: 80px 88px;
98 display: flex;
99 flex-direction: column;
100 justify-content: center;
101 position: relative;
102 }
103 .cover .topnum {
104 position: absolute;
105 top: 64px;
106 left: 88px;
107 font-family: var(--mono);
108 font-size: 14px;
109 letter-spacing: 0.1em;
110 color: rgba(17, 17, 17, 0.45);
111 }
112 .cover .topmeta {
113 position: absolute;
114 top: 64px;
115 right: 88px;
116 font-family: var(--mono);
117 text-transform: uppercase;
118 letter-spacing: 0.14em;
119 font-size: 13px;
120 color: var(--on-orange-hint);
121 }
122 .cover .rule {
123 width: 48px;
124 height: 3px;
125 background: var(--ink);
126 margin-bottom: 28px;
127 }
128 .cover .kick {
129 font-family: var(--mono);
130 text-transform: uppercase;
131 letter-spacing: 0.14em;
132 font-size: 14px;
133 color: var(--on-orange-hint);
134 margin-bottom: 20px;
135 }
136 .cover h1 {
137 font-family: var(--sans);
138 font-weight: 900;
139 font-size: clamp(80px, 13vw, 210px);
140 line-height: 0.86;
141 letter-spacing: -0.04em;
142 text-transform: lowercase;
143 }
144 .cover .lead {
145 font-family: var(--sans);
146 font-weight: 400;
147 font-size: clamp(18px, 1.6vw, 26px);
148 line-height: 1.45;
149 color: var(--on-orange-muted);
150 margin-top: 32px;
151 max-width: 60%;
152 }
153 .cover .foot {
154 position: absolute;
155 bottom: 64px;
156 left: 88px;
157 right: 88px;
158 display: flex;
159 justify-content: space-between;
160 font-family: var(--mono);
161 text-transform: uppercase;
162 letter-spacing: 0.14em;
163 font-size: 13px;
164 color: var(--on-orange-hint);
165 }
166
167 /* PALETTE */
168 .swatches {
169 display: grid;
170 grid-template-columns: repeat(4, 1fr);
171 gap: 0;
172 border: 1px solid var(--border-dark);
173 }
174 .sw {
175 border-right: 1px solid var(--border-dark);
176 border-bottom: 1px solid var(--border-dark);
177 padding: 0;
178 }
179 .sw:nth-child(4n) {
180 border-right: 0;
181 }
182 .sw:nth-child(n + 5) {
183 border-bottom: 0;
184 }
185 .sw .chip {
186 height: 120px;
187 border-bottom: 1px solid var(--border-dark);
188 }
189 .sw .meta {
190 padding: 16px 20px;
191 }
192 .sw .name {
193 font-family: var(--sans);
194 font-weight: 700;
195 font-size: 19px;
196 text-transform: lowercase;
197 }
198 .sw .hex {
199 font-family: var(--mono);
200 font-size: 11px;
201 letter-spacing: 0.06em;
202 color: var(--cream-hint);
203 margin-top: 6px;
204 }
205 .sw .role {
206 font-size: 12px;
207 line-height: 1.5;
208 color: var(--cream-muted);
209 margin-top: 10px;
210 font-family: var(--sans);
211 }
212
213 /* TYPE */
214 .type-row {
215 display: grid;
216 grid-template-columns: 200px 1fr;
217 align-items: baseline;
218 padding: 24px 0;
219 border-bottom: 1px solid var(--border-dark);
220 }
221 .type-row .tok {
222 font-family: var(--mono);
223 font-size: 12px;
224 letter-spacing: 0.08em;
225 color: var(--orange);
226 text-transform: uppercase;
227 }
228 .type-row .m {
229 font-family: var(--mono);
230 font-size: 11px;
231 color: var(--cream-hint);
232 margin-top: 8px;
233 line-height: 1.6;
234 letter-spacing: 0.04em;
235 }
236 .type-row .spec {
237 overflow: hidden;
238 }
239
240 /* COMPONENTS */
241 .cnote {
242 font-family: var(--mono);
243 text-transform: uppercase;
244 letter-spacing: 0.14em;
245 font-size: 12px;
246 color: var(--orange);
247 margin-bottom: 20px;
248 }
249 .cgrid {
250 display: grid;
251 grid-template-columns: repeat(12, 1fr);
252 gap: 40px;
253 margin-bottom: 52px;
254 }
255 .s3 {
256 grid-column: span 3;
257 }
258 .s4 {
259 grid-column: span 4;
260 }
261 .s5 {
262 grid-column: span 5;
263 }
264 .s6 {
265 grid-column: span 6;
266 }
267 .s7 {
268 grid-column: span 7;
269 }
270 .statcard {
271 border-top: 1px solid var(--border-dark);
272 padding: 20px 20px 20px 0;
273 }
274 .statcard .v {
275 font-family: var(--sans);
276 font-weight: 900;
277 font-size: 64px;
278 line-height: 1;
279 letter-spacing: -0.04em;
280 color: var(--orange);
281 }
282 .statcard .l {
283 font-family: var(--sans);
284 font-size: 16px;
285 color: var(--cream);
286 margin-top: 8px;
287 }
288 .statcard .n {
289 font-family: var(--mono);
290 font-size: 11px;
291 letter-spacing: 0.1em;
292 color: var(--cream-hint);
293 margin-top: 6px;
294 text-transform: uppercase;
295 }
296 .blist {
297 list-style: none;
298 }
299 .blist li {
300 font-family: var(--sans);
301 font-weight: 400;
302 font-size: 22px;
303 color: var(--cream);
304 padding: 10px 0 10px 36px;
305 position: relative;
306 }
307 .blist li::before {
308 content: "/";
309 position: absolute;
310 left: 0;
311 font-family: var(--mono);
312 font-weight: 700;
313 color: var(--orange);
314 }
315 .tag {
316 display: inline-block;
317 font-family: var(--mono);
318 text-transform: uppercase;
319 letter-spacing: 0.14em;
320 font-size: 12px;
321 color: var(--orange);
322 border: 1px solid var(--orange);
323 padding: 0.3em 0.8em;
324 }
325 .barchart {
326 display: flex;
327 align-items: flex-end;
328 gap: 18px;
329 height: 200px;
330 border-left: 1px solid var(--border-dark);
331 padding-left: 18px;
332 }
333 .barchart .bar {
334 flex: 1;
335 background: var(--cream-hint);
336 }
337 .barchart .bar.accent {
338 background: var(--orange);
339 }
340 .barlabels {
341 display: flex;
342 gap: 18px;
343 padding-left: 18px;
344 margin-top: 10px;
345 }
346 .barlabels span {
347 flex: 1;
348 text-align: center;
349 font-family: var(--mono);
350 font-size: 11px;
351 letter-spacing: 0.08em;
352 color: var(--cream-hint);
353 }
354 .compare {
355 display: grid;
356 grid-template-columns: 1fr 1fr;
357 border: 1px solid var(--border-dark);
358 }
359 .compare .l {
360 padding: 32px;
361 border-right: 1px solid var(--border-dark);
362 }
363 .compare .r {
364 padding: 32px;
365 background: var(--orange);
366 color: var(--ink);
367 }
368 .compare .ch {
369 font-family: var(--sans);
370 font-weight: 700;
371 font-size: 24px;
372 text-transform: lowercase;
373 }
374 .compare .cl {
375 font-family: var(--mono);
376 font-size: 11px;
377 letter-spacing: 0.1em;
378 text-transform: uppercase;
379 margin-bottom: 14px;
380 }
381 .compare .l .cl {
382 color: var(--orange);
383 }
384 .compare .r .cl {
385 color: var(--on-orange-hint);
386 }
387 .compare .cx {
388 font-size: 14px;
389 line-height: 1.5;
390 margin-top: 10px;
391 }
392 .compare .l .cx {
393 color: var(--cream-muted);
394 }
395 .compare .r .cx {
396 color: var(--on-orange-muted);
397 }
398
399 /* COMPOSITIONS */
400 .gallery {
401 display: grid;
402 grid-template-columns: 1fr 1fr;
403 gap: 48px;
404 }
405 .fw .flabel {
406 display: flex;
407 gap: 14px;
408 align-items: baseline;
409 margin-bottom: 16px;
410 font-family: var(--mono);
411 text-transform: uppercase;
412 letter-spacing: 0.12em;
413 font-size: 12px;
414 color: var(--cream-hint);
415 }
416 .fw .flabel b {
417 color: var(--cream);
418 }
419 .frame {
420 aspect-ratio: 16/9;
421 container-type: size;
422 position: relative;
423 overflow: hidden;
424 background: var(--ink);
425 border: 1px solid var(--border-dark);
426 }
427 .frame.orange {
428 background: var(--orange);
429 }
430 .frame > .body {
431 position: absolute;
432 inset: 0;
433 z-index: 2;
434 }
435
436 /* f1 cover orange */
437 .bf1 .body {
438 display: flex;
439 flex-direction: column;
440 justify-content: center;
441 padding: 0 5.5cqw;
442 color: var(--ink);
443 }
444 .bf1 .topnum {
445 position: absolute;
446 top: 4cqw;
447 left: 5.5cqw;
448 font-family: var(--mono);
449 font-size: 1cqw;
450 letter-spacing: 0.1em;
451 color: rgba(17, 17, 17, 0.45);
452 z-index: 3;
453 }
454 .bf1 .rule {
455 width: 3.4cqw;
456 height: 0.22cqw;
457 background: var(--ink);
458 margin-bottom: 1.6cqw;
459 }
460 .bf1 .kick {
461 font-family: var(--mono);
462 text-transform: uppercase;
463 letter-spacing: 0.14em;
464 font-size: 1cqw;
465 color: var(--on-orange-hint);
466 margin-bottom: 1.4cqw;
467 }
468 .bf1 h3 {
469 font-family: var(--sans);
470 font-weight: 900;
471 font-size: 13cqw;
472 line-height: 0.84;
473 letter-spacing: -0.04em;
474 text-transform: lowercase;
475 }
476
477 /* f2 statement dark */
478 .bf2 .body {
479 display: flex;
480 flex-direction: column;
481 justify-content: center;
482 padding: 0 5.5cqw;
483 }
484 .bf2 .kick {
485 font-family: var(--mono);
486 text-transform: uppercase;
487 letter-spacing: 0.14em;
488 font-size: 1cqw;
489 color: var(--orange);
490 margin-bottom: 1.6cqw;
491 }
492 .bf2 h3 {
493 font-family: var(--sans);
494 font-weight: 900;
495 font-size: 10cqw;
496 line-height: 0.86;
497 letter-spacing: -0.04em;
498 text-transform: lowercase;
499 color: var(--cream);
500 }
501 .bf2 h3 em {
502 font-style: normal;
503 color: var(--orange);
504 }
505
506 /* f3 stats dark */
507 .bf3 .body {
508 padding: 6cqw 5.5cqw;
509 display: flex;
510 flex-direction: column;
511 }
512 .bf3 .top {
513 display: flex;
514 justify-content: space-between;
515 border-bottom: 1px solid var(--border-dark);
516 padding-bottom: 1.2cqw;
517 margin-bottom: 3cqw;
518 font-family: var(--mono);
519 text-transform: uppercase;
520 letter-spacing: 0.14em;
521 font-size: 1cqw;
522 color: var(--cream-hint);
523 }
524 .bf3 .top .k {
525 color: var(--orange);
526 }
527 .bf3 .row {
528 display: grid;
529 grid-template-columns: repeat(3, 1fr);
530 gap: 3cqw;
531 }
532 .bf3 .sc {
533 border-top: 1px solid var(--border-dark);
534 padding-top: 1.4cqw;
535 }
536 .bf3 .sc .v {
537 font-family: var(--sans);
538 font-weight: 900;
539 font-size: 6cqw;
540 line-height: 1;
541 letter-spacing: -0.04em;
542 color: var(--orange);
543 }
544 .bf3 .sc .l {
545 font-family: var(--sans);
546 font-size: 1.3cqw;
547 color: var(--cream);
548 margin-top: 0.6cqw;
549 }
550 .bf3 .sc .n {
551 font-family: var(--mono);
552 font-size: 0.85cqw;
553 letter-spacing: 0.1em;
554 color: var(--cream-hint);
555 margin-top: 0.5cqw;
556 text-transform: uppercase;
557 }
558 .bf3 .foot {
559 margin-top: auto;
560 display: flex;
561 justify-content: space-between;
562 border-top: 1px solid var(--border-dark);
563 padding-top: 1.2cqw;
564 font-family: var(--mono);
565 text-transform: uppercase;
566 letter-spacing: 0.14em;
567 font-size: 0.9cqw;
568 color: var(--cream-hint);
569 }
570
571 /* f4 fadelist */
572 .bf4 {
573 background: var(--ink);
574 }
575 .bf4 .body {
576 display: grid;
577 grid-template-columns: 1fr 1fr;
578 align-items: center;
579 padding: 0 5.5cqw;
580 gap: 3cqw;
581 }
582 .bf4 .stack div {
583 font-family: var(--sans);
584 font-weight: 900;
585 font-size: 7cqw;
586 line-height: 1;
587 letter-spacing: -0.03em;
588 text-transform: lowercase;
589 color: var(--cream);
590 }
591 .bf4 .stack div:nth-child(2) {
592 opacity: 0.5;
593 }
594 .bf4 .stack div:nth-child(3) {
595 opacity: 0.22;
596 }
597 .bf4 .title {
598 font-family: var(--sans);
599 font-weight: 900;
600 font-size: 9cqw;
601 line-height: 0.9;
602 letter-spacing: -0.04em;
603 text-transform: lowercase;
604 color: var(--orange);
605 text-align: right;
606 }
607
608 /* PRINCIPLES */
609 .dos {
610 display: grid;
611 grid-template-columns: 1fr 1fr;
612 gap: 0;
613 border: 1px solid var(--border-dark);
614 }
615 .do-card {
616 padding: 40px;
617 }
618 .do-card.do {
619 border-right: 1px solid var(--border-dark);
620 }
621 .do-card h4 {
622 font-family: var(--sans);
623 font-weight: 900;
624 font-size: 34px;
625 text-transform: lowercase;
626 margin-bottom: 24px;
627 }
628 .do-card.do h4 {
629 color: var(--orange);
630 }
631 .do-card ul {
632 list-style: none;
633 }
634 .do-card li {
635 font-family: var(--sans);
636 font-size: 15px;
637 line-height: 1.55;
638 padding-left: 28px;
639 position: relative;
640 margin-bottom: 14px;
641 color: var(--cream-muted);
642 }
643 .do-card li::before {
644 content: "/";
645 position: absolute;
646 left: 0;
647 font-family: var(--mono);
648 font-weight: 700;
649 color: var(--orange);
650 }
651 .do-card.dont li::before {
652 content: "\00d7";
653 color: var(--cream-hint);
654 }
655
656 .foot {
657 padding: 56px 88px;
658 border-top: 1px solid var(--border-dark);
659 display: flex;
660 justify-content: space-between;
661 align-items: center;
662 }
663 .foot .l {
664 font-family: var(--sans);
665 font-weight: 900;
666 font-size: 30px;
667 text-transform: lowercase;
668 }
669 .foot .r {
670 font-family: var(--mono);
671 text-transform: uppercase;
672 letter-spacing: 0.14em;
673 font-size: 11px;
674 color: var(--cream-hint);
675 }
676 @media (max-width: 1100px) {
677 .gallery {
678 grid-template-columns: 1fr;
679 }
680 .swatches {
681 grid-template-columns: 1fr 1fr;
682 }
683 }
684 </style>
685 <link
686 rel="stylesheet"
687 href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700&display=swap"
688 />
689 <link
690 rel="stylesheet"
691 href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
692 />
693 <style id="ft-override">
694 :root {
695 --primary: #f0ece5 !important;
696 --secondary: #111111 !important;
697 --tertiary: #282826 !important;
698 --accent: #e85d26 !important;
699 --f-disp: "Barlow", sans-serif !important;
700 --f-body: "IBM Plex Mono", sans-serif !important;
701 --ink: #111111 !important;
702 --orange: #e85d26 !important;
703 --cream: #f0ece5 !important;
704 --border-dark: #282826 !important;
705 --sans: "Barlow", sans-serif !important;
706 --mono: "IBM Plex Mono", sans-serif !important;
707 --ink-alt: #1a1a18 !important;
708 --cream-muted: #888880 !important;
709 --cream-hint: #505048 !important;
710 --on-orange-muted: rgba(17, 17, 17, 0.75) !important;
711 --on-orange-hint: rgba(17, 17, 17, 0.55) !important;
712 --on-orange-faint: rgba(17, 17, 17, 0.4) !important;
713 --on-orange-border: rgba(17, 17, 17, 0.2) !important;
714 }
715 </style>
716 </head>
717 <body>
718 <!-- COVER -->
719 <section class="cover">
720 <div class="topnum">No. 01 / 06</div>
721 <div class="topmeta">Broadside — Frame System</div>
722 <div class="rule"></div>
723 <div class="kick">Protest-Poster Editorial</div>
724 <h1>ink on fire.</h1>
725 <div class="lead">
726 Massive Barlow type as graphic primitive, one fire-orange environment, and a flat plane
727 built from negative space — dark to document, orange to declare.
728 </div>
729 <div class="foot"><span>Barlow 900 · IBM Plex Mono</span><span>1920 × 1080</span></div>
730 </section>
731
732 <!-- PALETTE -->
733 <section>
734 <div class="sec-head">
735 <span class="k">01</span>
736 <h2>palette</h2>
737 <span class="sp"></span><span class="num">TWO REGISTERS</span>
738 </div>
739 <div class="swatches">
740 <div class="sw">
741 <div class="chip" style="background: var(--ink)"></div>
742 <div class="meta">
743 <div class="name">ink black</div>
744 <div class="hex">#111111</div>
745 <div class="role">Dark canvas + ink on orange.</div>
746 </div>
747 </div>
748 <div class="sw">
749 <div class="chip" style="background: var(--orange)"></div>
750 <div class="meta">
751 <div class="name">fire orange</div>
752 <div class="hex">#E85D26</div>
753 <div class="role">The accent and the environment.</div>
754 </div>
755 </div>
756 <div class="sw">
757 <div class="chip" style="background: var(--cream)"></div>
758 <div class="meta">
759 <div class="name">cream</div>
760 <div class="hex">#F0ECE5</div>
761 <div class="role">Text on dark — never pure white.</div>
762 </div>
763 </div>
764 <div class="sw">
765 <div class="chip" style="background: var(--cream-muted)"></div>
766 <div class="meta">
767 <div class="name">cream muted</div>
768 <div class="hex">#888880</div>
769 <div class="role">Secondary text on dark.</div>
770 </div>
771 </div>
772 <div class="sw">
773 <div class="chip" style="background: var(--cream-hint)"></div>
774 <div class="meta">
775 <div class="name">cream hint</div>
776 <div class="hex">#505048</div>
777 <div class="role">Tertiary / axis labels.</div>
778 </div>
779 </div>
780 <div class="sw">
781 <div class="chip" style="background: var(--ink-alt)"></div>
782 <div class="meta">
783 <div class="name">ink alt</div>
784 <div class="hex">#1A1A18</div>
785 <div class="role">Slightly raised dark surface.</div>
786 </div>
787 </div>
788 <div class="sw">
789 <div class="chip" style="background: var(--border-dark)"></div>
790 <div class="meta">
791 <div class="name">border dark</div>
792 <div class="hex">#282826</div>
793 <div class="role">The 1px hairline on dark.</div>
794 </div>
795 </div>
796 <div class="sw">
797 <div class="chip" style="background: var(--orange); opacity: 0.2"></div>
798 <div class="meta">
799 <div class="name">ink-on-orange</div>
800 <div class="hex">17,17,17 · .75–.20</div>
801 <div class="role">Muted ink tones on orange.</div>
802 </div>
803 </div>
804 </div>
805 </section>
806
807 <!-- TYPOGRAPHY -->
808 <section>
809 <div class="sec-head">
810 <span class="k">02</span>
811 <h2>typography</h2>
812 <span class="sp"></span><span class="num">BARLOW · PLEX MONO</span>
813 </div>
814 <div class="type-row">
815 <div>
816 <div class="tok">display</div>
817 <div class="m">Barlow 900 · 13vw · lowercase · −.04em</div>
818 </div>
819 <div class="spec"><span class="disp" style="font-size: 104px">shout.</span></div>
820 </div>
821 <div class="type-row">
822 <div>
823 <div class="tok">h2</div>
824 <div class="m">Barlow 700 · primary headline</div>
825 </div>
826 <div class="spec">
827 <span class="disp" style="font-weight: 700; font-size: 58px; letter-spacing: -0.02em"
828 >type as graphic primitive</span
829 >
830 </div>
831 </div>
832 <div class="type-row">
833 <div>
834 <div class="tok">stat-value</div>
835 <div class="m">Barlow 900 · orange on dark</div>
836 </div>
837 <div class="spec">
838 <span class="disp" style="font-size: 80px; color: var(--orange)">94%</span>
839 </div>
840 </div>
841 <div class="type-row">
842 <div>
843 <div class="tok">body</div>
844 <div class="m">Barlow 400 · cream · line 1.6</div>
845 </div>
846 <div class="spec">
847 <p style="font-size: 18px; line-height: 1.6; max-width: 660px; color: var(--cream)">
848 Barlow carries every text role — the expressive range comes from weight and size, not a
849 second face.
850 </p>
851 </div>
852 </div>
853 <div class="type-row" style="border-bottom: 0">
854 <div>
855 <div class="tok">label</div>
856 <div class="m">IBM Plex Mono 500 · uppercase · 0.14em</div>
857 </div>
858 <div class="spec">
859 <span class="mono" style="font-size: 14px; color: var(--orange)"
860 >Kicker / Catalogue Mark</span
861 >
862 </div>
863 </div>
864 </section>
865
866 <!-- COMPONENTS -->
867 <section>
868 <div class="sec-head">
869 <span class="k">03</span>
870 <h2>components</h2>
871 <span class="sp"></span><span class="num">FLAT · ONE ACCENT</span>
872 </div>
873
874 <div class="cgrid">
875 <div class="s5">
876 <div class="cnote">Stat cards — top border only</div>
877 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 32px">
878 <div class="statcard">
879 <div class="v">187px</div>
880 <div class="l">Display at 13vw</div>
881 <div class="n">Graphic primitive</div>
882 </div>
883 <div class="statcard">
884 <div class="v">2</div>
885 <div class="l">Color registers</div>
886 <div class="n">Dark / orange</div>
887 </div>
888 </div>
889 <div class="cnote" style="margin-top: 36px">Bullet list — capped at three</div>
890 <ul class="blist">
891 <li>one statement per slide</li>
892 <li>one accent color</li>
893 <li>breathing room</li>
894 </ul>
895 </div>
896 <div class="s3">
897 <div class="cnote">Vertical bars — one accent</div>
898 <div class="barchart">
899 <div class="bar" style="height: 52%"></div>
900 <div class="bar" style="height: 70%"></div>
901 <div class="bar accent" style="height: 100%"></div>
902 <div class="bar" style="height: 44%"></div>
903 </div>
904 <div class="barlabels"><span>q1</span><span>q2</span><span>q3</span><span>q4</span></div>
905 <div class="cnote" style="margin-top: 32px">Mono tag</div>
906 <span class="tag">Section / 03</span>
907 </div>
908 <div class="s4">
909 <div class="cnote">Compare panels — orange payoff</div>
910 <div class="compare">
911 <div class="l">
912 <div class="cl">Before</div>
913 <div class="ch">document</div>
914 <div class="cx">Dark register carries the evidence.</div>
915 </div>
916 <div class="r">
917 <div class="cl">After</div>
918 <div class="ch">declare</div>
919 <div class="cx">Orange register makes the call.</div>
920 </div>
921 </div>
922 </div>
923 </div>
924 </section>
925
926 <!-- COMPOSITIONS -->
927 <section>
928 <div class="sec-head">
929 <span class="k">04</span>
930 <h2>frame compositions</h2>
931 <span class="sp"></span><span class="num">TRUE 16:9 · CQW</span>
932 </div>
933 <div class="gallery">
934 <div class="fw">
935 <div class="flabel"><b>Cover</b><span>· identity · orange register · left</span></div>
936 <div class="frame orange bf1">
937 <div class="topnum">No. 01 / 06</div>
938 <div class="body">
939 <div class="rule"></div>
940 <div class="kick">Protest-Poster Editorial</div>
941 <h3>ink on fire.</h3>
942 </div>
943 </div>
944 </div>
945
946 <div class="fw">
947 <div class="flabel">
948 <b>Statement</b><span>· declarative · dark register · left</span>
949 </div>
950 <div class="frame bf2">
951 <div class="body">
952 <div class="kick">The Thesis</div>
953 <h3>type is the <em>composition.</em></h3>
954 </div>
955 </div>
956 </div>
957
958 <div class="fw">
959 <div class="flabel"><b>Stat Grid</b><span>· data · dark · the dense frame</span></div>
960 <div class="frame bf3">
961 <div class="body">
962 <div class="top"><span class="k">By The Numbers</span><span>FIG.03</span></div>
963 <div class="row">
964 <div class="sc">
965 <div class="v">13vw</div>
966 <div class="l">Display scale</div>
967 <div class="n">≈187px @1440</div>
968 </div>
969 <div class="sc">
970 <div class="v">3</div>
971 <div class="l">Bullets max</div>
972 <div class="n">Impact over info</div>
973 </div>
974 <div class="sc">
975 <div class="v">1</div>
976 <div class="l">Accent color</div>
977 <div class="n">Fire orange only</div>
978 </div>
979 </div>
980 <div class="foot"><span>Broadside</span><span>03 / 06</span></div>
981 </div>
982 </div>
983 </div>
984
985 <div class="fw">
986 <div class="flabel"><b>Fadelist</b><span>· narrative · before/during/after</span></div>
987 <div class="frame bf4">
988 <div class="body">
989 <div class="stack">
990 <div>past.</div>
991 <div>present.</div>
992 <div>future.</div>
993 </div>
994 <div class="title">the<br />arc.</div>
995 </div>
996 </div>
997 </div>
998 </div>
999 </section>
1000
1001 <!-- PRINCIPLES -->
1002 <section>
1003 <div class="sec-head">
1004 <span class="k">05</span>
1005 <h2>frame rules</h2>
1006 <span class="sp"></span><span class="num">INK ON FIRE</span>
1007 </div>
1008 <div class="dos">
1009 <div class="do-card do">
1010 <h4>do</h4>
1011 <ul>
1012 <li>Set every Barlow display in lowercase weight 900, negative-tracked.</li>
1013 <li>
1014 Make orange the full environment on declarative frames, the lone accent on dark.
1015 </li>
1016 <li>Keep chrome in IBM Plex Mono uppercase, 0.14em tracked.</li>
1017 <li>Cap bullet lists at three; one statement per frame.</li>
1018 <li>Build hierarchy from weight, size, and 1px hairlines only.</li>
1019 </ul>
1020 </div>
1021 <div class="do-card dont">
1022 <h4>don't</h4>
1023 <ul>
1024 <li>Never uppercase Barlow display — lowercase is the identity.</li>
1025 <li>No second accent color; no cream text on orange (ink on fire).</li>
1026 <li>No drop shadows, rounded surfaces, or gradient grounds.</li>
1027 <li>No serif companion; chrome is never set in Barlow.</li>
1028 <li>Don't pack two display moments into one frame.</li>
1029 </ul>
1030 </div>
1031 </div>
1032 </section>
1033
1034 <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
1035 <style>
1036 /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
1037 .capdemo {
1038 --cap-ink: var(--ink);
1039 --cap-canvas: var(--cream);
1040 --cap-accent: var(--orange);
1041 --cap-accent-2: var(--orange);
1042 }
1043 .capdemo .stage {
1044 position: absolute;
1045 left: 0;
1046 right: 0;
1047 bottom: 0;
1048 height: 16.67cqh;
1049 display: flex;
1050 align-items: center;
1051 justify-content: center;
1052 z-index: 4;
1053 }
1054 .capdemo .pill {
1055 max-width: 82cqw;
1056 padding: 1.2cqw 3cqw 1.5cqw;
1057 background: var(--cap-ink);
1058 border: 1px solid var(--cap-accent);
1059 border-radius: 0;
1060 }
1061 .capdemo .line {
1062 display: flex;
1063 flex-wrap: wrap;
1064 justify-content: center;
1065 gap: 0.04em 0.3em;
1066 font-family: var(--sans);
1067 font-weight: 900;
1068 font-size: 3.2cqw;
1069 line-height: 1.02;
1070 letter-spacing: -0.03em;
1071 text-transform: lowercase;
1072 }
1073 .capdemo .w {
1074 display: inline-block;
1075 padding: 0 0.08em;
1076 color: color-mix(in srgb, var(--cap-canvas) 42%, var(--cap-ink));
1077 }
1078 .capdemo .w.spoken {
1079 color: var(--cap-canvas);
1080 }
1081 .capdemo .w.active {
1082 color: var(--cap-ink);
1083 background: var(--cap-accent);
1084 box-shadow: 0 0 0 0.06em var(--cap-accent);
1085 }
1086 .capdemo .bandline {
1087 position: absolute;
1088 left: 0;
1089 right: 0;
1090 bottom: 16.67cqh;
1091 border-top: 1px dashed var(--border-dark);
1092 z-index: 3;
1093 }
1094 .capdemo .bandtag {
1095 position: absolute;
1096 right: 3cqw;
1097 bottom: calc(16.67cqh + 0.7cqw);
1098 font-family: var(--mono);
1099 text-transform: uppercase;
1100 font-size: 0.9cqw;
1101 letter-spacing: 0.1em;
1102 color: var(--cream-hint);
1103 z-index: 4;
1104 }
1105 </style>
1106 <section>
1107 <div class="sec-head">
1108 <span class="k">06</span>
1109 <h2>captions</h2>
1110 <span class="sp"></span><span class="num">LOWER-THIRD · KARAOKE</span>
1111 </div>
1112 <div class="gallery">
1113 <div class="fw">
1114 <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
1115 <div class="frame capdemo">
1116 <div class="bandline"></div>
1117 <div class="bandtag">caption band · 16.7%</div>
1118 <div class="stage">
1119 <div class="pill">
1120 <div class="line">
1121 <span class="w spoken">built</span>
1122 <span class="w spoken">for</span>
1123 <span class="w active">teams</span>
1124 <span class="w">who</span>
1125 <span class="w">ship.</span>
1126 </div>
1127 </div>
1128 </div>
1129 </div>
1130 </div>
1131
1132 <div class="fw">
1133 <div class="flabel">
1134 <b>Settled line</b><span>· all spoken · orange block cleared</span>
1135 </div>
1136 <div class="frame capdemo">
1137 <div class="stage">
1138 <div class="pill">
1139 <div class="line">
1140 <span class="w spoken">ship</span>
1141 <span class="w spoken">faster</span>
1142 <span class="w spoken">today.</span>
1143 </div>
1144 </div>
1145 </div>
1146 </div>
1147 </div>
1148 </div>
1149 </section>
1150
1151 <div class="foot">
1152 <span class="l">broadside</span>
1153 <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
1154 </div>
1155
1156 <template id="__bundler_thumbnail">
1157 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
1158 <rect width="100" height="100" fill="#E85D26" />
1159 <rect x="14" y="40" width="26" height="4" fill="#111111" />
1160 <text x="14" y="68" font-family="Arial" font-weight="900" font-size="22" fill="#111111">
1161 ink.
1162 </text>
1163 </svg>
1164 </template>
1165 </body>
1166</html>