Setting the file. One moment. Frame Showcase · Hyperframes Creative · heygen-com/hyperframes · Skills Docs22.10
Narration
(opens in a new tab)
frame-presets/coral/frame-showcase.html
HTML·1,268 lines·36 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=Bebas+Neue&family=Inter:wght@300;400;600;700&display=swap"
11 rel="stylesheet"
12 />
13 <style id="ds-tokens">
14 :root {
15 --coral: #e85d5d;
16 --coral-dark: #d44a4a;
17 --cream: #f5f0e8;
18 --cream-dark: #e8e0d4;
19 --ink: #1a1a1a;
20 --gray: #6b6b6b;
21 --light-gray: #b0b0b0;
22 --white: #ffffff;
23 --display: "Bebas Neue", sans-serif;
24 --body: "Inter", sans-serif;
25 --hatch: repeating-linear-gradient(
26 45deg,
27 transparent,
28 transparent 20px,
29 rgba(0, 0, 0, 0.06) 20px,
30 rgba(0, 0, 0, 0.06) 40px
31 );
32 }
33 * {
34 margin: 0;
35 padding: 0;
36 box-sizing: border-box;
37 }
38 html {
39 background: #0e0e0e;
40 }
41 body {
42 background: var(--cream);
43 color: var(--ink);
44 font-family: var(--body);
45 -webkit-font-smoothing: antialiased;
46 }
47 .beb {
48 font-family: var(--display);
49 text-transform: uppercase;
50 }
51 .eyebrow {
52 font-family: var(--body);
53 font-weight: 700;
54 text-transform: uppercase;
55 letter-spacing: 4px;
56 font-size: 13px;
57 color: var(--coral);
58 }
59
60 /* doc rhythm */
61 section {
62 padding: 120px 100px;
63 position: relative;
64 }
65 .sec-head {
66 display: flex;
67 align-items: flex-end;
68 gap: 24px;
69 margin-bottom: 64px;
70 border-bottom: 3px solid rgba(26, 26, 26, 0.15);
71 padding-bottom: 24px;
72 }
73 .sec-head .num {
74 font-family: var(--display);
75 font-size: 64px;
76 line-height: 0.8;
77 color: var(--coral);
78 }
79 .sec-head h2 {
80 font-family: var(--display);
81 font-size: 64px;
82 line-height: 0.8;
83 letter-spacing: 2px;
84 }
85 .sec-head .sp {
86 flex: 1;
87 }
88 .sec-head .tag {
89 font-family: var(--body);
90 font-weight: 600;
91 text-transform: uppercase;
92 letter-spacing: 3px;
93 font-size: 12px;
94 color: var(--gray);
95 }
96
97 /* COVER — region split */
98 .cover {
99 min-height: 100vh;
100 display: grid;
101 grid-template-rows: 38% 62%;
102 }
103 .cover .top {
104 background: var(--coral);
105 position: relative;
106 overflow: hidden;
107 padding: 56px 64px;
108 display: flex;
109 justify-content: space-between;
110 align-items: flex-start;
111 }
112 .cover .top::before {
113 content: "";
114 position: absolute;
115 inset: 0;
116 background: var(--hatch);
117 pointer-events: none;
118 }
119 .cover .top .brand {
120 font-family: var(--display);
121 font-size: 40px;
122 letter-spacing: 6px;
123 color: var(--ink);
124 position: relative;
125 z-index: 2;
126 }
127 .cover .top .meta {
128 text-align: right;
129 position: relative;
130 z-index: 2;
131 }
132 .cover .top .meta .ml {
133 font-family: var(--body);
134 font-weight: 600;
135 text-transform: uppercase;
136 letter-spacing: 3px;
137 font-size: 12px;
138 color: var(--ink);
139 opacity: 0.7;
140 }
141 .cover .top .meta .mf {
142 font-family: var(--display);
143 font-size: 38px;
144 letter-spacing: 2px;
145 color: var(--ink);
146 margin-top: 4px;
147 }
148 .cover .top .bignum {
149 position: absolute;
150 right: 48px;
151 bottom: -70px;
152 font-family: var(--display);
153 font-size: 340px;
154 line-height: 0.7;
155 color: rgba(0, 0, 0, 0.12);
156 z-index: 1;
157 }
158 .cover .bot {
159 background: var(--cream);
160 padding: 64px;
161 display: flex;
162 flex-direction: column;
163 justify-content: center;
164 }
165 .cover h1 {
166 font-family: var(--display);
167 font-size: clamp(80px, 13vw, 190px);
168 line-height: 0.88;
169 letter-spacing: 4px;
170 color: var(--ink);
171 }
172 .cover h1 em {
173 font-style: normal;
174 color: var(--coral);
175 }
176 .cover .rule {
177 height: 3px;
178 background: rgba(26, 26, 26, 0.15);
179 margin: 40px 0 28px;
180 max-width: 900px;
181 }
182 .cover .strap {
183 font-family: var(--body);
184 font-weight: 300;
185 font-size: 24px;
186 line-height: 1.5;
187 color: var(--gray);
188 max-width: 760px;
189 }
190 .cover .strap b {
191 font-weight: 600;
192 color: var(--ink);
193 }
194
195 /* PALETTE */
196 .swatches {
197 display: grid;
198 grid-template-columns: repeat(4, 1fr);
199 gap: 0;
200 border: 1px solid rgba(26, 26, 26, 0.12);
201 }
202 .sw {
203 padding: 0;
204 }
205 .sw .chip {
206 height: 160px;
207 border-bottom: 1px solid rgba(26, 26, 26, 0.12);
208 }
209 .sw:not(:last-child) {
210 border-right: 1px solid rgba(26, 26, 26, 0.12);
211 }
212 .sw .meta {
213 padding: 22px 24px;
214 }
215 .sw .name {
216 font-family: var(--display);
217 font-size: 30px;
218 letter-spacing: 2px;
219 }
220 .sw .hex {
221 font-family: var(--body);
222 font-size: 13px;
223 letter-spacing: 1px;
224 color: var(--gray);
225 margin-top: 4px;
226 }
227 .sw .role {
228 font-size: 13px;
229 line-height: 1.5;
230 color: var(--gray);
231 margin-top: 12px;
232 }
233 .palette-row {
234 display: grid;
235 grid-template-columns: repeat(4, 1fr);
236 }
237 .palette-row + .palette-row .sw .chip {
238 border-top: 0;
239 }
240
241 /* TYPE */
242 .type-row {
243 display: grid;
244 grid-template-columns: 260px 1fr;
245 border-bottom: 1px solid rgba(26, 26, 26, 0.12);
246 align-items: center;
247 }
248 .type-row .lbl {
249 padding: 28px 0;
250 }
251 .type-row .tok {
252 font-family: var(--body);
253 font-weight: 600;
254 text-transform: uppercase;
255 letter-spacing: 2px;
256 font-size: 13px;
257 }
258 .type-row .meta {
259 font-size: 12px;
260 color: var(--gray);
261 margin-top: 8px;
262 line-height: 1.6;
263 }
264 .type-row .spec {
265 padding: 28px 0 28px 40px;
266 border-left: 1px solid rgba(26, 26, 26, 0.12);
267 overflow: hidden;
268 }
269
270 /* COMPONENTS */
271 .comp-note {
272 font-family: var(--body);
273 font-weight: 600;
274 text-transform: uppercase;
275 letter-spacing: 2px;
276 font-size: 12px;
277 color: var(--gray);
278 margin-bottom: 18px;
279 }
280 .comp-grid {
281 display: grid;
282 grid-template-columns: repeat(12, 1fr);
283 gap: 28px;
284 margin-bottom: 56px;
285 }
286 .span3 {
287 grid-column: span 3;
288 }
289 .span4 {
290 grid-column: span 4;
291 }
292 .span6 {
293 grid-column: span 6;
294 }
295 .c-card {
296 background: var(--white);
297 border-top: 5px solid var(--coral);
298 padding: 32px;
299 height: 100%;
300 }
301 .c-card .ico {
302 width: 48px;
303 height: 48px;
304 background: var(--coral);
305 color: var(--white);
306 font-family: var(--display);
307 font-size: 24px;
308 display: grid;
309 place-items: center;
310 margin-bottom: 24px;
311 }
312 .c-card .t {
313 font-family: var(--display);
314 font-size: 34px;
315 letter-spacing: 1px;
316 line-height: 1.05;
317 }
318 .c-card .x {
319 font-size: 14px;
320 line-height: 1.6;
321 color: var(--gray);
322 margin-top: 14px;
323 }
324 .c-card .stat {
325 font-family: var(--display);
326 font-size: 48px;
327 color: var(--coral);
328 margin-top: 24px;
329 line-height: 1;
330 }
331 .c-side {
332 background: var(--white);
333 border-left: 4px solid var(--coral);
334 padding: 20px 24px;
335 margin-bottom: 18px;
336 }
337 .c-side .v {
338 font-family: var(--display);
339 font-size: 44px;
340 letter-spacing: 1px;
341 line-height: 1;
342 }
343 .c-side .l {
344 font-family: var(--body);
345 font-size: 12px;
346 letter-spacing: 1px;
347 color: var(--gray);
348 margin-top: 6px;
349 }
350 .c-accent {
351 width: 80px;
352 height: 4px;
353 background: var(--coral);
354 }
355 .timeline {
356 position: relative;
357 height: 120px;
358 margin-top: 20px;
359 }
360 .timeline .line {
361 position: absolute;
362 top: 20px;
363 left: 0;
364 right: 0;
365 height: 4px;
366 background: var(--ink);
367 }
368 .timeline .pt {
369 position: absolute;
370 top: 12px;
371 width: 20px;
372 height: 20px;
373 border-radius: 50%;
374 background: var(--coral);
375 border: 4px solid var(--cream);
376 }
377 .timeline .lab {
378 position: absolute;
379 top: 44px;
380 font-family: var(--display);
381 font-size: 22px;
382 letter-spacing: 1px;
383 transform: translateX(-50%);
384 }
385 .infobar {
386 background: var(--cream-dark);
387 display: flex;
388 justify-content: space-between;
389 align-items: center;
390 padding: 28px 36px;
391 }
392 .infobar .bt {
393 font-family: var(--display);
394 font-size: 44px;
395 letter-spacing: 2px;
396 }
397 .infobar .bm {
398 font-family: var(--body);
399 font-size: 12px;
400 letter-spacing: 2px;
401 text-transform: uppercase;
402 color: var(--gray);
403 }
404
405 /* COMPOSITIONS */
406 .gallery {
407 display: grid;
408 grid-template-columns: 1fr 1fr;
409 gap: 48px;
410 }
411 .fw .flabel {
412 display: flex;
413 gap: 14px;
414 align-items: baseline;
415 margin-bottom: 16px;
416 font-family: var(--body);
417 font-weight: 600;
418 text-transform: uppercase;
419 letter-spacing: 2px;
420 font-size: 12px;
421 color: var(--gray);
422 }
423 .fw .flabel b {
424 color: var(--ink);
425 letter-spacing: 1px;
426 }
427 .frame {
428 aspect-ratio: 16/9;
429 container-type: size;
430 position: relative;
431 overflow: hidden;
432 background: var(--cream);
433 box-shadow: 0 2px 0 rgba(26, 26, 26, 0.1);
434 }
435 .frame .hatch {
436 position: absolute;
437 inset: 0;
438 background: var(--hatch);
439 pointer-events: none;
440 z-index: 1;
441 }
442 .frame .z {
443 position: relative;
444 z-index: 2;
445 }
446
447 /* f1 cover region split */
448 .f1 {
449 display: grid;
450 grid-template-rows: 36% 64%;
451 }
452 .f1 .t {
453 background: var(--coral);
454 position: relative;
455 overflow: hidden;
456 display: flex;
457 justify-content: space-between;
458 align-items: flex-start;
459 padding: 2.6cqw 3cqw;
460 }
461 .f1 .t .brand {
462 font-family: var(--display);
463 font-size: 2cqw;
464 letter-spacing: 0.4cqw;
465 color: var(--ink);
466 }
467 .f1 .t .mf {
468 font-family: var(--display);
469 font-size: 1.9cqw;
470 letter-spacing: 0.1cqw;
471 color: var(--ink);
472 }
473 .f1 .t .bn {
474 position: absolute;
475 right: 2cqw;
476 bottom: -3cqw;
477 font-family: var(--display);
478 font-size: 16cqw;
479 line-height: 0.7;
480 color: rgba(0, 0, 0, 0.12);
481 }
482 .f1 .b {
483 background: var(--cream);
484 padding: 0 3cqw;
485 display: flex;
486 flex-direction: column;
487 justify-content: center;
488 }
489 .f1 .b h3 {
490 font-family: var(--display);
491 font-size: 8.5cqw;
492 line-height: 0.86;
493 letter-spacing: 0.3cqw;
494 color: var(--ink);
495 }
496 .f1 .b h3 em {
497 font-style: normal;
498 color: var(--coral);
499 }
500 .f1 .b .ey {
501 font-family: var(--body);
502 font-weight: 700;
503 text-transform: uppercase;
504 letter-spacing: 0.3cqw;
505 font-size: 0.95cqw;
506 color: var(--coral);
507 margin-bottom: 1.2cqw;
508 }
509
510 /* f2 feature stat — coral full + giant numeral */
511 .f2 {
512 background: var(--coral);
513 position: relative;
514 overflow: hidden;
515 display: flex;
516 flex-direction: column;
517 justify-content: center;
518 padding: 0 7cqw;
519 }
520 .f2 .bn {
521 position: absolute;
522 right: 3cqw;
523 top: -2cqw;
524 font-family: var(--display);
525 font-size: 34cqw;
526 line-height: 0.8;
527 color: rgba(0, 0, 0, 0.12);
528 z-index: 1;
529 }
530 .f2 .ey {
531 font-family: var(--body);
532 font-weight: 700;
533 text-transform: uppercase;
534 letter-spacing: 0.3cqw;
535 font-size: 1cqw;
536 color: var(--ink);
537 margin-bottom: 1.4cqw;
538 }
539 .f2 h3 {
540 font-family: var(--display);
541 font-size: 7cqw;
542 line-height: 0.9;
543 letter-spacing: 0.2cqw;
544 color: var(--ink);
545 }
546 .f2 .x {
547 font-family: var(--body);
548 font-weight: 300;
549 font-size: 1.5cqw;
550 line-height: 1.5;
551 color: var(--ink);
552 max-width: 44cqw;
553 margin-top: 1.6cqw;
554 }
555
556 /* f3 quote — coral panel + ink panel */
557 .f3 {
558 display: grid;
559 grid-template-columns: 40% 60%;
560 }
561 .f3 .l {
562 background: var(--coral);
563 position: relative;
564 overflow: hidden;
565 display: flex;
566 align-items: flex-start;
567 padding: 3cqw;
568 }
569 .f3 .l .mark {
570 font-family: var(--display);
571 font-size: 24cqw;
572 line-height: 0.6;
573 color: rgba(0, 0, 0, 0.35);
574 }
575 .f3 .r {
576 background: var(--ink);
577 display: flex;
578 flex-direction: column;
579 justify-content: center;
580 padding: 0 5cqw;
581 }
582 .f3 .r .q {
583 font-family: var(--body);
584 font-weight: 300;
585 font-size: 2.6cqw;
586 line-height: 1.35;
587 color: var(--cream);
588 }
589 .f3 .r .acc {
590 width: 4cqw;
591 height: 0.25cqw;
592 background: var(--coral);
593 margin: 2.4cqw 0 1.4cqw;
594 }
595 .f3 .r .at {
596 font-family: var(--body);
597 font-weight: 600;
598 text-transform: uppercase;
599 letter-spacing: 0.25cqw;
600 font-size: 0.95cqw;
601 color: var(--cream);
602 }
603 .f3 .r .ro {
604 font-family: var(--body);
605 font-size: 0.85cqw;
606 letter-spacing: 0.05cqw;
607 color: var(--light-gray);
608 margin-top: 0.4cqw;
609 }
610
611 /* f4 closing — cream + coral band */
612 .f4 {
613 background: var(--cream);
614 display: flex;
615 flex-direction: column;
616 justify-content: center;
617 align-items: center;
618 text-align: center;
619 position: relative;
620 }
621 .f4 .ey {
622 font-family: var(--body);
623 font-weight: 700;
624 text-transform: uppercase;
625 letter-spacing: 0.4cqw;
626 font-size: 1cqw;
627 color: var(--coral);
628 margin-bottom: 1.6cqw;
629 }
630 .f4 h3 {
631 font-family: var(--display);
632 font-size: 9cqw;
633 line-height: 0.86;
634 letter-spacing: 0.3cqw;
635 color: var(--ink);
636 }
637 .f4 .acc {
638 width: 5cqw;
639 height: 0.25cqw;
640 background: var(--coral);
641 margin-top: 2.4cqw;
642 }
643 .f4 .band {
644 position: absolute;
645 left: 0;
646 right: 0;
647 bottom: 0;
648 height: 8cqw;
649 background: var(--coral);
650 overflow: hidden;
651 display: flex;
652 align-items: center;
653 justify-content: space-between;
654 padding: 0 4cqw;
655 }
656 .f4 .band::before {
657 content: "";
658 position: absolute;
659 inset: 0;
660 background: var(--hatch);
661 }
662 .f4 .band span {
663 position: relative;
664 font-family: var(--display);
665 font-size: 2.2cqw;
666 letter-spacing: 0.2cqw;
667 color: var(--ink);
668 }
669
670 /* PRINCIPLES */
671 .dos {
672 display: grid;
673 grid-template-columns: 1fr 1fr;
674 gap: 40px;
675 }
676 .do-card {
677 padding: 40px;
678 }
679 .do-card.do {
680 background: var(--ink);
681 color: var(--cream);
682 }
683 .do-card.dont {
684 background: var(--white);
685 border-top: 5px solid var(--coral);
686 }
687 .do-card h4 {
688 font-family: var(--display);
689 font-size: 40px;
690 letter-spacing: 2px;
691 margin-bottom: 24px;
692 }
693 .do-card.do h4 {
694 color: var(--coral);
695 }
696 .do-card ul {
697 list-style: none;
698 }
699 .do-card li {
700 font-size: 16px;
701 line-height: 1.55;
702 padding-left: 26px;
703 position: relative;
704 margin-bottom: 14px;
705 }
706 .do-card li::before {
707 position: absolute;
708 left: 0;
709 font-family: var(--display);
710 font-size: 18px;
711 }
712 .do-card.do li::before {
713 content: "+";
714 color: var(--coral);
715 }
716 .do-card.dont li::before {
717 content: "\2715";
718 color: var(--coral);
719 }
720 .do-card.dont li {
721 color: var(--gray);
722 }
723
724 .foot {
725 padding: 64px 100px;
726 background: var(--ink);
727 color: var(--cream);
728 display: flex;
729 justify-content: space-between;
730 align-items: center;
731 }
732 .foot .l {
733 font-family: var(--display);
734 font-size: 30px;
735 letter-spacing: 3px;
736 }
737 .foot .r {
738 font-family: var(--body);
739 font-weight: 600;
740 text-transform: uppercase;
741 letter-spacing: 3px;
742 font-size: 12px;
743 color: var(--light-gray);
744 }
745 @media (max-width: 1100px) {
746 .gallery {
747 grid-template-columns: 1fr;
748 }
749 .swatches,
750 .palette-row {
751 grid-template-columns: 1fr 1fr;
752 }
753 }
754 </style>
755 <link
756 rel="stylesheet"
757 href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"
758 />
759 <link
760 rel="stylesheet"
761 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
762 />
763 <style id="ft-override">
764 :root {
765 --primary: #f5f0e8 !important;
766 --secondary: #1a1a1a !important;
767 --tertiary: #6b6b6b !important;
768 --accent: #e85d5d !important;
769 --f-disp: "Bebas Neue", sans-serif !important;
770 --f-body: "Inter", sans-serif !important;
771 --coral: #e85d5d !important;
772 --cream: #f5f0e8 !important;
773 --ink: #1a1a1a !important;
774 --gray: #6b6b6b !important;
775 --display: "Bebas Neue", sans-serif !important;
776 --body: "Inter", sans-serif !important;
777 --coral-dark: #d44a4a !important;
778 --cream-dark: #e8e0d4 !important;
779 --light-gray: #b0b0b0 !important;
780 --white: #ffffff !important;
781 }
782 </style>
783 </head>
784 <body>
785 <!-- COVER -->
786 <section class="cover" style="padding: 0">
787 <div class="top">
788 <div class="brand">Coral</div>
789 <div class="meta">
790 <div class="ml">Frame System</div>
791 <div class="mf">Vol. 01 / 1920×1080</div>
792 </div>
793 <div class="bignum">01</div>
794 </div>
795 <div class="bot">
796 <h1>Solid planes,<br /><em>hard edges.</em></h1>
797 <div class="rule"></div>
798 <div class="strap">
799 <b>A bold magazine-poster system in motion.</b> Three surfaces — coral fire, ink black,
800 warm cream — meeting at hard color edges, animated by Bebas Neue caps and a constant 45°
801 hatch.
802 </div>
803 </div>
804 </section>
805
806 <!-- PALETTE -->
807 <section>
808 <div class="sec-head">
809 <span class="num">01</span>
810 <h2>Palette</h2>
811 <span class="sp"></span><span class="tag">Three surfaces + ink + neutrals</span>
812 </div>
813 <div class="swatches palette-row">
814 <div class="sw">
815 <div class="chip" style="background: var(--coral)"></div>
816 <div class="meta">
817 <div class="name">Coral</div>
818 <div class="hex">#E85D5D</div>
819 <div class="role">The signature — accent and full-region environment.</div>
820 </div>
821 </div>
822 <div class="sw">
823 <div class="chip" style="background: var(--coral-dark)"></div>
824 <div class="meta">
825 <div class="name">Coral Dark</div>
826 <div class="hex">#D44A4A</div>
827 <div class="role">Gradient stop + chart comparison series.</div>
828 </div>
829 </div>
830 <div class="sw">
831 <div class="chip" style="background: var(--cream)"></div>
832 <div class="meta">
833 <div class="name">Cream</div>
834 <div class="hex">#F5F0E8</div>
835 <div class="role">The warm canvas — magazine paper.</div>
836 </div>
837 </div>
838 <div class="sw">
839 <div class="chip" style="background: var(--ink)"></div>
840 <div class="meta">
841 <div class="name">Black</div>
842 <div class="hex">#1A1A1A</div>
843 <div class="role">Strongest surface; quote + statement grounds.</div>
844 </div>
845 </div>
846 </div>
847 <div class="swatches palette-row" style="border-top: 0">
848 <div class="sw">
849 <div class="chip" style="background: var(--cream-dark)"></div>
850 <div class="meta">
851 <div class="name">Cream Dark</div>
852 <div class="hex">#E8E0D4</div>
853 <div class="role">Subtle region differentiation; info bars.</div>
854 </div>
855 </div>
856 <div class="sw">
857 <div class="chip" style="background: var(--gray)"></div>
858 <div class="meta">
859 <div class="name">Gray</div>
860 <div class="hex">#6B6B6B</div>
861 <div class="role">Body paragraphs, labels, meta.</div>
862 </div>
863 </div>
864 <div class="sw">
865 <div class="chip" style="background: var(--light-gray)"></div>
866 <div class="meta">
867 <div class="name">Light Gray</div>
868 <div class="hex">#B0B0B0</div>
869 <div class="role">Tertiary text on ink surfaces.</div>
870 </div>
871 </div>
872 <div class="sw">
873 <div
874 class="chip"
875 style="background: var(--white); box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.12)"
876 ></div>
877 <div class="meta">
878 <div class="name">White</div>
879 <div class="hex">#FFFFFF</div>
880 <div class="role">Card fills against coral or cream.</div>
881 </div>
882 </div>
883 </div>
884 </section>
885
886 <!-- TYPOGRAPHY -->
887 <section style="background: var(--cream-dark)">
888 <div class="sec-head">
889 <span class="num">02</span>
890 <h2>Typography</h2>
891 <span class="sp"></span><span class="tag">Bebas Neue + Inter</span>
892 </div>
893 <div class="type-row">
894 <div class="lbl">
895 <div class="tok">hero-title</div>
896 <div class="meta">Bebas Neue · 120px · 4px track<br />uppercase always · line 0.9</div>
897 </div>
898 <div class="spec">
899 <span class="beb" style="font-size: 104px; letter-spacing: 4px; line-height: 0.9"
900 >Coral Fire</span
901 >
902 </div>
903 </div>
904 <div class="type-row">
905 <div class="lbl">
906 <div class="tok">jumbo-feature</div>
907 <div class="meta">Bebas Neue · up to 200px · 12px track</div>
908 </div>
909 <div class="spec">
910 <span class="beb" style="font-size: 120px; letter-spacing: 12px; color: var(--coral)"
911 >2026</span
912 >
913 </div>
914 </div>
915 <div class="type-row">
916 <div class="lbl">
917 <div class="tok">section-headline</div>
918 <div class="meta">Bebas Neue · 80px · 2px track</div>
919 </div>
920 <div class="spec">
921 <span class="beb" style="font-size: 72px; letter-spacing: 2px">Hard Color Edges</span>
922 </div>
923 </div>
924 <div class="type-row">
925 <div class="lbl">
926 <div class="tok">body-light</div>
927 <div class="meta">Inter · weight 300 · pull-quote voice</div>
928 </div>
929 <div class="spec">
930 <p style="font-weight: 300; font-size: 28px; line-height: 1.5; max-width: 760px">
931 The voice break — Inter Light takes over when content needs to feel personal rather than
932 declarative.
933 </p>
934 </div>
935 </div>
936 <div class="type-row" style="border-bottom: 0">
937 <div class="lbl">
938 <div class="tok">section-label</div>
939 <div class="meta">Inter · 700 · 4px track · uppercase</div>
940 </div>
941 <div class="spec"><span class="eyebrow">Fig. 02 — Type Specimen</span></div>
942 </div>
943 </section>
944
945 <!-- COMPONENTS -->
946 <section>
947 <div class="sec-head">
948 <span class="num">03</span>
949 <h2>Components</h2>
950 <span class="sp"></span><span class="tag">Flat · hard edges · coral borders</span>
951 </div>
952
953 <div class="comp-note">Column cards — white fill, 5px coral top border, 48px icon square</div>
954 <div class="comp-grid">
955 <div class="span4">
956 <div class="c-card">
957 <div class="ico">A</div>
958 <div class="t">Region Split</div>
959 <div class="x">Solid color planes meet at a hard edge. The boundary is the layout.</div>
960 <div class="stat">01</div>
961 </div>
962 </div>
963 <div class="span4">
964 <div class="c-card">
965 <div class="ico">B</div>
966 <div class="t">Diagonal Hatch</div>
967 <div class="x">A 45° 6%-opacity overlay gives coral regions texture without depth.</div>
968 <div class="stat">45°</div>
969 </div>
970 </div>
971 <div class="span4">
972 <div class="c-card">
973 <div class="ico">C</div>
974 <div class="t">Wallpaper Numeral</div>
975 <div class="x">Oversized Bebas at 12% opacity sits behind a region's title.</div>
976 <div class="stat">12%</div>
977 </div>
978 </div>
979 </div>
980
981 <div class="comp-grid">
982 <div class="span4">
983 <div class="comp-note">Sidebar tiles — 4px coral left border</div>
984 <div class="c-side">
985 <div class="v">240%</div>
986 <div class="l">Output Lift</div>
987 </div>
988 <div class="c-side">
989 <div class="v">3.4×</div>
990 <div class="l">Faster Cuts</div>
991 </div>
992 <div class="c-side" style="margin-bottom: 0">
993 <div class="v">12K</div>
994 <div class="l">Frames Shipped</div>
995 </div>
996 </div>
997 <div class="span4">
998 <div class="comp-note">Accent rule + info bar</div>
999 <div class="c-accent" style="margin-bottom: 28px"></div>
1000 <div class="infobar">
1001 <span class="bt">Coverage</span><span class="bm">Coral · Ink · Cream</span>
1002 </div>
1003 <div style="margin-top: 28px" class="comp-note">Card icon</div>
1004 <div
1005 class="ico"
1006 style="
1007 width: 48px;
1008 height: 48px;
1009 background: var(--coral);
1010 color: #fff;
1011 font-family: var(--display);
1012 font-size: 24px;
1013 display: grid;
1014 place-items: center;
1015 "
1016 >
1017 →
1018 </div>
1019 </div>
1020 <div class="span4">
1021 <div class="comp-note">Timeline — ink line, coral nodes, cream halo</div>
1022 <div class="timeline">
1023 <div class="line"></div>
1024 <div class="pt" style="left: 4%"></div>
1025 <div class="lab" style="left: 6%">Plan</div>
1026 <div class="pt" style="left: 34%"></div>
1027 <div class="lab" style="left: 36%">Block</div>
1028 <div class="pt" style="left: 64%"></div>
1029 <div class="lab" style="left: 66%">Set</div>
1030 <div class="pt" style="left: 92%"></div>
1031 <div class="lab" style="left: 90%">Ship</div>
1032 </div>
1033 </div>
1034 </div>
1035 </section>
1036
1037 <!-- COMPOSITIONS -->
1038 <section style="background: var(--cream-dark)">
1039 <div class="sec-head">
1040 <span class="num">04</span>
1041 <h2>Frame Compositions</h2>
1042 <span class="sp"></span><span class="tag">True 16:9 · cqw scaled</span>
1043 </div>
1044 <div class="gallery">
1045 <div class="fw">
1046 <div class="flabel"><b>Region-Split Cover</b><span>· identity · coral / cream</span></div>
1047 <div class="frame f1">
1048 <div class="t">
1049 <div class="brand">Coral</div>
1050 <div class="mf">Vol. 01</div>
1051 <div class="bn">01</div>
1052 </div>
1053 <div class="b">
1054 <div class="ey">Frame System</div>
1055 <h3>Solid planes,<br /><em>hard edges.</em></h3>
1056 </div>
1057 </div>
1058 </div>
1059
1060 <div class="fw">
1061 <div class="flabel">
1062 <b>Feature Stat</b><span>· coral environment · wallpaper numeral</span>
1063 </div>
1064 <div class="frame f2">
1065 <div class="bn">240</div>
1066 <div class="z">
1067 <div class="ey">By The Numbers</div>
1068 <h3>Two hundred<br />forty percent.</h3>
1069 <p class="x">
1070 Output lift across the system — the figure carries the region while the hatch gives
1071 it texture.
1072 </p>
1073 </div>
1074 </div>
1075 </div>
1076
1077 <div class="fw">
1078 <div class="flabel">
1079 <b>Quote Layout</b><span>· coral panel + ink panel · giant mark</span>
1080 </div>
1081 <div class="frame f3">
1082 <div class="l"><div class="mark">“</div></div>
1083 <div class="r">
1084 <div class="q">Bebas declares.<br />Inter explains.</div>
1085 <div class="acc"></div>
1086 <div class="at">The System Voice</div>
1087 <div class="ro">Typographic Principle</div>
1088 </div>
1089 </div>
1090 </div>
1091
1092 <div class="fw">
1093 <div class="flabel">
1094 <b>Closing Plate</b><span>· closer · cream + coral band · centered</span>
1095 </div>
1096 <div class="frame f4">
1097 <div class="ey">Coral — Frame System</div>
1098 <h3>Meet at<br />the edge.</h3>
1099 <div class="acc"></div>
1100 <div class="band"><span>Thank You</span><span>2026</span></div>
1101 </div>
1102 </div>
1103 </div>
1104 </section>
1105
1106 <!-- PRINCIPLES -->
1107 <section>
1108 <div class="sec-head">
1109 <span class="num">05</span>
1110 <h2>Frame Rules</h2>
1111 <span class="sp"></span><span class="tag">Flat · hard-edge · coral</span>
1112 </div>
1113 <div class="dos">
1114 <div class="do-card do">
1115 <h4>Do</h4>
1116 <ul>
1117 <li>Compose as multi-surface region splits — coral, ink, cream at hard edges.</li>
1118 <li>Set every Bebas element uppercase with 1–12px letter-spacing.</li>
1119 <li>Render eyebrows in coral on cream/ink, in ink on coral.</li>
1120 <li>Apply the 45° hatch at 6% opacity on coral regions.</li>
1121 <li>Fill underweight coral regions with a 12%-opacity wallpaper numeral.</li>
1122 </ul>
1123 </div>
1124 <div class="do-card dont">
1125 <h4>Don't</h4>
1126 <ul>
1127 <li>Never render Bebas in sentence case or without tracking.</li>
1128 <li>No fourth surface; no drop shadows, elevations, or rounded rectangles.</li>
1129 <li>No white headlines on coral — Bebas on coral is always ink.</li>
1130 <li>No gray headlines; gray is body and meta only.</li>
1131 <li>Don't pair Bebas with a different body sans than Inter.</li>
1132 </ul>
1133 </div>
1134 </div>
1135 </section>
1136
1137 <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
1138 <style>
1139 /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
1140 .capdemo {
1141 --cap-ink: var(--ink);
1142 --cap-canvas: var(--cream);
1143 --cap-accent: var(--coral);
1144 --cap-accent-2: var(--coral-dark);
1145 }
1146 .capdemo .stage {
1147 position: absolute;
1148 left: 0;
1149 right: 0;
1150 bottom: 0;
1151 height: 16.67cqh;
1152 display: flex;
1153 align-items: center;
1154 justify-content: center;
1155 z-index: 4;
1156 }
1157 .capdemo .pill {
1158 max-width: 80cqw;
1159 padding: 1.4cqw 3cqw 1.6cqw;
1160 background: var(--cap-canvas);
1161 border: 1px solid var(--cap-ink);
1162 border-radius: 0;
1163 }
1164 .capdemo .line {
1165 display: flex;
1166 flex-wrap: wrap;
1167 justify-content: center;
1168 gap: 0.1em 0.3em;
1169 font-family: var(--display);
1170 font-weight: 400;
1171 text-transform: uppercase;
1172 font-size: 3.6cqw;
1173 line-height: 1.04;
1174 letter-spacing: 0.06em;
1175 }
1176 .capdemo .w {
1177 display: inline-block;
1178 padding: 0 0.12em;
1179 color: color-mix(in srgb, var(--cap-ink) 40%, var(--cap-canvas));
1180 }
1181 .capdemo .w.spoken {
1182 color: var(--cap-ink);
1183 }
1184 .capdemo .w.active {
1185 color: var(--cap-ink);
1186 background: var(--cap-accent);
1187 box-shadow: 0 0 0 0.1em var(--cap-accent);
1188 }
1189 .capdemo .bandline {
1190 position: absolute;
1191 left: 0;
1192 right: 0;
1193 bottom: 16.67cqh;
1194 border-top: 1px dashed rgba(26, 26, 26, 0.28);
1195 z-index: 3;
1196 }
1197 .capdemo .bandtag {
1198 position: absolute;
1199 right: 3cqw;
1200 bottom: calc(16.67cqh + 0.7cqw);
1201 font-family: var(--body);
1202 font-weight: 600;
1203 text-transform: uppercase;
1204 font-size: 0.85cqw;
1205 letter-spacing: 0.1cqw;
1206 color: var(--gray);
1207 z-index: 4;
1208 }
1209 </style>
1210 <section>
1211 <div class="sec-head">
1212 <span class="num">06</span>
1213 <h2>Captions</h2>
1214 <span class="sp"></span><span class="tag">Lower-third · Karaoke</span>
1215 </div>
1216 <div class="gallery">
1217 <div class="fw">
1218 <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
1219 <div class="frame capdemo">
1220 <div class="hatch" style="background: var(--hatch); opacity: 0.5"></div>
1221 <div class="bandline"></div>
1222 <div class="bandtag">caption band · 16.7%</div>
1223 <div class="stage">
1224 <div class="pill">
1225 <div class="line">
1226 <span class="w spoken">Built</span>
1227 <span class="w spoken">for</span>
1228 <span class="w active">teams</span>
1229 <span class="w">who</span>
1230 <span class="w">ship.</span>
1231 </div>
1232 </div>
1233 </div>
1234 </div>
1235 </div>
1236
1237 <div class="fw">
1238 <div class="flabel"><b>Settled line</b><span>· all spoken · fill cleared</span></div>
1239 <div class="frame capdemo">
1240 <div class="stage">
1241 <div class="pill">
1242 <div class="line">
1243 <span class="w spoken">Ship</span>
1244 <span class="w spoken">faster</span>
1245 <span class="w spoken">today.</span>
1246 </div>
1247 </div>
1248 </div>
1249 </div>
1250 </div>
1251 </div>
1252 </section>
1253
1254 <div class="foot">
1255 <span class="l">Coral</span>
1256 <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
1257 </div>
1258
1259 <template id="__bundler_thumbnail">
1260 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
1261 <rect width="100" height="100" fill="#F5F0E8" />
1262 <rect width="100" height="42" fill="#E85D5D" />
1263 <rect x="20" y="60" width="60" height="9" fill="#1A1A1A" />
1264 <rect x="20" y="74" width="38" height="9" fill="#E85D5D" />
1265 </svg>
1266 </template>
1267 </body>
1268</html>