Setting the file. One moment. Frame Showcase · Hyperframes Creative · heygen-com/hyperframes · Skills Docs22.10
Narration
(opens in a new tab)
frame-presets/editorial-forest/frame-showcase.html
HTML·1,273 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=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=JetBrains+Mono:wght@400;500&display=swap"
11 rel="stylesheet"
12 />
13 <style id="ds-tokens">
14 :root {
15 --green: #2e4a2a;
16 --green-deep: #243a21;
17 --green-lite: #3a5a36;
18 --pink: #e89cb1;
19 --pink-deep: #d27e96;
20 --cream: #efe7d4;
21 --cream-2: #e6dcc4;
22 --ink: #1a1a17;
23 --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
24 --mono: "JetBrains Mono", ui-monospace, monospace;
25 }
26 * {
27 margin: 0;
28 padding: 0;
29 box-sizing: border-box;
30 }
31 html {
32 background: #14140f;
33 }
34 body {
35 background: var(--cream);
36 color: var(--ink);
37 font-family: var(--serif);
38 -webkit-font-smoothing: antialiased;
39 }
40 .serif {
41 font-family: var(--serif);
42 font-weight: 500;
43 letter-spacing: -0.02em;
44 line-height: 0.96;
45 }
46 .mono {
47 font-family: var(--mono);
48 font-weight: 500;
49 text-transform: uppercase;
50 letter-spacing: 0.16em;
51 }
52
53 section {
54 padding: 110px 120px;
55 position: relative;
56 }
57 .topbar {
58 display: flex;
59 justify-content: space-between;
60 align-items: center;
61 border-bottom: 2px solid var(--green);
62 padding-bottom: 18px;
63 margin-bottom: 56px;
64 }
65 .topbar .lbl {
66 font-family: var(--mono);
67 font-weight: 500;
68 text-transform: uppercase;
69 letter-spacing: 0.18em;
70 font-size: 15px;
71 color: var(--green);
72 }
73 .topbar h2 {
74 font-family: var(--serif);
75 font-weight: 500;
76 font-size: 48px;
77 letter-spacing: -0.02em;
78 line-height: 1;
79 }
80
81 /* COVER */
82 .cover {
83 min-height: 100vh;
84 background: var(--green);
85 color: var(--cream);
86 padding: 100px 140px;
87 display: flex;
88 flex-direction: column;
89 justify-content: center;
90 position: relative;
91 }
92 .cover .top {
93 position: absolute;
94 top: 64px;
95 left: 140px;
96 right: 140px;
97 display: flex;
98 justify-content: space-between;
99 align-items: center;
100 }
101 .cover .top .lbl {
102 font-family: var(--mono);
103 font-weight: 500;
104 text-transform: uppercase;
105 letter-spacing: 0.18em;
106 font-size: 15px;
107 color: var(--pink);
108 }
109 .cover .mono-circle {
110 width: 120px;
111 height: 120px;
112 border-radius: 50%;
113 border: 2px solid var(--pink);
114 display: grid;
115 place-items: center;
116 font-family: var(--mono);
117 font-weight: 500;
118 letter-spacing: 0.1em;
119 font-size: 24px;
120 color: var(--pink);
121 }
122 .cover h1 {
123 font-family: var(--serif);
124 font-weight: 500;
125 font-size: clamp(96px, 15vw, 210px);
126 line-height: 0.92;
127 letter-spacing: -0.02em;
128 color: var(--pink);
129 }
130 .cover h1 .cr {
131 color: var(--cream);
132 }
133 .cover .lede {
134 font-family: var(--serif);
135 font-weight: 400;
136 font-size: 28px;
137 line-height: 1.4;
138 color: var(--cream);
139 max-width: 760px;
140 margin-top: 36px;
141 }
142 .cover .footline {
143 position: absolute;
144 bottom: 64px;
145 left: 140px;
146 right: 140px;
147 display: flex;
148 justify-content: space-between;
149 font-family: var(--mono);
150 font-weight: 500;
151 text-transform: uppercase;
152 letter-spacing: 0.14em;
153 font-size: 14px;
154 color: var(--pink);
155 }
156
157 /* PALETTE */
158 .swatches {
159 display: grid;
160 grid-template-columns: repeat(4, 1fr);
161 gap: 0;
162 border: 2px solid var(--green);
163 }
164 .sw {
165 border-right: 2px solid var(--green);
166 border-bottom: 2px solid var(--green);
167 }
168 .sw:nth-child(4n) {
169 border-right: 0;
170 }
171 .sw:nth-child(n + 5) {
172 border-bottom: 0;
173 }
174 .sw .chip {
175 height: 130px;
176 border-bottom: 2px solid var(--green);
177 }
178 .sw .meta {
179 padding: 18px 20px;
180 background: var(--cream);
181 }
182 .sw .name {
183 font-family: var(--serif);
184 font-weight: 500;
185 font-size: 24px;
186 }
187 .sw .hex {
188 font-family: var(--mono);
189 font-size: 12px;
190 letter-spacing: 0.04em;
191 color: var(--ink);
192 opacity: 0.65;
193 margin-top: 6px;
194 }
195 .sw .role {
196 font-family: var(--serif);
197 font-weight: 400;
198 font-size: 14px;
199 line-height: 1.4;
200 color: var(--ink);
201 margin-top: 10px;
202 }
203
204 /* TYPE */
205 .type-row {
206 display: grid;
207 grid-template-columns: 240px 1fr;
208 align-items: center;
209 padding: 26px 0;
210 border-bottom: 2px solid rgba(46, 74, 42, 0.25);
211 }
212 .type-row .tok {
213 font-family: var(--mono);
214 font-weight: 500;
215 text-transform: uppercase;
216 letter-spacing: 0.14em;
217 font-size: 13px;
218 color: var(--green);
219 }
220 .type-row .m {
221 font-family: var(--mono);
222 font-size: 11px;
223 color: var(--ink);
224 opacity: 0.6;
225 margin-top: 8px;
226 line-height: 1.5;
227 letter-spacing: 0.02em;
228 }
229 .type-row .spec {
230 overflow: hidden;
231 }
232
233 /* COMPONENTS */
234 .cnote {
235 font-family: var(--mono);
236 font-weight: 500;
237 text-transform: uppercase;
238 letter-spacing: 0.16em;
239 font-size: 12px;
240 color: var(--green);
241 margin-bottom: 22px;
242 }
243 .cgrid {
244 display: grid;
245 grid-template-columns: repeat(12, 1fr);
246 gap: 28px;
247 margin-bottom: 52px;
248 }
249 .s3 {
250 grid-column: span 3;
251 }
252 .s4 {
253 grid-column: span 4;
254 }
255 .s5 {
256 grid-column: span 5;
257 }
258 .s6 {
259 grid-column: span 6;
260 }
261 .s7 {
262 grid-column: span 7;
263 }
264 .s8 {
265 grid-column: span 8;
266 }
267 .tile {
268 border-radius: 6px;
269 padding: 34px 32px;
270 min-height: 240px;
271 display: flex;
272 flex-direction: column;
273 }
274 .tile .ord {
275 font-family: var(--mono);
276 font-weight: 500;
277 text-transform: uppercase;
278 letter-spacing: 0.12em;
279 font-size: 14px;
280 }
281 .tile .ti {
282 font-family: var(--serif);
283 font-weight: 500;
284 font-size: 40px;
285 line-height: 0.98;
286 letter-spacing: -0.01em;
287 margin-top: auto;
288 }
289 .tile .ft {
290 font-family: var(--mono);
291 font-weight: 500;
292 text-transform: uppercase;
293 letter-spacing: 0.12em;
294 font-size: 12px;
295 margin-top: 14px;
296 }
297 .tile.green {
298 background: var(--green);
299 color: var(--cream);
300 }
301 .tile.green .ord,
302 .tile.green .ft {
303 color: var(--pink);
304 }
305 .tile.pink {
306 background: var(--pink);
307 color: var(--green-deep);
308 }
309 .tile.pink .ord,
310 .tile.pink .ft {
311 color: var(--green-deep);
312 }
313 .tile.lite {
314 background: var(--green-lite);
315 color: var(--pink);
316 }
317 .tile.lite .ti {
318 color: var(--cream);
319 }
320 .tile.cream2 {
321 background: var(--cream-2);
322 border: 2px solid var(--green);
323 color: var(--green);
324 }
325 .tile.cream2 .ord,
326 .tile.cream2 .ft {
327 color: var(--green);
328 }
329 .kpi {
330 border-top: 2px solid var(--green);
331 padding-top: 22px;
332 }
333 .kpi .tag {
334 font-family: var(--mono);
335 font-weight: 500;
336 text-transform: uppercase;
337 letter-spacing: 0.14em;
338 font-size: 13px;
339 color: var(--green);
340 }
341 .kpi .fig {
342 font-family: var(--serif);
343 font-weight: 500;
344 font-size: 128px;
345 line-height: 0.92;
346 letter-spacing: -0.03em;
347 color: var(--ink);
348 }
349 .kpi .fig .u {
350 font-size: 64px;
351 }
352 .kpi .d {
353 font-family: var(--serif);
354 font-weight: 400;
355 font-size: 18px;
356 line-height: 1.35;
357 color: var(--ink);
358 margin-top: 10px;
359 max-width: 280px;
360 }
361 .monobig {
362 width: 130px;
363 height: 130px;
364 border-radius: 50%;
365 border: 2px solid var(--pink);
366 display: grid;
367 place-items: center;
368 font-family: var(--mono);
369 font-weight: 500;
370 letter-spacing: 0.1em;
371 font-size: 26px;
372 color: var(--green);
373 }
374 .bars {
375 display: flex;
376 align-items: flex-end;
377 gap: 24px;
378 height: 200px;
379 border-bottom: 2px solid var(--green);
380 border-left: 2px solid var(--green);
381 padding: 0 8px;
382 }
383 .bars .bar {
384 width: 56px;
385 border-radius: 3px 3px 0 0;
386 position: relative;
387 }
388 .bars .bar .v {
389 position: absolute;
390 top: -30px;
391 left: 50%;
392 transform: translateX(-50%);
393 font-family: var(--mono);
394 font-weight: 500;
395 font-size: 14px;
396 color: var(--ink);
397 }
398
399 /* COMPOSITIONS */
400 .gallery {
401 display: grid;
402 grid-template-columns: 1fr 1fr;
403 gap: 48px;
404 }
405 .fw .flabel {
406 display: flex;
407 gap: 14px;
408 align-items: baseline;
409 margin-bottom: 16px;
410 font-family: var(--mono);
411 font-weight: 500;
412 text-transform: uppercase;
413 letter-spacing: 0.14em;
414 font-size: 12px;
415 color: var(--ink);
416 opacity: 0.55;
417 }
418 .fw .flabel b {
419 color: var(--green);
420 opacity: 1;
421 }
422 .frame {
423 aspect-ratio: 16/9;
424 container-type: size;
425 position: relative;
426 overflow: hidden;
427 background: var(--cream);
428 box-shadow: 0 0 0 1px rgba(46, 74, 42, 0.2);
429 }
430 .frame > .body {
431 position: absolute;
432 inset: 0;
433 z-index: 3;
434 }
435 .frame .tb {
436 position: absolute;
437 left: 5cqw;
438 right: 5cqw;
439 top: 3cqw;
440 display: flex;
441 justify-content: space-between;
442 align-items: center;
443 z-index: 4;
444 }
445 .frame .tb .l {
446 font-family: var(--mono);
447 font-weight: 500;
448 text-transform: uppercase;
449 letter-spacing: 0.16em;
450 font-size: 0.95cqw;
451 }
452 .frame .fl {
453 position: absolute;
454 left: 5cqw;
455 right: 5cqw;
456 bottom: 2.8cqw;
457 display: flex;
458 justify-content: space-between;
459 font-family: var(--mono);
460 font-weight: 500;
461 text-transform: uppercase;
462 letter-spacing: 0.14em;
463 font-size: 0.85cqw;
464 z-index: 4;
465 }
466
467 /* f1 cover green */
468 .ef1 {
469 background: var(--green);
470 }
471 .ef1 .tb .l {
472 color: var(--pink);
473 }
474 .ef1 .mc {
475 width: 7cqw;
476 height: 7cqw;
477 border-radius: 50%;
478 border: 0.13cqw solid var(--pink);
479 display: grid;
480 place-items: center;
481 font-family: var(--mono);
482 font-weight: 500;
483 letter-spacing: 0.1em;
484 font-size: 1.3cqw;
485 color: var(--pink);
486 }
487 .ef1 .body {
488 display: flex;
489 flex-direction: column;
490 justify-content: center;
491 padding: 0 5cqw;
492 }
493 .ef1 h3 {
494 font-family: var(--serif);
495 font-weight: 500;
496 font-size: 13cqw;
497 line-height: 0.9;
498 letter-spacing: -0.02em;
499 color: var(--pink);
500 }
501 .ef1 h3 .cr {
502 color: var(--cream);
503 }
504 .ef1 .fl .l {
505 color: var(--pink);
506 }
507
508 /* f2 topic tiles */
509 .ef2 .body {
510 padding: 7cqw 5cqw 6cqw;
511 display: flex;
512 flex-direction: column;
513 }
514 .ef2 h3 {
515 font-family: var(--serif);
516 font-weight: 500;
517 font-size: 5cqw;
518 line-height: 0.96;
519 letter-spacing: -0.02em;
520 color: var(--green);
521 margin-bottom: 2.4cqw;
522 }
523 .ef2 .row {
524 display: grid;
525 grid-template-columns: repeat(3, 1fr);
526 gap: 1.5cqw;
527 flex: 1;
528 }
529 .ef2 .t {
530 border-radius: 0.6cqw;
531 padding: 1.8cqw;
532 display: flex;
533 flex-direction: column;
534 }
535 .ef2 .t .o {
536 font-family: var(--mono);
537 font-weight: 500;
538 text-transform: uppercase;
539 letter-spacing: 0.12em;
540 font-size: 0.85cqw;
541 }
542 .ef2 .t .ti {
543 font-family: var(--serif);
544 font-weight: 500;
545 font-size: 2.6cqw;
546 line-height: 0.98;
547 letter-spacing: -0.01em;
548 margin-top: auto;
549 }
550 .ef2 .green {
551 background: var(--green);
552 color: var(--cream);
553 }
554 .ef2 .green .o {
555 color: var(--pink);
556 }
557 .ef2 .pink {
558 background: var(--pink);
559 color: var(--green-deep);
560 }
561 .ef2 .pink .o {
562 color: var(--green-deep);
563 }
564 .ef2 .cream2 {
565 background: var(--cream-2);
566 border: 0.13cqw solid var(--green);
567 color: var(--green);
568 }
569 .ef2 .cream2 .o {
570 color: var(--green);
571 }
572
573 /* f3 KPI green */
574 .ef3 {
575 background: var(--green);
576 }
577 .ef3 .tb .l {
578 color: var(--pink);
579 }
580 .ef3 .body {
581 display: flex;
582 flex-direction: column;
583 justify-content: center;
584 padding: 0 5cqw;
585 }
586 .ef3 .tag {
587 font-family: var(--mono);
588 font-weight: 500;
589 text-transform: uppercase;
590 letter-spacing: 0.16em;
591 font-size: 1cqw;
592 color: var(--pink);
593 border-top: 0.12cqw solid var(--pink);
594 padding-top: 1.2cqw;
595 display: inline-block;
596 }
597 .ef3 .fig {
598 font-family: var(--serif);
599 font-weight: 500;
600 font-size: 18cqw;
601 line-height: 0.9;
602 letter-spacing: -0.03em;
603 color: var(--pink);
604 }
605 .ef3 .fig .u {
606 font-size: 9cqw;
607 }
608 .ef3 .d {
609 font-family: var(--serif);
610 font-weight: 400;
611 font-size: 1.7cqw;
612 line-height: 1.35;
613 color: var(--cream);
614 max-width: 40cqw;
615 margin-top: 1cqw;
616 }
617 .ef3 .fl .l {
618 color: var(--pink);
619 }
620
621 /* f4 statement quote */
622 .ef4 .body {
623 display: flex;
624 flex-direction: column;
625 justify-content: center;
626 padding: 0 8cqw;
627 }
628 .ef4 h3 {
629 font-family: var(--serif);
630 font-weight: 500;
631 font-size: 6.4cqw;
632 line-height: 1.02;
633 letter-spacing: -0.02em;
634 color: var(--green);
635 }
636 .ef4 .at {
637 font-family: var(--serif);
638 font-weight: 600;
639 font-size: 1.9cqw;
640 color: var(--ink);
641 margin-top: 2cqw;
642 }
643 .ef4 .ro {
644 font-family: var(--mono);
645 font-weight: 500;
646 text-transform: uppercase;
647 letter-spacing: 0.16em;
648 font-size: 0.95cqw;
649 color: var(--green);
650 margin-top: 0.5cqw;
651 }
652
653 /* PRINCIPLES */
654 .dos {
655 display: grid;
656 grid-template-columns: 1fr 1fr;
657 gap: 48px;
658 }
659 .do-card h4 {
660 font-family: var(--serif);
661 font-weight: 500;
662 font-size: 34px;
663 color: var(--green);
664 margin-bottom: 6px;
665 letter-spacing: -0.02em;
666 }
667 .do-card .rule {
668 height: 2px;
669 background: var(--green);
670 margin-bottom: 22px;
671 }
672 .do-card ul {
673 list-style: none;
674 }
675 .do-card li {
676 font-family: var(--serif);
677 font-weight: 400;
678 font-size: 17px;
679 line-height: 1.5;
680 padding-left: 24px;
681 position: relative;
682 margin-bottom: 13px;
683 }
684 .do-card li::before {
685 position: absolute;
686 left: 0;
687 font-family: var(--mono);
688 }
689 .do-card.do li::before {
690 content: "+";
691 color: var(--green);
692 }
693 .do-card.dont li::before {
694 content: "\00d7";
695 color: var(--pink-deep);
696 }
697
698 .foot {
699 padding: 60px 120px;
700 border-top: 2px solid var(--green);
701 display: flex;
702 justify-content: space-between;
703 align-items: center;
704 }
705 .foot .l {
706 font-family: var(--serif);
707 font-weight: 500;
708 font-size: 30px;
709 color: var(--green);
710 }
711 .foot .r {
712 font-family: var(--mono);
713 font-weight: 500;
714 text-transform: uppercase;
715 letter-spacing: 0.16em;
716 font-size: 11px;
717 color: var(--ink);
718 opacity: 0.55;
719 }
720 @media (max-width: 1100px) {
721 .gallery {
722 grid-template-columns: 1fr;
723 }
724 .swatches {
725 grid-template-columns: 1fr 1fr;
726 }
727 }
728 </style>
729 <link
730 rel="stylesheet"
731 href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap"
732 />
733 <link
734 rel="stylesheet"
735 href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap"
736 />
737 <style id="ft-override">
738 :root {
739 --primary: #efe7d4 !important;
740 --secondary: #2e4a2a !important;
741 --tertiary: #e6dcc4 !important;
742 --accent: #e89cb1 !important;
743 --f-disp: "Source Serif 4", sans-serif !important;
744 --f-body: "JetBrains Mono", sans-serif !important;
745 --green: #2e4a2a !important;
746 --pink: #e89cb1 !important;
747 --cream: #efe7d4 !important;
748 --cream-2: #e6dcc4 !important;
749 --serif: "Source Serif 4", sans-serif !important;
750 --mono: "JetBrains Mono", sans-serif !important;
751 --green-deep: #243a21 !important;
752 --green-lite: #3a5a36 !important;
753 --pink-deep: #d27e96 !important;
754 --ink: #1a1a17 !important;
755 }
756 </style>
757 </head>
758 <body>
759 <!-- COVER -->
760 <section class="cover">
761 <div class="top">
762 <span class="lbl">Frame System · Vol. 01</span>
763 <div class="mono-circle">EF</div>
764 </div>
765 <h1>Paper,<br />ink & <span class="cr">leaf.</span></h1>
766 <div class="lede">
767 A serif-led editorial frame system — Source Serif 4 at weight 500, a forest-green /
768 dusty-rose / oat-cream triad, and JetBrains Mono as the editorial chrome.
769 </div>
770 <div class="footline">
771 <span>Source Serif 4 · JetBrains Mono</span><span>1920 × 1080</span>
772 </div>
773 </section>
774
775 <!-- PALETTE -->
776 <section>
777 <div class="topbar">
778 <span class="lbl">01 — Palette</span>
779 <h2>Three Surfaces</h2>
780 </div>
781 <div class="swatches">
782 <div class="sw">
783 <div class="chip" style="background: var(--green)"></div>
784 <div class="meta">
785 <div class="name">Green</div>
786 <div class="hex">#2e4a2a</div>
787 <div class="role">Forest primary — surface, fill, rule.</div>
788 </div>
789 </div>
790 <div class="sw">
791 <div class="chip" style="background: var(--pink)"></div>
792 <div class="meta">
793 <div class="name">Pink</div>
794 <div class="hex">#e89cb1</div>
795 <div class="role">Dusty rose — the accent + on-green text.</div>
796 </div>
797 </div>
798 <div class="sw">
799 <div class="chip" style="background: var(--cream)"></div>
800 <div class="meta">
801 <div class="name">Cream</div>
802 <div class="hex">#efe7d4</div>
803 <div class="role">Oat paper — the default ground.</div>
804 </div>
805 </div>
806 <div class="sw">
807 <div class="chip" style="background: var(--ink)"></div>
808 <div class="meta">
809 <div class="name">Ink</div>
810 <div class="hex">#1a1a17</div>
811 <div class="role">Warm near-black body on cream.</div>
812 </div>
813 </div>
814 <div class="sw">
815 <div class="chip" style="background: var(--green-deep)"></div>
816 <div class="meta">
817 <div class="name">Green Deep</div>
818 <div class="hex">#243a21</div>
819 <div class="role">Text on pink surfaces.</div>
820 </div>
821 </div>
822 <div class="sw">
823 <div class="chip" style="background: var(--green-lite)"></div>
824 <div class="meta">
825 <div class="name">Green Lite</div>
826 <div class="hex">#3a5a36</div>
827 <div class="role">Second green for tile pairs.</div>
828 </div>
829 </div>
830 <div class="sw">
831 <div class="chip" style="background: var(--pink-deep)"></div>
832 <div class="meta">
833 <div class="name">Pink Deep</div>
834 <div class="hex">#d27e96</div>
835 <div class="role">Pink-on-pink borders.</div>
836 </div>
837 </div>
838 <div class="sw">
839 <div class="chip" style="background: var(--cream-2)"></div>
840 <div class="meta">
841 <div class="name">Cream 2</div>
842 <div class="hex">#e6dcc4</div>
843 <div class="role">Tiles on the cream ground.</div>
844 </div>
845 </div>
846 </div>
847 </section>
848
849 <!-- TYPOGRAPHY -->
850 <section>
851 <div class="topbar">
852 <span class="lbl">02 — Typography</span>
853 <h2>Serif 500 · Mono Chrome</h2>
854 </div>
855 <div class="type-row">
856 <div>
857 <div class="tok">display-hero</div>
858 <div class="m">Source Serif 4 · 500 · 220px · −0.02em · opsz</div>
859 </div>
860 <div class="spec">
861 <span class="serif" style="font-size: 120px; line-height: 0.92">Quarterly</span>
862 </div>
863 </div>
864 <div class="type-row">
865 <div>
866 <div class="tok">headline-xl</div>
867 <div class="m">Source Serif 4 · 500 · 96px</div>
868 </div>
869 <div class="spec"><span class="serif" style="font-size: 76px">A Quiet Annual</span></div>
870 </div>
871 <div class="type-row">
872 <div>
873 <div class="tok">stat-figure</div>
874 <div class="m">Source Serif 4 · 500 · 220px · −0.03em</div>
875 </div>
876 <div class="spec">
877 <span class="serif" style="font-size: 108px; color: var(--green)"
878 >94<span style="font-size: 54px">%</span></span
879 >
880 </div>
881 </div>
882 <div class="type-row">
883 <div>
884 <div class="tok">body</div>
885 <div class="m">Source Serif 4 · 400 · line 1.38</div>
886 </div>
887 <div class="spec">
888 <p
889 style="
890 font-family: var(--serif);
891 font-weight: 400;
892 font-size: 24px;
893 line-height: 1.38;
894 max-width: 680px;
895 "
896 >
897 Body runs the serif at weight 400 — the drop from 500 display to 400 body is the
898 system's reading rhythm.
899 </p>
900 </div>
901 </div>
902 <div class="type-row" style="border-bottom: 0">
903 <div>
904 <div class="tok">label</div>
905 <div class="m">JetBrains Mono · 500 · uppercase · 0.18em</div>
906 </div>
907 <div class="spec">
908 <span class="mono" style="font-size: 16px; color: var(--green)"
909 >Editorial Chrome · Section</span
910 >
911 </div>
912 </div>
913 </section>
914
915 <!-- COMPONENTS -->
916 <section>
917 <div class="topbar">
918 <span class="lbl">03 — Components</span>
919 <h2>Flat · Paper-Based</h2>
920 </div>
921
922 <div class="cgrid">
923 <div class="s8">
924 <div class="cnote">Topic tiles — fills rotate green / pink / green-lite / cream-2</div>
925 <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px">
926 <div class="tile green">
927 <span class="ord">01</span>
928 <div class="ti">Paper</div>
929 <span class="ft">Ground</span>
930 </div>
931 <div class="tile pink">
932 <span class="ord">02</span>
933 <div class="ti">Ink</div>
934 <span class="ft">Type</span>
935 </div>
936 <div class="tile lite">
937 <span class="ord">03</span>
938 <div class="ti">Leaf</div>
939 <span class="ft">Surface</span>
940 </div>
941 <div class="tile cream2">
942 <span class="ord">04</span>
943 <div class="ti">Rose</div>
944 <span class="ft">Accent</span>
945 </div>
946 </div>
947 </div>
948 <div class="s4">
949 <div class="cnote">Monogram circle + KPI</div>
950 <div class="monobig">EF</div>
951 <div class="kpi" style="margin-top: 28px">
952 <div class="tag">Retention</div>
953 <div class="fig">94<span class="u">%</span></div>
954 <div class="d">Net revenue, trailing twelve months.</div>
955 </div>
956 </div>
957 </div>
958
959 <div class="cgrid" style="margin-bottom: 0">
960 <div class="s6">
961 <div class="cnote">Bar chart — pink / cream / green, mono ticks</div>
962 <div class="bars">
963 <div class="bar" style="height: 55%; background: var(--pink)">
964 <span class="v">55</span>
965 </div>
966 <div class="bar" style="height: 72%; background: var(--cream-2)">
967 <span class="v">72</span>
968 </div>
969 <div class="bar" style="height: 90%; background: var(--green)">
970 <span class="v">90</span>
971 </div>
972 <div class="bar" style="height: 64%; background: var(--pink)">
973 <span class="v">64</span>
974 </div>
975 </div>
976 </div>
977 <div class="s6">
978 <div class="cnote">Meta definition list — 2px green top rule</div>
979 <div
980 style="
981 border-top: 2px solid var(--green);
982 display: grid;
983 grid-template-columns: repeat(3, 1fr);
984 gap: 36px;
985 padding-top: 20px;
986 "
987 >
988 <div>
989 <div class="mono" style="font-size: 13px; color: var(--green)">Editor</div>
990 <div class="serif" style="font-weight: 500; font-size: 30px; margin-top: 8px">
991 A. Wren
992 </div>
993 </div>
994 <div>
995 <div class="mono" style="font-size: 13px; color: var(--green)">Issue</div>
996 <div class="serif" style="font-weight: 500; font-size: 30px; margin-top: 8px">
997 No. 12
998 </div>
999 </div>
1000 <div>
1001 <div class="mono" style="font-size: 13px; color: var(--green)">Season</div>
1002 <div class="serif" style="font-weight: 500; font-size: 30px; margin-top: 8px">
1003 Spring
1004 </div>
1005 </div>
1006 </div>
1007 </div>
1008 </div>
1009 </section>
1010
1011 <!-- COMPOSITIONS -->
1012 <section style="background: var(--cream-2)">
1013 <div class="topbar">
1014 <span class="lbl">04 — Frames</span>
1015 <h2>Frame Compositions</h2>
1016 </div>
1017 <div class="gallery">
1018 <div class="fw">
1019 <div class="flabel">
1020 <b>Cover</b><span>· identity · green · monogram · centered-left</span>
1021 </div>
1022 <div class="frame ef1">
1023 <div class="tb">
1024 <span class="l">Frame System · Vol. 01</span>
1025 <div class="mc">EF</div>
1026 </div>
1027 <div class="body">
1028 <h3>Paper, ink<br />& <span class="cr">leaf.</span></h3>
1029 </div>
1030 <div class="fl">
1031 <span class="l">Source Serif 4 · Mono</span><span class="l">01 / 06</span>
1032 </div>
1033 </div>
1034 </div>
1035
1036 <div class="fw">
1037 <div class="flabel">
1038 <b>Topic Tiles</b><span>· catalog · rotating fills · the dense frame</span>
1039 </div>
1040 <div class="frame ef2">
1041 <div class="tb">
1042 <span class="l" style="color: var(--green)">Contents</span
1043 ><span class="l" style="color: var(--green)">02 / 06</span>
1044 </div>
1045 <div class="body">
1046 <h3>Four Strands</h3>
1047 <div class="row">
1048 <div class="t green">
1049 <span class="o">01</span>
1050 <div class="ti">On Paper</div>
1051 </div>
1052 <div class="t pink">
1053 <span class="o">02</span>
1054 <div class="ti">On Ink</div>
1055 </div>
1056 <div class="t cream2">
1057 <span class="o">03</span>
1058 <div class="ti">On Measure</div>
1059 </div>
1060 </div>
1061 </div>
1062 </div>
1063 </div>
1064
1065 <div class="fw">
1066 <div class="flabel"><b>KPI Stat</b><span>· data · green · oversized figure</span></div>
1067 <div class="frame ef3">
1068 <div class="tb">
1069 <span class="l">By The Numbers</span><span class="l">03 / 06</span>
1070 </div>
1071 <div class="body">
1072 <span class="tag">Retention</span>
1073 <div class="fig">94<span class="u">%</span></div>
1074 <div class="d">
1075 Net revenue retention across the year — the figure carries the frame.
1076 </div>
1077 </div>
1078 <div class="fl"><span class="l">Annual Report</span><span class="l">03 / 06</span></div>
1079 </div>
1080 </div>
1081
1082 <div class="fw">
1083 <div class="flabel"><b>Statement</b><span>· quote · cream · centered-left</span></div>
1084 <div class="frame ef4">
1085 <div class="tb">
1086 <span class="l" style="color: var(--green)">In Their Words</span
1087 ><span class="l" style="color: var(--green)">04 / 06</span>
1088 </div>
1089 <div class="body">
1090 <h3>Set it slowly,<br />and let it breathe.</h3>
1091 <div class="at">Avery Wren</div>
1092 <div class="ro">Editor-in-Chief</div>
1093 </div>
1094 </div>
1095 </div>
1096 </div>
1097 </section>
1098
1099 <!-- PRINCIPLES -->
1100 <section>
1101 <div class="topbar">
1102 <span class="lbl">05 — Rules</span>
1103 <h2>Frame Rules</h2>
1104 </div>
1105 <div class="dos">
1106 <div class="do-card do">
1107 <h4>Do</h4>
1108 <div class="rule"></div>
1109 <ul>
1110 <li>
1111 Run every display in Source Serif 4 weight 500, negative-tracked, tight line-height.
1112 </li>
1113 <li>Set every label/caption in JetBrains Mono 500 uppercase, 0.14–0.18em.</li>
1114 <li>Give every frame a topbar (mono label + monogram or counter).</li>
1115 <li>Pick one dominant surface per frame; rotate tile fills, don't repeat one.</li>
1116 <li>Separate sections with 2px hairlines in the region's accent.</li>
1117 </ul>
1118 </div>
1119 <div class="do-card dont">
1120 <h4>Don't</h4>
1121 <div class="rule"></div>
1122 <ul>
1123 <li>No drop shadows, gradients, or glows — flat, paper-based depth only.</li>
1124 <li>No third typeface; no italic or underline; no serif body at 500.</li>
1125 <li>No fourth color family; no 1px or 4px rules (2px / 2.5px only).</li>
1126 <li>No two competing content blocks — one subject per frame.</li>
1127 <li>Don't blow a headline edge-to-edge — fit to measure.</li>
1128 </ul>
1129 </div>
1130 </div>
1131 </section>
1132
1133 <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
1134 <style>
1135 /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
1136 .capdemo {
1137 --cap-ink: var(--ink);
1138 --cap-canvas: var(--cream);
1139 --cap-accent: var(--pink-deep);
1140 --cap-accent-2: var(--pink);
1141 }
1142 .capdemo .stage {
1143 position: absolute;
1144 left: 0;
1145 right: 0;
1146 bottom: 0;
1147 height: 16.67cqh;
1148 display: flex;
1149 align-items: center;
1150 justify-content: center;
1151 z-index: 4;
1152 }
1153 .capdemo .pill {
1154 max-width: 80cqw;
1155 padding: 1.4cqw 3cqw 1.7cqw;
1156 background: var(--cap-canvas);
1157 border: 0.21cqw solid var(--cap-accent);
1158 border-radius: 0.6cqw;
1159 }
1160 .capdemo .line {
1161 display: flex;
1162 flex-wrap: wrap;
1163 justify-content: center;
1164 gap: 0.1em 0.34em;
1165 font-family: var(--serif);
1166 font-weight: 500;
1167 font-size: 3.4cqw;
1168 line-height: 1.16;
1169 letter-spacing: -0.02em;
1170 }
1171 .capdemo .w {
1172 display: inline-block;
1173 padding: 0 0.06em;
1174 color: color-mix(in srgb, var(--cap-ink) 42%, var(--cap-canvas));
1175 }
1176 .capdemo .w.spoken {
1177 color: var(--cap-ink);
1178 }
1179 .capdemo .w.active {
1180 color: var(--cap-ink);
1181 background: var(--cap-accent);
1182 box-shadow: 0 0 0 0.05em var(--cap-accent);
1183 border-radius: 0.6cqw;
1184 }
1185 .capdemo .bandline {
1186 position: absolute;
1187 left: 0;
1188 right: 0;
1189 bottom: 16.67cqh;
1190 border-top: 2px dashed rgba(46, 74, 42, 0.32);
1191 z-index: 3;
1192 }
1193 .capdemo .bandtag {
1194 position: absolute;
1195 right: 5cqw;
1196 bottom: calc(16.67cqh + 0.7cqw);
1197 font-family: var(--mono);
1198 font-weight: 500;
1199 text-transform: uppercase;
1200 letter-spacing: 0.12em;
1201 font-size: 0.85cqw;
1202 color: var(--green);
1203 opacity: 0.6;
1204 z-index: 4;
1205 }
1206 </style>
1207 <section style="background: var(--cream-2)">
1208 <div class="topbar">
1209 <span class="lbl">06 — Captions</span>
1210 <h2>Lower-Third Karaoke</h2>
1211 </div>
1212 <div class="gallery">
1213 <div class="fw">
1214 <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
1215 <div class="frame capdemo">
1216 <div class="tb">
1217 <span class="l" style="color: var(--green)">Captions</span
1218 ><span class="l" style="color: var(--green)">05 / 06</span>
1219 </div>
1220 <div class="bandline"></div>
1221 <div class="bandtag">caption band · 16.7%</div>
1222 <div class="stage">
1223 <div class="pill">
1224 <div class="line">
1225 <span class="w spoken">Built</span>
1226 <span class="w spoken">for</span>
1227 <span class="w active">teams</span>
1228 <span class="w">who</span>
1229 <span class="w">ship.</span>
1230 </div>
1231 </div>
1232 </div>
1233 </div>
1234 </div>
1235
1236 <div class="fw">
1237 <div class="flabel"><b>Settled line</b><span>· all spoken · panel cleared</span></div>
1238 <div class="frame capdemo">
1239 <div class="tb">
1240 <span class="l" style="color: var(--green)">Captions</span
1241 ><span class="l" style="color: var(--green)">06 / 06</span>
1242 </div>
1243 <div class="stage">
1244 <div class="pill">
1245 <div class="line">
1246 <span class="w spoken">Ship</span>
1247 <span class="w spoken">faster</span>
1248 <span class="w spoken">today.</span>
1249 </div>
1250 </div>
1251 </div>
1252 </div>
1253 </div>
1254 </div>
1255 </section>
1256
1257 <div class="foot">
1258 <span class="l">Editorial Forest</span>
1259 <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
1260 </div>
1261
1262 <template id="__bundler_thumbnail">
1263 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
1264 <rect width="100" height="100" fill="#2e4a2a" />
1265 <text x="12" y="46" font-family="Georgia" font-weight="500" font-size="30" fill="#e89cb1">
1266 Aa
1267 </text>
1268 <circle cx="80" cy="26" r="13" fill="none" stroke="#e89cb1" stroke-width="2" />
1269 <rect x="12" y="60" width="60" height="2" fill="#e89cb1" />
1270 </svg>
1271 </template>
1272 </body>
1273</html>