21 Hours on the Moon

Overview

21 Hours on the Moon is an immersive digital archive celebrating the Apollo 11 lunar landing, employing a **Retro-Futuristic Instrumentalism** aesthetic that evokes 1960s space-age technology and mission control interfaces. The design channels the precision, clarity, and gravitas of NASA's golden era—combining monochromatic depth with warm metallic accents (#e4b592, #dad0c8) and a singular red alert tone (#ee1212) that punctuates critical interactive moments. The UI treats the user as a mission operator: every element is purposeful, every interaction is deliberate, and every visual hierarchy reinforces the historical weight of the subject matter.

The brand voice is authoritative yet intimate—technical without jargon, reverent without sentimentality. Sentences are declarative and precise: "Armstrong and Aldrin spent 21 hours, 36 minutes on the lunar surface." Typography pairs the geometric boldness of FuturaStd (headlines, CTAs) with the monospaced clarity of AkkuratMonoLL (body, labels, timelines), creating a visual rhythm that mirrors both the futurism of the 1960s and the mechanical precision of spacecraft systems. The palette is deliberately constrained—pure black canvas (#000000), warm cream text (#fff3ea), and accent metallics—forcing the user's attention onto content and interaction rather than decorative color.

Colors

The color system is rooted in **high-contrast monochromacy with strategic warm accents**, reflecting both the aesthetic of Apollo-era mission control and the visual clarity required for immersive content consumption. **Primary (#ee1212)** is a vivid red alert tone reserved exclusively for critical CTAs ("Scroll to Land" button), error states, and mission-critical interactive elements; it appears sparingly to maximize impact and maintain visual hierarchy. **Secondary (#e4b592)** is a warm bronze-tan used for frame corners, decorative borders, and tertiary interactive states—evoking the metallic instrumentation of 1960s hardware. **Tertiary (#dad0c8)** is a soft taupe used for progress bars, secondary UI elements, and subtle highlights. **On-surface (#fff3ea)** is a warm cream-white that ser

Typography

The type system employs a **dual-family hierarchy** that separates display/headline content (FuturaStd, 700 weight) from body/label content (AkkuratMonoLL, 300–500 weights). FuturaStd's geometric, slightly condensed letterforms evoke 1960s modernism and command visual authority—used at 100px (display), 50px (headline-lg), and 32px (headline-md) for hero titles and major section breaks. AkkuratMonoLL's monospaced, technical character set grounds the interface in precision and recalls mission control typography—deployed at 18px (body-lg), 16px (body-md), and 10px (label-sm) for narrative content, UI labels, and timeline annotations. Letter-spacing is consistently negative (-0.1em on body, -0.05em on body-lg) to tighten the monospace letterforms and create visual density, reinforcing the tech

Layout

The layout employs a **fixed, full-viewport canvas-first model** with a 12-column grid overlay (visible in debug mode) for precise alignment of UI chrome. The container max-width is 1280px, but the primary experience is full-bleed (100vw × 100dvh) to maximize immersion in the 3D lunar visualization. Spacing follows a semantic scale: **gutter (30px)** separates major UI zones (menu, timeline, frame corners); **lg (40px)** creates breathing room between section blocks; **md (24px)** is the default padding for cards and interactive elements; **sm (12px)** is used for compact label spacing and internal component padding. The timeline container is positioned absolutely at the bottom (bottom: 20px on mobile, bottom: 12px on tablet+) with a calculated width (calc(100% - 40px) on mobile, calc(100%

Elevation & Depth

Depth is conveyed through **layered transparency, border emphasis, and selective shadow application** rather than traditional drop shadows. The visual hierarchy consists of three discrete levels: **Level 1 (Canvas Base)**: The Three.js canvas renders the lunar surface and stars at z-index: -1 and z-index: 2, providing the immersive background. **Level 2 (UI Chrome)**: Frame corners, timeline, and menu buttons sit at z-index: 3–4 with a 2px solid border in {colors.outline} (#e4b592) and a subtle box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to separate them from the canvas. Interactive buttons use

Shapes

The shape language follows **Architectural Sharpness with Minimal Softening**, reflecting the precision of 1960s spacecraft design and mission control interfaces. Border-radius is applied conservatively: **lg (1rem / 16px)** is used for frame corners (border-radius: 10px 0 0 on rotated elements) and major card containers, creating a subtle softness that prevents the design from feeling austere. **md (0.75rem / 12px)** is applied to buttons and input fields, providing just enough rounding to feel contemporary while maintaining the technical aesthetic. **DEFAULT (0.5rem / 8px)** is used for smal

Components

Action Elements **Button-Primary** (#ee1212 background, {colors.on-primary} text) is reserved for mission-critical CTAs like "Scroll to Land" and error acknowledgments. It uses a 2px solid border in {colors.primary}, 12px horizontal padding, 48px height, and a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition. On hover, the background shifts to {colors.primary-fixed-dim} (#cc0f0f) and the border follows, creating a subtle darkening effect. **Button-Secondary** uses a transparent background with a 2px border in {colors.outline} (#e4b592) and {colors.on-surface} text; on hover, the background becomes {colors.surface-container-high} and the border shifts to {colors.secondary}, creating a warm, inviting state. **Button-Ghost** is a minimal variant with a 1px border at rgba(255, 243, 234, 0.3)

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ee1212) exclusively for mission-critical CTAs and error states—never for decorative elements or secondary actions.
• Do maintain the monochromatic black-and-cream palette as the dominant visual language; use {colors.secondary} and {colors.tertiary} as accent metallics only.
• Do apply negative letter-spacing (-0.1em on body, -0.05em on body-lg) to AkkuratMonoLL to maintain visual density and technical precision.
• Do layer UI elements using z-index and border emphasis rather than drop shadows; when shadows are necessary, use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) or stronger for elevated states.
• Do use FuturaStd exclusively for display and headline content (50px+); reserve AkkuratMonoLL for body, labels, and UI chrome.

**Don't**

• Don't introduce new accent colors or gradients; the palette is intentionally constrained to maintain the retro-futuristic aesthetic.
• Don't use rounded corners larger than 1rem (16px) on major components; excessive rounding undermines the technical precision of the design.
• Don't apply blur or backdrop-filter effects; the design relies on solid borders and transparency to suggest depth, not glassmorphism.
• Don't use system fonts or generic sans-serif fallbacks; always load FuturaStd and AkkuratMonoLL via @font-face to preserve the 1960s space-age character.
• Don't animate color transitions faster than 200ms or slower than 400ms; the interaction timing should feel responsive and mechanical, not organic or playful.