Setting the file. One moment. Frame Showcase · Hyperframes Creative · heygen-com/hyperframes · Skills Docs22.10
Narration
(opens in a new tab)
frame-presets/creative-mode/frame-showcase.html
HTML·1,330 lines·38 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=Archivo+Black&family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap"
11 rel="stylesheet"
12 />
13 <style id="ds-tokens">
14 :root {
15 --cream: #efe9d9;
16 --cream-2: #e4dcc4;
17 --ink: #0f0f0f;
18 --ink-2: #2a2a2a;
19 --green: #1f8a4c;
20 --green-dark: #136636;
21 --pink: #f06ca8;
22 --pink-dark: #d14e8b;
23 --orange: #e85a1f;
24 --yellow: #f5c518;
25 --display: "Archivo Black", sans-serif;
26 --body: "Space Grotesk", sans-serif;
27 --mono: "JetBrains Mono", monospace;
28 }
29 * {
30 margin: 0;
31 padding: 0;
32 box-sizing: border-box;
33 }
34 html {
35 background: var(--ink-2);
36 }
37 body {
38 background: var(--cream);
39 color: var(--ink);
40 font-family: var(--body);
41 -webkit-font-smoothing: antialiased;
42 }
43 .disp {
44 font-family: var(--display);
45 text-transform: uppercase;
46 line-height: 0.92;
47 letter-spacing: -0.01em;
48 }
49 .mono {
50 font-family: var(--mono);
51 text-transform: uppercase;
52 }
53
54 /* ---------- doc rhythm ---------- */
55 section {
56 padding: 120px 96px;
57 border-bottom: 4px solid var(--ink);
58 }
59 .sec-head {
60 display: flex;
61 align-items: baseline;
62 gap: 24px;
63 margin-bottom: 64px;
64 }
65 .sec-head .idx {
66 font-family: var(--mono);
67 font-size: 18px;
68 letter-spacing: 0.14em;
69 text-transform: uppercase;
70 background: var(--ink);
71 color: var(--cream);
72 padding: 8px 14px;
73 }
74 .sec-head h2 {
75 font-family: var(--display);
76 text-transform: uppercase;
77 font-size: 52px;
78 line-height: 0.92;
79 letter-spacing: -0.01em;
80 }
81 .sec-head .rule {
82 flex: 1;
83 height: 4px;
84 background: var(--ink);
85 align-self: center;
86 }
87
88 /* ---------- COVER ---------- */
89 .cover {
90 min-height: 100vh;
91 padding: 64px;
92 display: grid;
93 grid-template-rows: auto 1fr auto;
94 gap: 40px;
95 position: relative;
96 overflow: hidden;
97 }
98 .cover .topbar {
99 display: flex;
100 justify-content: space-between;
101 align-items: center;
102 gap: 24px;
103 font-family: var(--mono);
104 font-size: 20px;
105 letter-spacing: 0.08em;
106 text-transform: uppercase;
107 }
108 .cover .topbar span:first-child {
109 white-space: nowrap;
110 }
111 .cover .stage {
112 display: flex;
113 flex-direction: column;
114 justify-content: center;
115 position: relative;
116 z-index: 2;
117 }
118 .cover .pill {
119 border: 2px solid var(--ink);
120 border-radius: 999px;
121 padding: 6px 18px;
122 white-space: nowrap;
123 }
124 .cover h1 {
125 font-family: var(--display);
126 text-transform: uppercase;
127 line-height: 0.86;
128 letter-spacing: -0.02em;
129 font-size: clamp(72px, 13vw, 210px);
130 }
131 .cover h1 .pink {
132 color: var(--pink);
133 }
134 .cover .sub {
135 display: flex;
136 gap: 18px;
137 align-items: center;
138 margin-top: 48px;
139 flex-wrap: wrap;
140 }
141 .cover .chip {
142 font-family: var(--mono);
143 font-size: 16px;
144 letter-spacing: 0.08em;
145 text-transform: uppercase;
146 border: 4px solid var(--ink);
147 padding: 12px 18px;
148 background: var(--cream);
149 white-space: nowrap;
150 }
151 .cover .chip.g {
152 background: var(--green);
153 color: var(--cream);
154 }
155 .cover .chip.y {
156 background: var(--yellow);
157 }
158 .cover .footer {
159 display: flex;
160 justify-content: space-between;
161 align-items: flex-end;
162 font-family: var(--mono);
163 font-size: 20px;
164 letter-spacing: 0.06em;
165 text-transform: uppercase;
166 position: relative;
167 z-index: 2;
168 padding-left: 200px;
169 }
170 .cover .dot {
171 display: inline-block;
172 width: 10px;
173 height: 10px;
174 border-radius: 50%;
175 background: var(--ink);
176 margin: 0 12px;
177 vertical-align: middle;
178 }
179 /* cover decor */
180 .cover .badge {
181 position: absolute;
182 top: 44%;
183 right: 6%;
184 width: 260px;
185 height: 260px;
186 background: var(--pink);
187 border: 4px solid var(--ink);
188 transform: rotate(-6deg);
189 display: grid;
190 place-items: center;
191 z-index: 1;
192 box-shadow:
193 24px 24px 0 var(--orange),
194 24px 24px 0 4px var(--ink);
195 }
196 .cover .badge .ring {
197 width: 84%;
198 height: 84%;
199 border: 4px solid var(--ink);
200 border-radius: 50%;
201 display: grid;
202 place-items: center;
203 text-align: center;
204 }
205 .cover .badge .ring span {
206 font-family: var(--display);
207 text-transform: uppercase;
208 line-height: 0.9;
209 font-size: 34px;
210 }
211 .cover .circle {
212 position: absolute;
213 left: -120px;
214 bottom: -120px;
215 width: 300px;
216 height: 300px;
217 border-radius: 50%;
218 background: var(--yellow);
219 border: 4px solid var(--ink);
220 z-index: 0;
221 }
222
223 /* ---------- PALETTE ---------- */
224 .swatches {
225 display: grid;
226 grid-template-columns: repeat(5, 1fr);
227 gap: 24px;
228 }
229 .sw {
230 border: 4px solid var(--ink);
231 }
232 .sw .chip {
233 height: 150px;
234 }
235 .sw .meta {
236 padding: 16px 18px;
237 border-top: 4px solid var(--ink);
238 background: var(--cream);
239 }
240 .sw .name {
241 font-family: var(--display);
242 text-transform: uppercase;
243 font-size: 22px;
244 line-height: 1;
245 }
246 .sw .hex {
247 font-family: var(--mono);
248 font-size: 16px;
249 letter-spacing: 0.04em;
250 margin-top: 8px;
251 color: var(--ink-2);
252 }
253 .sw .role {
254 font-size: 15px;
255 line-height: 1.4;
256 margin-top: 10px;
257 color: var(--ink-2);
258 }
259
260 /* ---------- TYPE ---------- */
261 .type-row {
262 border: 4px solid var(--ink);
263 margin-bottom: 24px;
264 display: grid;
265 grid-template-columns: 280px 1fr;
266 background: var(--cream);
267 }
268 .type-row .lbl {
269 border-right: 4px solid var(--ink);
270 padding: 24px;
271 background: var(--cream-2);
272 }
273 .type-row .lbl .tok {
274 font-family: var(--mono);
275 font-size: 16px;
276 letter-spacing: 0.06em;
277 text-transform: uppercase;
278 }
279 .type-row .lbl .meta {
280 font-family: var(--mono);
281 font-size: 13px;
282 color: var(--ink-2);
283 margin-top: 10px;
284 line-height: 1.6;
285 text-transform: none;
286 letter-spacing: 0;
287 }
288 .type-row .spec {
289 padding: 28px 32px;
290 display: flex;
291 align-items: center;
292 overflow: hidden;
293 }
294
295 /* ---------- COMPONENTS ---------- */
296 .comp-grid {
297 display: grid;
298 grid-template-columns: repeat(12, 1fr);
299 gap: 28px;
300 }
301 .stat-cell {
302 border: 4px solid var(--ink);
303 padding: 28px 32px;
304 }
305 .stat-cell .n {
306 font-family: var(--display);
307 font-size: 84px;
308 line-height: 0.9;
309 }
310 .stat-cell .l {
311 font-family: var(--mono);
312 font-size: 18px;
313 letter-spacing: 0.08em;
314 text-transform: uppercase;
315 margin-top: 12px;
316 }
317 .stat-cell.green {
318 background: var(--green);
319 color: var(--cream);
320 }
321 .stat-cell.pink {
322 background: var(--pink);
323 color: var(--ink);
324 }
325 .stat-cell.orange {
326 background: var(--orange);
327 color: var(--cream);
328 }
329 .stat-cell.cream {
330 background: var(--cream);
331 }
332 .step-card {
333 border: 4px solid var(--ink);
334 padding: 28px;
335 height: 300px;
336 display: flex;
337 flex-direction: column;
338 justify-content: space-between;
339 }
340 .step-card .num {
341 font-family: var(--display);
342 font-size: 120px;
343 line-height: 0.85;
344 }
345 .step-card .t {
346 font-family: var(--display);
347 text-transform: uppercase;
348 font-size: 28px;
349 line-height: 1;
350 }
351 .step-card .d {
352 font-size: 18px;
353 line-height: 1.4;
354 margin-top: 10px;
355 }
356 .step-card.cream {
357 background: var(--cream);
358 }
359 .step-card.yellow {
360 background: var(--yellow);
361 }
362 .step-card.pink {
363 background: var(--pink);
364 }
365 .step-card.green {
366 background: var(--green);
367 color: var(--cream);
368 }
369 .marker {
370 background: var(--pink);
371 border: 4px solid var(--ink);
372 padding: 36px 44px;
373 font-family: var(--display);
374 text-transform: uppercase;
375 font-size: 46px;
376 line-height: 1;
377 box-shadow:
378 24px 24px 0 var(--orange),
379 24px 24px 0 4px var(--ink);
380 align-self: flex-start;
381 }
382 .kicker-block {
383 background: var(--ink);
384 color: var(--cream);
385 font-family: var(--mono);
386 font-size: 20px;
387 letter-spacing: 0.14em;
388 text-transform: uppercase;
389 padding: 10px 18px;
390 align-self: flex-start;
391 }
392 .badge-rot {
393 background: var(--yellow);
394 border: 4px solid var(--ink);
395 font-family: var(--display);
396 text-transform: uppercase;
397 font-size: 26px;
398 padding: 14px 22px;
399 transform: rotate(-4deg);
400 align-self: flex-start;
401 }
402 .pill-badge {
403 border: 2px solid var(--ink);
404 border-radius: 999px;
405 font-family: var(--mono);
406 font-size: 18px;
407 letter-spacing: 0.06em;
408 text-transform: uppercase;
409 padding: 8px 18px;
410 align-self: flex-start;
411 }
412 .span-3 {
413 grid-column: span 3;
414 }
415 .span-4 {
416 grid-column: span 4;
417 }
418 .span-6 {
419 grid-column: span 6;
420 }
421 .span-12 {
422 grid-column: span 12;
423 }
424 .comp-note {
425 font-family: var(--mono);
426 font-size: 14px;
427 letter-spacing: 0.06em;
428 text-transform: uppercase;
429 color: var(--ink-2);
430 margin-bottom: 14px;
431 }
432
433 /* table */
434 .cm-table {
435 border: 4px solid var(--ink);
436 background: var(--cream-2);
437 width: 100%;
438 border-collapse: collapse;
439 }
440 .cm-table th,
441 .cm-table td {
442 border: 3px solid var(--ink);
443 padding: 18px 26px;
444 text-align: left;
445 font-size: 20px;
446 }
447 .cm-table thead th {
448 background: var(--ink);
449 color: var(--cream);
450 font-family: var(--display);
451 text-transform: uppercase;
452 font-size: 22px;
453 border-color: var(--cream);
454 }
455 .cm-table td.k {
456 font-family: var(--mono);
457 text-transform: uppercase;
458 letter-spacing: 0.04em;
459 font-size: 17px;
460 }
461 .cm-table .col-pink {
462 background: var(--pink);
463 }
464 .cm-table .col-green {
465 background: var(--green);
466 color: var(--cream);
467 }
468
469 /* ---------- COMPOSITIONS (frame scale) ---------- */
470 .gallery {
471 display: grid;
472 grid-template-columns: 1fr 1fr;
473 gap: 48px;
474 }
475 .frame-wrap .flabel {
476 display: flex;
477 gap: 16px;
478 align-items: baseline;
479 margin-bottom: 16px;
480 font-family: var(--mono);
481 font-size: 15px;
482 letter-spacing: 0.08em;
483 text-transform: uppercase;
484 color: var(--ink-2);
485 }
486 .frame-wrap .flabel b {
487 color: var(--ink);
488 }
489 .frame {
490 aspect-ratio: 16/9;
491 container-type: size;
492 position: relative;
493 overflow: hidden;
494 border: 4px solid var(--ink);
495 background: var(--cream);
496 }
497 .frame .chrome-top,
498 .frame .chrome-bot {
499 position: absolute;
500 left: 3.3cqw;
501 right: 3.3cqw;
502 display: flex;
503 justify-content: space-between;
504 align-items: center;
505 font-family: var(--mono);
506 text-transform: uppercase;
507 font-size: 1.15cqw;
508 letter-spacing: 0.08em;
509 color: var(--ink);
510 z-index: 5;
511 }
512 .frame .chrome-top {
513 top: 2.5cqw;
514 }
515 .frame .chrome-bot {
516 bottom: 2.5cqw;
517 }
518 .frame .chrome-top .pill {
519 border: 0.2cqw solid var(--ink);
520 border-radius: 999px;
521 padding: 0.3cqw 0.9cqw;
522 white-space: nowrap;
523 }
524 .frame > .f-cover,
525 .frame > .f-claim,
526 .frame > .f-stats,
527 .frame > .f-close {
528 position: absolute;
529 inset: 0;
530 }
531 .frame .cdot {
532 display: inline-block;
533 width: 0.5cqw;
534 height: 0.5cqw;
535 border-radius: 50%;
536 background: var(--ink);
537 margin: 0 0.6cqw;
538 vertical-align: middle;
539 }
540
541 /* frame 1 — cover */
542 .f-cover {
543 display: grid;
544 place-items: center;
545 }
546 .f-cover h3 {
547 font-family: var(--display);
548 text-transform: uppercase;
549 line-height: 0.84;
550 letter-spacing: -0.02em;
551 font-size: 15.5cqw;
552 text-align: center;
553 }
554 .f-cover h3 .o {
555 color: var(--orange);
556 }
557
558 /* frame 2 — big claim on pink */
559 .f-claim {
560 background: var(--pink);
561 display: flex;
562 align-items: center;
563 padding: 0 8cqw;
564 }
565 .f-claim .stack h3 {
566 font-family: var(--display);
567 text-transform: uppercase;
568 line-height: 0.9;
569 letter-spacing: -0.01em;
570 font-size: 11cqw;
571 color: var(--ink);
572 }
573 .f-claim .ek {
574 font-family: var(--mono);
575 font-size: 1.3cqw;
576 letter-spacing: 0.14em;
577 text-transform: uppercase;
578 background: var(--ink);
579 color: var(--cream);
580 padding: 0.5cqw 1cqw;
581 display: inline-block;
582 margin-bottom: 2.4cqw;
583 }
584
585 /* frame 3 — stat grid */
586 .f-stats {
587 display: grid;
588 place-content: center;
589 gap: 3cqw;
590 padding: 0 7cqw;
591 }
592 .f-stats .head {
593 font-family: var(--display);
594 text-transform: uppercase;
595 font-size: 4.2cqw;
596 line-height: 0.92;
597 text-align: center;
598 }
599 .f-stats .row {
600 display: grid;
601 grid-template-columns: repeat(3, 1fr);
602 gap: 2cqw;
603 }
604 .f-stats .cell {
605 border: 0.4cqw solid var(--ink);
606 padding: 2.2cqw 2.4cqw;
607 }
608 .f-stats .cell .n {
609 font-family: var(--display);
610 font-size: 6.4cqw;
611 line-height: 0.88;
612 }
613 .f-stats .cell .l {
614 font-family: var(--mono);
615 font-size: 1.2cqw;
616 letter-spacing: 0.08em;
617 text-transform: uppercase;
618 margin-top: 0.8cqw;
619 }
620 .f-stats .green {
621 background: var(--green);
622 color: var(--cream);
623 }
624 .f-stats .pink {
625 background: var(--pink);
626 }
627 .f-stats .orange {
628 background: var(--orange);
629 color: var(--cream);
630 }
631
632 /* frame 4 — closing green */
633 .f-close {
634 color: var(--cream);
635 display: grid;
636 place-items: center;
637 position: relative;
638 }
639 .f-close h3 {
640 font-family: var(--display);
641 text-transform: uppercase;
642 line-height: 0.86;
643 letter-spacing: -0.01em;
644 font-size: 10cqw;
645 text-align: center;
646 }
647 .f-close .stamp {
648 position: absolute;
649 right: 7cqw;
650 top: 18cqw;
651 width: 18cqw;
652 height: 18cqw;
653 background: var(--pink);
654 border: 0.5cqw solid var(--cream);
655 transform: rotate(-6deg);
656 display: grid;
657 place-items: center;
658 }
659 .f-close .stamp .ring {
660 width: 84%;
661 height: 84%;
662 border: 0.4cqw solid var(--cream);
663 border-radius: 50%;
664 display: grid;
665 place-items: center;
666 }
667 .f-close .stamp span {
668 font-family: var(--display);
669 text-transform: uppercase;
670 font-size: 2.2cqw;
671 line-height: 0.9;
672 text-align: center;
673 color: var(--cream);
674 }
675 .frame.f-close {
676 background: var(--green);
677 }
678 .frame.f-close .chrome-top,
679 .frame.f-close .chrome-bot {
680 color: var(--cream);
681 }
682 .f-close .chrome-top .pill {
683 border-color: var(--cream);
684 }
685 .f-close .cdot {
686 background: var(--cream);
687 }
688
689 /* ---------- principles ---------- */
690 .dos {
691 display: grid;
692 grid-template-columns: 1fr 1fr;
693 gap: 28px;
694 }
695 .do-card {
696 border: 4px solid var(--ink);
697 padding: 32px;
698 }
699 .do-card.do {
700 background: var(--green);
701 color: var(--cream);
702 }
703 .do-card.dont {
704 background: var(--cream);
705 }
706 .do-card h4 {
707 font-family: var(--display);
708 text-transform: uppercase;
709 font-size: 26px;
710 margin-bottom: 18px;
711 }
712 .do-card ul {
713 list-style: none;
714 }
715 .do-card li {
716 font-size: 18px;
717 line-height: 1.5;
718 padding-left: 28px;
719 position: relative;
720 margin-bottom: 12px;
721 }
722 .do-card li::before {
723 position: absolute;
724 left: 0;
725 font-family: var(--display);
726 }
727 .do-card.do li::before {
728 content: "+";
729 }
730 .do-card.dont li::before {
731 content: "\00d7";
732 color: var(--orange);
733 }
734
735 .foot {
736 padding: 64px 96px;
737 background: var(--ink);
738 color: var(--cream);
739 display: flex;
740 justify-content: space-between;
741 align-items: center;
742 font-family: var(--mono);
743 font-size: 16px;
744 letter-spacing: 0.08em;
745 text-transform: uppercase;
746 }
747 @media (max-width: 1100px) {
748 .gallery,
749 .swatches {
750 grid-template-columns: 1fr;
751 }
752 .swatches {
753 grid-template-columns: 1fr 1fr;
754 }
755 }
756 </style>
757 <link
758 rel="stylesheet"
759 href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap"
760 />
761 <link
762 rel="stylesheet"
763 href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap"
764 />
765 <style id="ft-override">
766 :root {
767 --primary: #efe9d9 !important;
768 --secondary: #0f0f0f !important;
769 --tertiary: #e4dcc4 !important;
770 --accent: #f06ca8 !important;
771 --f-disp: "Archivo Black", sans-serif !important;
772 --f-body: "Space Grotesk", sans-serif !important;
773 --cream: #efe9d9 !important;
774 --cream-2: #e4dcc4 !important;
775 --ink: #0f0f0f !important;
776 --pink: #f06ca8 !important;
777 --display: "Archivo Black", sans-serif !important;
778 --body: "Space Grotesk", sans-serif !important;
779 --ink-2: #2a2a2a !important;
780 --green: #1f8a4c !important;
781 --green-dark: #136636 !important;
782 --pink-dark: #d14e8b !important;
783 --orange: #e85a1f !important;
784 --yellow: #f5c518 !important;
785 }
786 </style>
787 </head>
788 <body>
789 <!-- ============ COVER ============ -->
790 <section class="cover">
791 <div class="topbar">
792 <span>Creative Mode — Frame System</span>
793 <span class="pill">Video / Frame Layer</span>
794 </div>
795 <div class="stage">
796 <h1>Creative<br /><span class="pink">Mode.</span></h1>
797 <div class="sub">
798 <span class="chip g">Neo-Brutalist</span>
799 <span class="chip">Archivo Black · JetBrains Mono</span>
800 <span class="chip y">4 Accents · Hard Shadow</span>
801 </div>
802 </div>
803 <div class="footer">
804 <span>Editorial · Punk-Zine · Swiss Grid</span>
805 <span>Frame Showcase<span class="dot"></span>1920 × 1080</span>
806 </div>
807 <div class="badge">
808 <div class="ring">
809 <span>Frame<br />Spec</span>
810 </div>
811 </div>
812 <div class="circle"></div>
813 </section>
814
815 <!-- ============ PALETTE ============ -->
816 <section>
817 <div class="sec-head">
818 <span class="idx">01</span>
819 <h2>Palette</h2>
820 <span class="rule"></span>
821 </div>
822 <div class="swatches">
823 <div class="sw">
824 <div class="chip" style="background: var(--cream)"></div>
825 <div class="meta">
826 <div class="name">Cream</div>
827 <div class="hex">#EFE9D9</div>
828 <div class="role">Universal canvas. Warm, never white.</div>
829 </div>
830 </div>
831 <div class="sw">
832 <div class="chip" style="background: var(--ink)"></div>
833 <div class="meta">
834 <div class="name">Ink</div>
835 <div class="hex">#0F0F0F</div>
836 <div class="role">Borders, type, rules, chrome.</div>
837 </div>
838 </div>
839 <div class="sw">
840 <div class="chip" style="background: var(--green)"></div>
841 <div class="meta">
842 <div class="name">Green</div>
843 <div class="hex">#1F8A4C</div>
844 <div class="role">Dominant accent + closing ground.</div>
845 </div>
846 </div>
847 <div class="sw">
848 <div class="chip" style="background: var(--pink)"></div>
849 <div class="meta">
850 <div class="name">Pink</div>
851 <div class="hex">#F06CA8</div>
852 <div class="role">High-energy fills, markers, stamp.</div>
853 </div>
854 </div>
855 <div class="sw">
856 <div class="chip" style="background: var(--orange)"></div>
857 <div class="meta">
858 <div class="name">Orange</div>
859 <div class="hex">#E85A1F</div>
860 <div class="role">The hard-shadow color. Stat fills.</div>
861 </div>
862 </div>
863 <div class="sw">
864 <div class="chip" style="background: var(--yellow)"></div>
865 <div class="meta">
866 <div class="name">Yellow</div>
867 <div class="hex">#F5C518</div>
868 <div class="role">Warm punctuation. Badges, circles.</div>
869 </div>
870 </div>
871 <div class="sw">
872 <div class="chip" style="background: var(--cream-2)"></div>
873 <div class="meta">
874 <div class="name">Cream 2</div>
875 <div class="hex">#E4DCC4</div>
876 <div class="role">Recessed table fill.</div>
877 </div>
878 </div>
879 <div class="sw">
880 <div class="chip" style="background: var(--ink-2)"></div>
881 <div class="meta">
882 <div class="name">Ink 2</div>
883 <div class="hex">#2A2A2A</div>
884 <div class="role">Secondary body text.</div>
885 </div>
886 </div>
887 <div class="sw">
888 <div class="chip" style="background: var(--green-dark)"></div>
889 <div class="meta">
890 <div class="name">Green Dk</div>
891 <div class="hex">#136636</div>
892 <div class="role">Depth on decorative levers.</div>
893 </div>
894 </div>
895 <div class="sw">
896 <div class="chip" style="background: var(--pink-dark)"></div>
897 <div class="meta">
898 <div class="name">Pink Dk</div>
899 <div class="hex">#D14E8B</div>
900 <div class="role">Shadow-side accent.</div>
901 </div>
902 </div>
903 </div>
904 </section>
905
906 <!-- ============ TYPOGRAPHY ============ -->
907 <section>
908 <div class="sec-head">
909 <span class="idx">02</span>
910 <h2>Typography</h2>
911 <span class="rule"></span>
912 </div>
913 <div class="type-row">
914 <div class="lbl">
915 <div class="tok">display-hero</div>
916 <div class="meta">Archivo Black · 160px<br />line 0.92 · upper · −.01em</div>
917 </div>
918 <div class="spec"><span class="disp" style="font-size: 128px">LOUD</span></div>
919 </div>
920 <div class="type-row">
921 <div class="lbl">
922 <div class="tok">display-md</div>
923 <div class="meta">Archivo Black · 96px<br />section headline</div>
924 </div>
925 <div class="spec"><span class="disp" style="font-size: 80px">MAKE IT MOVE</span></div>
926 </div>
927 <div class="type-row">
928 <div class="lbl">
929 <div class="tok">stat-num</div>
930 <div class="meta">Archivo Black · 96px<br />line 0.9</div>
931 </div>
932 <div class="spec">
933 <span class="disp" style="font-size: 88px"
934 >240<span style="color: var(--orange)">%</span></span
935 >
936 </div>
937 </div>
938 <div class="type-row">
939 <div class="lbl">
940 <div class="tok">body-lg</div>
941 <div class="meta">Space Grotesk · 28px<br />line 1.4 · left-aligned</div>
942 </div>
943 <div class="spec">
944 <p style="font-size: 24px; line-height: 1.4; max-width: 760px">
945 Body copy sits in Space Grotesk — left-aligned, never centered. It explains while the
946 display type declares.
947 </p>
948 </div>
949 </div>
950 <div class="type-row">
951 <div class="lbl">
952 <div class="tok">mono-kicker</div>
953 <div class="meta">JetBrains Mono · 24px<br />.14em · upper</div>
954 </div>
955 <div class="spec">
956 <span class="mono" style="font-size: 22px; letter-spacing: 0.14em"
957 >FIG. 02 — TYPE SPECIMEN</span
958 >
959 </div>
960 </div>
961 </section>
962
963 <!-- ============ COMPONENTS ============ -->
964 <section>
965 <div class="sec-head">
966 <span class="idx">03</span>
967 <h2>Components</h2>
968 <span class="rule"></span>
969 </div>
970
971 <div class="comp-note">Stat cells — 4px ink border, flat accent fills</div>
972 <div class="comp-grid" style="margin-bottom: 48px">
973 <div class="stat-cell green span-3">
974 <div class="n">240%</div>
975 <div class="l">Output Lift</div>
976 </div>
977 <div class="stat-cell pink span-3">
978 <div class="n">12K</div>
979 <div class="l">Frames Shipped</div>
980 </div>
981 <div class="stat-cell orange span-3">
982 <div class="n">3.4×</div>
983 <div class="l">Faster Cuts</div>
984 </div>
985 <div class="stat-cell cream span-3">
986 <div class="n">98</div>
987 <div class="l">Templates</div>
988 </div>
989 </div>
990
991 <div class="comp-note">Step cards — sequence ending on green</div>
992 <div class="comp-grid" style="margin-bottom: 48px">
993 <div class="step-card cream span-3">
994 <div class="num">01</div>
995 <div>
996 <div class="t">Block</div>
997 <div class="d">Lay the color planes.</div>
998 </div>
999 </div>
1000 <div class="step-card yellow span-3">
1001 <div class="num">02</div>
1002 <div>
1003 <div class="t">Set</div>
1004 <div class="d">Lock the display caps.</div>
1005 </div>
1006 </div>
1007 <div class="step-card pink span-3">
1008 <div class="num">03</div>
1009 <div>
1010 <div class="t">Stamp</div>
1011 <div class="d">Drop the hard shadow.</div>
1012 </div>
1013 </div>
1014 <div class="step-card green span-3">
1015 <div class="num">04</div>
1016 <div>
1017 <div class="t">Cut</div>
1018 <div class="d">Swap the ground.</div>
1019 </div>
1020 </div>
1021 </div>
1022
1023 <div class="comp-grid">
1024 <div class="span-6" style="display: flex; flex-direction: column; gap: 28px">
1025 <div class="comp-note">Featured marker — 24px hard offset shadow</div>
1026 <div class="marker">Make It Loud</div>
1027 <div class="comp-note" style="margin-top: 14px">Chrome atoms</div>
1028 <div style="display: flex; gap: 18px; flex-wrap: wrap">
1029 <span class="kicker-block">Section / 01</span>
1030 <span class="badge-rot">New</span>
1031 <span class="pill-badge">Topbar Pill</span>
1032 </div>
1033 </div>
1034 <div class="span-6">
1035 <div class="comp-note">Comparison table — cream-2 fill, ink head row</div>
1036 <table class="cm-table">
1037 <thead>
1038 <tr>
1039 <th>Spec</th>
1040 <th class="col-pink">Frame</th>
1041 <th class="col-green">Slide</th>
1042 </tr>
1043 </thead>
1044 <tbody>
1045 <tr>
1046 <td class="k">Border</td>
1047 <td>4px ink</td>
1048 <td>4px ink</td>
1049 </tr>
1050 <tr>
1051 <td class="k">Shadow</td>
1052 <td>24px hard</td>
1053 <td>none</td>
1054 </tr>
1055 <tr>
1056 <td class="k">Accents</td>
1057 <td>2–3 / frame</td>
1058 <td>2–3 / slide</td>
1059 </tr>
1060 </tbody>
1061 </table>
1062 </div>
1063 </div>
1064 </section>
1065
1066 <!-- ============ COMPOSITIONS ============ -->
1067 <section>
1068 <div class="sec-head">
1069 <span class="idx">04</span>
1070 <h2>Frame Compositions</h2>
1071 <span class="rule"></span>
1072 </div>
1073 <div class="gallery">
1074 <div class="frame-wrap">
1075 <div class="flabel"><b>Wordmark Cover</b><span>· identity · centered</span></div>
1076 <div class="frame">
1077 <div class="chrome-top">
1078 <span>Creative Mode</span><span class="pill">01 — Cover</span>
1079 </div>
1080 <div class="f-cover">
1081 <h3>Creative<br /><span class="o">Mode.</span></h3>
1082 </div>
1083 <div class="chrome-bot">
1084 <span>Editorial System</span><span>01<span class="cdot"></span>04</span>
1085 </div>
1086 </div>
1087 </div>
1088
1089 <div class="frame-wrap">
1090 <div class="flabel"><b>Big Claim</b><span>· oversized statement · left</span></div>
1091 <div class="frame">
1092 <div class="chrome-top"><span>Statement</span><span class="pill">02 — Claim</span></div>
1093 <div class="f-claim">
1094 <div class="stack">
1095 <span class="ek">The Thesis</span>
1096 <h3>Make<br />it move.</h3>
1097 </div>
1098 </div>
1099 <div class="chrome-bot">
1100 <span>One Idea / Frame</span><span>02<span class="cdot"></span>04</span>
1101 </div>
1102 </div>
1103 </div>
1104
1105 <div class="frame-wrap">
1106 <div class="flabel"><b>Stat Grid</b><span>· catalog · the density frame</span></div>
1107 <div class="frame">
1108 <div class="chrome-top">
1109 <span>By The Numbers</span><span class="pill">03 — Data</span>
1110 </div>
1111 <div class="f-stats">
1112 <div class="head">The Numbers Don't Whisper</div>
1113 <div class="row">
1114 <div class="cell green">
1115 <div class="n">240%</div>
1116 <div class="l">Output Lift</div>
1117 </div>
1118 <div class="cell pink">
1119 <div class="n">3.4×</div>
1120 <div class="l">Faster Cuts</div>
1121 </div>
1122 <div class="cell orange">
1123 <div class="n">12K</div>
1124 <div class="l">Frames Shipped</div>
1125 </div>
1126 </div>
1127 </div>
1128 <div class="chrome-bot">
1129 <span>Stat Cells</span><span>03<span class="cdot"></span>04</span>
1130 </div>
1131 </div>
1132 </div>
1133
1134 <div class="frame-wrap">
1135 <div class="flabel">
1136 <b>Closing Plate</b><span>· closer · green ground · centered</span>
1137 </div>
1138 <div class="frame f-close">
1139 <div class="chrome-top">
1140 <span>Creative Mode</span><span class="pill">04 — End</span>
1141 </div>
1142 <h3>That's<br />the mode.</h3>
1143 <div class="stamp">
1144 <div class="ring">
1145 <span>Cut<br />Print</span>
1146 </div>
1147 </div>
1148 <div class="chrome-bot">
1149 <span>Thank You</span><span>04<span class="cdot"></span>04</span>
1150 </div>
1151 </div>
1152 </div>
1153 </div>
1154 </section>
1155
1156 <!-- ============ PRINCIPLES ============ -->
1157 <section style="border-bottom: none">
1158 <div class="sec-head">
1159 <span class="idx">05</span>
1160 <h2>Frame Rules</h2>
1161 <span class="rule"></span>
1162 </div>
1163 <div class="dos">
1164 <div class="do-card do">
1165 <h4>Do</h4>
1166 <ul>
1167 <li>One idea per frame — two things means two frames.</li>
1168 <li>Lean centered; reserve the green ground for the closing plate.</li>
1169 <li>Two or three accents per frame, never all four.</li>
1170 <li>4px ink borders, 24px hard offset on featured blocks only.</li>
1171 <li>Archivo Black uppercase, 0.92 line-height, always.</li>
1172 </ul>
1173 </div>
1174 <div class="do-card dont">
1175 <h4>Don't</h4>
1176 <ul>
1177 <li>No rounded corners except the topbar pill.</li>
1178 <li>No gradients, no blurred shadows, no glow.</li>
1179 <li>No Archivo Black in sentence case, ever.</li>
1180 <li>No fifth accent; no pure-white background.</li>
1181 <li>No headline blown edge-to-edge — size to the line.</li>
1182 </ul>
1183 </div>
1184 </div>
1185 </section>
1186
1187 <!-- ============ CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) ============ -->
1188 <style>
1189 /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
1190 .capdemo {
1191 --cap-ink: var(--ink);
1192 --cap-canvas: var(--cream);
1193 --cap-accent: var(--yellow);
1194 --cap-accent-2: var(--orange);
1195 }
1196 .capdemo .stage {
1197 position: absolute;
1198 left: 0;
1199 right: 0;
1200 bottom: 0;
1201 height: 16.67cqh;
1202 display: flex;
1203 align-items: center;
1204 justify-content: center;
1205 z-index: 4;
1206 }
1207 .capdemo .pill {
1208 max-width: 82cqw;
1209 padding: 1.4cqw 3cqw 1.7cqw;
1210 background: var(--cap-canvas);
1211 border: 0.4cqw solid var(--cap-ink);
1212 border-radius: 0;
1213 box-shadow:
1214 1cqw 1cqw 0 var(--cap-accent-2),
1215 1cqw 1cqw 0 0.3cqw var(--cap-ink);
1216 }
1217 .capdemo .line {
1218 display: flex;
1219 flex-wrap: wrap;
1220 justify-content: center;
1221 gap: 0.16em 0.3em;
1222 font-family: var(--display);
1223 font-weight: 400;
1224 text-transform: uppercase;
1225 font-size: 3.2cqw;
1226 line-height: 0.92;
1227 letter-spacing: -0.01em;
1228 }
1229 .capdemo .w {
1230 display: inline-block;
1231 padding: 0.02em 0.1em;
1232 color: color-mix(in srgb, var(--cap-ink) 38%, var(--cap-canvas));
1233 }
1234 .capdemo .w.spoken {
1235 color: var(--cap-ink);
1236 }
1237 .capdemo .w.active {
1238 color: var(--cap-ink);
1239 background: var(--cap-accent);
1240 box-shadow: 0 0 0 0.08em var(--cap-accent);
1241 }
1242 .capdemo .bandline {
1243 position: absolute;
1244 left: 0;
1245 right: 0;
1246 bottom: 16.67cqh;
1247 border-top: 0.15cqw dashed color-mix(in srgb, var(--ink) 38%, var(--cream));
1248 z-index: 3;
1249 }
1250 .capdemo .bandtag {
1251 position: absolute;
1252 right: 3.3cqw;
1253 bottom: calc(16.67cqh + 0.7cqw);
1254 font-family: var(--mono);
1255 font-size: 1cqw;
1256 letter-spacing: 0.06em;
1257 text-transform: uppercase;
1258 color: var(--ink-2);
1259 z-index: 4;
1260 }
1261 </style>
1262 <section>
1263 <div class="sec-head">
1264 <span class="idx">06</span>
1265 <h2>Captions</h2>
1266 <span class="rule"></span>
1267 </div>
1268 <div class="gallery">
1269 <div class="frame-wrap">
1270 <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
1271 <div class="frame capdemo">
1272 <div class="chrome-top"><span>Captions</span><span class="pill">Karaoke</span></div>
1273 <div class="bandline"></div>
1274 <div class="bandtag">Caption Band · 16.7%</div>
1275 <div class="stage">
1276 <div class="pill">
1277 <div class="line">
1278 <span class="w spoken">Built</span>
1279 <span class="w spoken">for</span>
1280 <span class="w active">teams</span>
1281 <span class="w">who</span>
1282 <span class="w">ship.</span>
1283 </div>
1284 </div>
1285 </div>
1286 </div>
1287 </div>
1288
1289 <div class="frame-wrap">
1290 <div class="flabel">
1291 <b>Settled line</b><span>· all spoken · accent block cleared</span>
1292 </div>
1293 <div class="frame capdemo">
1294 <div class="chrome-top"><span>Captions</span><span class="pill">Lower-Third</span></div>
1295 <div class="stage">
1296 <div class="pill">
1297 <div class="line">
1298 <span class="w spoken">Ship</span>
1299 <span class="w spoken">faster</span>
1300 <span class="w spoken">today.</span>
1301 </div>
1302 </div>
1303 </div>
1304 </div>
1305 </div>
1306 </div>
1307 </section>
1308
1309 <div class="foot">
1310 <span>Creative Mode · Frame Showcase</span>
1311 <span>Atoms Sacred · Composition Free</span>
1312 </div>
1313
1314 <template id="__bundler_thumbnail">
1315 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
1316 <rect width="100" height="100" fill="#EFE9D9" />
1317 <rect
1318 x="30"
1319 y="30"
1320 width="40"
1321 height="40"
1322 fill="#F06CA8"
1323 stroke="#0F0F0F"
1324 stroke-width="4"
1325 />
1326 <rect x="36" y="36" width="40" height="40" fill="none" stroke="#0F0F0F" stroke-width="4" />
1327 </svg>
1328 </template>
1329 </body>
1330</html>