# Design Language for interplanetary.quest ## Aesthetics and Tone interplanetary.quest embraces a generative aesthetic — algorithmically created visual patterns that evolve and shift, reflecting the vast, procedurally-generated nature of interplanetary space itself. The site presents space exploration as a quest with branching paths and emergent discoveries, using real-time generative art as both decoration and metaphor. Inspiration draws from creative coding platforms like Shadertoy, astronomical data visualizations from ESA/NASA, and the hexagonal tile systems of strategy board games. The tone is grounded-earthy — paradoxically anchoring the cosmic subject matter in practical, tangible language that makes interplanetary concepts feel achievable rather than fantastical. Every background pattern is unique to each page load, generated from mathematical functions that create nebula-like formations and star field distributions. ## Layout Motifs and Structure The layout uses a **hexagonal-honeycomb** architecture — content is organized within hexagonal cells that tile seamlessly, referencing both molecular structures and strategic game boards used in space exploration simulations. **Hexagonal Architecture:** - Primary content hexagons: 320px wide (flat-top orientation), arranged in an offset honeycomb grid - Central hex: Largest cell (480px) containing the primary content/hero - Surrounding hexes: 6 cells around the center, each containing a quest category or feature - Outer ring: Smaller hexes (200px) for secondary content, navigation links, and decorative elements - Background: Generative art canvas filling the viewport behind the hex grid **Section Flow:** 1. **Star Map:** Hexagonal hub with central quest title and radiating category hexes 2. **Mission Briefing:** Expanded hex panel (full-width, hex-shaped clip-path on edges) with quest overview 3. **Navigation Grid:** Full honeycomb layout with all quest paths as clickable hexes 4. **Data Log:** Scrollable section with data-viz cards in hex-shaped containers 5. **Archive:** Footer as a compressed hex grid of links and references ## Typography and Palette **Typography:** - **Headlines:** "Exo 2" (Google Fonts) — geometric sans-serif with sci-fi sensibility at 2rem-3.5rem, weight 700. The slightly extended proportions evoke spacecraft instrument panels. - **Body Text:** "Source Sans 3" (Google Fonts) — clean humanist sans at 1rem, weight 400, line height 1.7. Grounded and readable, countering the cosmic visuals. - **Data/Coordinates:** "Fira Code" (Google Fonts) — monospace for astronomical data, coordinates, and technical notation at 0.85rem, weight 400. - **Hex Labels:** "Exo 2" at 0.75rem, weight 600, uppercase, letter-spacing 0.08em for hexagonal cell category labels. **Color Palette:** - **Deep Space:** #0d1117 — near-black background for the generative canvas - **Nebula Amber:** #d4a847 — warm sepia-gold for primary text and hex borders - **Star White:** #e6e1d6 — warm off-white for body text on dark backgrounds - **Quantum Teal:** #2dd4bf — accent for interactive states and data highlights - **Cosmic Rust:** #92400e — deep amber-brown for secondary accents and grounding elements - **Void Purple:** #2e1065 — deep purple for gradient endpoints in generative backgrounds - **Signal Amber:** #f59e0b — bright amber for active states and notifications - **Dust Gray:** #78716c — warm gray for borders and secondary text ## Imagery and Motifs **Generative Art Backgrounds:** JavaScript canvas-based generative patterns create unique backgrounds on each page load. The algorithm uses Perlin noise to generate nebula-like cloud formations in palette colors at low opacity (0.1-0.2), overlaid with randomly distributed star points (1-2px white circles). **Data Visualization Cards:** Interplanetary data presented as small, elegant charts within hex containers — orbital trajectory curves, distance comparisons as bar elements, and timeline progressions as stepped horizontal lines. All rendered in SVG with palette colors. **Hexagonal Clip Paths:** Content containers use CSS clip-path: polygon() to create hexagonal shapes. Borders are achieved with nested hex elements — outer hex in border color, inner hex in background color with 2px inset. **Layered Depth Effects:** Multiple canvas layers create parallax-like depth: star field at 0.3x scroll, nebula clouds at 0.6x, hex grid at 1.0x. Creates the sense of floating through space while navigating the quest structure. **Card-Flip Interactions:** Hex cells flip on click/hover using CSS 3D transforms (rotateY 180deg), revealing additional content on the reverse face. The flip takes 500ms with ease-in-out timing. ## Prompts for Implementation Build the page as a hexagonal quest map over a generative space background. The hex grid uses CSS Grid with custom polygon clip-paths. Each hex cell is a div with clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) and fixed dimensions. The generative background renders on a fixed-position canvas element (z-index: 0). Use 2D simplex/Perlin noise to create cloud formations: iterate over canvas pixels in blocks of 4px, sample noise at x/y * frequency, and map the noise value to palette colors with alpha proportional to noise intensity. The card-flip effect: each hex has two child divs (front/back) in a preserve-3d container. On hover, the container transitions rotateY from 0 to 180deg. The back face uses backface-visibility: hidden and is pre-rotated 180deg. Star field: scatter 200-400 small white divs (1-3px, border-radius: 50%) with position: fixed at random coordinates, opacity varying from 0.3 to 1.0, with a subtle CSS twinkle animation (opacity pulse, 2-4s random duration). AVOID: CTA-heavy layouts, pricing blocks, stat-grids. Let the generative space environment and hexagonal quest structure create an exploratory, discovery-driven experience. ## Uniqueness Notes 1. **Generative art as living background:** Algorithmically created, unique-per-visit backgrounds make each page load a discovery, embodying the quest theme. 2. **Hexagonal honeycomb as navigation system:** Using hex tiles as both layout structure and interactive navigation creates a board-game-like exploration mechanic. 3. **Card-flip reveal on hex cells:** 3D-transform flipping hexagons add a tactile, game-piece quality to content discovery. 4. **Sepia-nostalgic palette in space context:** The warm, earthy amber tones applied to interplanetary themes create an unexpected "frontier journal" quality. 5. **Data visualization within hex containers:** Astronomical data presented as small SVG charts inside hexagonal frames creates a unique data-storytelling format. **Seed/Style:** aesthetic: generative, layout: hexagonal-honeycomb, typography: sans-grotesk, palette: sepia-nostalgic, patterns: card-flip, imagery: data-viz, motifs: layered-depth, tone: grounded-earthy **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette at surface level (89%), friendly tone (76%). This design uses generative aesthetic, hexagonal-honeycomb layout, sepia-nostalgic palette, and grounded-earthy tone.