Setting the file. One moment. Frame Showcase · Hyperframes Creative · heygen-com/hyperframes · Skills Docs22.10
Narration
(opens in a new tab)
frame-presets/cartesian/frame-showcase.html
HTML·1,263 lines·35 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=Playfair+Display:ital,wght@0,400;1,400&family=Inter:wght@400;500&display=swap"
11 rel="stylesheet"
12 />
13 <style id="ds-tokens">
14 :root {
15 --bg: #ede8e0;
16 --bg-2: #e2dbd1;
17 --ink: #1a1a1a;
18 --gray: #5a5a5a;
19 --accent: #8a8178;
20 --line: #b8b0a4;
21 --white-overlay: rgba(255, 255, 255, 0.3);
22 --serif: "Playfair Display", serif;
23 --sans: "Inter", sans-serif;
24 }
25 * {
26 margin: 0;
27 padding: 0;
28 box-sizing: border-box;
29 }
30 html {
31 background: #15140f;
32 }
33 body {
34 background: var(--bg);
35 color: var(--gray);
36 font-family: var(--sans);
37 -webkit-font-smoothing: antialiased;
38 }
39 .serif {
40 font-family: var(--serif);
41 font-weight: 400;
42 color: var(--ink);
43 }
44 .label {
45 font-family: var(--sans);
46 font-weight: 500;
47 text-transform: uppercase;
48 letter-spacing: 3px;
49 font-size: 13px;
50 color: var(--accent);
51 }
52 .micro {
53 font-family: var(--sans);
54 font-weight: 400;
55 text-transform: uppercase;
56 letter-spacing: 2px;
57 font-size: 12px;
58 color: var(--accent);
59 }
60
61 section {
62 padding: 128px 100px;
63 position: relative;
64 overflow: hidden;
65 }
66 .sec-head {
67 display: flex;
68 align-items: baseline;
69 gap: 24px;
70 margin-bottom: 72px;
71 }
72 .sec-head .n {
73 font-family: var(--serif);
74 font-size: 24px;
75 color: var(--accent);
76 }
77 .sec-head h2 {
78 font-family: var(--serif);
79 font-weight: 400;
80 font-size: 48px;
81 line-height: 1.1;
82 color: var(--ink);
83 }
84 .sec-head .sp {
85 flex: 1;
86 height: 1px;
87 background: var(--line);
88 align-self: center;
89 }
90 .sec-head .lab {
91 font-family: var(--sans);
92 font-weight: 500;
93 text-transform: uppercase;
94 letter-spacing: 3px;
95 font-size: 12px;
96 color: var(--accent);
97 }
98
99 /* geometric decoration */
100 .geo {
101 position: absolute;
102 border: 1px solid var(--line);
103 border-radius: 50%;
104 pointer-events: none;
105 }
106 .geo.dash {
107 border-style: dashed;
108 }
109
110 /* COVER */
111 .cover {
112 min-height: 100vh;
113 padding: 0;
114 display: flex;
115 flex-direction: column;
116 justify-content: center;
117 position: relative;
118 }
119 .cover .geo-ring {
120 position: absolute;
121 width: 46vw;
122 height: 46vw;
123 right: -8vw;
124 top: 50%;
125 transform: translateY(-50%);
126 border: 1px solid var(--line);
127 border-radius: 50%;
128 opacity: 0.5;
129 }
130 .cover .geo-ring::before {
131 content: "";
132 position: absolute;
133 inset: 14%;
134 border: 1px dashed var(--line);
135 border-radius: 50%;
136 opacity: 0.7;
137 }
138 .cover .inner {
139 padding: 0 8vw;
140 position: relative;
141 z-index: 2;
142 max-width: 72%;
143 }
144 .cover .label {
145 margin-bottom: 32px;
146 }
147 .cover h1 {
148 font-family: var(--serif);
149 font-weight: 400;
150 color: var(--ink);
151 font-size: clamp(56px, 8vw, 118px);
152 line-height: 1.06;
153 }
154 .cover h1 em {
155 font-style: italic;
156 }
157 .cover .sub {
158 font-family: var(--sans);
159 font-weight: 400;
160 font-size: clamp(16px, 1.5vw, 22px);
161 line-height: 1.6;
162 color: var(--gray);
163 margin-top: 32px;
164 max-width: 620px;
165 }
166 .cover .haccent {
167 width: 20vw;
168 height: 1px;
169 background: var(--ink);
170 margin-top: 48px;
171 }
172 .cover .meta {
173 position: absolute;
174 left: 8vw;
175 bottom: 64px;
176 display: flex;
177 gap: 48px;
178 z-index: 2;
179 }
180 .cover .meta .m .v {
181 font-family: var(--serif);
182 font-size: 20px;
183 color: var(--ink);
184 white-space: nowrap;
185 }
186 .cover .meta .m .k {
187 font-family: var(--sans);
188 font-weight: 500;
189 text-transform: uppercase;
190 letter-spacing: 2px;
191 font-size: 11px;
192 color: var(--accent);
193 margin-top: 6px;
194 }
195 .cover .vline {
196 position: absolute;
197 left: 5vw;
198 top: 0;
199 bottom: 0;
200 width: 1px;
201 background: var(--line);
202 opacity: 0.4;
203 }
204
205 /* PALETTE */
206 .swatches {
207 display: grid;
208 grid-template-columns: repeat(6, 1fr);
209 gap: 28px;
210 }
211 .sw .chip {
212 height: 130px;
213 border: 1px solid var(--line);
214 }
215 .sw .name {
216 font-family: var(--serif);
217 font-size: 20px;
218 color: var(--ink);
219 margin-top: 16px;
220 }
221 .sw .hex {
222 font-family: var(--sans);
223 font-size: 12px;
224 letter-spacing: 1px;
225 color: var(--accent);
226 margin-top: 6px;
227 }
228 .sw .role {
229 font-size: 12px;
230 line-height: 1.5;
231 color: var(--gray);
232 margin-top: 10px;
233 }
234
235 /* TYPE */
236 .type-row {
237 display: grid;
238 grid-template-columns: 220px 1fr;
239 align-items: center;
240 padding: 26px 0;
241 border-bottom: 1px solid var(--line);
242 }
243 .type-row .tok {
244 font-family: var(--sans);
245 font-weight: 500;
246 text-transform: uppercase;
247 letter-spacing: 2px;
248 font-size: 12px;
249 color: var(--accent);
250 }
251 .type-row .m {
252 font-size: 12px;
253 color: var(--gray);
254 margin-top: 8px;
255 line-height: 1.5;
256 }
257 .type-row .spec {
258 overflow: hidden;
259 }
260
261 /* COMPONENTS */
262 .cnote {
263 font-family: var(--sans);
264 font-weight: 500;
265 text-transform: uppercase;
266 letter-spacing: 2px;
267 font-size: 12px;
268 color: var(--accent);
269 margin-bottom: 22px;
270 }
271 .cgrid {
272 display: grid;
273 grid-template-columns: repeat(12, 1fr);
274 gap: 48px;
275 margin-bottom: 64px;
276 }
277 .s3 {
278 grid-column: span 3;
279 }
280 .s4 {
281 grid-column: span 4;
282 }
283 .s5 {
284 grid-column: span 5;
285 }
286 .s6 {
287 grid-column: span 6;
288 }
289 .s7 {
290 grid-column: span 7;
291 }
292 .c-card {
293 border: 1px solid var(--line);
294 background: var(--white-overlay);
295 padding: 36px 28px;
296 }
297 .c-card .ic {
298 width: 40px;
299 height: 40px;
300 border: 1px solid var(--line);
301 border-radius: 50%;
302 display: grid;
303 place-items: center;
304 font-family: var(--serif);
305 color: var(--accent);
306 font-size: 16px;
307 margin-bottom: 24px;
308 }
309 .c-card .t {
310 font-family: var(--serif);
311 font-size: 21px;
312 color: var(--ink);
313 line-height: 1.2;
314 }
315 .c-card .x {
316 font-size: 13px;
317 line-height: 1.6;
318 color: var(--gray);
319 margin-top: 12px;
320 }
321 .agenda .row {
322 display: flex;
323 align-items: baseline;
324 gap: 24px;
325 padding: 18px 0;
326 border-bottom: 1px solid var(--line);
327 }
328 .agenda .row .num {
329 font-family: var(--serif);
330 font-size: 24px;
331 color: var(--accent);
332 min-width: 48px;
333 }
334 .agenda .row .t {
335 font-family: var(--serif);
336 font-size: 22px;
337 color: var(--ink);
338 }
339 .agenda .row .d {
340 font-size: 13px;
341 color: var(--gray);
342 margin-left: auto;
343 }
344 .timeline {
345 border-top: 1px solid var(--line);
346 display: flex;
347 gap: 40px;
348 padding-top: 24px;
349 }
350 .timeline .it {
351 flex: 1;
352 }
353 .timeline .it .y {
354 font-size: 12px;
355 letter-spacing: 2px;
356 text-transform: uppercase;
357 color: var(--accent);
358 }
359 .timeline .it .t {
360 font-family: var(--serif);
361 font-size: 19px;
362 color: var(--ink);
363 margin-top: 8px;
364 }
365 .timeline .it .x {
366 font-size: 12px;
367 line-height: 1.5;
368 color: var(--gray);
369 margin-top: 8px;
370 }
371 .stats {
372 border-top: 1px solid var(--line);
373 display: flex;
374 gap: 40px;
375 padding-top: 24px;
376 }
377 .stats .st .f {
378 font-family: var(--serif);
379 font-size: 40px;
380 color: var(--ink);
381 }
382 .stats .st .l {
383 font-size: 11px;
384 letter-spacing: 2px;
385 text-transform: uppercase;
386 color: var(--accent);
387 margin-top: 8px;
388 }
389 .imgph {
390 aspect-ratio: 4/3;
391 background: var(--bg-2);
392 border: 1px solid var(--line);
393 position: relative;
394 display: grid;
395 place-items: center;
396 }
397 .imgph::before,
398 .imgph::after {
399 content: "";
400 position: absolute;
401 left: 50%;
402 top: 50%;
403 width: 150%;
404 height: 1px;
405 background: var(--line);
406 transform-origin: center;
407 }
408 .imgph::before {
409 transform: translate(-50%, -50%) rotate(30deg);
410 }
411 .imgph::after {
412 transform: translate(-50%, -50%) rotate(-30deg);
413 }
414 .imgph span {
415 position: relative;
416 z-index: 2;
417 font-family: var(--sans);
418 font-weight: 500;
419 text-transform: uppercase;
420 letter-spacing: 2px;
421 font-size: 11px;
422 color: var(--accent);
423 background: var(--bg-2);
424 padding: 6px 10px;
425 }
426 .team {
427 display: flex;
428 gap: 36px;
429 }
430 .team .p {
431 text-align: center;
432 }
433 .team .ph {
434 width: 110px;
435 height: 110px;
436 border-radius: 50%;
437 border: 1px solid var(--line);
438 background: var(--bg-2);
439 display: grid;
440 place-items: center;
441 font-family: var(--serif);
442 font-size: 34px;
443 color: var(--accent);
444 }
445 .team .nm {
446 font-family: var(--serif);
447 font-size: 17px;
448 color: var(--ink);
449 margin-top: 14px;
450 }
451 .team .ro {
452 font-size: 11px;
453 letter-spacing: 2px;
454 text-transform: uppercase;
455 color: var(--accent);
456 margin-top: 4px;
457 }
458
459 /* COMPOSITIONS */
460 .gallery {
461 display: grid;
462 grid-template-columns: 1fr 1fr;
463 gap: 48px;
464 }
465 .fw .flabel {
466 display: flex;
467 gap: 14px;
468 align-items: baseline;
469 margin-bottom: 16px;
470 font-family: var(--sans);
471 font-weight: 500;
472 text-transform: uppercase;
473 letter-spacing: 2px;
474 font-size: 12px;
475 color: var(--accent);
476 }
477 .fw .flabel b {
478 color: var(--ink);
479 }
480 .frame {
481 aspect-ratio: 16/9;
482 container-type: size;
483 position: relative;
484 overflow: hidden;
485 background: var(--bg);
486 border: 1px solid var(--line);
487 }
488 .frame > .body {
489 position: absolute;
490 inset: 0;
491 z-index: 2;
492 }
493 .frame .fgeo {
494 position: absolute;
495 border: 1px solid var(--line);
496 border-radius: 50%;
497 pointer-events: none;
498 z-index: 1;
499 }
500 .frame .fgeo.dash {
501 border-style: dashed;
502 }
503
504 /* f1 cover */
505 .tf1 .body {
506 display: flex;
507 flex-direction: column;
508 justify-content: center;
509 padding: 0 7cqw;
510 }
511 .tf1 .lab {
512 font-family: var(--sans);
513 font-weight: 500;
514 text-transform: uppercase;
515 letter-spacing: 0.3cqw;
516 font-size: 1cqw;
517 color: var(--accent);
518 margin-bottom: 2cqw;
519 }
520 .tf1 h3 {
521 font-family: var(--serif);
522 font-size: 8cqw;
523 line-height: 1.04;
524 color: var(--ink);
525 max-width: 62cqw;
526 }
527 .tf1 h3 em {
528 font-style: italic;
529 }
530 .tf1 .sub {
531 font-size: 1.4cqw;
532 line-height: 1.55;
533 color: var(--gray);
534 margin-top: 2cqw;
535 max-width: 46cqw;
536 }
537 .tf1 .ha {
538 width: 18cqw;
539 height: 0.1cqw;
540 background: var(--ink);
541 margin-top: 3cqw;
542 }
543 .tf1 .ring {
544 width: 34cqw;
545 height: 34cqw;
546 right: -6cqw;
547 top: 50%;
548 transform: translateY(-50%);
549 opacity: 0.5;
550 }
551 .tf1 .ring::before {
552 content: "";
553 position: absolute;
554 inset: 16%;
555 border: 1px dashed var(--line);
556 border-radius: 50%;
557 }
558
559 /* f2 agenda (sparse list) */
560 .tf2 .body {
561 display: flex;
562 flex-direction: column;
563 justify-content: center;
564 padding: 0 7cqw;
565 }
566 .tf2 .lab {
567 font-family: var(--sans);
568 font-weight: 500;
569 text-transform: uppercase;
570 letter-spacing: 0.3cqw;
571 font-size: 1cqw;
572 color: var(--accent);
573 margin-bottom: 1.6cqw;
574 }
575 .tf2 h3 {
576 font-family: var(--serif);
577 font-size: 4cqw;
578 color: var(--ink);
579 margin-bottom: 2.4cqw;
580 }
581 .tf2 .row {
582 display: flex;
583 align-items: baseline;
584 gap: 2cqw;
585 padding: 1.3cqw 0;
586 border-bottom: 0.06cqw solid var(--line);
587 }
588 .tf2 .row .nm {
589 font-family: var(--serif);
590 font-size: 1.8cqw;
591 color: var(--accent);
592 min-width: 4cqw;
593 }
594 .tf2 .row .t {
595 font-family: var(--serif);
596 font-size: 2.2cqw;
597 color: var(--ink);
598 }
599
600 /* f3 quote */
601 .tf3 .body {
602 display: flex;
603 flex-direction: column;
604 justify-content: center;
605 align-items: center;
606 text-align: center;
607 padding: 0 9cqw;
608 }
609 .tf3 .qm {
610 font-family: var(--serif);
611 font-size: 9cqw;
612 line-height: 0.5;
613 color: var(--line);
614 height: 5cqw;
615 }
616 .tf3 .q {
617 font-family: var(--serif);
618 font-size: 4cqw;
619 line-height: 1.2;
620 color: var(--ink);
621 margin-top: 1cqw;
622 }
623 .tf3 .at {
624 font-family: var(--sans);
625 font-weight: 400;
626 text-transform: uppercase;
627 letter-spacing: 0.25cqw;
628 font-size: 1cqw;
629 color: var(--accent);
630 margin-top: 2.4cqw;
631 }
632 .tf3 .ring {
633 width: 26cqw;
634 height: 26cqw;
635 left: 50%;
636 top: 50%;
637 transform: translate(-50%, -50%);
638 opacity: 0.3;
639 }
640
641 /* f4 closing */
642 .tf4 .body {
643 display: flex;
644 flex-direction: column;
645 justify-content: center;
646 align-items: center;
647 text-align: center;
648 }
649 .tf4 .lab {
650 font-family: var(--sans);
651 font-weight: 500;
652 text-transform: uppercase;
653 letter-spacing: 0.3cqw;
654 font-size: 1cqw;
655 color: var(--accent);
656 margin-bottom: 2cqw;
657 }
658 .tf4 h3 {
659 font-family: var(--serif);
660 font-size: 7cqw;
661 line-height: 1.04;
662 color: var(--ink);
663 }
664 .tf4 h3 em {
665 font-style: italic;
666 }
667 .tf4 .ha {
668 width: 14cqw;
669 height: 0.1cqw;
670 background: var(--ink);
671 margin-top: 2.6cqw;
672 }
673 .tf4 .ring {
674 width: 40cqw;
675 height: 40cqw;
676 left: 50%;
677 top: 50%;
678 transform: translate(-50%, -50%);
679 opacity: 0.28;
680 }
681 .tf4 .ring::before {
682 content: "";
683 position: absolute;
684 inset: 18%;
685 border: 1px dashed var(--line);
686 border-radius: 50%;
687 }
688
689 /* PRINCIPLES */
690 .dos {
691 display: grid;
692 grid-template-columns: 1fr 1fr;
693 gap: 48px;
694 }
695 .do-card {
696 border: 1px solid var(--line);
697 background: var(--white-overlay);
698 padding: 40px;
699 }
700 .do-card h4 {
701 font-family: var(--serif);
702 font-size: 30px;
703 color: var(--ink);
704 margin-bottom: 24px;
705 }
706 .do-card ul {
707 list-style: none;
708 }
709 .do-card li {
710 font-size: 14px;
711 line-height: 1.6;
712 padding-left: 24px;
713 position: relative;
714 margin-bottom: 14px;
715 color: var(--gray);
716 }
717 .do-card li::before {
718 position: absolute;
719 left: 0;
720 font-family: var(--serif);
721 color: var(--accent);
722 }
723 .do-card.do li::before {
724 content: "\2014";
725 }
726 .do-card.dont li::before {
727 content: "\00d7";
728 }
729
730 .foot {
731 padding: 64px 100px;
732 border-top: 1px solid var(--line);
733 display: flex;
734 justify-content: space-between;
735 align-items: center;
736 }
737 .foot .l {
738 font-family: var(--serif);
739 font-size: 26px;
740 color: var(--ink);
741 }
742 .foot .r {
743 font-family: var(--sans);
744 font-weight: 500;
745 text-transform: uppercase;
746 letter-spacing: 2px;
747 font-size: 11px;
748 color: var(--accent);
749 }
750 @media (max-width: 1100px) {
751 .gallery {
752 grid-template-columns: 1fr;
753 }
754 .swatches {
755 grid-template-columns: 1fr 1fr 1fr;
756 }
757 }
758 </style>
759 <link
760 rel="stylesheet"
761 href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&display=swap"
762 />
763 <link
764 rel="stylesheet"
765 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
766 />
767 <style id="ft-override">
768 :root {
769 --primary: #ede8e0 !important;
770 --secondary: #1a1a1a !important;
771 --tertiary: #b8b0a4 !important;
772 --accent: #8a8178 !important;
773 --f-disp: "Playfair Display", sans-serif !important;
774 --f-body: "Inter", sans-serif !important;
775 --bg: #ede8e0 !important;
776 --ink: #1a1a1a !important;
777 --accent: #8a8178 !important;
778 --line: #b8b0a4 !important;
779 --serif: "Playfair Display", sans-serif !important;
780 --sans: "Inter", sans-serif !important;
781 --bg-2: #e2dbd1 !important;
782 --gray: #5a5a5a !important;
783 }
784 </style>
785 </head>
786 <body>
787 <!-- COVER -->
788 <section class="cover">
789 <div class="vline"></div>
790 <div class="geo-ring"></div>
791 <div class="inner">
792 <div class="label">Cartesian — Frame System</div>
793 <h1>Restraint,<br />drawn in <em>one line.</em></h1>
794 <div class="sub">
795 A quiet museum-catalog system in motion — Playfair Display, Inter, and a five-tone
796 warm-stone palette, framed by single 1px taupe hairlines and compass-drafted geometry.
797 </div>
798 </div>
799 <div class="meta">
800 <div class="m">
801 <div class="v">1920 × 1080</div>
802 <div class="k">Frame</div>
803 </div>
804 <div class="m">
805 <div class="v">Vol. 01</div>
806 <div class="k">Edition</div>
807 </div>
808 <div class="m">
809 <div class="v">Stone / Ink</div>
810 <div class="k">Palette</div>
811 </div>
812 </div>
813 </section>
814
815 <!-- PALETTE -->
816 <section>
817 <div class="sec-head">
818 <span class="n">01</span>
819 <h2>Palette</h2>
820 <span class="sp"></span><span class="lab">Five Stones + Ink</span>
821 </div>
822 <div class="swatches">
823 <div class="sw">
824 <div class="chip" style="background: var(--bg)"></div>
825 <div class="name">BG Primary</div>
826 <div class="hex">#EDE8E0</div>
827 <div class="role">Warm sandstone canvas.</div>
828 </div>
829 <div class="sw">
830 <div class="chip" style="background: var(--bg-2)"></div>
831 <div class="name">BG Secondary</div>
832 <div class="hex">#E2DBD1</div>
833 <div class="role">Deeper stone for placeholders.</div>
834 </div>
835 <div class="sw">
836 <div class="chip" style="background: var(--ink)"></div>
837 <div class="name">Ink</div>
838 <div class="hex">#1A1A1A</div>
839 <div class="role">Headlines + the one black rule.</div>
840 </div>
841 <div class="sw">
842 <div class="chip" style="background: var(--gray)"></div>
843 <div class="name">Gray</div>
844 <div class="hex">#5A5A5A</div>
845 <div class="role">Body paragraphs.</div>
846 </div>
847 <div class="sw">
848 <div class="chip" style="background: var(--accent)"></div>
849 <div class="name">Accent</div>
850 <div class="hex">#8A8178</div>
851 <div class="role">Labels, numerals, small text.</div>
852 </div>
853 <div class="sw">
854 <div
855 class="chip"
856 style="
857 background: var(--bg);
858 border-color: var(--line);
859 box-shadow:
860 inset 0 0 0 8px var(--bg),
861 inset 0 0 0 9px var(--line);
862 "
863 ></div>
864 <div class="name">Line</div>
865 <div class="hex">#B8B0A4</div>
866 <div class="role">The universal 1px hairline.</div>
867 </div>
868 </div>
869 </section>
870
871 <!-- TYPOGRAPHY -->
872 <section>
873 <div class="sec-head">
874 <span class="n">02</span>
875 <h2>Typography</h2>
876 <span class="sp"></span><span class="lab">Playfair + Inter</span>
877 </div>
878 <div class="type-row">
879 <div>
880 <div class="tok">display</div>
881 <div class="m">Playfair Display 400 · sentence case</div>
882 </div>
883 <div class="spec">
884 <span class="serif" style="font-size: 84px; line-height: 1.05">Considered.</span>
885 </div>
886 </div>
887 <div class="type-row">
888 <div>
889 <div class="tok">h2</div>
890 <div class="m">Playfair Display 400 · slide headline</div>
891 </div>
892 <div class="spec"><span class="serif" style="font-size: 52px">Drawn in one line</span></div>
893 </div>
894 <div class="type-row">
895 <div>
896 <div class="tok">body</div>
897 <div class="m">Inter 400 · line 1.6 · warm gray</div>
898 </div>
899 <div class="spec">
900 <p style="font-size: 18px; line-height: 1.6; max-width: 680px; color: var(--gray)">
901 Inter carries every paragraph in warm gray — readable, recessive, never competing with
902 the serif statement above it.
903 </p>
904 </div>
905 </div>
906 <div class="type-row">
907 <div>
908 <div class="tok">label</div>
909 <div class="m">Inter 500 · 3px track · uppercase</div>
910 </div>
911 <div class="spec"><span class="label">Section · Eyebrow</span></div>
912 </div>
913 <div class="type-row" style="border-bottom: 0">
914 <div>
915 <div class="tok">quote-mark</div>
916 <div class="m">Playfair Display 400 · 50% taupe</div>
917 </div>
918 <div class="spec">
919 <span class="serif" style="font-size: 80px; color: var(--line)">“</span>
920 </div>
921 </div>
922 </section>
923
924 <!-- COMPONENTS -->
925 <section>
926 <div class="sec-head">
927 <span class="n">03</span>
928 <h2>Components</h2>
929 <span class="sp"></span><span class="lab">1px Hairlines · No Shadow</span>
930 </div>
931
932 <div class="cgrid">
933 <div class="s4">
934 <div class="cnote">Tracing-paper card</div>
935 <div class="c-card">
936 <div class="ic">I</div>
937 <div class="t">Hairline Border</div>
938 <div class="x">
939 1px taupe outline with a faint white-overlay fill that lets the canvas bleed through.
940 </div>
941 </div>
942 </div>
943 <div class="s4">
944 <div class="cnote">Agenda rows</div>
945 <div class="agenda">
946 <div class="row">
947 <span class="num">01</span><span class="t">Restraint</span
948 ><span class="d">Stone on stone</span>
949 </div>
950 <div class="row">
951 <span class="num">02</span><span class="t">Geometry</span
952 ><span class="d">Compass arcs</span>
953 </div>
954 <div class="row" style="border-bottom: 0">
955 <span class="num">03</span><span class="t">Breathing</span
956 ><span class="d">Negative space</span>
957 </div>
958 </div>
959 </div>
960 <div class="s4">
961 <div class="cnote">Stats cluster</div>
962 <div class="stats">
963 <div class="st">
964 <div class="f">5</div>
965 <div class="l">Stones</div>
966 </div>
967 <div class="st">
968 <div class="f">1px</div>
969 <div class="l">Lines</div>
970 </div>
971 <div class="st">
972 <div class="f">0</div>
973 <div class="l">Shadows</div>
974 </div>
975 </div>
976 </div>
977 </div>
978
979 <div class="cgrid" style="margin-bottom: 0">
980 <div class="s5">
981 <div class="cnote">Timeline — 1px rule, no nodes</div>
982 <div class="timeline">
983 <div class="it">
984 <div class="y">Phase 1</div>
985 <div class="t">Survey</div>
986 <div class="x">Establish the stone canvas.</div>
987 </div>
988 <div class="it">
989 <div class="y">Phase 2</div>
990 <div class="t">Draft</div>
991 <div class="x">Lay the compass arcs.</div>
992 </div>
993 <div class="it">
994 <div class="y">Phase 3</div>
995 <div class="t">Frame</div>
996 <div class="x">Hairline the structure.</div>
997 </div>
998 </div>
999 </div>
1000 <div class="s3">
1001 <div class="cnote">Image placeholder</div>
1002 <div class="imgph"><span>Visual Reference</span></div>
1003 </div>
1004 <div class="s4">
1005 <div class="cnote">Team frames</div>
1006 <div class="team">
1007 <div class="p">
1008 <div class="ph">A</div>
1009 <div class="nm">Avery</div>
1010 <div class="ro">Editor</div>
1011 </div>
1012 <div class="p">
1013 <div class="ph">M</div>
1014 <div class="nm">Mori</div>
1015 <div class="ro">Design</div>
1016 </div>
1017 </div>
1018 </div>
1019 </div>
1020 </section>
1021
1022 <!-- COMPOSITIONS -->
1023 <section>
1024 <div class="sec-head">
1025 <span class="n">04</span>
1026 <h2>Frame Compositions</h2>
1027 <span class="sp"></span><span class="lab">True 16:9 · cqw Scaled</span>
1028 </div>
1029 <div class="gallery">
1030 <div class="fw">
1031 <div class="flabel"><b>Cover</b><span>· identity · compass ring · left</span></div>
1032 <div class="frame tf1">
1033 <div class="fgeo ring"></div>
1034 <div class="body">
1035 <div class="lab">Cartesian — Frame System</div>
1036 <h3>Restraint, drawn in <em>one line.</em></h3>
1037 <div class="sub">A quiet museum-catalog system in motion.</div>
1038 <div class="ha"></div>
1039 </div>
1040 </div>
1041 </div>
1042
1043 <div class="fw">
1044 <div class="flabel"><b>Agenda</b><span>· index · sparse list · left</span></div>
1045 <div class="frame tf2">
1046 <div class="body">
1047 <div class="lab">Contents</div>
1048 <h3>Four Considerations</h3>
1049 <div class="row"><span class="nm">01</span><span class="t">On Measure</span></div>
1050 <div class="row"><span class="nm">02</span><span class="t">On Margin</span></div>
1051 <div class="row">
1052 <span class="nm">03</span><span class="t">On the Single Line</span>
1053 </div>
1054 <div class="row" style="border-bottom: 0">
1055 <span class="nm">04</span><span class="t">On Silence</span>
1056 </div>
1057 </div>
1058 </div>
1059 </div>
1060
1061 <div class="fw">
1062 <div class="flabel"><b>Pull Quote</b><span>· quote · compass ring · centered</span></div>
1063 <div class="frame tf3">
1064 <div class="fgeo ring dash"></div>
1065 <div class="body">
1066 <div class="qm">“</div>
1067 <div class="q">Nothing is bold.<br />Nothing is loud.</div>
1068 <div class="at">— The System Voice</div>
1069 </div>
1070 </div>
1071 </div>
1072
1073 <div class="fw">
1074 <div class="flabel"><b>Closing Plate</b><span>· closer · centered ring</span></div>
1075 <div class="frame tf4">
1076 <div class="fgeo ring"></div>
1077 <div class="body">
1078 <div class="lab">Cartesian</div>
1079 <h3>Well-framed, <em>on stone.</em></h3>
1080 <div class="ha"></div>
1081 </div>
1082 </div>
1083 </div>
1084 </div>
1085 </section>
1086
1087 <!-- PRINCIPLES -->
1088 <section>
1089 <div class="sec-head">
1090 <span class="n">05</span>
1091 <h2>Frame Rules</h2>
1092 <span class="sp"></span><span class="lab">Restraint</span>
1093 </div>
1094 <div class="dos">
1095 <div class="do-card do">
1096 <h4>Do</h4>
1097 <ul>
1098 <li>Use a single 1px taupe line for every separator — the hairline is the identity.</li>
1099 <li>Set every Playfair headline at weight 400, in ink, sentence case.</li>
1100 <li>Render labels in taupe, uppercase, 2–3px tracked.</li>
1101 <li>Layer one or two compass rings (solid + dashed) at 20–50% behind content.</li>
1102 <li>Let frames breathe — sparse, generous negative space.</li>
1103 </ul>
1104 </div>
1105 <div class="do-card dont">
1106 <h4>Don't</h4>
1107 <ul>
1108 <li>No populist accent color — no red, blue, green; stone and ink only.</li>
1109 <li>No bold Playfair, no taupe headlines, no thick borders.</li>
1110 <li>No shadows, elevated cards, or rounded rectangles (circles only).</li>
1111 <li>Don't crowd the frame — packed layouts read as broken.</li>
1112 <li>Never more than two geo decorations per frame.</li>
1113 </ul>
1114 </div>
1115 </div>
1116 </section>
1117
1118 <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
1119 <style>
1120 /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
1121 .capdemo {
1122 --cap-ink: var(--ink);
1123 --cap-canvas: var(--bg);
1124 --cap-accent: var(--accent);
1125 --cap-accent-2: var(--line);
1126 }
1127 .capdemo .stage {
1128 position: absolute;
1129 left: 0;
1130 right: 0;
1131 bottom: 0;
1132 height: 16.67cqh;
1133 display: flex;
1134 align-items: center;
1135 justify-content: center;
1136 z-index: 4;
1137 }
1138 .capdemo .pill {
1139 max-width: 80cqw;
1140 padding: 1.4cqw 3cqw 1.7cqw;
1141 background: var(--cap-canvas);
1142 border: 1px solid var(--cap-accent-2);
1143 border-radius: 0;
1144 }
1145 .capdemo .line {
1146 display: flex;
1147 flex-wrap: wrap;
1148 justify-content: center;
1149 gap: 0.1em 0.34em;
1150 font-family: var(--serif);
1151 font-weight: 400;
1152 font-size: 3.4cqw;
1153 line-height: 1.16;
1154 letter-spacing: -0.01em;
1155 }
1156 .capdemo .w {
1157 display: inline-block;
1158 padding: 0 0.06em;
1159 border-bottom: 1px solid transparent;
1160 color: color-mix(in srgb, var(--cap-ink) 42%, var(--cap-canvas));
1161 }
1162 .capdemo .w.spoken {
1163 color: var(--cap-ink);
1164 }
1165 .capdemo .w.active {
1166 color: var(--cap-ink);
1167 background: color-mix(in srgb, var(--cap-accent) 18%, var(--cap-canvas));
1168 border-bottom: 1px solid var(--cap-accent);
1169 }
1170 .capdemo .bandline {
1171 position: absolute;
1172 left: 0;
1173 right: 0;
1174 bottom: 16.67cqh;
1175 border-top: 1px dashed var(--line);
1176 z-index: 3;
1177 }
1178 .capdemo .bandtag {
1179 position: absolute;
1180 right: 3cqw;
1181 bottom: calc(16.67cqh + 0.7cqw);
1182 font-family: var(--sans);
1183 text-transform: uppercase;
1184 letter-spacing: 0.2cqw;
1185 font-size: 0.95cqw;
1186 color: var(--accent);
1187 z-index: 4;
1188 }
1189 </style>
1190 <section>
1191 <div class="sec-head">
1192 <span class="n">06</span>
1193 <h2>Captions</h2>
1194 <span class="sp"></span><span class="lab">Lower-third · Karaoke</span>
1195 </div>
1196 <div class="gallery">
1197 <div class="fw">
1198 <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
1199 <div class="frame capdemo">
1200 <div
1201 class="fgeo ring dash"
1202 style="width: 30cqw; height: 30cqw; left: 8cqw; top: 10%; opacity: 0.3"
1203 ></div>
1204 <div class="bandline"></div>
1205 <div class="bandtag">Caption Band · 16.7%</div>
1206 <div class="stage">
1207 <div class="pill">
1208 <div class="line">
1209 <span class="w spoken">Built</span>
1210 <span class="w spoken">for</span>
1211 <span class="w active">teams</span>
1212 <span class="w">who</span>
1213 <span class="w">ship.</span>
1214 </div>
1215 </div>
1216 </div>
1217 </div>
1218 </div>
1219
1220 <div class="fw">
1221 <div class="flabel"><b>Settled line</b><span>· all spoken · marker cleared</span></div>
1222 <div class="frame capdemo">
1223 <div
1224 class="fgeo ring"
1225 style="
1226 width: 34cqw;
1227 height: 34cqw;
1228 right: -8cqw;
1229 top: 50%;
1230 transform: translateY(-50%);
1231 opacity: 0.28;
1232 "
1233 ></div>
1234 <div class="stage">
1235 <div class="pill">
1236 <div class="line">
1237 <span class="w spoken">Ship</span>
1238 <span class="w spoken">faster</span>
1239 <span class="w spoken">today.</span>
1240 </div>
1241 </div>
1242 </div>
1243 </div>
1244 </div>
1245 </div>
1246 </section>
1247
1248 <div class="foot">
1249 <span class="l">Cartesian</span>
1250 <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
1251 </div>
1252
1253 <template id="__bundler_thumbnail">
1254 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
1255 <rect width="100" height="100" fill="#EDE8E0" />
1256 <circle cx="68" cy="50" r="30" fill="none" stroke="#B8B0A4" />
1257 <circle cx="68" cy="50" r="20" fill="none" stroke="#B8B0A4" stroke-dasharray="3 3" />
1258 <rect x="16" y="44" width="40" height="5" fill="#1A1A1A" />
1259 <rect x="16" y="56" width="22" height="2" fill="#8A8178" />
1260 </svg>
1261 </template>
1262 </body>
1263</html>