examples: add GenerationUX — 100 historical design systems

.gitignore

@@ -5,3 +5,6 @@ dist/
 bun.lockb
 *.tgz
 .turbo/
+.DS_Store
+examples/.DS_Store
+examples/generationux/.DS_Store

examples/generationux/README.md

@@ -0,0 +1,89 @@
+# 100 DESIGN.md Files — A Historical Archive of Visual Systems
+
+This pull request contributes 100 `DESIGN.md` files to the examples collection. Each file documents a distinct visual identity, design system, or aesthetic tradition — spanning roughly a century of graphic design, interface history, industrial communication, and vernacular visual culture.
+
+The collection is organised as one folder per system. Every folder contains a `DESIGN.md`, a rendered HTML artifact, and a PNG screenshot of that artifact.
+
+---
+
+## What is in this collection
+
+The 100 systems fall into several broad families:
+
+**Modernist graphic design** — the canonical institutions: Swiss Style, Bauhaus, De Stijl, Constructivism, Suprematism, Neue Grafik, and the individual practices of Jan Tschichold, Josef Müller-Brockmann, Wim Crouwel, Massimo Vignelli, Otl Aicher, Paul Rand, Herb Lubalin, Saul Bass, Alan Fletcher, Muriel Cooper, Neville Brody, and Peter Saville.
+
+**Corporate identity programmes** — first-generation design standards as they were actually documented: IBM (1970 Paul Rand manual and the 3270 terminal interface), Lufthansa (1963 Otl Aicher), NASA Graphics Standards Manual (1975 Danne & Blackburn worm identity), British Rail (1965), American Airlines (1967 Vignelli), Mobil Oil (1964 Chermayeff & Geismar), Braun product packaging (1960s), Kodak film box system (1960s), Muji no-brand packaging (1980s), and the London Underground diagrammatic map (Beck, 1933).
+
+**Interface and computing history** — a chronological sequence of screen cultures from the Xerox Star (1981) and Apple Macintosh HCI Guidelines (1987) through HyperCard (1987), Amiga Workbench 1.3, MS-DOS (1981), the IBM 3270 terminal, DEC VT100 (1978), Palm Pilot, Norton Commander, Windows 95, Excel 97, and the BBC's Ceefax teletext service.
+
+**Wayfinding and information systems** — Amsterdam Schiphol Airport signage, New York City Transit Authority Graphics Standards Manual (1970), Paris Métro enamel sign system, Tokyo Metro pictogram system, Mexico City Metro (Lance Wyman), London Underground, Jeppesen navigation charts, Ordnance Survey Explorer 1:25,000, and the IKEA assembly instruction language.
+
+**Broadcast and media identities** — MTV on-air graphics (1981), Channel 4 launch identity (1982), BBC globes and idents (1960s–1980s), Blue Note Records (Reid Miles), Emigre magazine (1984–2005), and morning news chyron systems.
+
+**Technical and institutional documents** — the IRS Form 1040 layout system, IATA boarding pass format, ICAO passport booklet standards, ANSI Z535 safety signage, ISO 7001 public information symbols, the Admiralty Chart standard (UKHO), air traffic control strip boards, ECG printout design, wiring harness diagrams, circuit schematics, and the Isotype visual education system (Otto Neurath).
+
+**Vernacular and non-Western systems** — Pakistani truck art, Filipino jeepney art, Nairobi matatu route graphics, Nigerian (Nollywood) film poster painting, Jamaican dancehall flyer systems, Cuban OSPAAAL poster tradition, Hong Kong neon signage regulation and letterforms, Indian school science chart series (1970s–1990s), and the Mexican rótulo tradition.
+
+**Print processes and material systems** — Penguin book cover system, Penguin Modern Classics grid (1960s), letterpress, risograph, photocopied zine, guilloche security printing, Soviet constructivist sweet wrapper (1920s–1930s), Soviet Gosplan form typography, Pantone swatchbook, and the Op Art movement.
+
+**Product and packaging aesthetics** — Banknote design (Bank of England), Kit Kat original foil-and-sleeve construction, cereal box, nutrition label, pharmacy label (vintage), and exploded assembly poster.
+
+**Scientific and industrial instruments** — Oscilloscope (Tektronix 465), spectrum analyser, industrial HMI panels, aircraft instrument panel typography, and airline safety card.
+
+---
+
+## How each entry was produced
+
+Each `DESIGN.md` was generated by a multi-stage forensic pipeline:
+
+1. **Identity capture** — the slug was resolved to a specific artefact, institution, or practice; its era, geography, domain, and formal traits were established from primary sources where available.
+
+2. **Visual analysis** — imagery was located through institutional archives, museum collections, and documented references. Each colour value, typeface, and layout decision was traced to a source and assigned an attestation level: `attested` (verified against a documented primary source), `inferred` (derived from analysis of verified imagery), `conventional` (the named typeface widely associated with the system, substituted with the closest open-weight equivalent), or `unverified` (plausible but not confirmed).
+
+3. **Multi-provider consensus** — design token values were produced by multiple independent passes and compared. Where providers agreed, values were accepted. Where they disagreed, the conflict is recorded explicitly using `CONTESTED:§section.field` markers rather than silently resolved to an arbitrary value.
+
+4. **Token extraction** — consensus values were extracted into the YAML front matter following the DESIGN.md alpha schema.
+
+5. **Artifact generation** — a rendered HTML artifact was produced from each `DESIGN.md`, demonstrating the design system applied to a representative UI component set.
+
+---
+
+## File structure
+
+```
+{slug}/
+  DESIGN.md                           # Design system specification
+  artifacts/
+    {slug}__GenerationUX.html         # Rendered interactive artifact
+    {slug}__GenerationUX.png          # Screenshot of the artifact
+```
+
+Each folder also contains a `tokens.js` file — a structured `registerSystem()` payload used internally during generation. It is included for reference but is not part of the DESIGN.md format.
+
+---
+
+## Notes on format extensions
+
+These files use the DESIGN.md alpha schema faithfully, and pass `npx @google/design.md lint` with zero errors. A few intentional extensions are worth noting:
+
+**`provenance` front matter key.** Each file includes a `provenance` block in the YAML recording coverage status, source institutions, imagery URLs, named typefaces with attestation levels, and honest gaps. This key is non-standard and will be accepted with a warning per the spec's unknown-key behaviour. It is preserved because it makes the factual basis of each file auditable.
+
+**`textTransform` in typography tokens.** Several typography levels include a `textTransform` property (e.g., `uppercase` for NASA display type, `lowercase` for certain label conventions). This is an extension beyond the current typography schema and will be accepted with a warning.
+
+**Extended markdown sections.** Most files include sections beyond the eight canonical ones — notably `## 0. Taxonomy & Identity`, `## 2. Constants`, `## 2a — Interaction Model`, `## 8.5. Visual Effects`, and `## 11. Design System Notes` (with subsections on use constraints, prompt phrases, do/avoid rules, variation bounds, and compositional signatures). These are preserved and do not cause lint errors.
+
+**`CONTESTED` gap markers.** Where source providers disagreed on a value and no primary source resolved the conflict, the disagreement is recorded in prose as `CONTESTED:§section.field — providers gave: [value_a, value_b, ...]; no consensus`. This convention is used in preference to silently picking an arbitrary value. The affected token in the YAML front matter is either omitted or set to the closest majority value with the conflict noted in the body.
+
+**`missing-primary` warnings.** Systems whose historical colour logic did not centre on a single dominant colour — monochrome LCD interfaces, grayscale technical instruments, typographic systems defined by black and white — do not define a `colors.primary` token. Instead they use semantic role names (`on-surface`, `inverse-surface`, `outline`, etc.). The linter will warn on these. The naming is intentional.
+
+---
+
+## Coverage notes
+
+The collection varies in documentary depth. Well-archived systems — NASA, IBM, Lufthansa, New York City Transit Authority, London Underground — have `coverage_status: complete` with 7–15 verified imagery sources and fully attested token values. Less-documented systems — vernacular traditions, broadcast ephemera, proprietary interfaces — carry `coverage_status: sparse` or `minimal`, with more `CONTESTED` markers and `inferred` attestations. In all cases, the honest gaps are recorded rather than papered over.
+
+---
+
+## Submitters
+
+This collection was produced by Dominic Reeves (@dominicreeves) using the GenerationUX pipeline. Multiple reference and enrichment steps over a 5000+ document corpus. Contributions, corrections, and additional provenance sources are welcome via issue or pull request.