Setting the file. One moment. Frame Showcase · Hyperframes Creative · heygen-com/hyperframes · Skills Docs22.10
Narration
(opens in a new tab)
frame-presets/blue-professional/frame-showcase.html
HTML·1,372 lines·38 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=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap"
11 rel="stylesheet"
12 />
13 <style id="ds-tokens">
14 :root {
15 --bg: #fdfae7;
16 --primary: #1e2bfa;
17 --text: #111111;
18 --muted: #6b6b6b;
19 --light: #9a9a9a;
20 --accent-light: rgba(30, 43, 250, 0.08);
21 --accent-medium: rgba(30, 43, 250, 0.15);
22 --border: rgba(30, 43, 250, 0.2);
23 --card-bg: rgba(30, 43, 250, 0.04);
24 --positive: #059669;
25 --negative: #dc2626;
26 --disp: "Space Grotesk", sans-serif;
27 --body: "Inter", sans-serif;
28 }
29 * {
30 margin: 0;
31 padding: 0;
32 box-sizing: border-box;
33 }
34 html {
35 background: #0b0b16;
36 }
37 body {
38 background: var(--bg);
39 color: var(--muted);
40 font-family: var(--body);
41 -webkit-font-smoothing: antialiased;
42 }
43 .disp {
44 font-family: var(--disp);
45 }
46 .eyebrow {
47 font-family: var(--disp);
48 font-weight: 600;
49 text-transform: uppercase;
50 letter-spacing: 0.08em;
51 font-size: 14px;
52 color: var(--primary);
53 }
54
55 section {
56 padding: 108px 76px;
57 position: relative;
58 }
59 .sec-head {
60 display: flex;
61 align-items: flex-start;
62 gap: 20px;
63 margin-bottom: 60px;
64 }
65 .sec-head .ey {
66 display: flex;
67 flex-direction: column;
68 gap: 14px;
69 }
70 .sec-head .aline {
71 width: 60px;
72 height: 4px;
73 background: var(--primary);
74 border-radius: 2px;
75 }
76 .sec-head h2 {
77 font-family: var(--disp);
78 font-weight: 600;
79 font-size: 42px;
80 line-height: 1.1;
81 letter-spacing: -0.02em;
82 color: var(--text);
83 }
84 .sec-head .sp {
85 flex: 1;
86 }
87 .sec-head .tagpill {
88 background: var(--accent-light);
89 color: var(--primary);
90 padding: 0.4rem 1rem;
91 border-radius: 100px;
92 font-family: var(--disp);
93 font-weight: 500;
94 font-size: 12px;
95 align-self: center;
96 }
97
98 /* COVER */
99 .cover {
100 min-height: 100vh;
101 padding: 0 7vw;
102 display: flex;
103 flex-direction: column;
104 justify-content: center;
105 position: relative;
106 overflow: hidden;
107 }
108 .cover .deco {
109 position: absolute;
110 top: 0;
111 right: 0;
112 bottom: 0;
113 width: 36%;
114 background: var(--accent-light);
115 clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
116 }
117 .cover .dots {
118 position: absolute;
119 top: 14%;
120 right: 10%;
121 display: grid;
122 grid-template-columns: repeat(3, 1fr);
123 gap: 12px;
124 opacity: 0.25;
125 z-index: 2;
126 }
127 .cover .dots i {
128 width: 8px;
129 height: 8px;
130 border-radius: 50%;
131 background: var(--primary);
132 }
133 .cover .inner {
134 position: relative;
135 z-index: 3;
136 max-width: 64%;
137 }
138 .cover .aline {
139 width: 60px;
140 height: 4px;
141 background: var(--primary);
142 border-radius: 2px;
143 margin-bottom: 28px;
144 }
145 .cover .meta {
146 font-family: var(--disp);
147 font-weight: 400;
148 font-size: 13px;
149 letter-spacing: 0.05em;
150 color: var(--light);
151 margin-bottom: 20px;
152 }
153 .cover h1 {
154 font-family: var(--disp);
155 font-weight: 700;
156 font-size: clamp(46px, 5.4vw, 76px);
157 line-height: 1.08;
158 letter-spacing: -0.02em;
159 color: var(--text);
160 }
161 .cover .sub {
162 font-family: var(--body);
163 font-weight: 400;
164 font-size: clamp(16px, 1.4vw, 20px);
165 line-height: 1.6;
166 color: var(--muted);
167 margin-top: 26px;
168 max-width: 560px;
169 }
170 .cover .pbar {
171 position: absolute;
172 bottom: 0;
173 left: 0;
174 height: 3px;
175 width: 16%;
176 background: var(--primary);
177 }
178 .cover .counter {
179 position: absolute;
180 bottom: 24px;
181 left: 7vw;
182 font-family: var(--disp);
183 font-weight: 500;
184 font-size: 13px;
185 letter-spacing: 0.05em;
186 color: var(--muted);
187 }
188
189 /* PALETTE */
190 .swatches {
191 display: grid;
192 grid-template-columns: repeat(4, 1fr);
193 gap: 20px;
194 }
195 .sw {
196 background: var(--card-bg);
197 border: 1.5px solid var(--border);
198 border-radius: 14px;
199 overflow: hidden;
200 }
201 .sw .chip {
202 height: 92px;
203 border-radius: 10px;
204 margin: 14px 14px 0;
205 }
206 .sw .meta {
207 padding: 14px 18px 18px;
208 }
209 .sw .name {
210 font-family: var(--disp);
211 font-weight: 600;
212 font-size: 17px;
213 color: var(--text);
214 letter-spacing: -0.01em;
215 }
216 .sw .hex {
217 font-family: var(--disp);
218 font-size: 12px;
219 color: var(--muted);
220 margin-top: 4px;
221 }
222
223 /* TYPE */
224 .type-row {
225 display: grid;
226 grid-template-columns: 220px 1fr;
227 align-items: center;
228 padding: 24px 0;
229 border-bottom: 1px solid var(--border);
230 }
231 .type-row .tok {
232 font-family: var(--disp);
233 font-weight: 600;
234 text-transform: uppercase;
235 letter-spacing: 0.06em;
236 font-size: 12px;
237 color: var(--primary);
238 }
239 .type-row .m {
240 font-size: 12px;
241 color: var(--muted);
242 margin-top: 8px;
243 line-height: 1.5;
244 }
245 .type-row .spec {
246 overflow: hidden;
247 }
248
249 /* COMPONENTS */
250 .cnote {
251 font-family: var(--disp);
252 font-weight: 600;
253 text-transform: uppercase;
254 letter-spacing: 0.06em;
255 font-size: 12px;
256 color: var(--primary);
257 margin-bottom: 20px;
258 }
259 .cgrid {
260 display: grid;
261 grid-template-columns: repeat(12, 1fr);
262 gap: 1.2rem;
263 margin-bottom: 48px;
264 }
265 .s3 {
266 grid-column: span 3;
267 }
268 .s4 {
269 grid-column: span 4;
270 }
271 .s6 {
272 grid-column: span 6;
273 }
274 .s8 {
275 grid-column: span 8;
276 }
277 .card {
278 background: var(--card-bg);
279 border: 1.5px solid var(--border);
280 border-radius: 14px;
281 padding: 1.5rem 1.6rem;
282 height: 100%;
283 }
284 .card .mv {
285 font-family: var(--disp);
286 font-weight: 700;
287 font-size: 46px;
288 line-height: 1;
289 color: var(--primary);
290 }
291 .card .ml {
292 font-family: var(--body);
293 font-weight: 600;
294 font-size: 16px;
295 color: var(--text);
296 margin-top: 10px;
297 }
298 .card .md {
299 font-size: 13px;
300 line-height: 1.5;
301 color: var(--muted);
302 margin-top: 8px;
303 }
304 .card .chg {
305 font-family: var(--disp);
306 font-weight: 600;
307 font-size: 12.5px;
308 margin-top: 10px;
309 }
310 .card .chg.pos {
311 color: var(--positive);
312 }
313 .card .chg.neg {
314 color: var(--negative);
315 }
316 .statcell {
317 background: var(--card-bg);
318 border: 1px solid var(--border);
319 border-radius: 12px;
320 padding: 1.4rem 1.5rem;
321 }
322 .statcell .n {
323 font-family: var(--disp);
324 font-weight: 700;
325 font-size: 32px;
326 color: var(--primary);
327 line-height: 1;
328 }
329 .statcell .nm {
330 font-family: var(--body);
331 font-weight: 500;
332 font-size: 14px;
333 color: var(--text);
334 margin-top: 8px;
335 }
336 .statcell .ctx {
337 font-size: 12px;
338 color: var(--light);
339 margin-top: 8px;
340 padding-top: 8px;
341 border-top: 1px solid var(--border);
342 }
343 .bars .row {
344 display: flex;
345 align-items: center;
346 gap: 14px;
347 margin-bottom: 14px;
348 }
349 .bars .bl {
350 font-family: var(--body);
351 font-weight: 500;
352 font-size: 14px;
353 color: var(--text);
354 width: 90px;
355 }
356 .bars .track {
357 flex: 1;
358 height: 28px;
359 background: var(--accent-light);
360 border-radius: 6px;
361 overflow: hidden;
362 }
363 .bars .fill {
364 height: 100%;
365 display: block;
366 background: var(--primary);
367 border-radius: 6px;
368 }
369 .bars .pct {
370 font-family: var(--disp);
371 font-weight: 600;
372 font-size: 15px;
373 color: var(--primary);
374 width: 48px;
375 text-align: right;
376 }
377 .steps {
378 display: flex;
379 gap: 20px;
380 }
381 .step {
382 flex: 1;
383 }
384 .step .circ {
385 width: 56px;
386 height: 56px;
387 border-radius: 50%;
388 background: var(--primary);
389 color: var(--bg);
390 display: grid;
391 place-items: center;
392 font-family: var(--disp);
393 font-weight: 700;
394 font-size: 21px;
395 }
396 .step .t {
397 font-family: var(--disp);
398 font-weight: 600;
399 font-size: 17px;
400 color: var(--text);
401 margin-top: 14px;
402 }
403 .step .d {
404 font-size: 13px;
405 line-height: 1.5;
406 color: var(--muted);
407 margin-top: 6px;
408 }
409 .hilite {
410 background: var(--accent-light);
411 border-left: 4px solid var(--primary);
412 border-radius: 12px;
413 padding: 1.3rem 1.5rem;
414 }
415 .hilite .q {
416 font-family: var(--disp);
417 font-weight: 500;
418 font-size: 22px;
419 line-height: 1.4;
420 color: var(--text);
421 }
422 .hilite .c {
423 font-family: var(--disp);
424 font-weight: 500;
425 text-transform: uppercase;
426 letter-spacing: 0.04em;
427 font-size: 12px;
428 color: var(--muted);
429 margin-top: 14px;
430 }
431 .cta {
432 display: inline-block;
433 background: var(--primary);
434 color: var(--bg);
435 padding: 0.9rem 2.2rem;
436 border-radius: 100px;
437 font-family: var(--disp);
438 font-weight: 600;
439 font-size: 15px;
440 }
441
442 /* COMPOSITIONS */
443 .gallery {
444 display: grid;
445 grid-template-columns: 1fr 1fr;
446 gap: 48px;
447 }
448 .fw .flabel {
449 display: flex;
450 gap: 14px;
451 align-items: baseline;
452 margin-bottom: 16px;
453 font-family: var(--disp);
454 font-weight: 600;
455 text-transform: uppercase;
456 letter-spacing: 0.06em;
457 font-size: 12px;
458 color: var(--muted);
459 }
460 .fw .flabel b {
461 color: var(--text);
462 }
463 .frame {
464 aspect-ratio: 16/9;
465 container-type: size;
466 position: relative;
467 overflow: hidden;
468 background: var(--bg);
469 border: 1px solid var(--border);
470 border-radius: 10px;
471 }
472 .frame > .body {
473 position: absolute;
474 inset: 0;
475 z-index: 3;
476 }
477 .frame .pbar {
478 position: absolute;
479 bottom: 0;
480 left: 0;
481 height: 0.3cqw;
482 background: var(--primary);
483 z-index: 5;
484 }
485
486 /* f1 cover */
487 .gf1 .deco {
488 position: absolute;
489 top: 0;
490 right: 0;
491 bottom: 0;
492 width: 36%;
493 background: var(--accent-light);
494 clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
495 z-index: 1;
496 }
497 .gf1 .dots {
498 position: absolute;
499 top: 14%;
500 right: 9%;
501 display: grid;
502 grid-template-columns: repeat(3, 1fr);
503 gap: 1cqw;
504 opacity: 0.25;
505 z-index: 2;
506 }
507 .gf1 .dots i {
508 width: 0.7cqw;
509 height: 0.7cqw;
510 border-radius: 50%;
511 background: var(--primary);
512 }
513 .gf1 .body {
514 display: flex;
515 flex-direction: column;
516 justify-content: center;
517 padding: 0 5cqw;
518 }
519 .gf1 .aline {
520 width: 5cqw;
521 height: 0.3cqw;
522 background: var(--primary);
523 border-radius: 0.2cqw;
524 margin-bottom: 2cqw;
525 }
526 .gf1 .ey {
527 font-family: var(--disp);
528 font-weight: 400;
529 font-size: 1cqw;
530 letter-spacing: 0.05em;
531 color: var(--light);
532 margin-bottom: 1.4cqw;
533 }
534 .gf1 h3 {
535 font-family: var(--disp);
536 font-weight: 700;
537 font-size: 5.6cqw;
538 line-height: 1.06;
539 letter-spacing: -0.02em;
540 color: var(--text);
541 max-width: 58cqw;
542 }
543 .gf1 .sub {
544 font-size: 1.4cqw;
545 line-height: 1.5;
546 color: var(--muted);
547 margin-top: 1.8cqw;
548 max-width: 48cqw;
549 }
550
551 /* f2 dashboard */
552 .gf2 .body {
553 padding: 5.5cqw 5cqw;
554 display: flex;
555 flex-direction: column;
556 }
557 .gf2 .hdr {
558 display: flex;
559 justify-content: space-between;
560 align-items: flex-start;
561 margin-bottom: 2.4cqw;
562 }
563 .gf2 .ey {
564 font-family: var(--disp);
565 font-weight: 600;
566 text-transform: uppercase;
567 letter-spacing: 0.08em;
568 font-size: 0.95cqw;
569 color: var(--primary);
570 }
571 .gf2 h3 {
572 font-family: var(--disp);
573 font-weight: 600;
574 font-size: 3.2cqw;
575 letter-spacing: -0.02em;
576 color: var(--text);
577 margin-top: 0.6cqw;
578 }
579 .gf2 .tp {
580 background: var(--accent-light);
581 color: var(--primary);
582 padding: 0.4cqw 1cqw;
583 border-radius: 100px;
584 font-family: var(--disp);
585 font-weight: 500;
586 font-size: 0.9cqw;
587 }
588 .gf2 .grid {
589 display: grid;
590 grid-template-columns: repeat(3, 1fr);
591 gap: 1.4cqw;
592 flex: 1;
593 }
594 .gf2 .c {
595 background: var(--card-bg);
596 border: 0.1cqw solid var(--border);
597 border-radius: 1cqw;
598 padding: 1.6cqw;
599 }
600 .gf2 .c .n {
601 font-family: var(--disp);
602 font-weight: 700;
603 font-size: 3.4cqw;
604 color: var(--primary);
605 line-height: 1;
606 }
607 .gf2 .c .nm {
608 font-family: var(--body);
609 font-weight: 600;
610 font-size: 1.1cqw;
611 color: var(--text);
612 margin-top: 0.6cqw;
613 }
614 .gf2 .c .d {
615 font-size: 0.92cqw;
616 line-height: 1.45;
617 color: var(--muted);
618 margin-top: 0.5cqw;
619 }
620
621 /* f3 bars */
622 .gf3 .body {
623 padding: 5.5cqw 5cqw;
624 display: flex;
625 flex-direction: column;
626 }
627 .gf3 .ey {
628 font-family: var(--disp);
629 font-weight: 600;
630 text-transform: uppercase;
631 letter-spacing: 0.08em;
632 font-size: 0.95cqw;
633 color: var(--primary);
634 margin-bottom: 0.6cqw;
635 }
636 .gf3 h3 {
637 font-family: var(--disp);
638 font-weight: 600;
639 font-size: 3cqw;
640 letter-spacing: -0.02em;
641 color: var(--text);
642 margin-bottom: 2.4cqw;
643 }
644 .gf3 .row {
645 display: flex;
646 align-items: center;
647 gap: 1.4cqw;
648 margin-bottom: 1.4cqw;
649 }
650 .gf3 .bl {
651 font-family: var(--body);
652 font-weight: 500;
653 font-size: 1.2cqw;
654 color: var(--text);
655 width: 14cqw;
656 }
657 .gf3 .track {
658 flex: 1;
659 height: 2.6cqw;
660 background: var(--accent-light);
661 border-radius: 0.6cqw;
662 overflow: hidden;
663 }
664 .gf3 .fill {
665 height: 100%;
666 display: block;
667 background: var(--primary);
668 border-radius: 0.6cqw;
669 }
670 .gf3 .pct {
671 font-family: var(--disp);
672 font-weight: 600;
673 font-size: 1.4cqw;
674 color: var(--primary);
675 width: 5cqw;
676 text-align: right;
677 }
678
679 /* f4 quote/closing */
680 .gf4 {
681 position: relative;
682 }
683 .gf4 .rings {
684 position: absolute;
685 left: 50%;
686 top: 50%;
687 transform: translate(-50%, -50%);
688 width: 34cqw;
689 height: 34cqw;
690 border: 0.1cqw solid var(--border);
691 border-radius: 50%;
692 opacity: 0.4;
693 z-index: 1;
694 }
695 .gf4 .rings::before {
696 content: "";
697 position: absolute;
698 inset: 20%;
699 border: 0.1cqw solid var(--border);
700 border-radius: 50%;
701 }
702 .gf4 .body {
703 display: flex;
704 flex-direction: column;
705 justify-content: center;
706 align-items: center;
707 text-align: center;
708 padding: 0 9cqw;
709 }
710 .gf4 .qm {
711 font-family: var(--disp);
712 font-weight: 700;
713 font-size: 9cqw;
714 line-height: 0.5;
715 color: var(--primary);
716 opacity: 0.15;
717 height: 4cqw;
718 }
719 .gf4 .q {
720 font-family: var(--disp);
721 font-weight: 500;
722 font-size: 3.4cqw;
723 line-height: 1.35;
724 color: var(--text);
725 margin-top: 1cqw;
726 }
727 .gf4 .c {
728 font-family: var(--disp);
729 font-weight: 500;
730 text-transform: uppercase;
731 letter-spacing: 0.04em;
732 font-size: 1cqw;
733 color: var(--muted);
734 margin-top: 2cqw;
735 }
736
737 /* PRINCIPLES */
738 .dos {
739 display: grid;
740 grid-template-columns: 1fr 1fr;
741 gap: 24px;
742 }
743 .do-card {
744 background: var(--card-bg);
745 border: 1.5px solid var(--border);
746 border-radius: 14px;
747 padding: 36px;
748 }
749 .do-card h4 {
750 font-family: var(--disp);
751 font-weight: 600;
752 font-size: 24px;
753 color: var(--text);
754 margin-bottom: 8px;
755 letter-spacing: -0.01em;
756 }
757 .do-card .aline {
758 width: 48px;
759 height: 4px;
760 background: var(--primary);
761 border-radius: 2px;
762 margin-bottom: 22px;
763 }
764 .do-card ul {
765 list-style: none;
766 }
767 .do-card li {
768 font-size: 14px;
769 line-height: 1.6;
770 padding-left: 24px;
771 position: relative;
772 margin-bottom: 13px;
773 color: var(--muted);
774 }
775 .do-card li::before {
776 position: absolute;
777 left: 0;
778 font-family: var(--disp);
779 font-weight: 700;
780 color: var(--primary);
781 }
782 .do-card.do li::before {
783 content: "+";
784 }
785 .do-card.dont li::before {
786 content: "\00d7";
787 color: var(--light);
788 }
789
790 .foot {
791 padding: 52px 76px;
792 border-top: 1px solid var(--border);
793 display: flex;
794 justify-content: space-between;
795 align-items: center;
796 }
797 .foot .l {
798 font-family: var(--disp);
799 font-weight: 700;
800 font-size: 26px;
801 color: var(--text);
802 letter-spacing: -0.02em;
803 }
804 .foot .r {
805 font-family: var(--disp);
806 font-weight: 500;
807 text-transform: uppercase;
808 letter-spacing: 0.06em;
809 font-size: 11px;
810 color: var(--muted);
811 }
812 @media (max-width: 1100px) {
813 .gallery {
814 grid-template-columns: 1fr;
815 }
816 .swatches {
817 grid-template-columns: 1fr 1fr;
818 }
819 }
820 </style>
821 <link
822 rel="stylesheet"
823 href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap"
824 />
825 <link
826 rel="stylesheet"
827 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
828 />
829 <style id="ft-override">
830 :root {
831 --primary: #fdfae7 !important;
832 --secondary: #111111 !important;
833 --tertiary: #6b6b6b !important;
834 --accent: #1e2bfa !important;
835 --f-disp: "Space Grotesk", sans-serif !important;
836 --f-body: "Inter", sans-serif !important;
837 --bg: #fdfae7 !important;
838 --primary: #1e2bfa !important;
839 --text: #111111 !important;
840 --muted: #6b6b6b !important;
841 --disp: "Space Grotesk", sans-serif !important;
842 --body: "Inter", sans-serif !important;
843 --light: #9a9a9a !important;
844 --positive: #059669 !important;
845 --negative: #dc2626 !important;
846 --accent-light: rgba(30, 43, 250, 0.08) !important;
847 --accent-medium: rgba(30, 43, 250, 0.15) !important;
848 --border: rgba(30, 43, 250, 0.2) !important;
849 --card-bg: rgba(30, 43, 250, 0.04) !important;
850 }
851 </style>
852 </head>
853 <body>
854 <!-- COVER -->
855 <section class="cover">
856 <div class="deco"></div>
857 <div class="dots"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
858 <div class="inner">
859 <div class="aline"></div>
860 <div class="meta">FRAME SYSTEM · VOL. 01 · CONFIDENTIAL</div>
861 <h1>Restraint, with one strong commitment.</h1>
862 <div class="sub">
863 A consulting-grade frame system — warm cream, a single saturated cobalt carrying every
864 accent, and soft tinted cards that never shout.
865 </div>
866 </div>
867 <div class="counter">01 / 06</div>
868 <div class="pbar"></div>
869 </section>
870
871 <!-- PALETTE -->
872 <section>
873 <div class="sec-head">
874 <div class="ey">
875 <div class="aline"></div>
876 <h2>Palette</h2>
877 </div>
878 <span class="sp"></span><span class="tagpill">One Accent, Three Grays</span>
879 </div>
880 <div class="swatches">
881 <div class="sw">
882 <div
883 class="chip"
884 style="background: var(--bg); box-shadow: inset 0 0 0 1px var(--border)"
885 ></div>
886 <div class="meta">
887 <div class="name">Canvas</div>
888 <div class="hex">#fdfae7</div>
889 </div>
890 </div>
891 <div class="sw">
892 <div class="chip" style="background: var(--primary)"></div>
893 <div class="meta">
894 <div class="name">Cobalt</div>
895 <div class="hex">#1e2bfa · the only accent</div>
896 </div>
897 </div>
898 <div class="sw">
899 <div class="chip" style="background: var(--text)"></div>
900 <div class="meta">
901 <div class="name">Text</div>
902 <div class="hex">#111111</div>
903 </div>
904 </div>
905 <div class="sw">
906 <div class="chip" style="background: var(--muted)"></div>
907 <div class="meta">
908 <div class="name">Muted</div>
909 <div class="hex">#6b6b6b · body</div>
910 </div>
911 </div>
912 <div class="sw">
913 <div class="chip" style="background: var(--card-bg)"></div>
914 <div class="meta">
915 <div class="name">Card Tint</div>
916 <div class="hex">cobalt · 4%</div>
917 </div>
918 </div>
919 <div class="sw">
920 <div class="chip" style="background: var(--border)"></div>
921 <div class="meta">
922 <div class="name">Border</div>
923 <div class="hex">cobalt · 20%</div>
924 </div>
925 </div>
926 <div class="sw">
927 <div class="chip" style="background: var(--positive)"></div>
928 <div class="meta">
929 <div class="name">Positive</div>
930 <div class="hex">#059669 · inline only</div>
931 </div>
932 </div>
933 <div class="sw">
934 <div class="chip" style="background: var(--negative)"></div>
935 <div class="meta">
936 <div class="name">Negative</div>
937 <div class="hex">#dc2626 · inline only</div>
938 </div>
939 </div>
940 </div>
941 </section>
942
943 <!-- TYPOGRAPHY -->
944 <section>
945 <div class="sec-head">
946 <div class="ey">
947 <div class="aline"></div>
948 <h2>Typography</h2>
949 </div>
950 <span class="sp"></span><span class="tagpill">Space Grotesk + Inter</span>
951 </div>
952 <div class="type-row">
953 <div>
954 <div class="tok">h1</div>
955 <div class="m">Space Grotesk 700 · −0.02em · near-black</div>
956 </div>
957 <div class="spec">
958 <span
959 class="disp"
960 style="font-weight: 700; font-size: 66px; letter-spacing: -0.02em; color: var(--text)"
961 >Measured.</span
962 >
963 </div>
964 </div>
965 <div class="type-row">
966 <div>
967 <div class="tok">h4-eyebrow</div>
968 <div class="m">Space Grotesk 600 · uppercase · 0.08em · cobalt</div>
969 </div>
970 <div class="spec"><span class="eyebrow">Executive Summary</span></div>
971 </div>
972 <div class="type-row">
973 <div>
974 <div class="tok">metric-value</div>
975 <div class="m">Space Grotesk 700 · cobalt</div>
976 </div>
977 <div class="spec">
978 <span class="disp" style="font-weight: 700; font-size: 54px; color: var(--primary)"
979 >$24.3M</span
980 >
981 </div>
982 </div>
983 <div class="type-row">
984 <div>
985 <div class="tok">body</div>
986 <div class="m">Inter 400 · line 1.6 · muted gray</div>
987 </div>
988 <div class="spec">
989 <p style="font-size: 17px; line-height: 1.6; max-width: 660px">
990 Inter carries every paragraph in muted gray — readable, premium, never competing with
991 the cobalt accent or the near-black headline.
992 </p>
993 </div>
994 </div>
995 <div class="type-row" style="border-bottom: 0">
996 <div>
997 <div class="tok">cta</div>
998 <div class="m">Space Grotesk 600 · cobalt pill · cream text</div>
999 </div>
1000 <div class="spec"><span class="cta">Book a Briefing</span></div>
1001 </div>
1002 </section>
1003
1004 <!-- COMPONENTS -->
1005 <section>
1006 <div class="sec-head">
1007 <div class="ey">
1008 <div class="aline"></div>
1009 <h2>Components</h2>
1010 </div>
1011 <span class="sp"></span><span class="tagpill">Soft Tints, No Shadows</span>
1012 </div>
1013
1014 <div class="cgrid">
1015 <div class="s4">
1016 <div class="cnote">Metric card</div>
1017 <div class="card">
1018 <div class="mv">$24.3M</div>
1019 <div class="ml">Annual Revenue</div>
1020 <div class="md">Recurring, across every region.</div>
1021 <div class="chg pos">↑ +18% YoY</div>
1022 </div>
1023 </div>
1024 <div class="s4">
1025 <div class="cnote">Stat cells</div>
1026 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem">
1027 <div class="statcell">
1028 <div class="n">94%</div>
1029 <div class="nm">Retention</div>
1030 <div class="ctx">Net revenue</div>
1031 </div>
1032 <div class="statcell">
1033 <div class="n">3.4×</div>
1034 <div class="nm">Multiple</div>
1035 <div class="ctx">On capital</div>
1036 </div>
1037 </div>
1038 </div>
1039 <div class="s4">
1040 <div class="cnote">Bar ranking</div>
1041 <div class="bars">
1042 <div class="row">
1043 <span class="bl">Cobalt</span
1044 ><span class="track"><span class="fill" style="width: 88%"></span></span
1045 ><span class="pct">88</span>
1046 </div>
1047 <div class="row">
1048 <span class="bl">Restraint</span
1049 ><span class="track"><span class="fill" style="width: 64%"></span></span
1050 ><span class="pct">64</span>
1051 </div>
1052 <div class="row">
1053 <span class="bl">Density</span
1054 ><span class="track"><span class="fill" style="width: 46%"></span></span
1055 ><span class="pct">46</span>
1056 </div>
1057 </div>
1058 </div>
1059 </div>
1060
1061 <div class="cgrid" style="margin-bottom: 0">
1062 <div class="s8">
1063 <div class="cnote">Step timeline — fade into future</div>
1064 <div class="steps">
1065 <div class="step">
1066 <div class="circ" style="opacity: 1">1</div>
1067 <div class="t">Survey</div>
1068 <div class="d">Establish the cream baseline.</div>
1069 </div>
1070 <div class="step">
1071 <div class="circ" style="opacity: 0.85">2</div>
1072 <div class="t">Tint</div>
1073 <div class="d">Lift cards with 4% cobalt.</div>
1074 </div>
1075 <div class="step">
1076 <div class="circ" style="opacity: 0.7">3</div>
1077 <div class="t">Accent</div>
1078 <div class="d">One cobalt carries emphasis.</div>
1079 </div>
1080 <div class="step">
1081 <div class="circ" style="opacity: 0.55">4</div>
1082 <div class="t">Deliver</div>
1083 <div class="d">Executive-ready briefing.</div>
1084 </div>
1085 </div>
1086 </div>
1087 <div class="s4">
1088 <div class="cnote">Highlight callout</div>
1089 <div class="hilite">
1090 <div class="q">One accent does all the emphasis work.</div>
1091 <div class="c">— The System Principle</div>
1092 </div>
1093 </div>
1094 </div>
1095 </section>
1096
1097 <!-- COMPOSITIONS -->
1098 <section>
1099 <div class="sec-head">
1100 <div class="ey">
1101 <div class="aline"></div>
1102 <h2>Frame Compositions</h2>
1103 </div>
1104 <span class="sp"></span><span class="tagpill">True 16:9 · cqw</span>
1105 </div>
1106 <div class="gallery">
1107 <div class="fw">
1108 <div class="flabel"><b>Cover</b><span>· identity · diagonal accent · left</span></div>
1109 <div class="frame gf1">
1110 <div class="deco"></div>
1111 <div class="dots"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
1112 <div class="body">
1113 <div class="aline"></div>
1114 <div class="ey">FRAME SYSTEM · VOL. 01</div>
1115 <h3>Restraint, with one commitment.</h3>
1116 <div class="sub">Cream, cobalt, and soft tinted cards.</div>
1117 </div>
1118 <div class="pbar" style="width: 16%"></div>
1119 </div>
1120 </div>
1121
1122 <div class="fw">
1123 <div class="flabel">
1124 <b>Dashboard</b><span>· data · 3-up metrics · the dense frame</span>
1125 </div>
1126 <div class="frame gf2">
1127 <div class="body">
1128 <div class="hdr">
1129 <div>
1130 <div class="ey">Performance</div>
1131 <h3>Q3 At a Glance</h3>
1132 </div>
1133 <span class="tp">FY2026</span>
1134 </div>
1135 <div class="grid">
1136 <div class="c">
1137 <div class="n">$24M</div>
1138 <div class="nm">Revenue</div>
1139 <div class="d">Up across every region.</div>
1140 </div>
1141 <div class="c">
1142 <div class="n">94%</div>
1143 <div class="nm">Retention</div>
1144 <div class="d">Net revenue, trailing 12mo.</div>
1145 </div>
1146 <div class="c">
1147 <div class="n">+18%</div>
1148 <div class="nm">Growth</div>
1149 <div class="d">Year over year, compounding.</div>
1150 </div>
1151 </div>
1152 </div>
1153 <div class="pbar" style="width: 34%"></div>
1154 </div>
1155 </div>
1156
1157 <div class="fw">
1158 <div class="flabel"><b>Bar Ranking</b><span>· data · cobalt fills · left</span></div>
1159 <div class="frame gf3">
1160 <div class="body">
1161 <div class="ey">Drivers</div>
1162 <h3>What Moves the Number</h3>
1163 <div class="row">
1164 <span class="bl">Expansion</span
1165 ><span class="track"><span class="fill" style="width: 88%"></span></span
1166 ><span class="pct">88</span>
1167 </div>
1168 <div class="row">
1169 <span class="bl">New Logos</span
1170 ><span class="track"><span class="fill" style="width: 62%"></span></span
1171 ><span class="pct">62</span>
1172 </div>
1173 <div class="row">
1174 <span class="bl">Pricing</span
1175 ><span class="track"><span class="fill" style="width: 41%"></span></span
1176 ><span class="pct">41</span>
1177 </div>
1178 </div>
1179 <div class="pbar" style="width: 58%"></div>
1180 </div>
1181 </div>
1182
1183 <div class="fw">
1184 <div class="flabel">
1185 <b>Pull Quote</b><span>· quote · concentric rings · centered</span>
1186 </div>
1187 <div class="frame gf4">
1188 <div class="rings"></div>
1189 <div class="body">
1190 <div class="qm">“</div>
1191 <div class="q">Quiet is the most expensive thing on the page.</div>
1192 <div class="c">— Managing Partner</div>
1193 </div>
1194 <div class="pbar" style="width: 82%"></div>
1195 </div>
1196 </div>
1197 </div>
1198 </section>
1199
1200 <!-- PRINCIPLES -->
1201 <section>
1202 <div class="sec-head">
1203 <div class="ey">
1204 <div class="aline"></div>
1205 <h2>Frame Rules</h2>
1206 </div>
1207 <span class="sp"></span><span class="tagpill">Single Accent</span>
1208 </div>
1209 <div class="dos">
1210 <div class="do-card do">
1211 <h4>Do</h4>
1212 <div class="aline"></div>
1213 <ul>
1214 <li>Start every frame on warm cream; cobalt carries every accent.</li>
1215 <li>
1216 Set headlines near-black with −0.02em tracking; eyebrows cobalt, uppercase, 0.08em.
1217 </li>
1218 <li>Render every numeral in cobalt Space Grotesk 600–700.</li>
1219 <li>Use tinted cards — 4% fill, 20% border, 10–14px radius; soft, never outlined.</li>
1220 <li>Pill chrome at 100px; body in Inter 400, muted gray, line 1.6.</li>
1221 </ul>
1222 </div>
1223 <div class="do-card dont">
1224 <h4>Don't</h4>
1225 <div class="aline"></div>
1226 <ul>
1227 <li>No second accent color; no cobalt headlines.</li>
1228 <li>No drop shadows (save the one soft cobalt CTA hover).</li>
1229 <li>No square corners; no opaque cobalt borders.</li>
1230 <li>No font substitutes; no uppercase body.</li>
1231 <li>Don't fill space with heavier borders — add substance, not noise.</li>
1232 </ul>
1233 </div>
1234 </div>
1235 </section>
1236
1237 <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
1238 <style>
1239 /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
1240 .capdemo {
1241 --cap-ink: var(--text);
1242 --cap-canvas: var(--bg);
1243 --cap-accent: var(--primary);
1244 --cap-accent-2: var(--negative);
1245 }
1246 .capdemo .stage {
1247 position: absolute;
1248 left: 0;
1249 right: 0;
1250 bottom: 0;
1251 height: 16.67cqh;
1252 display: flex;
1253 align-items: center;
1254 justify-content: center;
1255 z-index: 4;
1256 }
1257 .capdemo .pill {
1258 max-width: 80cqw;
1259 padding: 1.4cqw 3cqw 1.7cqw;
1260 background: color-mix(in srgb, var(--cap-accent) 4%, var(--cap-canvas));
1261 border: 0.16cqw solid color-mix(in srgb, var(--cap-accent) 20%, transparent);
1262 border-radius: 1cqw;
1263 }
1264 .capdemo .line {
1265 display: flex;
1266 flex-wrap: wrap;
1267 justify-content: center;
1268 gap: 0.1em 0.34em;
1269 font-family: var(--disp);
1270 font-weight: 600;
1271 font-size: 3.4cqw;
1272 line-height: 1.16;
1273 letter-spacing: -0.02em;
1274 }
1275 .capdemo .w {
1276 display: inline-block;
1277 padding: 0 0.18em;
1278 border-radius: 0.32em;
1279 color: color-mix(in srgb, var(--cap-ink) 52%, var(--cap-canvas));
1280 }
1281 .capdemo .w.spoken {
1282 color: var(--cap-ink);
1283 }
1284 .capdemo .w.active {
1285 color: var(--cap-canvas);
1286 background: var(--cap-accent);
1287 }
1288 .capdemo .bandline {
1289 position: absolute;
1290 left: 0;
1291 right: 0;
1292 bottom: 16.67cqh;
1293 border-top: 1px dashed var(--border);
1294 z-index: 3;
1295 }
1296 .capdemo .bandtag {
1297 position: absolute;
1298 right: 3cqw;
1299 bottom: calc(16.67cqh + 0.7cqw);
1300 font-family: var(--disp);
1301 font-weight: 500;
1302 font-size: 0.95cqw;
1303 letter-spacing: 0.04em;
1304 color: var(--muted);
1305 opacity: 0.7;
1306 z-index: 4;
1307 }
1308 </style>
1309 <section>
1310 <div class="sec-head">
1311 <div class="ey">
1312 <div class="aline"></div>
1313 <h2>Captions</h2>
1314 </div>
1315 <span class="sp"></span><span class="tagpill">Lower-third · Karaoke</span>
1316 </div>
1317 <div class="gallery">
1318 <div class="fw">
1319 <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
1320 <div class="frame capdemo">
1321 <div class="deco"></div>
1322 <div class="bandline"></div>
1323 <div class="bandtag">caption band · 16.7%</div>
1324 <div class="stage">
1325 <div class="pill">
1326 <div class="line">
1327 <span class="w spoken">Built</span>
1328 <span class="w spoken">for</span>
1329 <span class="w active">teams</span>
1330 <span class="w">who</span>
1331 <span class="w">ship.</span>
1332 </div>
1333 </div>
1334 </div>
1335 <div class="pbar" style="width: 50%"></div>
1336 </div>
1337 </div>
1338
1339 <div class="fw">
1340 <div class="flabel"><b>Settled line</b><span>· all spoken · chip cleared</span></div>
1341 <div class="frame capdemo">
1342 <div class="stage">
1343 <div class="pill">
1344 <div class="line">
1345 <span class="w spoken">Ship</span>
1346 <span class="w spoken">faster</span>
1347 <span class="w spoken">today.</span>
1348 </div>
1349 </div>
1350 </div>
1351 <div class="pbar" style="width: 100%"></div>
1352 </div>
1353 </div>
1354 </div>
1355 </section>
1356
1357 <div class="foot">
1358 <span class="l">Blue Professional</span>
1359 <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
1360 </div>
1361
1362 <template id="__bundler_thumbnail">
1363 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
1364 <rect width="100" height="100" fill="#fdfae7" />
1365 <rect x="58" y="0" width="42" height="100" fill="#1e2bfa" opacity="0.08" />
1366 <rect x="14" y="40" width="6" height="20" fill="#1e2bfa" />
1367 <rect x="26" y="44" width="44" height="6" rx="3" fill="#111111" />
1368 <rect x="26" y="56" width="30" height="4" rx="2" fill="#1e2bfa" />
1369 </svg>
1370 </template>
1371 </body>
1372</html>