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