Setting the file. One moment. Frame Showcase · Hyperframes Creative · heygen-com/hyperframes · Skills Docs22.10
Narration
(opens in a new tab)
frame-presets/bold-poster/frame-showcase.html
HTML·1,140 lines·32 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=Shrikhand&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Space+Grotesk:wght@400;600&display=swap"
11 rel="stylesheet"
12 />
13 <style id="ds-tokens">
14 :root {
15 --bg: #ffffff;
16 --dark: #1c1410;
17 --red: #d8000f;
18 --light: #f5f2ef;
19 --disp: "Shrikhand", cursive;
20 --body: "Libre Baskerville", serif;
21 --mono: "Space Grotesk", sans-serif;
22 --stack-shadow:
23 2px 2px 0 rgba(28, 20, 16, 0.25), 4px 4px 0 rgba(28, 20, 16, 0.2),
24 6px 6px 0 rgba(28, 20, 16, 0.15);
25 }
26 * {
27 margin: 0;
28 padding: 0;
29 box-sizing: border-box;
30 }
31 html {
32 background: #0c0a08;
33 }
34 body {
35 background: var(--bg);
36 color: var(--dark);
37 font-family: var(--body);
38 -webkit-font-smoothing: antialiased;
39 }
40 .disp {
41 font-family: var(--disp);
42 font-weight: 400;
43 color: var(--dark);
44 }
45 .label {
46 font-family: var(--mono);
47 font-weight: 600;
48 text-transform: uppercase;
49 letter-spacing: 2px;
50 font-size: 11px;
51 color: var(--red);
52 }
53
54 section {
55 padding: 100px 64px;
56 position: relative;
57 }
58 .sec-head {
59 display: flex;
60 align-items: baseline;
61 gap: 20px;
62 margin-bottom: 52px;
63 border-bottom: 3px solid var(--dark);
64 padding-bottom: 18px;
65 }
66 .sec-head .k {
67 font-family: var(--mono);
68 font-weight: 600;
69 text-transform: uppercase;
70 letter-spacing: 3px;
71 font-size: 12px;
72 color: var(--red);
73 }
74 .sec-head h2 {
75 font-family: var(--disp);
76 font-weight: 400;
77 font-size: 52px;
78 line-height: 1;
79 color: var(--dark);
80 }
81 .sec-head .sp {
82 flex: 1;
83 }
84 .sec-head .n {
85 font-family: var(--mono);
86 font-weight: 600;
87 text-transform: uppercase;
88 letter-spacing: 2px;
89 font-size: 11px;
90 color: var(--dark);
91 }
92
93 /* COVER */
94 .cover {
95 min-height: 100vh;
96 padding: 7vh 64px;
97 display: flex;
98 flex-direction: column;
99 justify-content: center;
100 position: relative;
101 }
102 .cover .meta {
103 font-family: var(--body);
104 font-size: 14px;
105 color: var(--dark);
106 margin-bottom: 24px;
107 }
108 .cover .meta .label {
109 display: inline-block;
110 margin-bottom: 8px;
111 }
112 .cover .stack h1 {
113 font-family: var(--disp);
114 font-weight: 400;
115 line-height: 0.84;
116 }
117 .cover .l1 {
118 font-size: clamp(60px, 12vw, 150px);
119 color: var(--dark);
120 }
121 .cover .l2 {
122 font-size: clamp(72px, 14vw, 180px);
123 color: var(--red);
124 transform: rotate(-4deg);
125 transform-origin: left;
126 display: inline-block;
127 margin: 4px 0;
128 }
129 .cover .l3 {
130 font-size: clamp(56px, 11vw, 140px);
131 color: var(--dark);
132 transform: rotate(2deg);
133 transform-origin: left;
134 display: inline-block;
135 }
136 .cover .tagline {
137 font-family: var(--body);
138 font-size: clamp(15px, 1.5vw, 19px);
139 line-height: 1.6;
140 color: var(--dark);
141 max-width: 560px;
142 margin-top: 36px;
143 }
144 .cover .pbar {
145 position: absolute;
146 bottom: 0;
147 left: 0;
148 height: 5px;
149 width: 16%;
150 background: var(--red);
151 }
152 .cover .counter {
153 position: absolute;
154 bottom: 20px;
155 right: 32px;
156 font-family: var(--mono);
157 font-weight: 600;
158 text-transform: uppercase;
159 letter-spacing: 2px;
160 font-size: 11px;
161 color: var(--dark);
162 opacity: 0.5;
163 }
164
165 /* PALETTE */
166 .swatches {
167 display: grid;
168 grid-template-columns: repeat(4, 1fr);
169 gap: 0;
170 border: 3px solid var(--dark);
171 }
172 .sw {
173 border-right: 1.5px solid var(--dark);
174 }
175 .sw:last-child {
176 border-right: 0;
177 }
178 .sw .chip {
179 height: 150px;
180 border-bottom: 1.5px solid var(--dark);
181 }
182 .sw .meta {
183 padding: 18px 20px;
184 }
185 .sw .name {
186 font-family: var(--disp);
187 font-size: 24px;
188 color: var(--dark);
189 }
190 .sw .hex {
191 font-family: var(--mono);
192 font-size: 11px;
193 letter-spacing: 0.06em;
194 color: var(--dark);
195 opacity: 0.6;
196 margin-top: 8px;
197 }
198 .sw .role {
199 font-family: var(--body);
200 font-size: 12px;
201 line-height: 1.5;
202 color: var(--dark);
203 margin-top: 10px;
204 }
205
206 /* TYPE */
207 .type-row {
208 display: grid;
209 grid-template-columns: 200px 1fr;
210 align-items: center;
211 padding: 26px 0;
212 border-bottom: 1.5px solid var(--dark);
213 }
214 .type-row .tok {
215 font-family: var(--mono);
216 font-weight: 600;
217 font-size: 11px;
218 letter-spacing: 2px;
219 text-transform: uppercase;
220 color: var(--red);
221 }
222 .type-row .m {
223 font-family: var(--body);
224 font-size: 12px;
225 color: var(--dark);
226 opacity: 0.65;
227 margin-top: 8px;
228 line-height: 1.5;
229 }
230 .type-row .spec {
231 overflow: hidden;
232 }
233
234 /* COMPONENTS */
235 .cnote {
236 font-family: var(--mono);
237 font-weight: 600;
238 text-transform: uppercase;
239 letter-spacing: 2px;
240 font-size: 11px;
241 color: var(--red);
242 margin-bottom: 20px;
243 }
244 .cgrid {
245 display: grid;
246 grid-template-columns: repeat(12, 1fr);
247 gap: 36px;
248 margin-bottom: 48px;
249 }
250 .s4 {
251 grid-column: span 4;
252 }
253 .s5 {
254 grid-column: span 5;
255 }
256 .s6 {
257 grid-column: span 6;
258 }
259 .s7 {
260 grid-column: span 7;
261 }
262 .s8 {
263 grid-column: span 8;
264 }
265 .fingrid {
266 border: 3px solid var(--dark);
267 display: grid;
268 grid-template-columns: repeat(3, 1fr);
269 }
270 .fingrid .cell {
271 border: 1.5px solid var(--dark);
272 padding: 22px 20px;
273 }
274 .fingrid .cell .num {
275 font-family: var(--disp);
276 font-size: 44px;
277 color: var(--red);
278 line-height: 1;
279 }
280 .fingrid .cell .lab {
281 font-family: var(--mono);
282 font-weight: 600;
283 text-transform: uppercase;
284 letter-spacing: 2px;
285 font-size: 10px;
286 color: var(--dark);
287 margin-top: 10px;
288 }
289 .fingrid .cell .bd {
290 font-family: var(--body);
291 font-size: 12px;
292 line-height: 1.55;
293 color: var(--dark);
294 margin-top: 8px;
295 }
296 .leftcard {
297 border-left: 4px solid var(--red);
298 padding-left: 18px;
299 }
300 .leftcard .t {
301 font-family: var(--disp);
302 font-size: 30px;
303 color: var(--dark);
304 line-height: 1.1;
305 }
306 .leftcard .bd {
307 font-family: var(--body);
308 font-size: 14px;
309 line-height: 1.6;
310 color: var(--dark);
311 margin-top: 10px;
312 }
313 .leftcard ul {
314 list-style: none;
315 margin-top: 14px;
316 }
317 .leftcard li {
318 font-family: var(--mono);
319 font-weight: 400;
320 font-size: 12px;
321 line-height: 1.5;
322 color: var(--dark);
323 padding-left: 16px;
324 position: relative;
325 margin-bottom: 6px;
326 }
327 .leftcard li::before {
328 content: "—";
329 position: absolute;
330 left: 0;
331 color: var(--red);
332 font-weight: 700;
333 }
334 .redpanel {
335 background: var(--red);
336 color: var(--bg);
337 padding: 48px;
338 }
339 .redpanel .q {
340 font-family: var(--disp);
341 font-size: 48px;
342 line-height: 1.15;
343 color: var(--bg);
344 text-shadow: var(--stack-shadow);
345 }
346 .redpanel .cite {
347 font-family: var(--body);
348 font-size: 14px;
349 color: var(--bg);
350 margin-top: 24px;
351 opacity: 0.85;
352 }
353 .tag {
354 display: inline-block;
355 font-family: var(--mono);
356 font-weight: 600;
357 text-transform: uppercase;
358 letter-spacing: 3px;
359 font-size: 11px;
360 color: var(--red);
361 border: 0;
362 padding: 0;
363 }
364
365 /* COMPOSITIONS */
366 .gallery {
367 display: grid;
368 grid-template-columns: 1fr 1fr;
369 gap: 48px;
370 }
371 .fw .flabel {
372 display: flex;
373 gap: 14px;
374 align-items: baseline;
375 margin-bottom: 16px;
376 font-family: var(--mono);
377 font-weight: 600;
378 text-transform: uppercase;
379 letter-spacing: 2px;
380 font-size: 11px;
381 color: var(--dark);
382 opacity: 0.55;
383 }
384 .fw .flabel b {
385 color: var(--dark);
386 opacity: 1;
387 }
388 .frame {
389 aspect-ratio: 16/9;
390 container-type: size;
391 position: relative;
392 overflow: hidden;
393 background: var(--bg);
394 border: 1.5px solid var(--dark);
395 }
396 .frame.red {
397 background: var(--red);
398 }
399 .frame.dark {
400 background: var(--dark);
401 }
402 .frame > .body {
403 position: absolute;
404 inset: 0;
405 z-index: 2;
406 }
407 .frame .pbar {
408 position: absolute;
409 bottom: 0;
410 left: 0;
411 height: 0.5cqw;
412 background: var(--red);
413 z-index: 5;
414 }
415
416 /* f1 hero stack */
417 .pf1 .body {
418 display: flex;
419 flex-direction: column;
420 justify-content: center;
421 padding: 0 5cqw;
422 }
423 .pf1 .label {
424 font-family: var(--mono);
425 font-weight: 600;
426 text-transform: uppercase;
427 letter-spacing: 0.25cqw;
428 font-size: 1cqw;
429 color: var(--red);
430 margin-bottom: 1.6cqw;
431 }
432 .pf1 h3 {
433 font-family: var(--disp);
434 font-weight: 400;
435 line-height: 0.84;
436 }
437 .pf1 .a {
438 font-size: 11cqw;
439 color: var(--dark);
440 }
441 .pf1 .b {
442 font-size: 13cqw;
443 color: var(--red);
444 transform: rotate(-4deg);
445 transform-origin: left;
446 display: inline-block;
447 margin: 0.3cqw 0;
448 }
449 .pf1 .c {
450 font-size: 10cqw;
451 color: var(--dark);
452 transform: rotate(2deg);
453 transform-origin: left;
454 display: inline-block;
455 }
456
457 /* f2 stat-big red panel */
458 .pf2 {
459 background: var(--red);
460 }
461 .pf2 .body {
462 display: flex;
463 flex-direction: column;
464 justify-content: center;
465 align-items: center;
466 text-align: center;
467 color: var(--bg);
468 }
469 .pf2 .label {
470 font-family: var(--mono);
471 font-weight: 600;
472 text-transform: uppercase;
473 letter-spacing: 0.3cqw;
474 font-size: 1.1cqw;
475 color: var(--bg);
476 opacity: 0.8;
477 margin-bottom: 1cqw;
478 }
479 .pf2 .big {
480 font-family: var(--disp);
481 font-weight: 400;
482 font-size: 30cqw;
483 line-height: 0.82;
484 color: var(--bg);
485 transform: rotate(-6deg);
486 text-shadow:
487 0.15cqw 0.15cqw 0 rgba(28, 20, 16, 0.25),
488 0.3cqw 0.3cqw 0 rgba(28, 20, 16, 0.2),
489 0.45cqw 0.45cqw 0 rgba(28, 20, 16, 0.15);
490 }
491 .pf2 .sub {
492 font-family: var(--body);
493 font-size: 1.6cqw;
494 color: var(--bg);
495 margin-top: 2cqw;
496 opacity: 0.9;
497 }
498
499 /* f3 financial grid */
500 .pf3 .body {
501 padding: 6cqw 5cqw;
502 display: flex;
503 flex-direction: column;
504 }
505 .pf3 .label {
506 font-family: var(--mono);
507 font-weight: 600;
508 text-transform: uppercase;
509 letter-spacing: 0.25cqw;
510 font-size: 0.95cqw;
511 color: var(--red);
512 margin-bottom: 0.8cqw;
513 }
514 .pf3 h3 {
515 font-family: var(--disp);
516 font-size: 4.4cqw;
517 color: var(--dark);
518 margin-bottom: 2cqw;
519 }
520 .pf3 .grid {
521 border: 0.3cqw solid var(--dark);
522 display: grid;
523 grid-template-columns: repeat(3, 1fr);
524 flex: 1;
525 }
526 .pf3 .cell {
527 border: 0.15cqw solid var(--dark);
528 padding: 1.6cqw;
529 }
530 .pf3 .cell .num {
531 font-family: var(--disp);
532 font-size: 4cqw;
533 color: var(--red);
534 line-height: 1;
535 }
536 .pf3 .cell .lab {
537 font-family: var(--mono);
538 font-weight: 600;
539 text-transform: uppercase;
540 letter-spacing: 0.15cqw;
541 font-size: 0.8cqw;
542 color: var(--dark);
543 margin-top: 0.8cqw;
544 }
545 .pf3 .cell .bd {
546 font-family: var(--body);
547 font-size: 0.95cqw;
548 line-height: 1.5;
549 color: var(--dark);
550 margin-top: 0.6cqw;
551 }
552
553 /* f4 quote red panel */
554 .pf4 {
555 background: var(--red);
556 }
557 .pf4 .body {
558 display: flex;
559 flex-direction: column;
560 justify-content: center;
561 padding: 0 7cqw;
562 color: var(--bg);
563 }
564 .pf4 .q {
565 font-family: var(--disp);
566 font-weight: 400;
567 font-size: 5.2cqw;
568 line-height: 1.15;
569 color: var(--bg);
570 text-shadow:
571 0.15cqw 0.15cqw 0 rgba(28, 20, 16, 0.25),
572 0.3cqw 0.3cqw 0 rgba(28, 20, 16, 0.2),
573 0.45cqw 0.45cqw 0 rgba(28, 20, 16, 0.15);
574 }
575 .pf4 .cite {
576 font-family: var(--body);
577 font-size: 1.3cqw;
578 color: var(--bg);
579 opacity: 0.85;
580 margin-top: 2.4cqw;
581 }
582
583 /* PRINCIPLES */
584 .dos {
585 display: grid;
586 grid-template-columns: 1fr 1fr;
587 gap: 0;
588 border: 3px solid var(--dark);
589 }
590 .do-card {
591 padding: 38px;
592 }
593 .do-card.do {
594 border-right: 1.5px solid var(--dark);
595 }
596 .do-card h4 {
597 font-family: var(--disp);
598 font-size: 34px;
599 color: var(--dark);
600 margin-bottom: 22px;
601 }
602 .do-card ul {
603 list-style: none;
604 }
605 .do-card li {
606 font-family: var(--body);
607 font-size: 14px;
608 line-height: 1.55;
609 padding-left: 24px;
610 position: relative;
611 margin-bottom: 13px;
612 color: var(--dark);
613 }
614 .do-card li::before {
615 position: absolute;
616 left: 0;
617 font-weight: 700;
618 }
619 .do-card.do li::before {
620 content: "—";
621 color: var(--red);
622 }
623 .do-card.dont li::before {
624 content: "\00d7";
625 color: var(--dark);
626 opacity: 0.4;
627 }
628
629 .foot {
630 padding: 48px 64px;
631 border-top: 3px solid var(--dark);
632 display: flex;
633 justify-content: space-between;
634 align-items: center;
635 }
636 .foot .l {
637 font-family: var(--disp);
638 font-size: 30px;
639 color: var(--dark);
640 }
641 .foot .r {
642 font-family: var(--mono);
643 font-weight: 600;
644 text-transform: uppercase;
645 letter-spacing: 2px;
646 font-size: 11px;
647 color: var(--dark);
648 opacity: 0.55;
649 }
650 @media (max-width: 1100px) {
651 .gallery {
652 grid-template-columns: 1fr;
653 }
654 .swatches {
655 grid-template-columns: 1fr 1fr;
656 }
657 }
658 </style>
659 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Shrikhand&display=swap" />
660 <link
661 rel="stylesheet"
662 href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap"
663 />
664 <style id="ft-override">
665 :root {
666 --primary: #ffffff !important;
667 --secondary: #1c1410 !important;
668 --tertiary: #f5f2ef !important;
669 --accent: #d8000f !important;
670 --f-disp: "Shrikhand", sans-serif !important;
671 --f-body: "Libre Baskerville", sans-serif !important;
672 --bg: #ffffff !important;
673 --dark: #1c1410 !important;
674 --red: #d8000f !important;
675 --light: #f5f2ef !important;
676 --disp: "Shrikhand", sans-serif !important;
677 --body: "Libre Baskerville", sans-serif !important;
678 }
679 </style>
680 </head>
681 <body>
682 <!-- COVER -->
683 <section class="cover">
684 <div class="meta">
685 <span class="label">Frame System · Vol. 01</span><br />A populist editorial poster system —
686 printed, loud, unmistakable.
687 </div>
688 <div class="stack">
689 <h1 class="l1">ink,</h1>
690 <br />
691 <h1 class="l2">red &</h1>
692 <br />
693 <h1 class="l3">paper.</h1>
694 </div>
695 <div class="tagline">
696 Vintage Italian sports-magazine display, classical serif body, one saturated tomato red, and
697 grids ruled in ink.
698 </div>
699 <div class="pbar"></div>
700 <div class="counter">01 / 06</div>
701 </section>
702
703 <!-- PALETTE -->
704 <section>
705 <div class="sec-head">
706 <span class="k">01</span>
707 <h2>Palette</h2>
708 <span class="sp"></span><span class="n">Four Colors, No More</span>
709 </div>
710 <div class="swatches">
711 <div class="sw">
712 <div
713 class="chip"
714 style="background: var(--bg); border-bottom: 1.5px solid var(--dark)"
715 ></div>
716 <div class="meta">
717 <div class="name">Paper</div>
718 <div class="hex">#FFFFFF</div>
719 <div class="role">Fresh newsprint canvas.</div>
720 </div>
721 </div>
722 <div class="sw">
723 <div class="chip" style="background: var(--dark)"></div>
724 <div class="meta">
725 <div class="name">Ink</div>
726 <div class="hex">#1C1410</div>
727 <div class="role">Warm brown-black — text + rules.</div>
728 </div>
729 </div>
730 <div class="sw">
731 <div class="chip" style="background: var(--red)"></div>
732 <div class="meta">
733 <div class="name">Red</div>
734 <div class="hex">#D8000F</div>
735 <div class="role">The only accent — numerals, rules, panels.</div>
736 </div>
737 </div>
738 <div class="sw">
739 <div class="chip" style="background: var(--light)"></div>
740 <div class="meta">
741 <div class="name">Off-White</div>
742 <div class="hex">#F5F2EF</div>
743 <div class="role">Alternating striped panels.</div>
744 </div>
745 </div>
746 </div>
747 </section>
748
749 <!-- TYPOGRAPHY -->
750 <section style="background: var(--light)">
751 <div class="sec-head">
752 <span class="k">02</span>
753 <h2>Typography</h2>
754 <span class="sp"></span><span class="n">Shrikhand · Baskerville · Grotesk</span>
755 </div>
756 <div class="type-row">
757 <div>
758 <div class="tok">stat-big</div>
759 <div class="m">Shrikhand 400 · rotated −6° · always red</div>
760 </div>
761 <div class="spec">
762 <span
763 class="disp"
764 style="
765 font-size: 110px;
766 color: var(--red);
767 display: inline-block;
768 transform: rotate(-6deg);
769 "
770 >94</span
771 >
772 </div>
773 </div>
774 <div class="type-row">
775 <div>
776 <div class="tok">section-header</div>
777 <div class="m">Shrikhand 400 · ink</div>
778 </div>
779 <div class="spec"><span class="disp" style="font-size: 60px">The Printed Page</span></div>
780 </div>
781 <div class="type-row">
782 <div>
783 <div class="tok">body</div>
784 <div class="m">Libre Baskerville 400 · line 1.75 · ink</div>
785 </div>
786 <div class="spec">
787 <p style="font-family: var(--body); font-size: 16px; line-height: 1.75; max-width: 640px">
788 Libre Baskerville carries every paragraph — the literary serif is what makes the system
789 feel printed, not digital.
790 </p>
791 </div>
792 </div>
793 <div class="type-row" style="border-bottom: 0">
794 <div>
795 <div class="tok">label</div>
796 <div class="m">Space Grotesk 600 · uppercase · 2–3px</div>
797 </div>
798 <div class="spec">
799 <span class="label" style="font-size: 13px; letter-spacing: 3px"
800 >Section Eyebrow / Metadata</span
801 >
802 </div>
803 </div>
804 </section>
805
806 <!-- COMPONENTS -->
807 <section>
808 <div class="sec-head">
809 <span class="k">03</span>
810 <h2>Components</h2>
811 <span class="sp"></span><span class="n">Heavy Rules · One Shadow</span>
812 </div>
813
814 <div class="cgrid">
815 <div class="s7">
816 <div class="cnote">Financial grid — 3px outer + 1.5px inner double border</div>
817 <div class="fingrid">
818 <div class="cell">
819 <div class="num">$24M</div>
820 <div class="lab">Revenue</div>
821 <div class="bd">Up across every region this year.</div>
822 </div>
823 <div class="cell">
824 <div class="num">+18%</div>
825 <div class="lab">Growth</div>
826 <div class="bd">Year over year, compounding.</div>
827 </div>
828 <div class="cell">
829 <div class="num">3.4×</div>
830 <div class="lab">Multiple</div>
831 <div class="bd">On invested capital to date.</div>
832 </div>
833 </div>
834 </div>
835 <div class="s5">
836 <div class="cnote">Red leftbar card</div>
837 <div class="leftcard">
838 <div class="t">Editorial Block</div>
839 <div class="bd">
840 Cantilevered off a 4px red rule — the card reads without an enclosing outline.
841 </div>
842 <ul>
843 <li>red em-dash bullets</li>
844 <li>capped at three</li>
845 <li>serif body, mono markers</li>
846 </ul>
847 </div>
848 </div>
849 </div>
850
851 <div class="cgrid" style="margin-bottom: 0">
852 <div class="s7">
853 <div class="cnote">Red panel — the one stacked text-shadow</div>
854 <div class="redpanel">
855 <div class="q">printed and pressed.</div>
856 <div class="cite">— White Shrikhand on red, stamped three times off-register.</div>
857 </div>
858 </div>
859 <div class="s5">
860 <div class="cnote">Tilted statement + tags</div>
861 <div style="display: flex; flex-direction: column; gap: 24px">
862 <span
863 class="disp"
864 style="
865 font-size: 80px;
866 color: var(--red);
867 transform: rotate(-5deg);
868 transform-origin: left;
869 display: inline-block;
870 "
871 >loud.</span
872 >
873 <div style="display: flex; gap: 18px">
874 <span class="tag">Sports Annual</span><span class="tag">Wine Catalogue</span>
875 </div>
876 </div>
877 </div>
878 </div>
879 </section>
880
881 <!-- COMPOSITIONS -->
882 <section style="background: var(--light)">
883 <div class="sec-head">
884 <span class="k">04</span>
885 <h2>Frame Compositions</h2>
886 <span class="sp"></span><span class="n">True 16:9 · cqw</span>
887 </div>
888 <div class="gallery">
889 <div class="fw">
890 <div class="flabel"><b>Hero Stack</b><span>· identity · 3-line tilted · left</span></div>
891 <div class="frame pf1">
892 <div class="body">
893 <div class="label">Frame System · Vol. 01</div>
894 <h3>
895 <span class="a">ink,</span><br /><span class="b">red &</span><br /><span
896 class="c"
897 >paper.</span
898 >
899 </h3>
900 </div>
901 <div class="pbar" style="width: 16%"></div>
902 </div>
903 </div>
904
905 <div class="fw">
906 <div class="flabel"><b>Hero Stat</b><span>· statement · red panel · centered</span></div>
907 <div class="frame red pf2">
908 <div class="body">
909 <div class="label">Readership</div>
910 <div class="big">94</div>
911 <div class="sub">percent recall, unaided.</div>
912 </div>
913 <div class="pbar" style="width: 48%"></div>
914 </div>
915 </div>
916
917 <div class="fw">
918 <div class="flabel">
919 <b>Financial Grid</b><span>· data · double border · the dense frame</span>
920 </div>
921 <div class="frame pf3">
922 <div class="body">
923 <div class="label">By The Numbers</div>
924 <h3>The Annual</h3>
925 <div class="grid">
926 <div class="cell">
927 <div class="num">$24M</div>
928 <div class="lab">Revenue</div>
929 <div class="bd">Up across every region.</div>
930 </div>
931 <div class="cell">
932 <div class="num">+18%</div>
933 <div class="lab">Growth</div>
934 <div class="bd">Year over year.</div>
935 </div>
936 <div class="cell">
937 <div class="num">3.4×</div>
938 <div class="lab">Multiple</div>
939 <div class="bd">On capital to date.</div>
940 </div>
941 </div>
942 </div>
943 <div class="pbar" style="width: 64%"></div>
944 </div>
945 </div>
946
947 <div class="fw">
948 <div class="flabel">
949 <b>Pull Quote</b><span>· quote · red panel · stacked shadow</span>
950 </div>
951 <div class="frame red pf4">
952 <div class="body">
953 <div class="q">type that<br />shouts.</div>
954 <div class="cite">— The system voice, printed and pressed.</div>
955 </div>
956 <div class="pbar" style="width: 82%"></div>
957 </div>
958 </div>
959 </div>
960 </section>
961
962 <!-- PRINCIPLES -->
963 <section>
964 <div class="sec-head">
965 <span class="k">05</span>
966 <h2>Frame Rules</h2>
967 <span class="sp"></span><span class="n">One Red · Square Corners</span>
968 </div>
969 <div class="dos">
970 <div class="do-card do">
971 <h4>Do</h4>
972 <ul>
973 <li>Stack hero titles in 3 Shrikhand lines — at least one tilted, one red.</li>
974 <li>Make every numeral red Shrikhand; tilt statement display −5° to −6°.</li>
975 <li>Set eyebrows in Space Grotesk 600 uppercase, 2–3px tracked, red.</li>
976 <li>Build data grids with 3px outer + 1.5px inner double borders.</li>
977 <li>Use red em-dash bullets, capped at three; serif body at line 1.75.</li>
978 </ul>
979 </div>
980 <div class="do-card dont">
981 <h4>Don't</h4>
982 <ul>
983 <li>No second accent color; no rounded corners (square only).</li>
984 <li>No drop shadows — the stacked text-shadow on red is the only one.</li>
985 <li>No font substitutes; no Shrikhand body, no Baskerville labels.</li>
986 <li>No default disc bullets; no untilted red statement display.</li>
987 <li>Don't crowd a statement frame — reserve the negative space.</li>
988 </ul>
989 </div>
990 </div>
991 </section>
992
993 <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
994 <style>
995 /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
996 .capdemo {
997 --cap-ink: var(--dark);
998 --cap-canvas: var(--bg);
999 --cap-accent: var(--red);
1000 --cap-accent-2: var(--light);
1001 }
1002 .capdemo .stage {
1003 position: absolute;
1004 left: 0;
1005 right: 0;
1006 bottom: 0;
1007 height: 16.67cqh;
1008 display: flex;
1009 align-items: center;
1010 justify-content: center;
1011 z-index: 4;
1012 }
1013 .capdemo .pill {
1014 max-width: 80cqw;
1015 padding: 1.4cqw 3cqw 1.7cqw;
1016 background: var(--cap-canvas);
1017 border: 1.5px solid var(--cap-ink);
1018 border-left: 0.35cqw solid var(--cap-accent);
1019 border-radius: 0;
1020 }
1021 .capdemo .line {
1022 display: flex;
1023 flex-wrap: wrap;
1024 justify-content: center;
1025 gap: 0.1em 0.34em;
1026 font-family: var(--body);
1027 font-weight: 400;
1028 font-size: 3.2cqw;
1029 line-height: 1.16;
1030 letter-spacing: -0.01em;
1031 }
1032 .capdemo .w {
1033 display: inline-block;
1034 padding: 0 0.06em;
1035 color: color-mix(in srgb, var(--cap-ink) 42%, var(--cap-canvas));
1036 }
1037 .capdemo .w.spoken {
1038 color: var(--cap-ink);
1039 }
1040 .capdemo .w.active {
1041 color: var(--cap-canvas);
1042 background: var(--cap-accent);
1043 box-shadow: 0 0 0 0.06em var(--cap-accent);
1044 text-shadow:
1045 0.03em 0.03em 0 rgba(28, 20, 16, 0.25),
1046 0.06em 0.06em 0 rgba(28, 20, 16, 0.2),
1047 0.09em 0.09em 0 rgba(28, 20, 16, 0.15);
1048 }
1049 .capdemo .bandline {
1050 position: absolute;
1051 left: 0;
1052 right: 0;
1053 bottom: 16.67cqh;
1054 border-top: 1px dashed rgba(28, 20, 16, 0.3);
1055 z-index: 3;
1056 }
1057 .capdemo .bandtag {
1058 position: absolute;
1059 right: 3cqw;
1060 bottom: calc(16.67cqh + 0.7cqw);
1061 font-family: var(--mono);
1062 font-size: 0.95cqw;
1063 letter-spacing: 0.04em;
1064 color: var(--dark);
1065 opacity: 0.5;
1066 z-index: 4;
1067 }
1068 </style>
1069 <section>
1070 <div class="sec-head">
1071 <span class="k">06</span>
1072 <h2>Captions</h2>
1073 <span class="sp"></span><span class="n">Lower-third · Karaoke</span>
1074 </div>
1075 <div class="gallery">
1076 <div class="fw">
1077 <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
1078 <div class="frame capdemo">
1079 <div class="bandline"></div>
1080 <div class="bandtag">caption band · 16.7%</div>
1081 <div class="stage">
1082 <div class="pill">
1083 <div class="line">
1084 <span class="w spoken">Built</span>
1085 <span class="w spoken">for</span>
1086 <span class="w active">teams</span>
1087 <span class="w">who</span>
1088 <span class="w">ship.</span>
1089 </div>
1090 </div>
1091 </div>
1092 <div class="pbar" style="width: 88%"></div>
1093 </div>
1094 </div>
1095
1096 <div class="fw">
1097 <div class="flabel"><b>Settled line</b><span>· all spoken · red panel cleared</span></div>
1098 <div class="frame capdemo">
1099 <div class="stage">
1100 <div class="pill">
1101 <div class="line">
1102 <span class="w spoken">Ship</span>
1103 <span class="w spoken">faster</span>
1104 <span class="w spoken">today.</span>
1105 </div>
1106 </div>
1107 </div>
1108 <div class="pbar" style="width: 100%"></div>
1109 </div>
1110 </div>
1111 </div>
1112 </section>
1113
1114 <div class="foot">
1115 <span class="l">Bold Poster</span>
1116 <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
1117 </div>
1118
1119 <template id="__bundler_thumbnail">
1120 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
1121 <rect width="100" height="100" fill="#FFFFFF" />
1122 <text x="12" y="42" font-family="Georgia" font-weight="700" font-size="26" fill="#1C1410">
1123 ink
1124 </text>
1125 <text
1126 x="14"
1127 y="70"
1128 font-family="Georgia"
1129 font-weight="700"
1130 font-size="30"
1131 fill="#D8000F"
1132 transform="rotate(-5 14 70)"
1133 >
1134 red.
1135 </text>
1136 <rect x="0" y="96" width="58" height="4" fill="#D8000F" />
1137 </svg>
1138 </template>
1139 </body>
1140</html>