editorial

21 Hours on the Moon

https://www.21hrs.space/
Confirmed
cinematicinstrumentedtactile

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

21 Hours on the Moon, above the fold
Above the fold · 1440×900
21 Hours on the Moon, full page
Full page · 1440×904

Principles

imageryhierarchy

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.

typehierarchy

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.

typecolor

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)

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.

Palette (measured)
rgb(217, 217, 217)
rgb(255, 243, 234)
rgb(217, 217, 217)
rgb(0, 0, 0)
Typography (measured, printed as labels only, not rendered in the captured face)
Times New Roman· 53 occurrences
Arial· 45 occurrences
FuturaStd· 13 occurrences
AkkuratMonoLL· 4 occurrences
Size scale (px, measured)
300px · 10px · 18px · 26px · 12px
Spacing scale (measured)
6px
10px
30px
50px
Radii (measured)
10px 0px 0px · 50px

Replicate

Build a prompt to apply this system to one of my projects tokens only, never the site

Must not change

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

ProjectSurfaceAppliedOutcome
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