Setting the file. One moment. Frame Showcase · Hyperframes Creative · heygen-com/hyperframes · Skills Docs22.10
Narration
(opens in a new tab)
frame-presets/capsule/frame-showcase.html
HTML·1,465 lines·42 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=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Space+Grotesk:wght@400;500;600;700&display=swap"
11 rel="stylesheet"
12 />
13 <style id="ds-tokens">
14 :root {
15 --cream: #f5f5f0;
16 --ink: #1a1a1a;
17 --outline: #1e1e1e;
18 --white: #ffffff;
19 --coral: #e85d4e;
20 --lime: #c4d94e;
21 --lavender: #c5b5e0;
22 --sky: #8bb4f7;
23 --violet: #a06ce8;
24 --yellow: #f2d160;
25 --peach: #f5b895;
26 --mint: #a8e6cf;
27 --shadow: rgba(26, 26, 26, 0.08);
28 --serif: "Bodoni Moda", serif;
29 --sans: "Space Grotesk", sans-serif;
30 }
31 * {
32 margin: 0;
33 padding: 0;
34 box-sizing: border-box;
35 }
36 html {
37 background: #0e0e0c;
38 }
39 body {
40 background: var(--cream);
41 background-image:
42 radial-gradient(ellipse at 12% 8%, rgba(229, 93, 78, 0.1), transparent 45%),
43 radial-gradient(ellipse at 88% 22%, rgba(139, 180, 247, 0.12), transparent 42%),
44 radial-gradient(ellipse at 70% 95%, rgba(196, 217, 78, 0.1), transparent 45%);
45 color: var(--ink);
46 font-family: var(--sans);
47 -webkit-font-smoothing: antialiased;
48 }
49 .serif {
50 font-family: var(--serif);
51 color: var(--ink);
52 }
53 .eyebrow {
54 font-family: var(--sans);
55 font-weight: 600;
56 text-transform: uppercase;
57 letter-spacing: 0.12em;
58 font-size: 12px;
59 }
60 .pill {
61 border-radius: 9999px;
62 border: 2px solid var(--outline);
63 font-family: var(--sans);
64 font-weight: 600;
65 white-space: nowrap;
66 display: inline-flex;
67 align-items: center;
68 }
69
70 section {
71 padding: 120px 100px;
72 position: relative;
73 }
74 .sec-head {
75 display: flex;
76 align-items: center;
77 gap: 20px;
78 margin-bottom: 64px;
79 }
80 .sec-head .tagpill {
81 background: var(--lavender);
82 padding: 0.5rem 1.4rem;
83 font-size: 13px;
84 text-transform: uppercase;
85 letter-spacing: 0.1em;
86 font-weight: 600;
87 }
88 .sec-head h2 {
89 font-family: var(--serif);
90 font-weight: 700;
91 font-size: 52px;
92 line-height: 1;
93 letter-spacing: -0.02em;
94 }
95 .sec-head .sp {
96 flex: 1;
97 height: 2px;
98 background: var(--outline);
99 border-radius: 9999px;
100 opacity: 0.15;
101 }
102
103 /* COVER */
104 .cover {
105 min-height: 100vh;
106 padding: 0;
107 display: flex;
108 flex-direction: column;
109 justify-content: center;
110 align-items: center;
111 text-align: center;
112 position: relative;
113 overflow: hidden;
114 }
115 .cover .titlepill {
116 background: var(--yellow);
117 border: 2px solid var(--outline);
118 border-radius: 9999px;
119 padding: 1rem 2.6rem;
120 font-family: var(--sans);
121 font-weight: 600;
122 text-transform: uppercase;
123 letter-spacing: 0.14em;
124 font-size: 15px;
125 box-shadow: 6px 6px 0 var(--shadow);
126 margin-bottom: 40px;
127 position: relative;
128 z-index: 3;
129 white-space: nowrap;
130 }
131 .cover h1 {
132 font-family: var(--serif);
133 font-weight: 800;
134 font-size: clamp(72px, 13vw, 200px);
135 line-height: 0.88;
136 letter-spacing: -0.03em;
137 position: relative;
138 z-index: 3;
139 }
140 .cover h1 em {
141 font-style: italic;
142 color: var(--coral);
143 }
144 .cover .sub {
145 font-family: var(--sans);
146 font-weight: 400;
147 text-transform: uppercase;
148 letter-spacing: 0.18em;
149 font-size: 15px;
150 color: rgba(26, 26, 26, 0.6);
151 margin-top: 32px;
152 position: relative;
153 z-index: 3;
154 }
155 .cover .accent-line {
156 width: 80px;
157 height: 4px;
158 background: var(--coral);
159 border-radius: 9999px;
160 margin: 36px auto 0;
161 position: relative;
162 z-index: 3;
163 }
164 /* floating pills */
165 .fp {
166 position: absolute;
167 border: 2px solid var(--outline);
168 border-radius: 9999px;
169 font-family: var(--sans);
170 font-weight: 600;
171 text-transform: uppercase;
172 letter-spacing: 0.08em;
173 font-size: 13px;
174 padding: 0.5rem 1.2rem;
175 z-index: 1;
176 }
177 .fp.circ {
178 border-radius: 50%;
179 width: 84px;
180 height: 84px;
181 display: grid;
182 place-items: center;
183 padding: 0;
184 }
185
186 /* PALETTE */
187 .swatches {
188 display: grid;
189 grid-template-columns: repeat(4, 1fr);
190 gap: 24px;
191 }
192 .sw {
193 background: var(--white);
194 border: 2px solid var(--outline);
195 border-radius: 1.5rem;
196 overflow: hidden;
197 box-shadow: 6px 6px 0 var(--shadow);
198 }
199 .sw .chip {
200 height: 96px;
201 margin: 0;
202 }
203 .sw .meta {
204 padding: 16px 20px;
205 }
206 .sw .name {
207 font-family: var(--serif);
208 font-weight: 700;
209 font-size: 20px;
210 }
211 .sw .hex {
212 font-family: var(--sans);
213 font-size: 12px;
214 letter-spacing: 0.04em;
215 color: rgba(26, 26, 26, 0.55);
216 margin-top: 4px;
217 }
218
219 /* TYPE */
220 .type-row {
221 display: grid;
222 grid-template-columns: 240px 1fr;
223 align-items: center;
224 padding: 24px 0;
225 border-bottom: 2px solid rgba(30, 30, 30, 0.1);
226 }
227 .type-row .tok {
228 font-family: var(--sans);
229 font-weight: 600;
230 text-transform: uppercase;
231 letter-spacing: 0.1em;
232 font-size: 12px;
233 }
234 .type-row .m {
235 font-size: 12px;
236 color: rgba(26, 26, 26, 0.55);
237 margin-top: 8px;
238 line-height: 1.5;
239 }
240 .type-row .spec {
241 overflow: hidden;
242 }
243
244 /* COMPONENTS */
245 .cnote {
246 font-family: var(--sans);
247 font-weight: 600;
248 text-transform: uppercase;
249 letter-spacing: 0.1em;
250 font-size: 12px;
251 color: rgba(26, 26, 26, 0.55);
252 margin-bottom: 22px;
253 }
254 .cgrid {
255 display: grid;
256 grid-template-columns: repeat(12, 1fr);
257 gap: 32px;
258 margin-bottom: 56px;
259 }
260 .s3 {
261 grid-column: span 3;
262 }
263 .s4 {
264 grid-column: span 4;
265 }
266 .s6 {
267 grid-column: span 6;
268 }
269 .p-card {
270 background: var(--white);
271 border: 2px solid var(--outline);
272 border-radius: 2rem;
273 padding: 2.2rem 1.8rem;
274 box-shadow: 8px 8px 0 var(--shadow);
275 height: 100%;
276 }
277 .p-card .ic {
278 width: 60px;
279 height: 60px;
280 border-radius: 50%;
281 border: 2px solid var(--outline);
282 display: grid;
283 place-items: center;
284 font-family: var(--serif);
285 font-weight: 700;
286 font-size: 24px;
287 margin-bottom: 22px;
288 }
289 .p-card .t {
290 font-family: var(--serif);
291 font-weight: 700;
292 font-size: 24px;
293 line-height: 1.1;
294 }
295 .p-card .x {
296 font-size: 14px;
297 line-height: 1.6;
298 color: rgba(26, 26, 26, 0.65);
299 margin-top: 12px;
300 }
301 .stat-pill {
302 background: var(--white);
303 border: 2px solid var(--outline);
304 border-radius: 2rem;
305 padding: 2rem 1.5rem;
306 box-shadow: 6px 6px 0 var(--shadow);
307 text-align: left;
308 }
309 .stat-pill .n {
310 font-family: var(--serif);
311 font-weight: 800;
312 font-size: 48px;
313 line-height: 1;
314 letter-spacing: -0.03em;
315 }
316 .stat-pill .l {
317 font-family: var(--sans);
318 font-weight: 600;
319 text-transform: uppercase;
320 letter-spacing: 0.1em;
321 font-size: 11px;
322 color: rgba(26, 26, 26, 0.6);
323 margin-top: 12px;
324 }
325 .stat-pill .bar {
326 width: 40px;
327 height: 4px;
328 border-radius: 9999px;
329 margin-top: 16px;
330 }
331 .bartrack {
332 height: 36px;
333 background: var(--cream);
334 border: 2px solid var(--outline);
335 border-radius: 9999px;
336 overflow: hidden;
337 display: flex;
338 align-items: center;
339 margin-bottom: 16px;
340 }
341 .barfill {
342 height: 100%;
343 border-radius: 9999px;
344 border-right: 2px solid var(--outline);
345 display: flex;
346 align-items: center;
347 justify-content: flex-end;
348 padding-right: 14px;
349 font-family: var(--sans);
350 font-weight: 600;
351 font-size: 12px;
352 }
353 .chips {
354 display: flex;
355 gap: 12px;
356 flex-wrap: wrap;
357 }
358 .chip-pill {
359 border: 2px solid var(--outline);
360 border-radius: 9999px;
361 padding: 0.4rem 1.1rem;
362 font-family: var(--sans);
363 font-weight: 600;
364 text-transform: uppercase;
365 letter-spacing: 0.08em;
366 font-size: 12px;
367 }
368 .orbit {
369 position: relative;
370 height: 280px;
371 display: grid;
372 place-items: center;
373 }
374 .orbit .center {
375 width: 140px;
376 height: 140px;
377 border-radius: 50%;
378 background: var(--lime);
379 border: 2px solid var(--outline);
380 display: grid;
381 place-items: center;
382 font-family: var(--serif);
383 font-weight: 700;
384 font-size: 40px;
385 }
386 .orbit .sat {
387 position: absolute;
388 border: 2px solid var(--outline);
389 border-radius: 9999px;
390 font-family: var(--sans);
391 font-weight: 600;
392 text-transform: uppercase;
393 letter-spacing: 0.08em;
394 font-size: 12px;
395 padding: 0.4rem 1rem;
396 box-shadow: 6px 6px 0 var(--shadow);
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(--sans);
411 font-weight: 600;
412 text-transform: uppercase;
413 letter-spacing: 0.1em;
414 font-size: 12px;
415 color: rgba(26, 26, 26, 0.55);
416 }
417 .fw .flabel b {
418 color: var(--ink);
419 }
420 .frame {
421 aspect-ratio: 16/9;
422 container-type: size;
423 position: relative;
424 overflow: hidden;
425 background: var(--cream);
426 background-image:
427 radial-gradient(ellipse at 15% 12%, rgba(229, 93, 78, 0.1), transparent 46%),
428 radial-gradient(ellipse at 85% 85%, rgba(139, 180, 247, 0.12), transparent 46%);
429 border: 2px solid var(--outline);
430 border-radius: 1.4rem;
431 }
432 .frame > .body {
433 position: absolute;
434 inset: 0;
435 z-index: 3;
436 }
437 .frame .ffp {
438 position: absolute;
439 border: 0.25cqw solid var(--outline);
440 border-radius: 9999px;
441 font-family: var(--sans);
442 font-weight: 600;
443 text-transform: uppercase;
444 letter-spacing: 0.05cqw;
445 font-size: 1cqw;
446 padding: 0.4cqw 1.1cqw;
447 z-index: 1;
448 }
449 .frame .ffp.circ {
450 border-radius: 50%;
451 width: 6cqw;
452 height: 6cqw;
453 display: grid;
454 place-items: center;
455 padding: 0;
456 }
457
458 /* f1 cover */
459 .qf1 .body {
460 display: flex;
461 flex-direction: column;
462 justify-content: center;
463 align-items: center;
464 text-align: center;
465 }
466 .qf1 .tp {
467 background: var(--yellow);
468 border: 0.25cqw solid var(--outline);
469 border-radius: 9999px;
470 padding: 0.8cqw 2.2cqw;
471 font-family: var(--sans);
472 font-weight: 600;
473 text-transform: uppercase;
474 letter-spacing: 0.2cqw;
475 font-size: 1.1cqw;
476 box-shadow: 0.4cqw 0.4cqw 0 var(--shadow);
477 margin-bottom: 3cqw;
478 z-index: 3;
479 }
480 .qf1 h3 {
481 font-family: var(--serif);
482 font-weight: 800;
483 font-size: 12cqw;
484 line-height: 0.88;
485 letter-spacing: -0.3cqw;
486 z-index: 3;
487 }
488 .qf1 h3 em {
489 font-style: italic;
490 color: var(--coral);
491 }
492 .qf1 .al {
493 width: 6cqw;
494 height: 0.3cqw;
495 background: var(--coral);
496 border-radius: 9999px;
497 margin-top: 2.4cqw;
498 z-index: 3;
499 }
500
501 /* f2 pillar cards (catalog) */
502 .qf2 .body {
503 display: flex;
504 flex-direction: column;
505 justify-content: center;
506 padding: 0 5cqw;
507 }
508 .qf2 .tp {
509 align-self: flex-start;
510 background: var(--lavender);
511 border: 0.2cqw solid var(--outline);
512 border-radius: 9999px;
513 padding: 0.5cqw 1.4cqw;
514 font-family: var(--sans);
515 font-weight: 600;
516 text-transform: uppercase;
517 letter-spacing: 0.15cqw;
518 font-size: 0.9cqw;
519 margin-bottom: 1.6cqw;
520 }
521 .qf2 h3 {
522 font-family: var(--serif);
523 font-weight: 700;
524 font-size: 4cqw;
525 line-height: 1;
526 letter-spacing: -0.05cqw;
527 margin-bottom: 2.4cqw;
528 }
529 .qf2 .row {
530 display: grid;
531 grid-template-columns: repeat(3, 1fr);
532 gap: 2cqw;
533 }
534 .qf2 .c {
535 background: var(--white);
536 border: 0.2cqw solid var(--outline);
537 border-radius: 1.6cqw;
538 padding: 2cqw 1.6cqw;
539 box-shadow: 0.6cqw 0.6cqw 0 var(--shadow);
540 }
541 .qf2 .c .ic {
542 width: 4cqw;
543 height: 4cqw;
544 border-radius: 50%;
545 border: 0.2cqw solid var(--outline);
546 display: grid;
547 place-items: center;
548 font-family: var(--serif);
549 font-weight: 700;
550 font-size: 1.6cqw;
551 margin-bottom: 1.4cqw;
552 }
553 .qf2 .c .t {
554 font-family: var(--serif);
555 font-weight: 700;
556 font-size: 1.9cqw;
557 line-height: 1.1;
558 }
559 .qf2 .c .x {
560 font-size: 1cqw;
561 line-height: 1.5;
562 color: rgba(26, 26, 26, 0.65);
563 margin-top: 0.8cqw;
564 }
565
566 /* f3 quote */
567 .qf3 .body {
568 display: flex;
569 flex-direction: column;
570 justify-content: center;
571 padding: 0 8cqw;
572 }
573 .qf3 .q {
574 font-family: var(--serif);
575 font-weight: 600;
576 font-size: 4.2cqw;
577 line-height: 1.3;
578 letter-spacing: -0.03cqw;
579 }
580 .qf3 .q .hl {
581 display: inline-flex;
582 align-items: center;
583 background: var(--lime);
584 border: 0.2cqw solid var(--outline);
585 border-radius: 9999px;
586 padding: 0 1.2cqw;
587 font-family: var(--sans);
588 font-weight: 600;
589 font-size: 3cqw;
590 text-transform: none;
591 }
592 .qf3 .at {
593 font-family: var(--sans);
594 font-weight: 600;
595 text-transform: uppercase;
596 letter-spacing: 0.2cqw;
597 font-size: 1cqw;
598 color: rgba(26, 26, 26, 0.6);
599 margin-top: 2.4cqw;
600 }
601
602 /* f4 closing */
603 .qf4 .body {
604 display: flex;
605 flex-direction: column;
606 justify-content: center;
607 align-items: center;
608 text-align: center;
609 }
610 .qf4 .tp {
611 background: var(--yellow);
612 border: 0.25cqw solid var(--outline);
613 border-radius: 9999px;
614 padding: 0.7cqw 2cqw;
615 font-family: var(--sans);
616 font-weight: 600;
617 text-transform: uppercase;
618 letter-spacing: 0.2cqw;
619 font-size: 1cqw;
620 box-shadow: 0.4cqw 0.4cqw 0 var(--shadow);
621 margin-bottom: 2.6cqw;
622 z-index: 3;
623 }
624 .qf4 h3 {
625 font-family: var(--serif);
626 font-weight: 800;
627 font-size: 8.5cqw;
628 line-height: 0.92;
629 letter-spacing: -0.2cqw;
630 z-index: 3;
631 }
632 .qf4 h3 em {
633 font-style: italic;
634 color: var(--violet);
635 }
636 .qf4 .al {
637 width: 5cqw;
638 height: 0.3cqw;
639 background: var(--coral);
640 border-radius: 9999px;
641 margin-top: 2.4cqw;
642 z-index: 3;
643 }
644
645 /* PRINCIPLES */
646 .dos {
647 display: grid;
648 grid-template-columns: 1fr 1fr;
649 gap: 32px;
650 }
651 .do-card {
652 background: var(--white);
653 border: 2px solid var(--outline);
654 border-radius: 2rem;
655 padding: 36px;
656 box-shadow: 8px 8px 0 var(--shadow);
657 }
658 .do-card h4 {
659 font-family: var(--serif);
660 font-weight: 700;
661 font-size: 30px;
662 margin-bottom: 22px;
663 }
664 .do-card .hpill {
665 display: inline-block;
666 border-radius: 9999px;
667 border: 2px solid var(--outline);
668 padding: 0.3rem 1rem;
669 font-family: var(--sans);
670 font-weight: 600;
671 text-transform: uppercase;
672 letter-spacing: 0.1em;
673 font-size: 11px;
674 margin-bottom: 20px;
675 }
676 .do-card ul {
677 list-style: none;
678 }
679 .do-card li {
680 font-size: 14px;
681 line-height: 1.6;
682 padding-left: 24px;
683 position: relative;
684 margin-bottom: 13px;
685 color: rgba(26, 26, 26, 0.75);
686 }
687 .do-card li::before {
688 position: absolute;
689 left: 0;
690 font-family: var(--serif);
691 font-weight: 700;
692 }
693 .do-card.do li::before {
694 content: "+";
695 color: var(--coral);
696 }
697 .do-card.dont li::before {
698 content: "\00d7";
699 color: var(--violet);
700 }
701
702 .foot {
703 padding: 56px 100px;
704 display: flex;
705 justify-content: space-between;
706 align-items: center;
707 border-top: 2px solid rgba(30, 30, 30, 0.12);
708 }
709 .foot .l {
710 font-family: var(--serif);
711 font-weight: 800;
712 font-size: 28px;
713 }
714 .foot .r {
715 font-family: var(--sans);
716 font-weight: 600;
717 text-transform: uppercase;
718 letter-spacing: 0.12em;
719 font-size: 11px;
720 color: rgba(26, 26, 26, 0.5);
721 }
722 @media (max-width: 1100px) {
723 .gallery {
724 grid-template-columns: 1fr;
725 }
726 .swatches {
727 grid-template-columns: 1fr 1fr;
728 }
729 }
730 </style>
731 <link
732 rel="stylesheet"
733 href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,700;0,800;1,400&display=swap"
734 />
735 <link
736 rel="stylesheet"
737 href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap"
738 />
739 <style id="ft-override">
740 :root {
741 --primary: #f5f5f0 !important;
742 --secondary: #1a1a1a !important;
743 --tertiary: #c4d94e !important;
744 --accent: #e85d4e !important;
745 --f-disp: "Bodoni Moda", sans-serif !important;
746 --f-body: "Space Grotesk", sans-serif !important;
747 --cream: #f5f5f0 !important;
748 --ink: #1a1a1a !important;
749 --coral: #e85d4e !important;
750 --lime: #c4d94e !important;
751 --serif: "Bodoni Moda", sans-serif !important;
752 --sans: "Space Grotesk", sans-serif !important;
753 --outline: #1e1e1e !important;
754 --white: #ffffff !important;
755 --lavender: #c5b5e0 !important;
756 --sky: #8bb4f7 !important;
757 --violet: #a06ce8 !important;
758 --yellow: #f2d160 !important;
759 --peach: #f5b895 !important;
760 --mint: #a8e6cf !important;
761 --shadow: rgba(26, 26, 26, 0.08) !important;
762 }
763 </style>
764 </head>
765 <body>
766 <!-- COVER -->
767 <section class="cover">
768 <span
769 class="fp"
770 style="background: var(--coral); top: 14%; left: 8%; transform: rotate(-12deg)"
771 >Editorial</span
772 >
773 <span class="fp" style="background: var(--sky); top: 24%; right: 10%; transform: rotate(9deg)"
774 >Playful</span
775 >
776 <span
777 class="fp circ"
778 style="background: var(--peach); top: 60%; left: 6%; transform: rotate(-6deg)"
779 >★</span
780 >
781 <span
782 class="fp"
783 style="background: var(--mint); bottom: 16%; right: 8%; transform: rotate(-14deg)"
784 >Memphis</span
785 >
786 <span
787 class="fp"
788 style="background: var(--lavender); bottom: 24%; left: 13%; transform: rotate(7deg)"
789 >Candy</span
790 >
791 <span
792 class="fp circ"
793 style="background: var(--lime); top: 18%; right: 24%; transform: rotate(10deg)"
794 >+</span
795 >
796 <div class="titlepill">Frame System · Vol. 01</div>
797 <h1>Everything's<br />a <em>capsule.</em></h1>
798 <div class="sub">Bodoni Moda · Space Grotesk · Nine Candy Accents</div>
799 <div class="accent-line"></div>
800 </section>
801
802 <!-- PALETTE -->
803 <section>
804 <div class="sec-head">
805 <span class="tagpill">Palette</span>
806 <h2>Nine Candy Accents</h2>
807 <span class="sp"></span>
808 </div>
809 <div class="swatches">
810 <div class="sw">
811 <div class="chip" style="background: var(--coral)"></div>
812 <div class="meta">
813 <div class="name">Coral</div>
814 <div class="hex">#E85D4E</div>
815 </div>
816 </div>
817 <div class="sw">
818 <div class="chip" style="background: var(--lime)"></div>
819 <div class="meta">
820 <div class="name">Lime</div>
821 <div class="hex">#C4D94E</div>
822 </div>
823 </div>
824 <div class="sw">
825 <div class="chip" style="background: var(--lavender)"></div>
826 <div class="meta">
827 <div class="name">Lavender</div>
828 <div class="hex">#C5B5E0</div>
829 </div>
830 </div>
831 <div class="sw">
832 <div class="chip" style="background: var(--sky)"></div>
833 <div class="meta">
834 <div class="name">Sky</div>
835 <div class="hex">#8BB4F7</div>
836 </div>
837 </div>
838 <div class="sw">
839 <div class="chip" style="background: var(--violet)"></div>
840 <div class="meta">
841 <div class="name">Violet</div>
842 <div class="hex">#A06CE8</div>
843 </div>
844 </div>
845 <div class="sw">
846 <div class="chip" style="background: var(--yellow)"></div>
847 <div class="meta">
848 <div class="name">Yellow</div>
849 <div class="hex">#F2D160</div>
850 </div>
851 </div>
852 <div class="sw">
853 <div class="chip" style="background: var(--peach)"></div>
854 <div class="meta">
855 <div class="name">Peach</div>
856 <div class="hex">#F5B895</div>
857 </div>
858 </div>
859 <div class="sw">
860 <div class="chip" style="background: var(--mint)"></div>
861 <div class="meta">
862 <div class="name">Mint</div>
863 <div class="hex">#A8E6CF</div>
864 </div>
865 </div>
866 <div class="sw">
867 <div
868 class="chip"
869 style="background: var(--cream); border-bottom: 2px solid var(--outline)"
870 ></div>
871 <div class="meta">
872 <div class="name">Cream</div>
873 <div class="hex">#F5F5F0 · canvas</div>
874 </div>
875 </div>
876 <div class="sw">
877 <div class="chip" style="background: var(--ink)"></div>
878 <div class="meta">
879 <div class="name">Ink / Outline</div>
880 <div class="hex">#1A1A1A · #1E1E1E</div>
881 </div>
882 </div>
883 </div>
884 </section>
885
886 <!-- TYPOGRAPHY -->
887 <section>
888 <div class="sec-head">
889 <span class="tagpill" style="background: var(--mint)">Type</span>
890 <h2>Bodoni × Grotesk</h2>
891 <span class="sp"></span>
892 </div>
893 <div class="type-row">
894 <div>
895 <div class="tok">display</div>
896 <div class="m">Bodoni Moda 800 · sentence case · −0.02em</div>
897 </div>
898 <div class="spec">
899 <span
900 class="serif"
901 style="font-weight: 800; font-size: 88px; line-height: 0.9; letter-spacing: -0.02em"
902 >Inflated.</span
903 >
904 </div>
905 </div>
906 <div class="type-row">
907 <div>
908 <div class="tok">headline</div>
909 <div class="m">Bodoni Moda 700 · ink, never colored</div>
910 </div>
911 <div class="spec">
912 <span class="serif" style="font-weight: 700; font-size: 54px">A friendly pill</span>
913 </div>
914 </div>
915 <div class="type-row">
916 <div>
917 <div class="tok">stat-number</div>
918 <div class="m">Bodoni Moda 800 · color allowed here</div>
919 </div>
920 <div class="spec">
921 <span
922 class="serif"
923 style="font-weight: 800; font-size: 64px; color: var(--coral); letter-spacing: -0.03em"
924 >240%</span
925 >
926 </div>
927 </div>
928 <div class="type-row">
929 <div>
930 <div class="tok">body</div>
931 <div class="m">Space Grotesk 400 · ink 65%</div>
932 </div>
933 <div class="spec">
934 <p
935 style="
936 font-size: 17px;
937 line-height: 1.6;
938 max-width: 680px;
939 color: rgba(26, 26, 26, 0.7);
940 "
941 >
942 Space Grotesk carries every paragraph and label — the clean grotesque against Bodoni's
943 glamour.
944 </p>
945 </div>
946 </div>
947 <div class="type-row" style="border-bottom: 0">
948 <div>
949 <div class="tok">pill-text</div>
950 <div class="m">Space Grotesk 600 · uppercase · 0.12em</div>
951 </div>
952 <div class="spec">
953 <span
954 class="pill"
955 style="
956 background: var(--yellow);
957 padding: 0.5rem 1.4rem;
958 text-transform: uppercase;
959 letter-spacing: 0.12em;
960 font-size: 14px;
961 "
962 >Featured</span
963 >
964 </div>
965 </div>
966 </section>
967
968 <!-- COMPONENTS -->
969 <section>
970 <div class="sec-head">
971 <span class="tagpill" style="background: var(--sky)">Components</span>
972 <h2>Pills, All the Way Down</h2>
973 <span class="sp"></span>
974 </div>
975
976 <div class="cgrid">
977 <div class="s4">
978 <div class="cnote">Pillar card</div>
979 <div class="p-card">
980 <div class="ic" style="background: var(--coral)">I</div>
981 <div class="t">Pill Geometry</div>
982 <div class="x">Every container is a pill — 9999px small, 2rem for cards.</div>
983 </div>
984 </div>
985 <div class="s4">
986 <div class="cnote">Stat pills</div>
987 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px">
988 <div class="stat-pill">
989 <div class="n" style="color: var(--coral)">9</div>
990 <div class="l">Accents</div>
991 <div class="bar" style="background: var(--coral)"></div>
992 </div>
993 <div class="stat-pill">
994 <div class="n" style="color: var(--sky)">2px</div>
995 <div class="l">Outline</div>
996 <div class="bar" style="background: var(--sky)"></div>
997 </div>
998 </div>
999 </div>
1000 <div class="s4">
1001 <div class="cnote">Bar tracks + chips</div>
1002 <div class="bartrack">
1003 <div class="barfill" style="width: 78%; background: var(--lime)">78</div>
1004 </div>
1005 <div class="bartrack">
1006 <div class="barfill" style="width: 54%; background: var(--violet); color: var(--white)">
1007 54
1008 </div>
1009 </div>
1010 <div class="chips">
1011 <span class="chip-pill" style="background: var(--peach)">Soft</span
1012 ><span class="chip-pill" style="background: var(--lavender)">Lifted</span
1013 ><span class="chip-pill" style="background: var(--mint)">Friendly</span>
1014 </div>
1015 </div>
1016 </div>
1017
1018 <div class="cgrid" style="margin-bottom: 0">
1019 <div class="s6">
1020 <div class="cnote">Orbit composition</div>
1021 <div class="orbit">
1022 <div class="center">01</div>
1023 <span
1024 class="sat"
1025 style="background: var(--coral); top: 14%; left: 18%; transform: rotate(-10deg)"
1026 >Vision</span
1027 >
1028 <span
1029 class="sat"
1030 style="background: var(--sky); top: 20%; right: 16%; transform: rotate(8deg)"
1031 >Future</span
1032 >
1033 <span
1034 class="sat"
1035 style="background: var(--yellow); bottom: 16%; left: 24%; transform: rotate(6deg)"
1036 >Next</span
1037 >
1038 <span
1039 class="sat"
1040 style="background: var(--mint); bottom: 20%; right: 20%; transform: rotate(-7deg)"
1041 >Now</span
1042 >
1043 </div>
1044 </div>
1045 <div class="s6">
1046 <div class="cnote">Diagram nodes + connectors</div>
1047 <div
1048 style="display: flex; align-items: center; gap: 0; margin-top: 40px; flex-wrap: wrap"
1049 >
1050 <span
1051 class="pill"
1052 style="
1053 background: var(--white);
1054 padding: 1rem 2rem;
1055 box-shadow: 6px 6px 0 var(--shadow);
1056 font-family: var(--serif);
1057 font-weight: 700;
1058 "
1059 >Draft</span
1060 >
1061 <span
1062 style="
1063 width: 50px;
1064 height: 4px;
1065 background: var(--outline);
1066 position: relative;
1067 display: inline-block;
1068 "
1069 ></span>
1070 <span
1071 class="pill"
1072 style="
1073 background: var(--lavender);
1074 padding: 1rem 2rem;
1075 box-shadow: 6px 6px 0 var(--shadow);
1076 font-family: var(--serif);
1077 font-weight: 700;
1078 "
1079 >Shape</span
1080 >
1081 <span
1082 style="
1083 width: 50px;
1084 height: 4px;
1085 background: var(--outline);
1086 position: relative;
1087 display: inline-block;
1088 "
1089 ></span>
1090 <span
1091 class="pill"
1092 style="
1093 background: var(--lime);
1094 padding: 1rem 2rem;
1095 box-shadow: 6px 6px 0 var(--shadow);
1096 font-family: var(--serif);
1097 font-weight: 700;
1098 "
1099 >Ship</span
1100 >
1101 </div>
1102 <div style="margin-top: 40px" class="cnote">Card icons</div>
1103 <div style="display: flex; gap: 18px">
1104 <span
1105 style="
1106 width: 60px;
1107 height: 60px;
1108 border-radius: 50%;
1109 border: 2px solid var(--outline);
1110 background: var(--yellow);
1111 display: grid;
1112 place-items: center;
1113 font-family: var(--serif);
1114 font-weight: 700;
1115 font-size: 22px;
1116 "
1117 >II</span
1118 >
1119 <span
1120 style="
1121 width: 60px;
1122 height: 60px;
1123 border-radius: 50%;
1124 border: 2px solid var(--outline);
1125 background: var(--peach);
1126 display: grid;
1127 place-items: center;
1128 font-family: var(--serif);
1129 font-weight: 700;
1130 font-size: 22px;
1131 "
1132 >III</span
1133 >
1134 <span
1135 style="
1136 width: 60px;
1137 height: 60px;
1138 border-radius: 50%;
1139 border: 2px solid var(--outline);
1140 background: var(--violet);
1141 color: var(--white);
1142 display: grid;
1143 place-items: center;
1144 font-family: var(--serif);
1145 font-weight: 700;
1146 font-size: 22px;
1147 "
1148 >IV</span
1149 >
1150 </div>
1151 </div>
1152 </div>
1153 </section>
1154
1155 <!-- COMPOSITIONS -->
1156 <section>
1157 <div class="sec-head">
1158 <span class="tagpill" style="background: var(--coral)">Frames</span>
1159 <h2>Frame Compositions</h2>
1160 <span class="sp"></span>
1161 </div>
1162 <div class="gallery">
1163 <div class="fw">
1164 <div class="flabel"><b>Cover</b><span>· identity · pill wallpaper · centered</span></div>
1165 <div class="frame qf1">
1166 <span
1167 class="ffp"
1168 style="background: var(--coral); top: 12%; left: 8%; transform: rotate(-12deg)"
1169 >Editorial</span
1170 >
1171 <span
1172 class="ffp"
1173 style="background: var(--sky); top: 18%; right: 10%; transform: rotate(9deg)"
1174 >Playful</span
1175 >
1176 <span
1177 class="ffp circ"
1178 style="background: var(--lime); bottom: 16%; left: 9%; transform: rotate(-8deg)"
1179 >+</span
1180 >
1181 <span
1182 class="ffp"
1183 style="background: var(--mint); bottom: 14%; right: 11%; transform: rotate(-12deg)"
1184 >Memphis</span
1185 >
1186 <div class="body">
1187 <div class="tp">Frame System</div>
1188 <h3>Everything's a <em>capsule.</em></h3>
1189 <div class="al"></div>
1190 </div>
1191 </div>
1192 </div>
1193
1194 <div class="fw">
1195 <div class="flabel"><b>Pillar Cards</b><span>· catalog · 3-up · left</span></div>
1196 <div class="frame qf2">
1197 <div class="body">
1198 <div class="tp">Three Pillars</div>
1199 <h3>The capsule rules.</h3>
1200 <div class="row">
1201 <div class="c">
1202 <div class="ic" style="background: var(--coral)">I</div>
1203 <div class="t">Pill</div>
1204 <div class="x">Every container is a pill.</div>
1205 </div>
1206 <div class="c">
1207 <div class="ic" style="background: var(--sky)">II</div>
1208 <div class="t">Outline</div>
1209 <div class="x">2px ink stroke on all.</div>
1210 </div>
1211 <div class="c">
1212 <div class="ic" style="background: var(--lime)">III</div>
1213 <div class="t">Lift</div>
1214 <div class="x">Soft offset shadow.</div>
1215 </div>
1216 </div>
1217 </div>
1218 </div>
1219 </div>
1220
1221 <div class="fw">
1222 <div class="flabel"><b>Pull Quote</b><span>· quote · highlight pill · left</span></div>
1223 <div class="frame qf3">
1224 <span
1225 class="ffp"
1226 style="background: var(--peach); top: 14%; right: 9%; transform: rotate(8deg)"
1227 >Voice</span
1228 >
1229 <div class="body">
1230 <div class="q">
1231 Wrap emphasis in a <span class="hl">candy pill</span>, never in bold.
1232 </div>
1233 <div class="at">— The System Voice</div>
1234 </div>
1235 </div>
1236 </div>
1237
1238 <div class="fw">
1239 <div class="flabel">
1240 <b>Closing Plate</b><span>· closer · pill wallpaper · centered</span>
1241 </div>
1242 <div class="frame qf4">
1243 <span
1244 class="ffp"
1245 style="background: var(--lavender); top: 16%; left: 10%; transform: rotate(-10deg)"
1246 >Thanks</span
1247 >
1248 <span
1249 class="ffp circ"
1250 style="background: var(--yellow); bottom: 18%; right: 12%; transform: rotate(9deg)"
1251 >★</span
1252 >
1253 <div class="body">
1254 <div class="tp">The End</div>
1255 <h3>Stay <em>inflated.</em></h3>
1256 <div class="al"></div>
1257 </div>
1258 </div>
1259 </div>
1260 </div>
1261 </section>
1262
1263 <!-- PRINCIPLES -->
1264 <section>
1265 <div class="sec-head">
1266 <span class="tagpill" style="background: var(--yellow)">Rules</span>
1267 <h2>Frame Rules</h2>
1268 <span class="sp"></span>
1269 </div>
1270 <div class="dos">
1271 <div class="do-card do">
1272 <span class="hpill" style="background: var(--lime)">Do</span>
1273 <ul>
1274 <li>Make every text container a pill — 9999px small, 2rem for cards.</li>
1275 <li>Wrap every pill, card, and icon in the 2px ink outline.</li>
1276 <li>Set Bodoni headlines in ink, sentence case; color lives on stats + pill fills.</li>
1277 <li>Use soft offset shadows (4/6/8/12px) in 8% ink — never blur.</li>
1278 <li>Float 5–8 candy pills as wallpaper on declarative frames.</li>
1279 </ul>
1280 </div>
1281 <div class="do-card dont">
1282 <span class="hpill" style="background: var(--coral)">Don't</span>
1283 <ul>
1284 <li>No sharp-cornered text containers; no unstroked pills.</li>
1285 <li>No colored Bodoni headlines; no uppercase Bodoni.</li>
1286 <li>No blurred shadows; no tenth accent color.</li>
1287 <li>No shadows on decorative floating pills (atmosphere is flat).</li>
1288 <li>Don't blow a headline edge-to-edge — fit to measure.</li>
1289 </ul>
1290 </div>
1291 </div>
1292 </section>
1293
1294 <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
1295 <style>
1296 /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
1297 .capdemo {
1298 --cap-ink: var(--ink);
1299 --cap-canvas: var(--cream);
1300 --cap-accent: var(--coral);
1301 --cap-accent-2: var(--yellow);
1302 }
1303 .capdemo .stage {
1304 position: absolute;
1305 left: 0;
1306 right: 0;
1307 bottom: 0;
1308 height: 16.67cqh;
1309 display: flex;
1310 align-items: center;
1311 justify-content: center;
1312 z-index: 4;
1313 }
1314 .capdemo .pill {
1315 max-width: 82cqw;
1316 padding: 1.3cqw 3.4cqw 1.5cqw;
1317 background: var(--cap-canvas);
1318 border: 0.2cqw solid var(--cap-ink);
1319 border-radius: 9999px;
1320 box-shadow: 0.6cqw 0.6cqw 0 var(--shadow);
1321 }
1322 .capdemo .line {
1323 display: flex;
1324 flex-wrap: wrap;
1325 justify-content: center;
1326 gap: 0.12em 0.36em;
1327 font-family: var(--serif);
1328 font-weight: 700;
1329 font-size: 3.2cqw;
1330 line-height: 1.16;
1331 letter-spacing: -0.02em;
1332 }
1333 .capdemo .w {
1334 display: inline-block;
1335 padding: 0 0.1em;
1336 border-radius: 9999px;
1337 color: color-mix(in srgb, var(--cap-ink) 42%, var(--cap-canvas));
1338 }
1339 .capdemo .w.spoken {
1340 color: var(--cap-ink);
1341 }
1342 .capdemo .w.active {
1343 color: var(--cap-ink);
1344 background: var(--cap-accent);
1345 box-shadow: 0 0 0 0.14em var(--cap-accent);
1346 }
1347 .capdemo .bandline {
1348 position: absolute;
1349 left: 0;
1350 right: 0;
1351 bottom: 16.67cqh;
1352 border-top: 0.12cqw dashed rgba(30, 30, 30, 0.3);
1353 z-index: 3;
1354 }
1355 .capdemo .bandtag {
1356 position: absolute;
1357 right: 3cqw;
1358 bottom: calc(16.67cqh + 0.7cqw);
1359 font-family: var(--sans);
1360 font-weight: 600;
1361 text-transform: uppercase;
1362 font-size: 0.85cqw;
1363 letter-spacing: 0.08em;
1364 color: rgba(26, 26, 26, 0.5);
1365 z-index: 4;
1366 }
1367 </style>
1368 <section>
1369 <div class="sec-head">
1370 <span class="tagpill" style="background: var(--peach)">Captions</span>
1371 <h2>Captions</h2>
1372 <span class="sp"></span>
1373 </div>
1374 <div class="gallery">
1375 <div class="fw">
1376 <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
1377 <div class="frame capdemo">
1378 <span
1379 class="ffp"
1380 style="background: var(--lavender); top: 12%; left: 8%; transform: rotate(-11deg)"
1381 >Live</span
1382 >
1383 <span
1384 class="ffp circ"
1385 style="background: var(--lime); top: 16%; right: 10%; transform: rotate(8deg)"
1386 >+</span
1387 >
1388 <div class="bandline"></div>
1389 <div class="bandtag">caption band · 16.7%</div>
1390 <div class="stage">
1391 <div class="pill">
1392 <div class="line">
1393 <span class="w spoken">Built</span>
1394 <span class="w spoken">for</span>
1395 <span class="w active">teams</span>
1396 <span class="w">who</span>
1397 <span class="w">ship.</span>
1398 </div>
1399 </div>
1400 </div>
1401 </div>
1402 </div>
1403
1404 <div class="fw">
1405 <div class="flabel"><b>Settled line</b><span>· all spoken · highlight cleared</span></div>
1406 <div class="frame capdemo">
1407 <span
1408 class="ffp"
1409 style="
1410 background: var(--sky);
1411 bottom: auto;
1412 top: 14%;
1413 right: 11%;
1414 transform: rotate(9deg);
1415 "
1416 >Promo</span
1417 >
1418 <div class="stage">
1419 <div class="pill">
1420 <div class="line">
1421 <span class="w spoken">Ship</span>
1422 <span class="w spoken">faster</span>
1423 <span class="w spoken">today.</span>
1424 </div>
1425 </div>
1426 </div>
1427 </div>
1428 </div>
1429 </div>
1430 </section>
1431
1432 <div class="foot">
1433 <span class="l">Capsule</span>
1434 <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
1435 </div>
1436
1437 <template id="__bundler_thumbnail">
1438 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
1439 <rect width="100" height="100" fill="#F5F5F0" />
1440 <rect
1441 x="22"
1442 y="38"
1443 width="56"
1444 height="24"
1445 rx="12"
1446 fill="#F2D160"
1447 stroke="#1E1E1E"
1448 stroke-width="2"
1449 />
1450 <rect
1451 x="14"
1452 y="20"
1453 width="26"
1454 height="13"
1455 rx="6.5"
1456 fill="#E85D4E"
1457 stroke="#1E1E1E"
1458 stroke-width="2"
1459 transform="rotate(-10 27 26)"
1460 />
1461 <circle cx="76" cy="72" r="8" fill="#C4D94E" stroke="#1E1E1E" stroke-width="2" />
1462 </svg>
1463 </template>
1464 </body>
1465</html>