initial commit

docs/design-system/ui_kits/home/README.md

@@ -0,0 +1,41 @@
+# UI Kit — Home
+
+A high-fidelity recreation of the **joshbairstow.com** home page: a minimal hub
+that *fuses* its three jobs into one composition rather than stacking three
+sections.
+
+- **Interactive hero** (`HeroZone.jsx`) — the reserved zone, shown as a
+  constrained placeholder: a **rounded** cut-out panel of warm chiaroscuro whose
+  light source drifts toward the pointer (the one signature motion moment),
+  with the **rings watermark** and a ring-dots accent. A **Zone spec** toggle
+  reveals the safe area (9% pad, 1:1.25) so any future element inherits the
+  frame. Respects `prefers-reduced-motion`.
+- **Latest-writing line** (`LatestLine.jsx`) — the newest post as *one*
+  typographic line; bait, not a billboard. Arrow drifts on hover.
+- **Subdomain index** (`SubdomainIndex.jsx`) — navigation as a refined index;
+  tolerates a growing/uneven set; a not-yet-live item shows a quiet `soon`
+  badge, never looks broken. Hover indents the row + draws an ochre tick.
+- **Wordmark** (`Wordmark.jsx`) — Bodoni lockup; the only color event is a
+  single ochre period.
+- **Light / dark** — **dark is the default** (deep warm ink ground); the header
+  toggle swaps to the bone alternate. Grain, the rings watermark, and simple
+  accent marks (rings/dots/pipes) sprinkled loosely carry through both.
+
+## Run
+Open `index.html`. React + Babel load from CDN; components are separate
+`.jsx` files exported to `window`. Tokens come from `../../colors_and_type.css`;
+marks/texture from `../../assets/`.
+
+## Files
+| File | Component |
+|---|---|
+| `index.html` | App shell, theming, layout grid |
+| `Wordmark.jsx` | Name lockup |
+| `HeroZone.jsx` | Interactive hero placeholder |
+| `LatestLine.jsx` | Latest-post line |
+| `SubdomainIndex.jsx` | Refined subdomain index nav |
+
+## Notes
+This is a **cosmetic recreation** for prototyping — interactions are faked
+(links are inert). The hero's interactive element is a deliberate placeholder
+per the brief; drop the real piece into the same clipped frame + safe area.