Setting the file. One moment. Frame Showcase · Hyperframes Creative · heygen-com/hyperframes · Skills Docs22.10
Narration
(opens in a new tab)
frame-presets/code-editorial/frame-showcase.html
HTML·1,438 lines·43 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=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
11 rel="stylesheet"
12 />
13 <style id="ds-tokens">
14 :root {
15 --ink: #141413;
16 --cream: #faf9f5;
17 --tile: #efe9de;
18 --tile-strong: #ece3d4;
19 --coral: #cc785c;
20 --navy: #181715;
21 --navy-soft: #1f1e1b;
22 --navy-elev: #252320;
23 --teal: #5db8a6;
24 --amber: #e8a55a;
25 --ok: #5db872;
26 --warn: #c64545;
27 --serif: "EB Garamond", Georgia, serif;
28 --sans: "Inter", system-ui, sans-serif;
29 --mono: "JetBrains Mono", ui-monospace, monospace;
30 --hair: rgba(20, 20, 19, 0.12);
31 --hair-soft: rgba(20, 20, 19, 0.06);
32 --on-dark: rgba(250, 249, 245, 0.92);
33 --on-dark-soft: rgba(250, 249, 245, 0.58);
34 --shadow: 0 1px 3px rgba(20, 20, 19, 0.08), 0 4px 16px rgba(20, 20, 19, 0.04);
35 }
36 * {
37 margin: 0;
38 padding: 0;
39 box-sizing: border-box;
40 }
41 html {
42 background: #0e0d0c;
43 }
44 body {
45 background: var(--cream);
46 color: var(--ink);
47 font-family: var(--sans);
48 -webkit-font-smoothing: antialiased;
49 }
50 .serif {
51 font-family: var(--serif);
52 font-weight: 400;
53 letter-spacing: -0.02em;
54 line-height: 1;
55 }
56 .mono {
57 font-family: var(--mono);
58 font-weight: 500;
59 text-transform: uppercase;
60 letter-spacing: 0.16em;
61 }
62 .spike {
63 color: var(--coral);
64 }
65
66 section {
67 padding: 110px 120px;
68 position: relative;
69 }
70 .topbar {
71 display: flex;
72 justify-content: space-between;
73 align-items: flex-end;
74 border-bottom: 1px solid var(--hair);
75 padding-bottom: 18px;
76 margin-bottom: 56px;
77 }
78 .topbar .lbl {
79 font-family: var(--mono);
80 font-weight: 500;
81 text-transform: uppercase;
82 letter-spacing: 0.16em;
83 font-size: 15px;
84 color: var(--coral);
85 }
86 .topbar h2 {
87 font-family: var(--serif);
88 font-weight: 400;
89 font-size: 48px;
90 letter-spacing: -0.02em;
91 line-height: 1;
92 }
93
94 /* COVER */
95 .cover {
96 min-height: 100vh;
97 background: var(--cream);
98 color: var(--ink);
99 padding: 120px 140px;
100 display: flex;
101 flex-direction: column;
102 justify-content: center;
103 position: relative;
104 }
105 .cover .top {
106 position: absolute;
107 top: 64px;
108 left: 140px;
109 right: 140px;
110 display: flex;
111 justify-content: space-between;
112 align-items: center;
113 }
114 .cover .top .lbl {
115 font-family: var(--mono);
116 font-weight: 500;
117 text-transform: uppercase;
118 letter-spacing: 0.16em;
119 font-size: 15px;
120 color: var(--coral);
121 }
122 .cover .top .idx {
123 font-family: var(--mono);
124 font-weight: 500;
125 letter-spacing: 0.06em;
126 font-size: 14px;
127 color: color-mix(in srgb, var(--ink) 56%, var(--cream));
128 }
129 .cover h1 {
130 font-family: var(--serif);
131 font-weight: 400;
132 font-size: clamp(88px, 13vw, 184px);
133 line-height: 0.98;
134 letter-spacing: -0.035em;
135 color: var(--ink);
136 max-width: 14ch;
137 }
138 .cover h1 .it {
139 font-style: italic;
140 color: var(--coral);
141 }
142 .cover .lede {
143 font-family: var(--sans);
144 font-weight: 400;
145 font-size: 28px;
146 line-height: 1.5;
147 color: color-mix(in srgb, var(--ink) 80%, var(--cream));
148 max-width: 720px;
149 margin-top: 38px;
150 }
151 .cover .footline {
152 position: absolute;
153 bottom: 64px;
154 left: 140px;
155 right: 140px;
156 display: flex;
157 justify-content: space-between;
158 font-family: var(--mono);
159 font-weight: 500;
160 text-transform: uppercase;
161 letter-spacing: 0.14em;
162 font-size: 14px;
163 color: color-mix(in srgb, var(--ink) 50%, var(--cream));
164 }
165
166 /* PALETTE */
167 .swatches {
168 display: grid;
169 grid-template-columns: repeat(4, 1fr);
170 gap: 24px;
171 }
172 .sw {
173 border: 1px solid var(--hair);
174 border-radius: 12px;
175 overflow: hidden;
176 background: var(--cream);
177 }
178 .sw .chip {
179 height: 128px;
180 }
181 .sw .meta {
182 padding: 18px 20px;
183 border-top: 1px solid var(--hair);
184 }
185 .sw .name {
186 font-family: var(--serif);
187 font-weight: 400;
188 font-size: 24px;
189 }
190 .sw .hex {
191 font-family: var(--mono);
192 font-size: 12px;
193 letter-spacing: 0.04em;
194 color: var(--ink);
195 opacity: 0.6;
196 margin-top: 6px;
197 }
198 .sw .role {
199 font-family: var(--sans);
200 font-weight: 400;
201 font-size: 14px;
202 line-height: 1.45;
203 color: color-mix(in srgb, var(--ink) 70%, var(--cream));
204 margin-top: 10px;
205 }
206 .syntax-note {
207 margin-top: 28px;
208 display: flex;
209 gap: 28px;
210 align-items: center;
211 flex-wrap: wrap;
212 font-family: var(--mono);
213 font-size: 13px;
214 letter-spacing: 0.02em;
215 color: color-mix(in srgb, var(--ink) 60%, var(--cream));
216 }
217 .syntax-note .dot {
218 display: inline-block;
219 width: 14px;
220 height: 14px;
221 border-radius: 50%;
222 vertical-align: -2px;
223 margin-right: 8px;
224 }
225
226 /* TYPE */
227 .type-row {
228 display: grid;
229 grid-template-columns: 240px 1fr;
230 align-items: center;
231 padding: 26px 0;
232 border-bottom: 1px solid var(--hair-soft);
233 }
234 .type-row .tok {
235 font-family: var(--mono);
236 font-weight: 500;
237 text-transform: uppercase;
238 letter-spacing: 0.14em;
239 font-size: 13px;
240 color: var(--coral);
241 }
242 .type-row .m {
243 font-family: var(--mono);
244 font-size: 11px;
245 color: var(--ink);
246 opacity: 0.55;
247 margin-top: 8px;
248 line-height: 1.5;
249 letter-spacing: 0.02em;
250 }
251
252 /* COMPONENTS */
253 .cnote {
254 font-family: var(--mono);
255 font-weight: 500;
256 text-transform: uppercase;
257 letter-spacing: 0.16em;
258 font-size: 12px;
259 color: var(--coral);
260 margin-bottom: 22px;
261 }
262 .cgrid {
263 display: grid;
264 grid-template-columns: repeat(12, 1fr);
265 gap: 28px;
266 margin-bottom: 52px;
267 }
268 .s3 {
269 grid-column: span 3;
270 }
271 .s4 {
272 grid-column: span 4;
273 }
274 .s5 {
275 grid-column: span 5;
276 }
277 .s6 {
278 grid-column: span 6;
279 }
280 .s7 {
281 grid-column: span 7;
282 }
283 .s8 {
284 grid-column: span 8;
285 }
286 .card {
287 background: var(--cream);
288 border: 1px solid var(--hair);
289 border-radius: 12px;
290 box-shadow: var(--shadow);
291 padding: 30px 32px;
292 }
293 .card.tile {
294 background: var(--tile);
295 }
296 .card .kt {
297 font-family: var(--serif);
298 font-weight: 400;
299 font-size: 30px;
300 letter-spacing: -0.01em;
301 line-height: 1.1;
302 }
303 .card .kb {
304 font-family: var(--sans);
305 font-weight: 400;
306 font-size: 16px;
307 line-height: 1.5;
308 color: color-mix(in srgb, var(--ink) 74%, var(--cream));
309 margin-top: 10px;
310 }
311 .kicker {
312 font-family: var(--mono);
313 font-weight: 500;
314 text-transform: uppercase;
315 letter-spacing: 0.16em;
316 font-size: 14px;
317 color: color-mix(in srgb, var(--ink) 64%, var(--cream));
318 }
319 .callout {
320 background: var(--coral);
321 color: var(--cream);
322 border-radius: 8px;
323 padding: 22px 30px;
324 display: inline-flex;
325 align-items: center;
326 gap: 14px;
327 }
328 .callout .b {
329 font-family: var(--sans);
330 font-weight: 500;
331 font-size: 22px;
332 }
333 .callout .a {
334 font-family: var(--mono);
335 font-weight: 500;
336 text-transform: uppercase;
337 letter-spacing: 0.12em;
338 font-size: 12px;
339 opacity: 0.85;
340 }
341 .kpi .tag {
342 font-family: var(--mono);
343 font-weight: 500;
344 text-transform: uppercase;
345 letter-spacing: 0.14em;
346 font-size: 13px;
347 color: var(--coral);
348 border-top: 1px solid var(--hair);
349 padding-top: 16px;
350 display: inline-block;
351 }
352 .kpi .fig {
353 font-family: var(--serif);
354 font-weight: 400;
355 font-size: 120px;
356 line-height: 0.95;
357 letter-spacing: -0.03em;
358 color: var(--ink);
359 }
360 .kpi .fig .u {
361 font-family: var(--mono);
362 font-weight: 500;
363 font-size: 36px;
364 letter-spacing: 0;
365 margin-left: 8px;
366 }
367 .kpi .d {
368 font-family: var(--sans);
369 font-weight: 400;
370 font-size: 17px;
371 line-height: 1.4;
372 color: color-mix(in srgb, var(--ink) 74%, var(--cream));
373 margin-top: 12px;
374 max-width: 300px;
375 }
376 .quote .q {
377 font-family: var(--serif);
378 font-style: italic;
379 font-weight: 400;
380 font-size: 38px;
381 line-height: 1.18;
382 letter-spacing: -0.018em;
383 color: var(--ink);
384 }
385 .quote .cite {
386 font-family: var(--mono);
387 font-weight: 500;
388 text-transform: uppercase;
389 letter-spacing: 0.16em;
390 font-size: 13px;
391 color: color-mix(in srgb, var(--ink) 58%, var(--cream));
392 margin-top: 18px;
393 }
394 /* code surface demo */
395 .codewin {
396 background: var(--navy);
397 border: 1px solid var(--on-dark-soft);
398 border-radius: 8px;
399 overflow: hidden;
400 }
401 .codewin .bar {
402 background: var(--navy-elev);
403 padding: 12px 18px;
404 display: flex;
405 align-items: center;
406 gap: 8px;
407 }
408 .codewin .bar .dot {
409 width: 11px;
410 height: 11px;
411 border-radius: 50%;
412 }
413 .codewin .bar .fn {
414 font-family: var(--mono);
415 font-weight: 500;
416 font-size: 13px;
417 color: var(--on-dark-soft);
418 margin-left: 12px;
419 letter-spacing: 0.02em;
420 }
421 .codewin pre {
422 margin: 0;
423 padding: 22px 24px;
424 font-family: var(--mono);
425 font-weight: 400;
426 font-size: 18px;
427 line-height: 1.6;
428 color: var(--on-dark);
429 }
430 .codewin .add {
431 background: color-mix(in srgb, var(--ok) 16%, transparent);
432 display: block;
433 margin: 0 -24px;
434 padding: 0 24px;
435 }
436 .codewin .del {
437 background: color-mix(in srgb, var(--warn) 16%, transparent);
438 display: block;
439 margin: 0 -24px;
440 padding: 0 24px;
441 color: var(--on-dark-soft);
442 }
443 .codewin .k {
444 color: var(--coral);
445 }
446 .codewin .s {
447 color: var(--teal);
448 }
449 .codewin .n {
450 color: var(--amber);
451 }
452 .codewin .g {
453 color: var(--ok);
454 }
455 .codewin .r {
456 color: var(--warn);
457 }
458
459 /* FRAMES */
460 .gallery {
461 display: grid;
462 grid-template-columns: 1fr 1fr;
463 gap: 48px;
464 }
465 .fw .flabel {
466 display: flex;
467 gap: 14px;
468 align-items: baseline;
469 margin-bottom: 16px;
470 font-family: var(--mono);
471 font-weight: 500;
472 text-transform: uppercase;
473 letter-spacing: 0.14em;
474 font-size: 12px;
475 color: color-mix(in srgb, var(--ink) 50%, var(--cream));
476 }
477 .fw .flabel b {
478 color: var(--coral);
479 }
480 .frame {
481 aspect-ratio: 16/9;
482 container-type: size;
483 position: relative;
484 overflow: hidden;
485 background: var(--cream);
486 border-radius: 8px;
487 box-shadow:
488 0 0 0 1px var(--hair),
489 0 10px 30px rgba(20, 20, 19, 0.06);
490 }
491 .frame > .body {
492 position: absolute;
493 inset: 0;
494 z-index: 3;
495 }
496 .frame .tb {
497 position: absolute;
498 left: 5cqw;
499 right: 5cqw;
500 top: 3.4cqw;
501 display: flex;
502 justify-content: space-between;
503 align-items: center;
504 z-index: 4;
505 }
506 .frame .tb .l {
507 font-family: var(--mono);
508 font-weight: 500;
509 text-transform: uppercase;
510 letter-spacing: 0.16em;
511 font-size: 0.95cqw;
512 color: color-mix(in srgb, var(--ink) 56%, var(--cream));
513 }
514 .frame .tb .l.coral {
515 color: var(--coral);
516 }
517 .frame .fl {
518 position: absolute;
519 left: 5cqw;
520 right: 5cqw;
521 bottom: 3cqw;
522 display: flex;
523 justify-content: space-between;
524 font-family: var(--mono);
525 font-weight: 500;
526 text-transform: uppercase;
527 letter-spacing: 0.14em;
528 font-size: 0.82cqw;
529 color: color-mix(in srgb, var(--ink) 48%, var(--cream));
530 z-index: 4;
531 }
532
533 /* f1 cover */
534 .cf1 .body {
535 display: flex;
536 flex-direction: column;
537 justify-content: center;
538 padding: 0 5cqw;
539 }
540 .cf1 .kick {
541 font-family: var(--mono);
542 font-weight: 500;
543 text-transform: uppercase;
544 letter-spacing: 0.16em;
545 font-size: 1.1cqw;
546 color: var(--coral);
547 margin-bottom: 1.6cqw;
548 }
549 .cf1 h3 {
550 font-family: var(--serif);
551 font-weight: 400;
552 font-size: 9.6cqw;
553 line-height: 0.98;
554 letter-spacing: -0.035em;
555 color: var(--ink);
556 }
557
558 /* f2 statement */
559 .cf2 .body {
560 display: flex;
561 flex-direction: column;
562 justify-content: center;
563 padding: 0 7cqw;
564 }
565 .cf2 h3 {
566 font-family: var(--serif);
567 font-weight: 400;
568 font-size: 7cqw;
569 line-height: 1.04;
570 letter-spacing: -0.028em;
571 color: var(--ink);
572 max-width: 74cqw;
573 }
574 .cf2 h3 .it {
575 font-style: italic;
576 color: var(--coral);
577 }
578
579 /* f3 code surface — the PR-critical frame */
580 .cf3 .body {
581 display: flex;
582 flex-direction: column;
583 justify-content: center;
584 padding: 0 5cqw;
585 }
586 .cf3 .kick {
587 font-family: var(--mono);
588 font-weight: 500;
589 text-transform: uppercase;
590 letter-spacing: 0.16em;
591 font-size: 0.95cqw;
592 color: var(--coral);
593 margin-bottom: 1.3cqw;
594 }
595 .cf3 .win {
596 background: var(--navy);
597 border: 0.08cqw solid var(--on-dark-soft);
598 border-radius: 0.7cqw;
599 overflow: hidden;
600 box-shadow: 0 1cqw 3cqw rgba(20, 20, 19, 0.18);
601 }
602 .cf3 .win .bar {
603 background: var(--navy-elev);
604 padding: 0.9cqw 1.3cqw;
605 display: flex;
606 align-items: center;
607 gap: 0.5cqw;
608 }
609 .cf3 .win .bar .dot {
610 width: 0.8cqw;
611 height: 0.8cqw;
612 border-radius: 50%;
613 }
614 .cf3 .win .bar .fn {
615 font-family: var(--mono);
616 font-weight: 500;
617 font-size: 1cqw;
618 color: var(--on-dark-soft);
619 margin-left: 0.8cqw;
620 letter-spacing: 0.02em;
621 }
622 .cf3 .win pre {
623 margin: 0;
624 padding: 1.5cqw 1.8cqw;
625 font-family: var(--mono);
626 font-weight: 400;
627 font-size: 1.55cqw;
628 line-height: 1.62;
629 color: var(--on-dark);
630 }
631 .cf3 .add {
632 background: color-mix(in srgb, var(--ok) 16%, transparent);
633 display: block;
634 margin: 0 -1.8cqw;
635 padding: 0 1.8cqw;
636 }
637 .cf3 .del {
638 background: color-mix(in srgb, var(--warn) 16%, transparent);
639 display: block;
640 margin: 0 -1.8cqw;
641 padding: 0 1.8cqw;
642 color: var(--on-dark-soft);
643 }
644 .cf3 .k {
645 color: var(--coral);
646 }
647 .cf3 .s {
648 color: var(--teal);
649 }
650 .cf3 .n {
651 color: var(--amber);
652 }
653 .cf3 .g {
654 color: var(--ok);
655 }
656 .cf3 .r {
657 color: var(--warn);
658 }
659
660 /* f4 number / impact */
661 .cf4 .body {
662 display: flex;
663 flex-direction: column;
664 justify-content: center;
665 padding: 0 5cqw;
666 }
667 .cf4 .tag {
668 font-family: var(--mono);
669 font-weight: 500;
670 text-transform: uppercase;
671 letter-spacing: 0.16em;
672 font-size: 1cqw;
673 color: var(--coral);
674 border-top: 0.08cqw solid var(--hair);
675 padding-top: 1.2cqw;
676 display: inline-block;
677 }
678 .cf4 .fig {
679 font-family: var(--serif);
680 font-weight: 400;
681 font-size: 16cqw;
682 line-height: 0.92;
683 letter-spacing: -0.03em;
684 color: var(--ink);
685 }
686 .cf4 .fig .u {
687 font-family: var(--mono);
688 font-weight: 500;
689 font-size: 4.2cqw;
690 letter-spacing: 0;
691 margin-left: 0.6cqw;
692 color: color-mix(in srgb, var(--ink) 64%, var(--cream));
693 }
694 .cf4 .d {
695 font-family: var(--sans);
696 font-weight: 400;
697 font-size: 1.7cqw;
698 line-height: 1.4;
699 color: color-mix(in srgb, var(--ink) 74%, var(--cream));
700 max-width: 44cqw;
701 margin-top: 1cqw;
702 }
703
704 /* f5 pull-quote */
705 .cf5 .body {
706 display: flex;
707 flex-direction: column;
708 justify-content: center;
709 padding: 0 8cqw;
710 }
711 .cf5 .q {
712 font-family: var(--serif);
713 font-style: italic;
714 font-weight: 400;
715 font-size: 5cqw;
716 line-height: 1.16;
717 letter-spacing: -0.018em;
718 color: var(--ink);
719 }
720 .cf5 .cite {
721 font-family: var(--mono);
722 font-weight: 500;
723 text-transform: uppercase;
724 letter-spacing: 0.16em;
725 font-size: 0.95cqw;
726 color: color-mix(in srgb, var(--ink) 56%, var(--cream));
727 margin-top: 2.2cqw;
728 }
729
730 /* f6 closing / cta */
731 .cf6 .body {
732 display: flex;
733 flex-direction: column;
734 justify-content: center;
735 padding: 0 5cqw;
736 }
737 .cf6 h3 {
738 font-family: var(--serif);
739 font-weight: 400;
740 font-size: 6.2cqw;
741 line-height: 1.02;
742 letter-spacing: -0.028em;
743 color: var(--ink);
744 margin-bottom: 2.4cqw;
745 }
746 .cf6 .ship {
747 display: flex;
748 align-items: center;
749 gap: 1.4cqw;
750 margin-bottom: 2.4cqw;
751 }
752 .cf6 .av {
753 width: 4cqw;
754 height: 4cqw;
755 border-radius: 50%;
756 border: 0.1cqw solid var(--hair);
757 background: var(--tile);
758 display: grid;
759 place-items: center;
760 font-family: var(--mono);
761 font-weight: 500;
762 font-size: 1.2cqw;
763 color: var(--ink);
764 margin-left: -1cqw;
765 }
766 .cf6 .av:first-child {
767 margin-left: 0;
768 }
769 .cf6 .shiplbl {
770 font-family: var(--mono);
771 font-weight: 500;
772 text-transform: uppercase;
773 letter-spacing: 0.14em;
774 font-size: 0.95cqw;
775 color: color-mix(in srgb, var(--ink) 56%, var(--cream));
776 margin-left: 0.8cqw;
777 }
778 .cf6 .cta {
779 background: var(--coral);
780 color: var(--cream);
781 border-radius: 0.6cqw;
782 padding: 1.2cqw 2cqw;
783 display: inline-flex;
784 align-self: flex-start;
785 font-family: var(--sans);
786 font-weight: 500;
787 font-size: 1.8cqw;
788 }
789
790 /* PRINCIPLES */
791 .dos {
792 display: grid;
793 grid-template-columns: 1fr 1fr;
794 gap: 48px;
795 }
796 .do-card h4 {
797 font-family: var(--serif);
798 font-weight: 400;
799 font-size: 34px;
800 color: var(--ink);
801 margin-bottom: 6px;
802 letter-spacing: -0.02em;
803 }
804 .do-card .rule {
805 height: 1px;
806 background: var(--hair);
807 margin-bottom: 22px;
808 }
809 .do-card ul {
810 list-style: none;
811 }
812 .do-card li {
813 font-family: var(--sans);
814 font-weight: 400;
815 font-size: 17px;
816 line-height: 1.5;
817 padding-left: 24px;
818 position: relative;
819 margin-bottom: 13px;
820 color: color-mix(in srgb, var(--ink) 84%, var(--cream));
821 }
822 .do-card li::before {
823 position: absolute;
824 left: 0;
825 font-family: var(--mono);
826 }
827 .do-card.do li::before {
828 content: "+";
829 color: var(--coral);
830 }
831 .do-card.dont li::before {
832 content: "\00d7";
833 color: color-mix(in srgb, var(--ink) 40%, var(--cream));
834 }
835
836 .foot {
837 padding: 60px 120px;
838 border-top: 1px solid var(--hair);
839 display: flex;
840 justify-content: space-between;
841 align-items: center;
842 }
843 .foot .l {
844 font-family: var(--serif);
845 font-weight: 400;
846 font-size: 30px;
847 color: var(--ink);
848 }
849 .foot .l .spike {
850 color: var(--coral);
851 }
852 .foot .r {
853 font-family: var(--mono);
854 font-weight: 500;
855 text-transform: uppercase;
856 letter-spacing: 0.16em;
857 font-size: 11px;
858 color: color-mix(in srgb, var(--ink) 50%, var(--cream));
859 }
860 @media (max-width: 1100px) {
861 .gallery {
862 grid-template-columns: 1fr;
863 }
864 .swatches {
865 grid-template-columns: 1fr 1fr;
866 }
867 }
868 </style>
869 </head>
870 <body>
871 <!-- COVER -->
872 <section class="cover">
873 <div class="top">
874 <span class="lbl"><span class="spike">✱</span> Frame System · Vol. 01</span
875 ><span class="idx">EB Garamond · Inter · JetBrains Mono</span>
876 </div>
877 <h1>Cream, ink & one <span class="it">coral.</span></h1>
878 <div class="lede">
879 A warm-editorial frame system — EB Garamond at optical sizes for display, Inter for body,
880 JetBrains Mono for the index and code, and a single terracotta coral held as scarce voltage.
881 </div>
882 <div class="footline">
883 <span>Warm cream paper · hairline elevation</span><span>1920 × 1080</span>
884 </div>
885 </section>
886
887 <!-- PALETTE -->
888 <section>
889 <div class="topbar">
890 <span class="lbl">01 — Palette</span>
891 <h2>The trinity, plus a code surface</h2>
892 </div>
893 <div class="swatches">
894 <div class="sw">
895 <div class="chip" style="background: var(--ink)"></div>
896 <div class="meta">
897 <div class="name">Ink</div>
898 <div class="hex">#141413</div>
899 <div class="role">
900 Warm near-black — the voice. Every word, every hairline; never pure #000.
901 </div>
902 </div>
903 </div>
904 <div class="sw">
905 <div class="chip" style="background: var(--cream)"></div>
906 <div class="meta">
907 <div class="name">Cream</div>
908 <div class="hex">#FAF9F5</div>
909 <div class="role">Warm paper — the ~60% floor. Never pure white, never cool.</div>
910 </div>
911 </div>
912 <div class="sw">
913 <div class="chip" style="background: var(--coral)"></div>
914 <div class="meta">
915 <div class="name">Coral</div>
916 <div class="hex">#CC785C</div>
917 <div class="role">
918 Terracotta voltage — the one accent. CTA / inline link / band, once per frame.
919 </div>
920 </div>
921 </div>
922 <div class="sw">
923 <div class="chip" style="background: var(--tile)"></div>
924 <div class="meta">
925 <div class="name">Tile</div>
926 <div class="hex">#EFE9DE</div>
927 <div class="role">Half-step content surface — where cards gather.</div>
928 </div>
929 </div>
930 <div class="sw">
931 <div class="chip" style="background: var(--tile-strong)"></div>
932 <div class="meta">
933 <div class="name">Tile Strong</div>
934 <div class="hex">#ECE3D4</div>
935 <div class="role">Pressed / deepest warm-paper step.</div>
936 </div>
937 </div>
938 <div class="sw">
939 <div class="chip" style="background: var(--navy)"></div>
940 <div class="meta">
941 <div class="name">Navy</div>
942 <div class="hex">#181715</div>
943 <div class="role">
944 Warm code / terminal surface — structural anchor, not a brand hue.
945 </div>
946 </div>
947 </div>
948 <div class="sw">
949 <div class="chip" style="background: var(--navy-elev)"></div>
950 <div class="meta">
951 <div class="name">Navy Elev</div>
952 <div class="hex">#252320</div>
953 <div class="role">Title bars + status strips on the code surface.</div>
954 </div>
955 </div>
956 <div class="sw">
957 <div
958 class="chip"
959 style="background: linear-gradient(90deg, var(--teal) 0 50%, var(--amber) 50% 100%)"
960 ></div>
961 <div class="meta">
962 <div class="name">Syntax</div>
963 <div class="hex">#5DB8A6 · #E8A55A</div>
964 <div class="role">
965 Teal strings · amber numbers — fixed code decoration, not remixable.
966 </div>
967 </div>
968 </div>
969 </div>
970 <div class="syntax-note">
971 <span><span class="dot" style="background: var(--coral)"></span>keywords</span>
972 <span><span class="dot" style="background: var(--teal)"></span>strings</span>
973 <span><span class="dot" style="background: var(--amber)"></span>numbers</span>
974 <span><span class="dot" style="background: var(--ok)"></span>added</span>
975 <span><span class="dot" style="background: var(--warn)"></span>removed</span>
976 </div>
977 </section>
978
979 <!-- TYPOGRAPHY -->
980 <section>
981 <div class="topbar">
982 <span class="lbl">02 — Typography</span>
983 <h2>EB Garamond display · Inter body · Mono index</h2>
984 </div>
985 <div class="type-row">
986 <div>
987 <div class="tok">display-cover</div>
988 <div class="m">EB Garamond · 500 · 190px · −0.028em · sentence</div>
989 </div>
990 <div>
991 <span class="serif" style="font-size: 108px; line-height: 0.98"
992 >Streaming, end to end.</span
993 >
994 </div>
995 </div>
996 <div class="type-row">
997 <div>
998 <div class="tok">display</div>
999 <div class="m">EB Garamond · 500 · 140px · −0.022em</div>
1000 </div>
1001 <div><span class="serif" style="font-size: 80px">A serif that thinks.</span></div>
1002 </div>
1003 <div class="type-row">
1004 <div>
1005 <div class="tok">number-hero</div>
1006 <div class="m">EB Garamond · 500 · 180px · figure + mono unit</div>
1007 </div>
1008 <div>
1009 <span class="serif" style="font-size: 96px; color: var(--ink)"
1010 >+1,204<span
1011 style="
1012 font-family: var(--mono);
1013 font-weight: 500;
1014 font-size: 36px;
1015 color: color-mix(in srgb, var(--ink) 64%, var(--cream));
1016 "
1017 >
1018 lines</span
1019 ></span
1020 >
1021 </div>
1022 </div>
1023 <div class="type-row">
1024 <div>
1025 <div class="tok">body / lead</div>
1026 <div class="m">Inter · 400 · line 1.5</div>
1027 </div>
1028 <div>
1029 <p
1030 style="
1031 font-family: var(--sans);
1032 font-weight: 400;
1033 font-size: 24px;
1034 line-height: 1.5;
1035 max-width: 680px;
1036 color: color-mix(in srgb, var(--ink) 82%, var(--cream));
1037 "
1038 >
1039 The body reads first and answers second — Inter at weight 400, sentence case, with its
1040 qualifiers kept. No hype, no exclamation.
1041 </p>
1042 </div>
1043 </div>
1044 <div class="type-row">
1045 <div>
1046 <div class="tok">kicker / code</div>
1047 <div class="m">JetBrains Mono · 500 uppercase 0.16em · code 400</div>
1048 </div>
1049 <div>
1050 <span class="mono" style="font-size: 16px; color: var(--coral)"
1051 >✱ Pull Request · #1842</span
1052 >
1053
1054 <span style="font-family: var(--mono); font-size: 18px; color: var(--ink)"
1055 >async for tok in stream()</span
1056 >
1057 </div>
1058 </div>
1059 <div class="type-row" style="border-bottom: 0">
1060 <div>
1061 <div class="tok">quote-pull</div>
1062 <div class="m">EB Garamond · 400 · italic · the expressive register</div>
1063 </div>
1064 <div>
1065 <span class="serif" style="font-style: italic; font-size: 46px; color: var(--ink)"
1066 >Ship it when it reads like a person wrote it.</span
1067 >
1068 </div>
1069 </div>
1070 </section>
1071
1072 <!-- COMPONENTS -->
1073 <section>
1074 <div class="topbar">
1075 <span class="lbl">03 — Components</span>
1076 <h2>Hairline elevation · scarce coral</h2>
1077 </div>
1078
1079 <div class="cgrid">
1080 <div class="s5">
1081 <div class="cnote">card-hairline — 1px ink hairline + one soft warm shadow</div>
1082 <div class="card">
1083 <div class="kt">Reads first, answers second</div>
1084 <div class="kb">
1085 The editorial content card. Elevation is the hairline plus one soft warm shadow —
1086 never a heavy drop, glow, or gradient.
1087 </div>
1088 </div>
1089 <div class="card tile" style="margin-top: 24px">
1090 <div class="kt">Gathers on a half-step tile</div>
1091 <div class="kb">
1092 Content collects on a warm tile surface, half a step down from the cream floor.
1093 </div>
1094 </div>
1095 </div>
1096 <div class="s3">
1097 <div class="cnote">kicker-spike + coral-callout</div>
1098 <div class="kicker"><span class="spike">✱</span> For the considered worker</div>
1099 <div class="callout" style="margin-top: 22px">
1100 <span class="b">Start a project</span><span class="a">CTA</span>
1101 </div>
1102 <div
1103 class="kb"
1104 style="
1105 margin-top: 18px;
1106 font-family: var(--sans);
1107 font-size: 15px;
1108 line-height: 1.5;
1109 color: color-mix(in srgb, var(--ink) 70%, var(--cream));
1110 "
1111 >
1112 Coral is rationed — one moment per frame.
1113 </div>
1114 </div>
1115 <div class="s4">
1116 <div class="cnote">number-lockup — EB Garamond figure + mono unit</div>
1117 <div class="kpi">
1118 <div class="tag">Impact</div>
1119 <div class="fig">2.1<span class="u">× faster</span></div>
1120 <div class="d">Figure is serif; the unit is always mono, never the serif.</div>
1121 </div>
1122 </div>
1123 </div>
1124
1125 <div class="cgrid" style="margin-bottom: 0">
1126 <div class="s7">
1127 <div class="cnote">
1128 code-surface — the warm-navy code / terminal surface (code-* blocks render here)
1129 </div>
1130 <div class="codewin">
1131 <div class="bar">
1132 <span class="dot" style="background: #e8695a"></span
1133 ><span class="dot" style="background: #e8b35a"></span
1134 ><span class="dot" style="background: #5db872"></span
1135 ><span class="fn">transport.py</span>
1136 </div>
1137 <pre><span class="del">- <span class="k">def</span> respond(q):</span>
1138<span class="del">- <span class="k">return</span> model.answer(q)</span>
1139<span class="add">+ <span class="k">async def</span> respond(q):</span>
1140<span class="add">+ <span class="k">async for</span> tok <span class="k">in</span> model.stream(q, n=<span class="n">3</span>):</span>
1141<span class="add">+ <span class="k">yield</span> tok</span></pre>
1142 </div>
1143 </div>
1144 <div class="s5">
1145 <div class="cnote">pull-quote — EB Garamond italic + mono cite</div>
1146 <div class="quote">
1147 <div class="q">
1148 Refactor the transport so streaming isn't a special case — it's the default.
1149 </div>
1150 <div class="cite">Commit a1b2c3d · a. chen</div>
1151 </div>
1152 </div>
1153 </div>
1154 </section>
1155
1156 <!-- FRAMES -->
1157 <section style="background: var(--tile)">
1158 <div class="topbar">
1159 <span class="lbl">04 — Frames</span>
1160 <h2>Six treatments ↔ PR beats</h2>
1161 </div>
1162 <div class="gallery">
1163 <div class="fw">
1164 <div class="flabel"><b>Cover</b><span>· the PR title · cream · left</span></div>
1165 <div class="frame cf1">
1166 <div class="tb">
1167 <span class="l coral">✱ Pull Request · #1842</span><span class="l">example/sdk</span>
1168 </div>
1169 <div class="body">
1170 <div class="kick">✱ Feature</div>
1171 <h3>Streaming,<br />end to end.</h3>
1172 </div>
1173 <div class="fl">
1174 <span class="l">main ← stream-api</span><span class="l">01 / 06</span>
1175 </div>
1176 </div>
1177 </div>
1178
1179 <div class="fw">
1180 <div class="flabel"><b>Statement</b><span>· the change in a sentence · cream</span></div>
1181 <div class="frame cf2">
1182 <div class="tb">
1183 <span class="l coral">The change</span><span class="l">02 / 06</span>
1184 </div>
1185 <div class="body">
1186 <h3>The API now streams tokens <span class="it">as they're written.</span></h3>
1187 </div>
1188 </div>
1189 </div>
1190
1191 <div class="fw">
1192 <div class="flabel">
1193 <b>Code Surface</b><span>· the diff · navy · the PR-critical frame</span>
1194 </div>
1195 <div class="frame cf3">
1196 <div class="tb">
1197 <span class="l coral">The diff</span><span class="l">03 / 06</span>
1198 </div>
1199 <div class="body">
1200 <div class="kick">transport.py · +3 −2</div>
1201 <div class="win">
1202 <div class="bar">
1203 <span class="dot" style="background: #e8695a"></span
1204 ><span class="dot" style="background: #e8b35a"></span
1205 ><span class="dot" style="background: #5db872"></span
1206 ><span class="fn">transport.py</span>
1207 </div>
1208 <pre><span class="del">- <span class="k">def</span> respond(q):</span>
1209<span class="del">- <span class="k">return</span> model.answer(q)</span>
1210<span class="add">+ <span class="k">async def</span> respond(q):</span>
1211<span class="add">+ <span class="k">async for</span> tok <span class="k">in</span> model.stream(q):</span>
1212<span class="add">+ <span class="k">yield</span> tok</span></pre>
1213 </div>
1214 </div>
1215 </div>
1216 </div>
1217
1218 <div class="fw">
1219 <div class="flabel">
1220 <b>Number / Impact</b><span>· +N/−M · cream · oversized figure</span>
1221 </div>
1222 <div class="frame cf4">
1223 <div class="tb">
1224 <span class="l coral">By the numbers</span><span class="l">04 / 06</span>
1225 </div>
1226 <div class="body">
1227 <span class="tag">Net change</span>
1228 <div class="fig">+1,204<span class="u">/ −318</span></div>
1229 <div class="d">
1230 Across 17 files — the transport layer rewritten, the special-case path deleted.
1231 </div>
1232 </div>
1233 <div class="fl"><span class="l">17 files</span><span class="l">04 / 06</span></div>
1234 </div>
1235 </div>
1236
1237 <div class="fw">
1238 <div class="flabel">
1239 <b>Pull-quote</b><span>· commit / review · EB Garamond italic</span>
1240 </div>
1241 <div class="frame cf5">
1242 <div class="tb">
1243 <span class="l coral">In the commit</span><span class="l">05 / 06</span>
1244 </div>
1245 <div class="body">
1246 <div class="q">"Streaming isn't a special case anymore — it's the default path."</div>
1247 <div class="cite">a. chen · author</div>
1248 </div>
1249 </div>
1250 </div>
1251
1252 <div class="fw">
1253 <div class="flabel"><b>Closing / CTA</b><span>· shipped-by · coral voltage</span></div>
1254 <div class="frame cf6">
1255 <div class="tb"><span class="l coral">Shipped</span><span class="l">06 / 06</span></div>
1256 <div class="body">
1257 <h3>Merged & shipped.</h3>
1258 <div class="ship">
1259 <div class="av">AC</div>
1260 <div class="av">RK</div>
1261 <div class="av">JM</div>
1262 <span class="shiplbl">a. chen · r. kapoor · +1</span>
1263 </div>
1264 <span class="cta">Read the PR →</span>
1265 </div>
1266 </div>
1267 </div>
1268 </div>
1269 </section>
1270
1271 <!-- PRINCIPLES -->
1272 <section>
1273 <div class="topbar">
1274 <span class="lbl">05 — Rules</span>
1275 <h2>Frame Rules</h2>
1276 </div>
1277 <div class="dos">
1278 <div class="do-card do">
1279 <h4>Do</h4>
1280 <div class="rule"></div>
1281 <ul>
1282 <li>Stand every frame on the warm cream floor; gather content on a half-step tile.</li>
1283 <li>Set display in EB Garamond 400, sentence case, optical size, negative-tracked.</li>
1284 <li>Ration coral to one moment per frame — CTA, inline link, or full-bleed band.</li>
1285 <li>Elevate with a 1px hairline + at most one soft warm shadow.</li>
1286 <li>Reserve warm navy for the code surface; pair every figure with a mono unit.</li>
1287 </ul>
1288 </div>
1289 <div class="do-card dont">
1290 <h4>Don't</h4>
1291 <div class="rule"></div>
1292 <ul>
1293 <li>No pure white, no cool gray, no pure black; no fourth brand hue.</li>
1294 <li>No heavy drop shadow, glow, gradient on content, or tilt.</li>
1295 <li>No uppercase or title-case EB Garamond; no sans headline; no serif label.</li>
1296 <li>No two corals in one frame; coral never sets a headline or body run.</li>
1297 <li>Don't cram edge-to-edge — the considered voice needs cream.</li>
1298 </ul>
1299 </div>
1300 </div>
1301 </section>
1302
1303 <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
1304 <style>
1305 /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
1306 .capdemo {
1307 --cap-ink: var(--ink);
1308 --cap-canvas: var(--cream);
1309 --cap-accent: var(--coral);
1310 }
1311 .capdemo .stage {
1312 position: absolute;
1313 left: 0;
1314 right: 0;
1315 bottom: 0;
1316 height: 16.67cqh;
1317 display: flex;
1318 align-items: center;
1319 justify-content: center;
1320 z-index: 4;
1321 }
1322 .capdemo .pill {
1323 max-width: 80cqw;
1324 padding: 1.4cqw 3cqw 1.7cqw;
1325 background: var(--cap-canvas);
1326 border: 0.07cqw solid color-mix(in srgb, var(--cap-ink) 12%, transparent);
1327 border-radius: 0.7cqw;
1328 box-shadow:
1329 0 0.06cqw 0.18cqw rgba(20, 20, 19, 0.08),
1330 0 0.25cqw 1cqw rgba(20, 20, 19, 0.04);
1331 }
1332 .capdemo .line {
1333 display: flex;
1334 flex-wrap: wrap;
1335 justify-content: center;
1336 gap: 0.12em 0.3em;
1337 font-family: var(--serif);
1338 font-weight: 500;
1339 font-size: 3.4cqw;
1340 line-height: 1.24;
1341 letter-spacing: -0.02em;
1342 }
1343 .capdemo .w {
1344 display: inline-block;
1345 padding: 0 0.02em 0.06em;
1346 color: color-mix(in srgb, var(--cap-ink) 40%, var(--cap-canvas));
1347 border-bottom: 0.16cqw solid transparent;
1348 }
1349 .capdemo .w.spoken {
1350 color: var(--cap-ink);
1351 }
1352 .capdemo .w.active {
1353 color: var(--cap-ink);
1354 border-bottom: 0.16cqw solid var(--cap-accent);
1355 }
1356 .capdemo .bandline {
1357 position: absolute;
1358 left: 0;
1359 right: 0;
1360 bottom: 16.67cqh;
1361 border-top: 0.12cqw dashed color-mix(in srgb, var(--ink) 28%, transparent);
1362 z-index: 3;
1363 }
1364 .capdemo .bandtag {
1365 position: absolute;
1366 right: 5cqw;
1367 bottom: calc(16.67cqh + 0.7cqw);
1368 font-family: var(--mono);
1369 font-weight: 500;
1370 text-transform: uppercase;
1371 letter-spacing: 0.12em;
1372 font-size: 0.82cqw;
1373 color: color-mix(in srgb, var(--ink) 50%, var(--cream));
1374 z-index: 4;
1375 }
1376 </style>
1377 <section style="background: var(--tile)">
1378 <div class="topbar">
1379 <span class="lbl">06 — Captions</span>
1380 <h2>Lower-Third Karaoke</h2>
1381 </div>
1382 <div class="gallery">
1383 <div class="fw">
1384 <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
1385 <div class="frame capdemo">
1386 <div class="tb"><span class="l coral">Captions</span><span class="l">active</span></div>
1387 <div class="bandline"></div>
1388 <div class="bandtag">caption band · 16.7%</div>
1389 <div class="stage">
1390 <div class="pill">
1391 <div class="line">
1392 <span class="w spoken">Streaming</span>
1393 <span class="w spoken">is</span>
1394 <span class="w active">the</span>
1395 <span class="w">default</span>
1396 <span class="w">now.</span>
1397 </div>
1398 </div>
1399 </div>
1400 </div>
1401 </div>
1402
1403 <div class="fw">
1404 <div class="flabel"><b>Settled line</b><span>· all spoken · underline cleared</span></div>
1405 <div class="frame capdemo">
1406 <div class="tb">
1407 <span class="l coral">Captions</span><span class="l">settled</span>
1408 </div>
1409 <div class="stage">
1410 <div class="pill">
1411 <div class="line">
1412 <span class="w spoken">Read</span>
1413 <span class="w spoken">it</span>
1414 <span class="w spoken">first.</span>
1415 </div>
1416 </div>
1417 </div>
1418 </div>
1419 </div>
1420 </div>
1421 </section>
1422
1423 <div class="foot">
1424 <span class="l"><span class="spike">✱</span> Code editorial</span>
1425 <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
1426 </div>
1427
1428 <template id="__bundler_thumbnail">
1429 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
1430 <rect width="100" height="100" fill="#faf9f5" />
1431 <text x="11" y="48" font-family="Georgia" font-size="34" fill="#141413">Aa</text>
1432 <text x="68" y="30" font-family="monospace" font-size="22" fill="#cc785c">✱</text>
1433 <rect x="11" y="62" width="58" height="1.5" fill="#141413" opacity="0.16" />
1434 <rect x="11" y="72" width="40" height="10" rx="2" fill="#181715" />
1435 </svg>
1436 </template>
1437 </body>
1438</html>