jb-website/docs/design-system/ui_kits/home

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.