Proof that a huge display headline and a HUD-style corner frame can make a scroll documentary feel like mission telemetry instead of a slideshow.
Design system extracted 2026-09-01, confidence 0.67
Captures


Principles
Frame the full viewport with thin open corner brackets, viewfinder style, instead of a solid border, so the page reads as an instrument or a transmission rather than a document.
Evidence
Four L-shaped brackets in warm brass against black sit at each screen corner on the hero.
Transferable
Works for anything that wants to feel like an instrument, viewport, or broadcast: space, exploration, surveillance, camera apps. Breaks for anything warm or handmade. A HUD frame around a family recipe app would read as satire.
Pair the display headline with two small monospace-style label pairs flanking it like a data readout, not a caption: a field name in caps, the value directly beneath.
Evidence
"MISSION / Apollo 11" sits bottom-left and "YEAR / 1969" bottom-right, small caps, letter-spaced, framed by thin rule lines above and below the headline.
Transferable
Works whenever the content has real factual metadata to display: a mission, a date, a spec. Breaks the moment the values are invented or vague. It reads as cosplay, not as instrumentation.
Run one enormous, near-viewport-width headline through a top-to-bottom white-to-black gradient so it reads as brushed metal rather than flat ink, and use it exactly once.
Evidence
"MOON" is set at a measured 300px, filled light to dark, matching the tone of the lunar surface rendered directly beneath it.
Transferable
Works as a single hero moment where the type itself is the visual. Breaks if repeated per section. It only reads as an event because it does not recur.
Anti-patterns (on this site specifically)
- "BEST EXPERIENCED WITH SOUND" is set in tiny gray caps with only a 16px speaker icon as the actual control. An audio-forward experience should make the sound toggle far more prominent than a corner icon most visitors will scroll past unseen.
Rationale
This is one of the rare captures where the WebGL-adjacent hero actually rendered under headless software rendering (the composited lunar-surface image and type, not a live interactive scene), unlike a real-time 3D render attempted for a different reference this session, which never painted.
The measured type stack is eclectic on purpose: Times New Roman, Arial, FuturaStd, and AkkuratMonoLL all appear, pulling from different document eras (a serif for gravity, a geometric grotesk for the display moment, a monospace for instrument-style labels). That mix reads as an archive assembled from several sources rather than a single brand voice, which fits a documentary about a 57-year-old mission being reconstructed today.
Restraint trade-off: the metallic gradient headline works specifically because it appears once. The same treatment used per scroll-section would stop reading as a unique event and start reading as a template.
Replicate
Build a prompt to apply this system to one of my projects tokens only, never the site
A static page cannot write to disk. After you use a prompt, append this
line to design-hub/references/replicates.log.jsonl. The CLI
(scripts/replicate-prompt.mjs) does it for you.
Not offered as targets
wanessalabs-games: No design/ directory exists in wanessalabs-games/. The vault's root CLAUDE.md describes wanessalabs-games/design/brand.md as a thin pointer to wanessalabs-astro's tokens; that file has never existed. Verified 2026-08-31. Until it does, a prompt for this target can carry constraints but no baseline, and the builder refuses to generate one.kids-game-hub: No design/ directory in kids-game-hub/. The kids surfaces are routes on the games hub rather than a separate app, so their tokens are the hub's tokens, which are themselves unresolvable. Verified 2026-08-31.clembot-site: No such project in this vault. Clembot lives in ../marketing-bootstrap (code) and ../clembot-vault (data), both outside the repository and outside the range of vaultRoot(). This entry records the constraint so it is not lost; the builder refuses to generate a prompt for it. Verified 2026-08-31.
Applied in
| Project | Surface | Applied | Outcome |
|---|---|---|---|
| campping | marketing/layout | Added four 1px open corner brackets in --signal-edge, fixed to the viewport and framing every marketing page, replacing no existing border. | modified |