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