# Design Language for manned.dev ## Aesthetics and Tone manned.dev is a tribute to human spaceflight and manned operations -- the extraordinary endeavor of putting humans in environments where survival depends on engineering precision. The site presents itself as a mission control interface, channeling the visual language of NASA's Johnson Space Center, ESA's control rooms, and the sci-fi HUD displays of films like Gravity and Interstellar. Every element communicates the tension between human fragility and technological capability. The tone is futuristic-cutting-edge yet scholarly-intellectual -- the measured, precise voice of a flight director who conveys critical information with clarity under pressure. No element is decorative without purpose. Every visual choice maps to a function, echoing the engineering philosophy that in manned spaceflight, there are no unnecessary components. ## Layout Motifs and Structure **Primary layout: hud-overlay** with **split-screen** composition dividing telemetry from narrative. The viewport is split into a persistent left sidebar (30%, dark, containing mission telemetry readouts) and a main content area (70%, containing the narrative journey through manned spaceflight history). The telemetry sidebar displays real-time-styled data: mission elapsed time (a running clock), altitude counter, distance from Earth, crew count, and oxygen reserves. These numbers update on scroll position, corresponding to different missions being discussed in the main content. **Spatial relationships**: The main content area uses a timeline-vertical layout where missions are presented chronologically from Vostok 1 (1961) to Artemis (2020s). Each mission entry occupies a fixed height (60-80vh) with a connecting vertical line (2px, midnight blue) on the left edge. Mission markers are styled as circular nodes with mission patches (CSS-drawn geometric approximations). **Navigation**: The telemetry sidebar doubles as navigation. Clicking a mission name in the sidebar scrolls to that mission in the main content. A small orbital path animation (SVG circle with a dot moving along its circumference) indicates current scroll position -- the dot orbits faster as the user scrolls through later, more frequent missions. ## Typography and Palette **Typography** - **Display / Mission Names:** "Orbitron" (Google Fonts) -- a geometric, futuristic sans-serif designed for space-themed applications. Used at 2.5rem-4rem, weight 700. Uppercase with letter-spacing: 0.12em. Its mechanical precision channels spacecraft instrument labels. - **Body / Historical Narrative:** "Barlow" (Google Fonts) -- a slightly rounded grotesque sans-serif inspired by California's highway signage system. Weight 400 for body, 600 for emphasis. Line-height 1.7. 16px size. Its clarity at small sizes makes it ideal for information-dense content. - **Telemetry / Data Readouts:** "Overpass Mono" (Google Fonts) -- a monospace font designed for screen readability with open character forms. Weight 400. Used exclusively in the telemetry sidebar for numerical displays and status readouts. **Color Palette** | Role | Color | Hex | |------|-------|-----| | Deep Space | Near-black with blue | #080c14 | | Console Blue | Mission control blue | #1565c0 | | Telemetry Green | Active data readout | #00e676 | | Caution Amber | Warning state | #ff9100 | | Alert Red | Critical indicator | #ff1744 | | Hull Gray | Structural neutral | #37474f | | Starfield White | Highlight/star color | #eceff1 | The palette mirrors actual mission control color coding: green for nominal, amber for caution, red for alert. Console Blue provides the primary accent for interactive elements. ## Imagery and Motifs **Core Visual Motifs** 1. **Telemetry Counters**: Numerical displays in the sidebar that animate using the counter-animate pattern -- numbers roll upward through digits (CSS @counter-style or JS-driven digit replacement) as the user scrolls between mission entries. Altitude numbers have commas and unit labels (km). The MET (Mission Elapsed Time) clock runs continuously from page load. 2. **Orbital Path SVG**: A thin SVG ellipse (representing orbital trajectory) appears behind mission entries, with a small capsule icon (CSS-drawn rectangle with rounded top) moving along the path. The capsule position corresponds to scroll progress within that mission's section. 3. **Star Field Background**: The Deep Space background contains a static starfield -- 200+ tiny white dots (1-2px) pseudo-randomly positioned via CSS radial-gradient with many color stops. A subtle parallax effect (background-position shifting at 0.3x scroll rate) creates depth. 4. **Communication Waveform**: Between mission sections, a horizontal SVG waveform line (styled as radio communication signal) stretches across the main content area. The waveform animates from flat to active (SVG path d-attribute animation or stroke-dashoffset) when the section boundary enters the viewport. 5. **HUD Corner Brackets**: Content panels in the main area have corner bracket decorations (4 L-shaped borders, one at each corner, with a 4px gap from the content edge) drawn with CSS pseudo-elements. These reference heads-up display framing from cockpit instruments. ## Prompts for Implementation **Storytelling and Narrative Arc** The site opens on complete darkness with a single blinking cursor in the telemetry sidebar. After 1 second, the telemetry display "boots up" -- each data field appears in sequence (stagger animation, 150ms intervals) with Telemetry Green text: MET 00:00:00, ALT 0 km, CREW 0, O2 100%. The main content area then reveals the title "MANNED" in Orbitron font, fading in with Console Blue glow. The narrative begins with Vostok 1. Yuri Gagarin's mission. The telemetry sidebar updates: CREW 1, ALT 327 km. The main content tells the story with historical precision and emotional resonance. As the user scrolls through decades -- Mercury, Gemini, Apollo, Skylab, Space Shuttle, ISS, Artemis -- the telemetry updates continuously. The crew counter increases for multi-person missions. The altitude counter rises for deep space missions. During the Apollo 13 section, the telemetry sidebar shifts to Caution Amber, and the O2 readout drops dramatically (animated countdown), creating visceral tension. The final section shows the future: Mars missions. The telemetry sidebar displays projected values. The distance counter shows millions of kilometers. The MET clock accelerates. The starfield in the background subtly shifts to include a faint red dot (Mars) growing larger. **Animation Priorities** - Telemetry counter roll animation (JS-driven digit replacement with requestAnimationFrame, synced to scroll position) - MET clock continuous timer (setInterval at 1s, formatted HH:MM:SS) - Star field parallax (CSS background-position driven by scroll listener at reduced rate) - Communication waveform path animation (SVG stroke-dashoffset transition, triggered by IntersectionObserver) - Sidebar boot-up stagger (CSS animation-delay on each telemetry field, triggered once on load) - Orbital capsule path motion (SVG animateMotion or JS-driven positioning along SVG path) **Full-screen Narrative Experience**: The telemetry sidebar is position: fixed. The main content scrolls naturally. Each mission section uses min-height: 70vh. **AVOID**: CTA-heavy layouts, pricing blocks, stat-grids disconnected from narrative, card-grid product displays, conventional footer sections. ## Uniqueness Notes **Differentiators:** 1. **Persistent telemetry sidebar synced to scroll narrative**: The live-updating data sidebar that changes values based on scroll position creates a unique dual-channel storytelling mechanism -- text narrates while numbers quantify. 2. **Color-coded mission status states**: Using actual NASA/ESA mission control color coding (green/amber/red) with dynamic state changes tied to the narrative (Apollo 13 going amber) is functionally unique in the batch. 3. **Continuous MET clock**: A real-time clock running from page load creates a persistent sense of ongoing mission, blurring the line between historical content and live experience. 4. **Orbital mechanics as scroll indicator**: Using a capsule moving along an orbital path SVG to indicate scroll progress is a thematically integrated navigation metaphor unlike any other design. **Chosen seed/style:** sci-fi hud overlay stats **Avoided overused patterns:** corporate aesthetic (89%), centered layout (87%), minimal imagery (84%), counter-animate as sole pattern (90%), mysterious-moody as sole tone (96%). Instead used hud-overlay + split-screen + timeline-vertical layout, futuristic-cutting-edge + scholarly-intellectual tone, condensed geometric display with tech-mono telemetry, and midnight-blue + dark-neon palette.