Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
2959 lines (2942 loc) · 158 KB
/
Copy pathindex.html
File metadata and controls
2959 lines (2942 loc) · 158 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌆</text></svg>">
<title>Flashback — A time machine for taste</title>
<meta name="description" content="Flashback indexes design history year by year: theses, design climates, recipes, prompt seeds, and references an agent can use to ground a design task. 127 years indexed (1900-2026).">
<meta property="og:title" content="Flashback — A time machine for taste">
<meta property="og:description" content="An agentic design tool with a time machine for taste. 127 years indexed (1900-2026).">
<meta property="og:url" content="https://toby.github.io/flashback/">
<!-- Generated by scripts/flashback-examples.mjs from corpus. Do not hand-edit corpus-derived content. -->
<style>
:root {
color-scheme: dark;
--paper: #f3eee2;
--muted: #a8a193;
--line: rgba(243, 238, 226, 0.16);
--bg-a: #0b0c10;
--bg-b: #14151c;
--bg-c: #070709;
--accent: #ff4d2e;
--accent-2: #35d0ff;
--accent-3: #ffe150;
--max: 1200px;
--sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
--mono: ui-monospace, "SFMono-Regular", "Courier New", Courier, monospace;
--serif: Georgia, "Times New Roman", serif;
--shadow: 14px 14px 0 rgba(0, 0, 0, 0.5);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
min-height: 100vh;
color: var(--paper);
font-family: var(--sans);
line-height: 1.5;
background:
radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 26rem),
radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 30rem),
radial-gradient(circle at 72% 92%, color-mix(in srgb, var(--accent-3) 16%, transparent), transparent 32rem),
linear-gradient(140deg, var(--bg-a), var(--bg-b) 50%, var(--bg-c));
}
body::before {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
content: "";
opacity: 0.18;
background:
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4px),
repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0 1px, transparent 1px 10px);
mix-blend-mode: screen;
}
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:focus-visible { outline: 3px solid var(--accent-3); outline-offset: 3px; }
.page {
width: min(100% - 32px, var(--max));
margin: 0 auto;
padding: clamp(28px, 6vw, 72px) 0 64px;
}
.footer {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
gap: 12px 24px;
justify-content: space-between;
align-items: center;
font-family: var(--mono);
font-size: 0.8rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.footer-links { display: inline-flex; gap: 18px; flex-wrap: wrap; }
.masthead { margin-bottom: clamp(28px, 5vw, 52px); }
.kicker {
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: 0.34em;
font-size: 0.72rem;
color: var(--muted);
margin: 0 0 14px;
}
.wordmark {
margin: 0;
font-weight: 800;
font-size: clamp(3rem, 12vw, 8rem);
line-height: 0.92;
letter-spacing: -0.03em;
}
.lede {
max-width: 54ch;
margin: 18px 0 0;
font-size: clamp(1rem, 2.4vw, 1.25rem);
color: color-mix(in srgb, var(--paper) 88%, transparent);
}
.meta {
display: flex;
flex-wrap: wrap;
gap: 12px 36px;
margin: 28px 0 0;
padding: 0;
}
.meta div { display: flex; flex-direction: column; gap: 2px; }
.meta dt {
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 0.68rem;
color: var(--muted);
}
.meta dd { margin: 0; font-size: 1.4rem; font-weight: 700; }
.meta dd a { text-decoration: none; color: var(--accent-3); }
.decades {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
margin: 0 0 clamp(30px, 5vw, 46px);
padding: 0;
}
.decades a {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
padding: 7px 12px;
color: color-mix(in srgb, var(--paper) 82%, transparent);
border: 1px solid var(--line);
transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.decades a:hover {
color: #06070a;
background: var(--accent-3);
border-color: var(--accent-3);
}
.decade { margin: 0 0 clamp(38px, 6vw, 64px); scroll-margin-top: 24px; }
.decade-head {
display: flex;
align-items: baseline;
gap: 14px;
margin: 0 0 18px;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
}
.decade-title {
margin: 0;
font-size: clamp(1.7rem, 4vw, 2.6rem);
font-weight: 800;
letter-spacing: -0.02em;
}
.decade-note {
font-family: var(--serif);
font-style: italic;
font-size: clamp(1rem, 2vw, 1.2rem);
color: color-mix(in srgb, var(--paper) 70%, transparent);
}
.console {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 18px;
}
.year {
--card-a: var(--accent);
--card-b: var(--accent-2);
--card-c: var(--accent-3);
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
padding: 22px 22px 20px;
border: 1px solid var(--line);
border-top: 3px solid var(--card-a);
background: rgba(0, 0, 0, 0.4);
box-shadow: var(--shadow);
transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.year:hover {
transform: translate(-3px, -3px);
box-shadow: 18px 18px 0 rgba(0, 0, 0, 0.55);
border-color: color-mix(in srgb, var(--card-b) 60%, var(--line));
}
.year-open {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
text-decoration: none;
}
.year-num {
font-size: clamp(2.4rem, 6vw, 3.2rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
}
.year-stamp {
align-self: flex-start;
font-family: var(--mono);
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.12em;
padding: 5px 9px;
color: #06070a;
background: var(--card-c);
white-space: nowrap;
}
.year-feeling {
margin: 0;
font-family: var(--serif);
font-style: italic;
font-size: 1.16rem;
line-height: 1.3;
color: color-mix(in srgb, var(--card-b) 70%, var(--paper));
}
.year-sub { margin: 0; color: var(--muted); font-size: 0.92rem; }
.year-lens {
list-style: none;
margin: 2px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.year-lens li {
font-size: 0.72rem;
font-family: var(--mono);
letter-spacing: 0.02em;
padding: 4px 8px;
border: 1px solid var(--line);
color: color-mix(in srgb, var(--paper) 82%, transparent);
}
.year-foot {
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-family: var(--mono);
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.year-count { color: var(--muted); }
.year-links { display: inline-flex; gap: 14px; }
.year-links a { color: var(--card-b); text-underline-offset: 0.2em; }
@media (prefers-reduced-motion: reduce) {
.year { transition: none; }
.year:hover { transform: none; }
}
</style>
</head>
<body>
<main class="page">
<header class="masthead">
<p class="kicker">A time machine for taste — historically literate agentic design</p>
<h1 class="wordmark">Flashback</h1>
<p class="lede">Pick a year. Flashback excavates its design history — thesis, climate, recipes, anti-cliches, prompt seeds, and references — and uses it to ground a real design task.</p>
<dl class="meta">
<div><dt>Years indexed</dt><dd>127</dd></div>
<div><dt>Span</dt><dd>1900-2026</dd></div>
<div><dt>Recipes</dt><dd>519</dd></div>
<div><dt>Skill</dt><dd><a href="skill/index.html">/flashback</a></dd></div>
<div><dt>Source</dt><dd><a href="https://github.com/toby/flashback">GitHub</a></dd></div>
</dl>
</header>
<nav class="decades" aria-label="Jump to a decade">
<a href="#1900s">1900s</a>
<a href="#1910s">1910s</a>
<a href="#1920s">1920s</a>
<a href="#1930s">1930s</a>
<a href="#1940s">1940s</a>
<a href="#1950s">1950s</a>
<a href="#1960s">1960s</a>
<a href="#1970s">1970s</a>
<a href="#1980s">1980s</a>
<a href="#1990s">1990s</a>
<a href="#2000s">2000s</a>
<a href="#2010s">2010s</a>
<a href="#2020s">2020s</a>
</nav>
<section class="decade" id="1900s" aria-label="The 1900s">
<header class="decade-head">
<h2 class="decade-title">1900s</h2>
<span class="decade-note">ornament meets the machine</span>
</header>
<div class="console">
<article class="year" style="--card-a: #9c6b3f; --card-b: #3f6b5e; --card-c: #b89150;">
<a class="year-open" href="examples/1900/index.html" aria-label="Open the 1900 example">
<span class="year-num">1900</span>
<span class="year-stamp">Paris 1900</span>
</a>
<p class="year-feeling">the new century entering through an iron flower</p>
<p class="year-sub">Paris opens the new century as a total designed spectacle: Art Nouveau entrances, electric pavilions, moving sidewalks, posters, gowns, glass, and co...</p>
<ul class="year-lens">
<li>the Paris Exposition makes Art Nouveau, electricity, and spectacle public</li>
<li>Guimard's Metro entrances turn infrastructure into botanical metalwork</li>
<li>poster culture and color lithography make the street a designed surface</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1900/index.html">Example</a>
<a href="corpus/1900.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #b8843d; --card-b: #9c4a3c; --card-c: #6f8f86;">
<a class="year-open" href="examples/1901/index.html" aria-label="Open the 1901 example">
<span class="year-num">1901</span>
<span class="year-stamp">Secession line</span>
</a>
<p class="year-feeling">the floral line being squared into a room</p>
<p class="year-sub">The Belle Epoque remains lush, but Glasgow, Darmstadt, Vienna, Buffalo, and Craftsman reform pull the curve toward structure, geometry, rooms, and sy...</p>
<ul class="year-lens">
<li>Secession and Glasgow design make ornament flatter, squarer, and more architectural</li>
<li>Darmstadt tests the artists' colony as a total designed environment</li>
<li>The Craftsman turns American reform taste toward honest furniture and domestic moral clarity</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1901/index.html">Example</a>
<a href="corpus/1901.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #caa23d; --card-b: #7a5230; --card-c: #a8472f;">
<a class="year-open" href="examples/1902/index.html" aria-label="Open the 1902 example">
<span class="year-num">1902</span>
<span class="year-stamp">Turin 1902</span>
</a>
<p class="year-feeling">the decorative arts standing in public and naming their ambitions</p>
<p class="year-sub">Turin gives Art Nouveau an international decorative-arts platform, Vienna stages Klimt's Beethoven Frieze, Photo-Secession forms in New York, and Mac...</p>
<ul class="year-lens">
<li>Turin's decorative arts exhibition makes the new style international and comparative</li>
<li>Vienna Secession turns exhibition design into a ritualized total environment</li>
<li>Mackintosh's Hill House begins translating Glasgow severity into domestic architecture</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1902/index.html">Example</a>
<a href="corpus/1902.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #9c5a3c; --card-b: #7d3b53; --card-c: #3f6b5e;">
<a class="year-open" href="examples/1903/index.html" aria-label="Open the 1903 example">
<span class="year-num">1903</span>
<span class="year-stamp">Workshops</span>
</a>
<p class="year-feeling">the handmade ideal meeting the engine and the printed plate</p>
<p class="year-sub">Wiener Werkstätte is founded, Camera Work begins, Ford Motor Company appears, and powered flight turns modern design toward workshops, media, mobilit...</p>
<ul class="year-lens">
<li>Wiener Werkstätte makes the workshop into a coordinated modern brand</li>
<li>Camera Work gives photography a luxurious printed voice</li>
<li>Ford Motor Company and the Wright flight pull design toward mobility systems</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1903/index.html">Example</a>
<a href="corpus/1903.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #9c6b3f; --card-b: #3f6b5e; --card-c: #b89150;">
<a class="year-open" href="examples/1904/index.html" aria-label="Open the 1904 example">
<span class="year-num">1904</span>
<span class="year-stamp">Vienna grid</span>
</a>
<p class="year-feeling">ornament crossing a tiled platform into modern systems</p>
<p class="year-sub">Vienna's workshops harden into geometric luxury, New York opens its subway, Mackintosh completes the Hill House, and Wright designs the Larkin Buildi...</p>
<ul class="year-lens">
<li>Vienna 1900 moves from symbolic ornament toward coordinated geometric total design</li>
<li>New York's subway makes metropolitan movement a tiled, signed, infrastructural experience</li>
<li>Mackintosh's Hill House completes a severe domestic total artwork</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1904/index.html">Example</a>
<a href="corpus/1904.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #b8843d; --card-b: #9c4a3c; --card-c: #6f8f86;">
<a class="year-open" href="examples/1905/index.html" aria-label="Open the 1905 example">
<span class="year-num">1905</span>
<span class="year-stamp">Wild color</span>
</a>
<p class="year-feeling">elegance under pressure from wild color and hard edges</p>
<p class="year-sub">Fauves explode color in Paris, Die Brücke forms in Dresden, and Vienna's total-design dream begins to harden into stone, mosaic, furniture, and brand...</p>
<ul class="year-lens">
<li>fauvist color breaks naturalism into emotional signal</li>
<li>die brucke turns youth, woodcut force, and urban anxiety into expressionist design pressure</li>
<li>viennese total design moves from workshops into monumental domestic architecture</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1905/index.html">Example</a>
<a href="corpus/1905.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #caa23d; --card-b: #7a5230; --card-c: #a8472f;">
<a class="year-open" href="examples/1906/index.html" aria-label="Open the 1906 example">
<span class="year-num">1906</span>
<span class="year-stamp">Stone curve</span>
</a>
<p class="year-feeling">ornament learning to stand up as structure</p>
<p class="year-sub">Gaudi begins Casa Mila, Vienna's disciplined reform spreads through furniture and interiors, and early cinema stretches from fairground novelty towar...</p>
<ul class="year-lens">
<li>catalan modernisme turns organic line into urban stone</li>
<li>secession discipline keeps simplifying ornament into geometry and total interiors</li>
<li>arts and crafts ethics remain active but face commercial modernity</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1906/index.html">Example</a>
<a href="corpus/1906.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #9c5a3c; --card-b: #7d3b53; --card-c: #3f6b5e;">
<a class="year-open" href="examples/1907/index.html" aria-label="Open the 1907 example">
<span class="year-num">1907</span>
<span class="year-stamp">Werkbund</span>
</a>
<p class="year-feeling">the hand, the factory, and the fractured figure entering the same argument</p>
<p class="year-sub">The Deutscher Werkbund forms, Peter Behrens joins AEG, and Picasso's studio rupture suggests that modern form can be corporate, geometric, and violen...</p>
<ul class="year-lens">
<li>the deutscher werkbund links artists, architects, craft, and industry</li>
<li>peter behrens begins turning aeg into an early corporate design system</li>
<li>picasso's les demoiselles d'avignon breaks figure and space into modern fracture</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1907/index.html">Example</a>
<a href="corpus/1907.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #9c6b3f; --card-b: #3f6b5e; --card-c: #b89150;">
<a class="year-open" href="examples/1908/index.html" aria-label="Open the 1908 example">
<span class="year-num">1908</span>
<span class="year-stamp">Ornament trial</span>
</a>
<p class="year-feeling">the decorative century being cross-examined by cubes, cars, and plain walls</p>
<p class="year-sub">Loos attacks ornament, Braque's L'Estaque paintings push form toward cubes, and the Ford Model T makes industrial modernity ordinary, affordable, and...</p>
<ul class="year-lens">
<li>ornament and crime turns decoration into a moral argument</li>
<li>cubism begins to name a new geometry of perception</li>
<li>the ford model t makes mass industrial design a public fact</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1908/index.html">Example</a>
<a href="corpus/1908.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #b8843d; --card-b: #9c4a3c; --card-c: #6f8f86;">
<a class="year-open" href="examples/1909/index.html" aria-label="Open the 1909 example">
<span class="year-num">1909</span>
<span class="year-stamp">Speed myth</span>
</a>
<p class="year-feeling">speed and color claiming the future before anyone has agreed what the future is</p>
<p class="year-sub">Marinetti publishes the Futurist Manifesto, the Ballets Russes detonates color in Paris, and industrial architecture learns to look like power itself.</p>
<ul class="year-lens">
<li>futurism makes speed, machines, violence, and youth into a design myth</li>
<li>the ballets russes brings russian color, costume, and stage design to paris</li>
<li>aeg and behrens give industrial architecture monumental corporate form</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1909/index.html">Example</a>
<a href="corpus/1909.md">Corpus.md</a>
</span>
</div>
</article>
</div>
</section>
<section class="decade" id="1910s" aria-label="The 1910s">
<header class="decade-head">
<h2 class="decade-title">1910s</h2>
<span class="decade-note">the avant-garde detonates</span>
</header>
<div class="console">
<article class="year" style="--card-a: #c0341f; --card-b: #1d1b18; --card-c: #c79a3c;">
<a class="year-open" href="examples/1910/index.html" aria-label="Open the 1910 example">
<span class="year-num">1910</span>
<span class="year-stamp">Futurist</span>
</a>
<p class="year-feeling">the old room struck by a motor and a lamp</p>
<p class="year-sub">Futurism turns painting into a shout, Ballets Russes color floods Paris, and modern taste begins to prefer the stripped facade, the poster, and the m...</p>
<ul class="year-lens">
<li>futurist manifestos convert speed, noise, and violence into visual principles</li>
<li>Ballets Russes makes color, costume, and stage design feel newly electric</li>
<li>Post-Impressionism reaches London as a scandal of modern seeing</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1910/index.html">Example</a>
<a href="corpus/1910.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #33484f; --card-b: #cfa94a; --card-c: #2c2a26;">
<a class="year-open" href="examples/1911/index.html" aria-label="Open the 1911 example">
<span class="year-num">1911</span>
<span class="year-stamp">Blue Rider</span>
</a>
<p class="year-feeling">color looking for a system and a soul</p>
<p class="year-sub">Expressionist color organizes itself, Kandinsky gives abstraction a theory, and modern design begins to split between inner necessity and industrial...</p>
<ul class="year-lens">
<li>color, music, folk art, and abstraction gather through Der Blaue Reiter</li>
<li>spiritual necessity gives modern form a theory through Kandinsky</li>
<li>futurism continues making speed and urban shock a visual method</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1911/index.html">Example</a>
<a href="corpus/1911.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #b9923f; --card-b: #1c1f24; --card-c: #c43d2a;">
<a class="year-open" href="examples/1912/index.html" aria-label="Open the 1912 example">
<span class="year-num">1912</span>
<span class="year-stamp">Collage</span>
</a>
<p class="year-feeling">reality cut into fragments and glued back as modern form</p>
<p class="year-sub">Cubism pastes newspaper and oilcloth into art, Futurism reaches Paris, and modern design discovers that reality can be cut, glued, quoted, and reasse...</p>
<ul class="year-lens">
<li>synthetic Cubism begins with collage, papier colle, and found printed matter</li>
<li>the Futurists exhibit in Paris and turn speed into an international visual argument</li>
<li>cubism becomes public, decorative, and architectural through Section d'Or and the Maison Cubiste</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1912/index.html">Example</a>
<a href="corpus/1912.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #6f3b2c; --card-b: #a83a25; --card-c: #5a6b3f;">
<a class="year-open" href="examples/1913/index.html" aria-label="Open the 1913 example">
<span class="year-num">1913</span>
<span class="year-stamp">Armory</span>
</a>
<p class="year-feeling">the public suddenly forced to process modern force</p>
<p class="year-sub">The Armory Show carries European modernism to America, the Rite of Spring detonates the theater, and the machine body becomes sculpture, noise, and a...</p>
<ul class="year-lens">
<li>the Armory Show makes modern art a mass American controversy</li>
<li>music, choreography, costume, and scandal become one event through The Rite of Spring</li>
<li>futurism expands into sculpture, noise, and the designed sensation of force</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1913/index.html">Example</a>
<a href="corpus/1913.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #c0341f; --card-b: #1d1b18; --card-c: #c79a3c;">
<a class="year-open" href="examples/1914/index.html" aria-label="Open the 1914 example">
<span class="year-num">1914</span>
<span class="year-stamp">Werkbund</span>
</a>
<p class="year-feeling">the design future drafted into history</p>
<p class="year-sub">Werkbund standardization debates, glass utopias, Vorticist blasts, wartime posters, and early abstraction all arrive as Europe crosses from design ar...</p>
<ul class="year-lens">
<li>the Cologne Werkbund exhibition turns standardization into a public design conflict</li>
<li>war redirects graphic design toward recruitment, propaganda, and national address</li>
<li>vorticism and futurism sharpen the page into angular, violent modern energy</li>
</ul>
<div class="year-foot">
<span class="year-count">5 recipes</span>
<span class="year-links">
<a href="examples/1914/index.html">Example</a>
<a href="corpus/1914.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #33484f; --card-b: #cfa94a; --card-c: #2c2a26;">
<a class="year-open" href="examples/1915/index.html" aria-label="Open the 1915 example">
<span class="year-num">1915</span>
<span class="year-stamp">Zero-ten</span>
</a>
<p class="year-feeling">the page as battlefield and icon wall</p>
<p class="year-sub">Black Square enters the icon corner, Futurism turns war and speed into a visual grammar, and public design learns that modern life needs stronger sig...</p>
<ul class="year-lens">
<li>suprematism makes non-objective painting feel like a new visual law</li>
<li>futurism treats speed, noise, machines, and war as compositional forces</li>
<li>wartime posters turn illustration and direct address into mass persuasion</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1915/index.html">Example</a>
<a href="corpus/1915.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #b9923f; --card-b: #1c1f24; --card-c: #c43d2a;">
<a class="year-open" href="examples/1916/index.html" aria-label="Open the 1916 example">
<span class="year-num">1916</span>
<span class="year-stamp">Dada</span>
</a>
<p class="year-feeling">nonsense against war, clarity against chaos</p>
<p class="year-sub">Dada begins in neutral Zurich as nonsense against war, while Edward Johnston gives the Underground a disciplined alphabet for modern public life.</p>
<ul class="year-lens">
<li>dada is born at Cabaret Voltaire as anti-art, performance, and protest</li>
<li>public lettering becomes modern, legible, and humane through Johnston Sans</li>
<li>wartime graphic systems intensify through recruitment, bonds, and morale</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1916/index.html">Example</a>
<a href="corpus/1916.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #6f3b2c; --card-b: #a83a25; --card-c: #5a6b3f;">
<a class="year-open" href="examples/1917/index.html" aria-label="Open the 1917 example">
<span class="year-num">1917</span>
<span class="year-stamp">De Stijl</span>
</a>
<p class="year-feeling">the future trying to draw itself as a hard line</p>
<p class="year-sub">De Stijl begins in the Netherlands, Duchamp turns a urinal into a question, Russia enters revolution, and the Uncle Sam poster proves direct address...</p>
<ul class="year-lens">
<li>geometric abstraction turns toward vertical, horizontal, primary-color order</li>
<li>the Russian Revolution gives constructivist energy a political horizon</li>
<li>dada and Duchamp make authorship, selection, and context design questions</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1917/index.html">Example</a>
<a href="corpus/1917.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #c0341f; --card-b: #1d1b18; --card-c: #c79a3c;">
<a class="year-open" href="examples/1918/index.html" aria-label="Open the 1918 example">
<span class="year-num">1918</span>
<span class="year-stamp">Armistice</span>
</a>
<p class="year-feeling">a world ending in noise while abstraction lowers its voice to white</p>
<p class="year-sub">The war ends, De Stijl publishes its manifesto, Malevich paints white on white, and the modern surface becomes austere, exhausted, and newly absolute.</p>
<ul class="year-lens">
<li>the Armistice turns propaganda from mobilization toward victory, mourning, and reconstruction</li>
<li>De Stijl states its program as a manifesto of new visual order</li>
<li>Malevich's White on White pushes abstraction toward near-disappearance</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1918/index.html">Example</a>
<a href="corpus/1918.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #33484f; --card-b: #cfa94a; --card-c: #2c2a26;">
<a class="year-open" href="examples/1919/index.html" aria-label="Open the 1919 example">
<span class="year-num">1919</span>
<span class="year-stamp">Bauhaus</span>
</a>
<p class="year-feeling">a workshop trying to build a future from ruins</p>
<p class="year-sub">The Bauhaus opens in Weimar, Gropius calls for a new unity of art and craft, and postwar Europe begins converting avant-garde rupture into institutio...</p>
<ul class="year-lens">
<li>the Bauhaus is founded as a school, manifesto, and reconstruction project</li>
<li>Tatlin's tower and Lissitzky's Proun works point toward constructivist space</li>
<li>postwar graphics shift toward republics, revolutions, strikes, and rebuilding</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1919/index.html">Example</a>
<a href="corpus/1919.md">Corpus.md</a>
</span>
</div>
</article>
</div>
</section>
<section class="decade" id="1920s" aria-label="The 1920s">
<header class="decade-head">
<h2 class="decade-title">1920s</h2>
<span class="decade-note">the grid is invented</span>
</header>
<div class="console">
<article class="year" style="--card-a: #d8332b; --card-b: #1f6fb2; --card-c: #f2c33b;">
<a class="year-open" href="examples/1920/index.html" aria-label="Open the 1920 example">
<span class="year-num">1920</span>
<span class="year-stamp">Jazz age</span>
</a>
<p class="year-feeling">postwar order learning to dance</p>
<p class="year-sub">A postwar world tries to become modern in public: radio crackles, jazz travels, Bauhaus basics begin, and abstraction searches for a usable social sh...</p>
<ul class="year-lens">
<li>postwar reconstruction turns modern design into a civic and domestic question</li>
<li>the Bauhaus begins translating craft, color, and form into a new educational method</li>
<li>De Stijl and constructivist currents make abstraction feel practical and social</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1920/index.html">Example</a>
<a href="corpus/1920.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #1c1c1c; --card-b: #2f7d6b; --card-c: #9c3b2f;">
<a class="year-open" href="examples/1921/index.html" aria-label="Open the 1921 example">
<span class="year-num">1921</span>
<span class="year-stamp">Bauhaus</span>
</a>
<p class="year-feeling">modernism learning its exercises</p>
<p class="year-sub">Modernism becomes more teachable: Bauhaus foundations, constructivist method, De Stijl discipline, and a public culture learning to read sharper form...</p>
<ul class="year-lens">
<li>the Bauhaus foundation course turns perception, material, and form into pedagogy</li>
<li>constructivism begins defining art as construction for a new society</li>
<li>De Stijl geometry and color discipline spread as a design language</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1921/index.html">Example</a>
<a href="corpus/1921.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #f0c63e; --card-b: #16181b; --card-c: #e23b2c;">
<a class="year-open" href="examples/1922/index.html" aria-label="Open the 1922 example">
<span class="year-num">1922</span>
<span class="year-stamp">Deco debut</span>
</a>
<p class="year-feeling">angular modernism under a gold spotlight</p>
<p class="year-sub">Constructivist books, Bauhaus experiments, Egyptian spectacle, and modern fashion make the year feel angular, public, and newly theatrical.</p>
<ul class="year-lens">
<li>constructivism turns page, poster, and object into instruments of action</li>
<li>El Lissitzky's About Two Squares makes abstract geometry behave like a public story</li>
<li>the Bauhaus deepens workshop experiment before its major public exhibition</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1922/index.html">Example</a>
<a href="corpus/1922.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #1a1714; --card-b: #b8862f; --card-c: #2c6b63;">
<a class="year-open" href="examples/1923/index.html" aria-label="Open the 1923 example">
<span class="year-num">1923</span>
<span class="year-stamp">Machine modern</span>
</a>
<p class="year-feeling">the machine becoming a domestic philosophy</p>
<p class="year-sub">The Bauhaus opens itself to the public, Le Corbusier publishes the machine-for-living polemic, and modernism starts sounding less like experiment tha...</p>
<ul class="year-lens">
<li>the Bauhaus exhibition makes workshop modernism visible to a broader public</li>
<li>Le Corbusier's Vers une architecture turns machines, standards, and houses into a manifesto</li>
<li>constructivist and De Stijl geometry move from art argument toward design system</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1923/index.html">Example</a>
<a href="corpus/1923.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #d8332b; --card-b: #1f6fb2; --card-c: #f2c33b;">
<a class="year-open" href="examples/1924/index.html" aria-label="Open the 1924 example">
<span class="year-num">1924</span>
<span class="year-stamp">Roaring line</span>
</a>
<p class="year-feeling">the dream and the grid waiting for Paris</p>
<p class="year-sub">Surrealism names the unconscious, Rietveld builds De Stijl into a house, and modernism prepares the arguments that Paris will stage one year later.</p>
<ul class="year-lens">
<li>Surrealism publishes its first manifesto and gives design a dream logic to resist pure rationalism</li>
<li>Rietveld's Schroder House turns De Stijl planes into built domestic space</li>
<li>constructivism, Bauhaus practice, and machine rhetoric keep hardening modern graphic language</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1924/index.html">Example</a>
<a href="corpus/1924.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #1c1c1c; --card-b: #2f7d6b; --card-c: #9c3b2f;">
<a class="year-open" href="examples/1925/index.html" aria-label="Open the 1925 example">
<span class="year-num">1925</span>
<span class="year-stamp">Deco debut</span>
</a>
<p class="year-feeling">luxury and the machine arguing over the same future</p>
<p class="year-sub">Paris stages the exposition that will later be called Art Deco, the Bauhaus reopens in Dessau, and luxury ornament and machine geometry argue in publ...</p>
<ul class="year-lens">
<li>the Paris Exposition turns decorative modernity into an international style</li>
<li>the Bauhaus moves to Dessau and rebuilds modernism as a working method</li>
<li>constructivism and De Stijl push geometry, machine logic, and red-black abstraction</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1925/index.html">Example</a>
<a href="corpus/1925.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #f0c63e; --card-b: #16181b; --card-c: #e23b2c;">
<a class="year-open" href="examples/1926/index.html" aria-label="Open the 1926 example">
<span class="year-num">1926</span>
<span class="year-stamp">Dessau</span>
</a>
<p class="year-feeling">the future moves indoors and starts using a grid</p>
<p class="year-sub">The Bauhaus opens its Dessau building, tubular steel learns to float, and jazz-age fashion turns black, glass, chrome, print, and film into a sharper...</p>
<ul class="year-lens">
<li>the Bauhaus building makes modern design visible as architecture, school, and system</li>
<li>tubular steel furniture shifts from experiment toward industrial language</li>
<li>constructivist and Bauhaus graphics turn the page into a machine field</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1926/index.html">Example</a>
<a href="corpus/1926.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #1a1714; --card-b: #b8862f; --card-c: #2c6b63;">
<a class="year-open" href="examples/1927/index.html" aria-label="Open the 1927 example">
<span class="year-num">1927</span>
<span class="year-stamp">Futura</span>
</a>
<p class="year-feeling">the modern line learns to speak to crowds</p>
<p class="year-sub">Futura, Weissenhof, Metropolis, the talkie, and the machine-age poster make the future readable as type, housing, speed, sound, and cinematic city.</p>
<ul class="year-lens">
<li>Futura turns geometric sans-serif into a commercial modern voice</li>
<li>the Weissenhof Estate makes white-wall modern housing public and controversial</li>
<li>Metropolis gives the machine city its most influential cinematic image</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1927/index.html">Example</a>
<a href="corpus/1927.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #d8332b; --card-b: #1f6fb2; --card-c: #f2c33b;">
<a class="year-open" href="examples/1928/index.html" aria-label="Open the 1928 example">
<span class="year-num">1928</span>
<span class="year-stamp">New type</span>
</a>
<p class="year-feeling">modernism becomes a manual for use</p>
<p class="year-sub">Tschichold publishes the New Typography, CIAM forms at La Sarraz, Hannes Meyer redirects the Bauhaus, and synchronized cartoons prove that motion can...</p>
<ul class="year-lens">
<li>Jan Tschichold codifies modern typography as a practical discipline</li>
<li>CIAM turns modern architecture into an international program</li>
<li>Hannes Meyer shifts the Bauhaus toward social need, standardization, and collective method</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1928/index.html">Example</a>
<a href="corpus/1928.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #1c1c1c; --card-b: #2f7d6b; --card-c: #9c3b2f;">
<a class="year-open" href="examples/1929/index.html" aria-label="Open the 1929 example">
<span class="year-num">1929</span>
<span class="year-stamp">Glass fall</span>
</a>
<p class="year-feeling">polished modernity at the edge of collapse</p>
<p class="year-sub">The Barcelona Pavilion, E-1027, Film und Foto, MoMA, talking musicals, and the crash make the decade's polished modern surfaces feel suddenly fragile.</p>
<ul class="year-lens">
<li>the Barcelona Pavilion turns modern architecture into marble, glass, chrome, and space</li>
<li>Eileen Gray's E-1027 makes modern domesticity intimate, adjustable, and coastal</li>
<li>Film und Foto makes New Vision photography and film central to modern graphic culture</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1929/index.html">Example</a>
<a href="corpus/1929.md">Corpus.md</a>
</span>
</div>
</article>
</div>
</section>
<section class="decade" id="1930s" aria-label="The 1930s">
<header class="decade-head">
<h2 class="decade-title">1930s</h2>
<span class="decade-note">streamline and deco</span>
</header>
<div class="console">
<article class="year" style="--card-a: #2f7d8a; --card-b: #d9762f; --card-c: #e8c24a;">
<a class="year-open" href="examples/1930/index.html" aria-label="Open the 1930 example">
<span class="year-num">1930</span>
<span class="year-stamp">Chrome cliff</span>
</a>
<p class="year-feeling">chrome optimism at the edge of scarcity</p>
<p class="year-sub">The Chrysler Building crowns Deco New York, the Bauhaus changes hands under pressure, and industrial design begins selling the Depression a sleeker m...</p>
<ul class="year-lens">
<li>the Chrysler Building turns Art Deco into a skyscraper silhouette</li>
<li>Raymond Loewy proves industrial design can make office machinery desirable</li>
<li>the Bauhaus shifts from Meyer to Mies as politics tightens around modernism</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1930/index.html">Example</a>
<a href="corpus/1930.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #7a3b2c; --card-b: #3f6b5e; --card-c: #1c1814;">
<a class="year-open" href="examples/1931/index.html" aria-label="Open the 1931 example">
<span class="year-num">1931</span>
<span class="year-stamp">Hard glamour</span>
</a>
<p class="year-feeling">monumental confidence with a shadow behind it</p>
<p class="year-sub">The Empire State Building opens into Depression air, Universal horror invents new shadows, and modern design learns to be monumental without pretendi...</p>
<ul class="year-lens">
<li>the Empire State Building makes height a Depression-era symbol</li>
<li>Universal horror turns set design, typography, makeup, and shadow into icons</li>
<li>Harry Beck drafts a diagrammatic transit future before the public sees it</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1931/index.html">Example</a>
<a href="corpus/1931.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #e3b441; --card-b: #1a1c18; --card-c: #d24b2c;">
<a class="year-open" href="examples/1932/index.html" aria-label="Open the 1932 example">
<span class="year-num">1932</span>
<span class="year-stamp">Public modern</span>
</a>
<p class="year-feeling">public modernity under Depression lights</p>
<p class="year-sub">MoMA names the International Style, Radio City turns Deco into a total interior, Times New Roman enters newspaper authority, and the Depression learn...</p>
<ul class="year-lens">
<li>MoMA canonizes the International Style as modern architecture</li>
<li>Radio City Music Hall makes American Deco immersive, public, and theatrical</li>
<li>Times New Roman begins a new standard for newspaper text authority</li>
</ul>
<div class="year-foot">
<span class="year-count">4 recipes</span>
<span class="year-links">
<a href="examples/1932/index.html">Example</a>
<a href="corpus/1932.md">Corpus.md</a>
</span>
</div>
</article>
<article class="year" style="--card-a: #6f4a30; --card-b: #c0392b; --card-c: #3f6f6b;">
<a class="year-open" href="examples/1933/index.html" aria-label="Open the 1933 example">
<span class="year-num">1933</span>
<span class="year-stamp">After Bauhaus</span>
</a>
<p class="year-feeling">a broken school and a clearer map</p>
<p class="year-sub">The Bauhaus closes, Beck's Tube map reaches the public, Chicago stages a scientific future, and New Deal art begins turning public need into designed...</p>