# Design Language for interplanetary.quest ## Aesthetics and Tone interplanetary.quest is **a navigator's logbook for a journey that never resolves into a destination** — a surreal, half-dreamed cartography of the spaces *between* worlds, where the chart itself keeps slipping its meridians. Picture a 1970s NASA mission-planning document that has been left out in a low-gravity rain: the trajectory printouts have buckled, the orbital-element tables have run their ink into long burnt-orange smears, and the precise vector arithmetic is now floating, untethered, through a sky the color of overripe persimmon. The seed lands on a genuinely rare collision: the **surreal aesthetic (only ~1% of the 272-design corpus — among the very rarest)** is paired here not with its usual collage-and-photography company, but with **data-viz imagery (8%)** and **sharp-angles motifs (only ~3%)**. That mismatch is the entire premise. The mainstream surreal sites melt clocks and float eyeballs; interplanetary.quest melts *delta-v budgets*, floats *Hohmann-transfer ellipses*, and lets a porkchop-plot grow soft at its corners like a Dalí pocket-watch made of telemetry. The mood is **dreamy-ethereal (~3% of corpus)** — a tone normally spent on watercolor gardens and ambient spas, here redirected onto launch windows and gravitational slingshots. interplanetary.quest treats orbital mechanics the way a sleepwalker treats a staircase: as something rigorously real that nevertheless bends underfoot. The word *interplanetary* is itself a held breath — it is the adjective for the longest pause in human travel, the months-long coast where the engines are off and there is nothing to do but fall. The whole site is that coast: weightless, lucid, and faintly hallucinatory, with a soundless hum of solar wind under everything. The contradictions are load-bearing. We pair the **softest narrative register (dreamy-ethereal)** with the **hardest geometry on offer (sharp-angles motifs)** — knife-edged isoceles wedges, acute splinters, lattices of 17° and 63° cuts slicing across washes of dissolving orange. We pair **rigorous data-viz** (real Lambert-arc plots, real escape-velocity curves, real synodic-period clocks) with a **slide-reveal pattern (only ~3%)** that uncovers each chart the way a planet slides out from behind another — a hard mask travelling across a soft image. We pair an **asymmetric layout (48%, common)** with a **burnt-orange palette (only ~2%, rare)** and a **rounded-sans typeface (only ~4%, underused)**, so that the bones of the page are off-balance and lopsided like a tumbling asteroid while its skin is warm, soft-cornered, and almost edible. The whole experience is **a flight plan dreamed by the spacecraft itself, mid-coast, half-asleep, doing the math anyway.** The voice is hushed, precise, and a little untethered — a flight director narrating a maneuver to no one in particular. Sentences drift. Vocabulary leans toward orbital mechanics rendered tender: *coast, fall, capture, perihelion, apoapsis, drift, burn, window, slingshot, encounter, occultation*. Numbers appear often and are always real and always slightly haloed. The destination is never named because in an interplanetary transfer the destination is just the place you stop falling, and falling is the only thing this site is sure about. ## Layout Motifs and Structure The page is built on a **deliberately asymmetric, off-axis grid (~48% of corpus uses asymmetric — common, but here pushed past comfort)** whose entire 12-column substrate is **rotated ~3.5° and sheared ~1.2°**, so that every horizontal in the layout is a fraction of a degree off true — the visitor's inner ear knows something is wrong before their eye does. Content sits in **large, lopsided wedges** rather than rectangles: each major section is a clipped polygon (CSS `clip-path` with acute corners), so the page reads as a stack of sharp orbital-arc segments rather than tidy cards. The card-grid format is explicitly refused; nothing here is a tile. The grid is **wedge-dominant across an off-axis 12-column field**, and it intentionally never balances: - **Coast cell (cols 1–8, sheared down-left)** — a near-full-viewport hero: the domain set in a giant rounded-sans display face, the letters drifting apart on a slow parallax as if each glyph were a separate body in a loose formation. Behind them, a live `` flow-field of pale orange particles falling along invisible gravitational streamlines. - **Trajectory cell (cols 7–12, overlapping the hero, rotated +6°)** — a real porkchop plot (Earth-departure C3 vs. arrival v∞) drawn live in burnt-orange contour lines on cream, its corners softened to a dreamy blur while its data stays exact. It slides into view from behind the hero on scroll, slide-reveal style: a hard diagonal mask travels across it like an occulting limb. - **Logbook cell (cols 1–5, sheared the opposite way from the hero)** — long-form dreamy-ethereal prose set in a humanist serif, with oversized rounded-sans drop-caps the size of a fist, narrating the coast in the spacecraft's own drifting voice. - **Maneuver cell (cols 5–12, a tall acute wedge)** — a stacked sequence of small data-viz fragments: a synodic-period clock, an escape-velocity curve, a delta-v ladder, a Hohmann ellipse with its two tangent points glowing. Each fragment slide-reveals independently with a 90ms cascade as it enters the viewport, like instruments coming online one panel at a time. - **Margin splinters (variable, 4–6 of them)** — narrow sharp shards holding single objects: a single star occulted mid-transit, a thruster glyph, a coast-timer counting real months, an asteroid silhouette tumbling on a CSS keyframe, a lone burnt-orange vector arrow pointing at nothing in particular. The whole composition leans. **No section is axis-aligned; no two adjacent wedges share an edge angle.** Where wedges overlap, the upper one is given a soft burnt-orange shadow-bleed and a faint additive glow, so the seams look like the terminator line where one body's shadow falls across another. On scroll, the wedges **slide-reveal** rather than fade — each enters from behind a hard-edged mask travelling along its own acute angle, the way a planet emerges from behind the limb of its moon. Negative space is treated as **the coast itself**: large fields of warm cream-orange wash with nothing in them but a single drifting particle or a faint dotted ballistic arc — and those empty fields are doing the most work on the page, because the coast is the journey. ## Typography and Palette **Fonts (Google Fonts only):** - **Fredoka** — the oversized display face for the domain and major headlines, set at `clamp(7rem, 20vw, 22rem)`, weight 600, with generous letter-spacing so the glyphs can drift apart on parallax. Chosen for its soft, almost-spherical bowls — the letterforms look like little moons in a loose formation. This is the rounded-sans anchor of the whole site. - **Quicksand** — secondary rounded-sans, used for section labels, captions, data-viz axis titles, and UI text, at 0.9375rem with `letter-spacing: 0.08em`. Its geometric-but-soft circles echo orbital arcs. - **Spectral** — long-form dreamy-ethereal body prose, set at 1.1875rem with 1.8 line-height. Italic for the spacecraft's asides, regular for the logbook narration. A serif soft enough to coast in. - **Space Mono** — used very sparingly, only for the real numbers: delta-v figures, C3 values, synodic periods, mission-elapsed-time clocks. Set at 12–13px, all-caps where appropriate, `letter-spacing: 0.14em`. It is the cold instrumentation under the warm dream. - **Gloria Hallelujah** — handwritten margin annotations beside the wedges, used at 1.0625rem in dim umber, e.g. *"engines off here — just falling"* — the navigator's pencil notes in the logbook margin. **Color palette — burnt-orange, on a warm pale substrate (no pure black, anywhere):** - `#F5EDE2` — *Logbook cream*. The substrate. Every wash and every wedge sits on this. Slightly yellowed, like sun-bleached mission-document paper. - `#EAD9C3` — *Coast haze*. One tone darker than the substrate, used for the negative-space fields where the journey is just empty falling. - `#E07A2C` — *Burnt orange*. The signature hue — the color of a persimmon sky and of every primary data-viz contour line. - `#C4561A` — *Scorched amber*. Mid-deep, used for headline fills, the densest porkchop-plot contours, and the terminator-shadow bleeds where wedges overlap. - `#8A3410` — *Ember umber*. The deepest practical tone, reserved for primary display letterforms, drop-caps, and the rare hard-edged sharp-angle splinter. Stands in for black everywhere. - `#F2B563` — *Solar wash*. A bright pale apricot used for glows, hover-states, the lit limb of a planet, and the underline beneath a hovered link. - `#3C5A6E` — *Deep-space slate*. A muted dusty blue-grey used as the rare cool counterpoint — the night side of a body, the shadowed half of an ellipse, the one place the eye can rest from the orange. - `#7E94A0` — *Telemetry haze*. Pale blue-grey for grid-lines, axis ticks, and the dotted ballistic arcs drawn across empty fields. - `#B8443A` — *Re-entry red*. Used at <2% of total ink — only for the single warmest accent moment, a thruster firing, a perihelion marker glowing at its hottest point. The palette is **warm and slightly translucent**: most fills carry a 0.7–0.88 alpha so wedges can layer and bleed via `mix-blend-mode: multiply`, producing the soft shadow-terminator seams. Hard opaque burnt-orange appears only in the sharp-angle splinters and the data-viz contour strokes — everywhere else the color is a dream of color. ## Imagery and Motifs The visual vocabulary of interplanetary.quest is **orbital-mechanics-as-dream**, stitched from three traditions: - **Real astrodynamics data-viz** — porkchop plots, Hohmann transfer ellipses, escape-velocity curves, synodic-period wheels, delta-v budget ladders, Lambert-problem arcs. All drawn live on `` or as inline SVG, with genuine (or genuinely-plausible) numbers. The honesty of the math is what makes the surreal softening land — these are not decorative squiggles, they are flight-planning artifacts that happen to be melting at the corners. - **Surrealist still-life logic in the Dalí / Tanguy lineage** — but applied to instrumentation rather than landscape. A trajectory printout draped over the edge of a wedge like a Dalí watch. A coast-timer whose digits are slightly liquefied. A vector arrow casting a long impossible shadow across cream. Objects float, melt at the corners, and obey a physics that is internally consistent but not ours. - **Sharp-angle constructivist splinters** — acute isoceles wedges, knife-edged shards, lattices of crossing diagonals at 17°, 31°, 63°. These are the *bones* under the dream: every section is clipped to a polygon with at least one corner sharper than 30°, so the soft orange skin is always stretched over something that could cut you. Recurring decorative motifs: a **dotted ballistic arc** that wanders across empty fields, untethered to any planet; a **tumbling-asteroid silhouette** that rotates slowly on a CSS keyframe in the page corners; an **occultation glyph** — a small disc sliding behind a larger one — used as the scroll-progress indicator and as the icon that prefigures every slide-reveal; a **loose formation of soft circles** drifting on parallax behind the hero; and a single **burnt-orange vector arrow** that appears, points somewhere just off-screen, and is never explained. Iconography is rounded-sans-derived: thin strokes, soft terminals, geometric construction — instrument symbols dreamed rather than engineered. ## Prompts for Implementation - **Build it as one continuous interplanetary coast, not a brochure.** The page is a single scroll-driven narrative: launch, coast, mid-course correction, encounter, capture. Each scene is a leaning wedge that **slide-reveals** from behind a hard-edged mask travelling along its own acute angle (CSS `clip-path` animated on scroll, or a `mask-image` with a moving linear gradient) — the planet-emerging-from-behind-a-limb motion. Never use a plain fade; the reveal must always have a hard edge crossing a soft image. - **Tilt the whole world.** Apply a small global `transform: rotate(-3.5deg) skewX(-1.2deg)` (or per-section equivalents) so nothing is axis-true. Adjacent wedges must use *different* clip-path corner angles — no two seams parallel. Where wedges overlap, render a soft `box-shadow`/`filter: drop-shadow` in scorched amber plus a faint additive glow on the lower layer: that seam is a shadow-terminator. - **The data-viz must be real and live.** Hero: a `` flow-field of pale-orange particles falling along invisible gravitational streamlines, re-seeded each load. A real porkchop plot in burnt-orange contour lines (compute or hard-code plausible C3 vs. v∞ contours). A Hohmann ellipse with animated tangent-burn markers. A synodic-period clock with a real period. A delta-v ladder that counts up on `IntersectionObserver`. Soften only the *rendering* (a slight `filter: blur(0.6px)` on the canvas, soft-glow on strokes) — never fake the geometry. - **Numbers everywhere, in Space Mono, slightly haloed.** Delta-v in km/s, C3 in km²/s², coast duration in real months, perihelion distances in AU. Give each numeric label a faint `text-shadow` glow in solar wash. The cold precision is the anchor that lets the rest hallucinate. - **Typography drifts.** Hero glyphs (Fredoka 600) get individual `transform: translateY()` on parallax so the word slowly comes apart and reassembles — a loose formation of bodies. Drop-caps in ember umber, fist-sized. Margin notes in Gloria Hallelujah, dim umber, hand-scrawled beside the wedges. - **Motion is weightless.** Long, slow, eased transitions (1.2–2.4s, gentle cubic-bezier). Tumbling asteroids on infinite slow rotation. Particles falling, never abruptly. A soundless solar-wind hum implied by a barely-moving gradient on the cream background. Honour `prefers-reduced-motion` by replacing reveals with instant clip-state changes and stilling the canvases. - **Palette discipline:** burnt-orange `#E07A2C` and `#C4561A` carry the page; cream `#F5EDE2` and haze `#EAD9C3` are the coast; ember umber `#8A3410` stands in for black everywhere; deep-space slate `#3C5A6E` is the only cool note and appears rarely; re-entry red `#B8443A` is <2% of ink. Layer fills with `mix-blend-mode: multiply` at ~0.7–0.88 alpha for the terminator seams. - **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids of glowing numbers in identical boxes, hero-with-three-feature-cards, testimonial carousels, sign-up bars, generic SaaS bento. There is nothing to buy on this site — only a journey to fall through. - **Bias hard toward full-screen narrative.** Every scene should be able to stand alone as a full-viewport tableau. The visitor should feel they are reading the spacecraft's own logbook mid-coast, not browsing a product page. ## Uniqueness Notes Differentiators from other designs in the corpus: 1. **Surreal aesthetic (~1% — among the three rarest) applied to astrodynamics data-viz, not collage/photography.** No other design melts a porkchop plot like a Dalí watch. The surreal-data-viz pairing is the core invention. 2. **Sharp-angles motifs (~3%) as structural skeleton under a dreamy-ethereal (~3%) skin.** Knife-edged clip-path wedges holding soft warm orange washes — the deliberate hard-bones / soft-skin contradiction is unlike the smooth-blob or sharp-brutalist work elsewhere. 3. **Slide-reveal (~3%) reframed as planetary occultation** — every scene emerges from behind a hard-edged limb-mask travelling along its own acute angle, paired with an occultation-disc scroll indicator. Not the fade-reveal or path-draw most sites lean on. 4. **A globally tilted, sheared, off-axis 12-column grid** — the whole page is ~3.5° off true, so the layout tumbles like an asteroid while feeling structurally rigorous. Distinct from the centered/full-bleed/card-grid majority. 5. **Burnt-orange palette (~2%) with zero pure black** — ember umber `#8A3410` stands in for black, and deep-space slate is the single cool counterpoint. A persimmon-sky mission-document warmth almost nothing else in the corpus uses. 6. **Rounded-sans typography (~4%) as a fleet of soft moons** — Fredoka glyphs drift apart on parallax into loose orbital formation. Soft-cornered type carrying cold real numbers in Space Mono underneath. Chosen seed/style: **aesthetic: surreal, layout: asymmetric, typography: rounded-sans, palette: burnt-orange, patterns: slide-reveal, imagery: data-viz, motifs: sharp-angles, tone: dreamy-ethereal** (closest seeds.json anchor: "surreal dreamscape promo"). Avoided patterns from frequency analysis: shunned the dominant **hand-drawn (96%)** and **glassmorphism (69%)** aesthetics, the **photography (98%)** imagery default, the **full-bleed / card-grid / centered (93/88/85%)** layout trio, the **warm+gradient (98/97%)** palette cliché, the **parallax/cursor-follow/spring/magnetic/stagger (95/88/86/81/79%)** animation pile-up (parallax appears only minimally, for drifting glyphs), the **mono (94%)** typography default (Space Mono is confined to numeric labels only), and the **pastoral-romantic / warm-inviting (35/27%)** tones. Leaned into genuinely underused territory: surreal, sharp-angles, slide-reveal, burnt-orange, rounded-sans, dreamy-ethereal, data-viz.