# Design Language for interplanetary.quest ## Aesthetics and Tone `interplanetary.quest` is a **street-worn field journal from the edge of the observable universe** — imagine a cosmologist who grew up skating in Osaka, now sending dispatches from an exoplanet research station, annotating their field notes with spray-can glyphs, photocopied zines, and hand-torn washi margins. The aesthetic refuses the binary of "street culture" vs. "academic rigor": both are true simultaneously, and the collision is the whole point. The visual register is **translucent frost over raw concrete**: a scholarly apparatus (sidenotes, citation numerals, running footers, dense paragraph structure) laid beneath multiple layers of frosted acrylic panels, each slightly offset, each catching light from a different direction. The concrete underneath is never hidden — it shows through as texture, as a reminder that the ideas are weighty, material, real. Above the frost, a thin urban scrawl: stenciled orbital coordinates in spray-can caps, torn-zine typography in the headers, hand-painted chalk-white arrows pointing to the margins. **Mood reference:** a zine printed on tracing paper and inserted into a hardbound astrophysics monograph. You can read both layers at once. **Color temperature:** cold — the frost palette runs from #E8F0F4 (ice-surface white) through translucent-blue-gray midtones to near-black structural ink. Pops of urban warmth enter only through the gradient-mesh underlayer, which bleeds amber and saffron through the frost like heat seen through fogged glass. **Tone:** scholarly-intellectual, but carrying street credibility. Long-form sentences with precise vocabulary. No jargon for its own sake, but no simplification either. The voice is a postdoc who grew up on hip-hop mixtapes and can explain orbital mechanics in iambic pentameter if you ask them to. ## Layout Motifs and Structure The layout is a **card-grid of field-journal specimens** — not an e-commerce grid, not a blog roll, but a **specimen cabinet from a xenobiological field survey**, each card a frosted acrylic mount holding one planetary specimen (one idea, one question, one finding). **Grid system:** - 12-column scaffold, 16px gutters at desktop, 12px at tablet - Cards span 4 columns (3-up) at ≥1200px, 6 columns (2-up) at 768–1199px, 12 columns (1-up) below - Cards are NOT equal height: each specimen has its own proportional presence. Some are portrait (ratio 3:4), some landscape (ratio 16:9), some square. The variance is constrained — no card is taller than 2× the shortest card on the same row - Cards float 2px above the page baseline via a persistent `box-shadow: 0 2px 24px rgba(160, 190, 210, 0.18)` — the frost-blue lift **Card interior anatomy (the specimen mount):** - A frosted-glass panel (`backdrop-filter: blur(12px) saturate(140%)`, background `rgba(232, 240, 244, 0.72)`) occupies the full card - Behind each card's frost, the gradient-mesh underlayer is unique per card — not a repeated pattern but a per-card radial mesh of 3–4 color stops (amber, saffron, deep slate-violet) at low opacity (~0.14), so the warmth bleeds through the cold differently for each specimen - Inside the frost: a minimal specimen header (category tag in spray-can caps font, small), the specimen title in display serif, a 2-line abstract, and a torn bottom edge (SVG clip-path that varies per card, never the same tear profile twice) **Page-level structure:** - A fixed narrow header bar (48px tall, full-bleed, `rgba(10, 14, 20, 0.88)` — near-black with slight blue undertone), containing the wordmark left-aligned and a minimal nav right-aligned (3 items maximum) - Below the header: a full-bleed hero panel (100vh) with a large display-type "field log" heading, the gradient-mesh at full expression behind frosted glass, and the first specimen entry already partially visible at the fold — an invitation to scroll - The card grid begins immediately after the hero, with a single 12-column annotation row above it: a stenciled line in caps giving the "survey coordinates" (date, region of sky, mission phase) - No sidebar. No footer-heavy layout. The page ends when the specimens end, with a single terminal annotation in small caps: a running coordinate line **Zoom-focus interaction (the core pattern):** Cards respond to hover with a specific zoom-focus gesture: the hovered card scales to 1.04× while all *other* cards in the same row dim to `opacity: 0.62` and blur to `filter: blur(1.5px)`. This is not a simple hover-zoom — it is a **focus pull**, like a lens shifting depth of field. The hovered card's torn-bottom SVG also re-draws slightly (CSS animation) as if the mount is being lifted. Duration: 280ms ease-out for scale/opacity, 160ms for blur. ## Typography and Palette **Typography — eclectic-hybrid system, four typefaces, each occupying a distinct register:** - **[Playfair Display](https://fonts.google.com/specimen/Playfair+Display)** — specimen titles and the hero heading. High-contrast editorial serif, weight 700, italic. Used at clamp(2.4rem, 5.2vw, 5.6rem) for hero, 1.5rem/22px for card titles. Tracking: -0.5% on display, 0 on card. The scholarly voice made typographic. - **[Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk)** — body text, abstract lines, navigation. A grotesque with geometric influence and just enough personality to carry the street-science tone. Weight 400 for body (17px / 28px line-height), weight 500 for nav labels (13px, uppercase, 8% letter-spacing). - **[Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue)** — category tags and survey-coordinate annotation lines only. All-caps condensed display. Used at 11px with 12% letter-spacing for tags; 13px for the coordinate annotation row. This is the spray-can stencil voice — never used for body, never used for titles. - **[Crimson Pro](https://fonts.google.com/specimen/Crimson+Pro)** — pull-quotes and marginal annotations only. A refined text-roman with beautiful italics. Used at 20px italic for pull-quotes, 13px regular for inline citations. The voice of the monograph, surfacing through the frost. **Palette — translucent-frost with gradient-mesh underlayer warmth:** | Role | Name | Hex | |---|---|---| | Frost surface | Ice white | `#E8F0F4` | | Frost mid-tone | Pewter blue | `#B8CDD8` | | Frost deep | Cold slate | `#7A9BB0` | | Structural ink | Near-black navy | `#0A0E14` | | Header bar | Obsidian veil | `#0F1620` | | Tag / accent | Stencil chalk | `#D4E4EE` | | Mesh warm 1 | Saffron ember | `#E8A44A` | | Mesh warm 2 | Rust amber | `#C46B2A` | | Mesh deep | Slate violet | `#2C2E4A` | | Active state | Ice luminance | `#F2F8FC` | **CSS custom properties:** ``` --frost-surface: rgba(232, 240, 244, 0.72); --frost-border: rgba(184, 205, 216, 0.48); --frost-blur: blur(12px) saturate(140%); --ink: #0A0E14; --mesh-warm: #E8A44A; --mesh-rust: #C46B2A; --mesh-violet: #2C2E4A; ``` The page background is a near-white with a barely-perceptible cool tint: `#F4F8FB`. Cards float on this surface. The gradient-mesh underlayers are positioned absolutely within each card, using `mix-blend-mode: multiply` at `opacity: 0.14` so they barely warm the frost without breaking the cold register. ## Imagery and Motifs **Zero conventional photography.** The corpus uses photography at 90% — this site uses none. **Gradient-mesh underlayers (the primary visual element):** Each card carries its own procedurally-defined radial gradient mesh — not a CSS `radial-gradient` (too simple) but a stacked composition of 3–4 `radial-gradient` calls with different centers and radii, blended via `mix-blend-mode`. The recipe per card: - Circle 1: `radial-gradient(ellipse 80% 60% at 30% 70%, #E8A44A 0%, transparent 65%)` - Circle 2: `radial-gradient(ellipse 60% 80% at 75% 25%, #C46B2A 0%, transparent 55%)` - Circle 3: `radial-gradient(ellipse 100% 40% at 50% 100%, #2C2E4A 0%, transparent 70%)` Each card randomizes the `at X% Y%` values (within defined ranges) and the ellipse proportions slightly, so no two cards share the same mesh topology. The mesh is always the bottom layer, always beneath the frost. **SVG torn-edge motif (card bottom):** The torn-paper aesthetic is implemented as a CSS `clip-path: path()` on each card's bottom edge — a unique SVG path per card that creates an irregular tear with 8–14 control points. The path values are generated at build time into a small data attribute; JS reads them and applies. No two cards have the same tear. The tear exposes the gradient-mesh beneath the frost panel, making it look like the frosted layer was literally peeled at the bottom. **Stencil glyphs (orbital coordinates as decoration):** Behind the hero heading, at very low opacity (6%), large Bebas Neue characters spell out real RA/Dec coordinates: `14h 29m 43s` and `−62° 40′ 46″` — the coordinates of Proxima Centauri. This is not interactive, not explained, just present for those who notice it. It scales with the viewport. **Nature motifs — frost crystallography as structural ornament:** Not leaf-and-branch nature, but nature at the microscale: frost crystal dendrites drawn as fine-weight SVG paths appear at card corners (top-right only), rendered at `#B8CDD8` at 18% opacity. Each crystal is unique — a branching tree structure, 3–5 generations deep, stroke-width 0.6px, no fill. They are static decoration, not animated. They read as scientific illustration of ice crystal growth, which ties both the street aesthetic (graffiti has always borrowed from scientific illustration) and the frost palette together. **Hero background:** The hero panel background is the gradient-mesh at maximum expression: three overlapping ellipses in the warm colors, at opacity 0.22, behind a full-bleed frosted glass panel (`backdrop-filter: blur(24px) saturate(160%)`). The mesh is barely visible — a glow, not a painting. The hero heading renders directly on the frost. ## Prompts for Implementation Build `interplanetary.quest` as **a xenobiological specimen cabinet from a deep-space field survey** — the feeling should be: you have been handed a researcher's frosted-glass cabinet, each drawer a frosted card, each card a specimen mount. You are scrolling through the catalog of what they found. **Architecture:** one HTML document, one CSS file (`styles.css`), one minimal JS module (`interactions.js`). No SPA routing. No infinite scroll. The page is a fixed-length catalog. **Hero section implementation:** - Full viewport height, position: relative - Background: stacked gradient-mesh divs, absolutely positioned, each one an `
` with `mix-blend-mode: multiply; opacity: 0.22` - Over the mesh: a `
` with `backdrop-filter: blur(24px) saturate(160%); background: rgba(244, 248, 251, 0.60)` - On top: heading in Playfair Display 700 italic, `clamp(3.2rem, 7vw, 6.8rem)`, `color: #0A0E14`, line-height 1.08, with a single subtitle line in Space Grotesk 400 at 18px below it - The Proxima Centauri coordinates as a `` positioned absolutely behind the heading, `font-family: 'Bebas Neue'; font-size: clamp(8rem, 18vw, 22rem); opacity: 0.06; letter-spacing: 0.04em; color: #0A0E14; pointer-events: none; user-select: none` - Below the heading, a 1px horizontal rule (`border-top: 1px solid rgba(122, 155, 176, 0.32)`) then a scroll indicator: three words in Bebas Neue 11px, 12% tracking — "SURVEY IN PROGRESS" **Survey-coordinate annotation row:** A `
` spanning 12 columns, 40px tall, `background: transparent; border-bottom: 1px solid rgba(184, 205, 216, 0.28)`. Inside: a single line of Bebas Neue 13px text, left-aligned: `FIELD LOG — SECTOR 14h 29m — SURVEY PHASE III — 2026.05.08`. Right-aligned in Space Grotesk 11px: `N = [card count] SPECIMENS`. This row is static, not interactive. **Card grid implementation:** - CSS Grid: `grid-template-columns: repeat(12, 1fr)`, `gap: 16px` - Each `
` has a `data-aspect` attribute (`portrait`, `landscape`, or `square`) and a `data-mesh` attribute (e.g., `"30,70,75,25,50,100"` — the six center-point values for the three mesh gradients) - Card inner structure: ```html
EXOPLANET ATMOSPHERE

The Spectroscopy of Belonging

On what absorption lines in a planetary spectrum tell us about the probability of rain, longing, and the specific sadness of an uninhabited ocean.

``` - `.card-mesh`: `position: absolute; inset: 0; z-index: 0` — gradient-mesh composition, reads `data-mesh` to position the three radial gradients - `.card-frost`: `position: relative; z-index: 1; backdrop-filter: blur(12px) saturate(140%); background: rgba(232, 240, 244, 0.72); height: 100%; padding: 24px 20px 36px` - `.card-tear`: `position: absolute; bottom: 0; left: 0; right: 0; height: 24px` — uses a unique `clip-path: path(...)` per card, read from a `data-tear` attribute set by JS on page load from a pre-generated pool of 12 tear paths - `.card-crystal`: `position: absolute; top: 12px; right: 14px; z-index: 2` — inline SVG crystal dendrite, one of 8 unique SVG designs cycled via card index **Zoom-focus hover behavior (JS):** ```javascript // interactions.js const grid = document.querySelector('.specimen-grid'); const cards = [...grid.querySelectorAll('.specimen-card')]; grid.addEventListener('mouseover', e => { const card = e.target.closest('.specimen-card'); if (!card) return; const row = getRow(card, cards); // compute which cards share the same grid row cards.forEach(c => { if (row.includes(c) && c !== card) { c.style.opacity = '0.62'; c.style.filter = 'blur(1.5px)'; c.style.transform = 'scale(1.0)'; } else if (c === card) { c.style.transform = 'scale(1.04)'; c.style.filter = 'none'; c.style.opacity = '1'; } }); }); grid.addEventListener('mouseleave', () => { cards.forEach(c => { c.style.opacity = ''; c.style.filter = ''; c.style.transform = ''; }); }); ``` All transitions via `transition: opacity 280ms ease-out, filter 280ms ease-out, transform 280ms ease-out` on `.specimen-card`. **Card content — 9 specimen cards minimum, each with a unique scholarly-street title:** 1. "The Spectroscopy of Belonging" — EXOPLANET ATMOSPHERE — portrait 2. "Orbital Mechanics of Drift" — STELLAR CARTOGRAPHY — landscape 3. "What the Ice Shelf Remembers" — CRYOSPHERE SURVEY — square 4. "A Taxonomy of Silences (Interstellar Medium)" — VOID MAPPING — portrait 5. "Gravity as Annotation" — MASS DISTRIBUTION — landscape 6. "The Half-Life of a Bright Idea" — ISOTOPE SURVEY — square 7. "Magnetosphere as Calligraphy" — FIELD GEOMETRY — portrait 8. "On the Patience of Light" — PHOTON CENSUS — landscape 9. "Frost as First Draft" — SURFACE CHEMISTRY — square **Typography loading:** ```html ``` **AVOID in implementation:** - CTA buttons, pricing blocks, stat counters, testimonial sections - Any full-bleed photography - Infinite scroll or pagination - Sidebar navigation - Footer with multiple columns of links ## Uniqueness Notes **Chosen seed (per assignment):** - aesthetic: **street-style** - layout: **card-grid** - typography: **eclectic-hybrid** - palette: **translucent-frost** - patterns: **zoom-focus** - imagery: **gradient-mesh** - motifs: **nature** - tone: **scholarly-intellectual** **3+ differentiators from the existing corpus:** 1. **Street-style at 1% of corpus — here combined with scholarly-intellectual tone, creating a collision that exists nowhere in the registry.** The corpus treats street aesthetics as purely visual noise: graffiti fonts, loud color, raw brutalism. This site uses street credibility as a *voice register* layered over a meticulous specimen-cabinet structure. The Bebas Neue stencil tag + Playfair Display scholarly heading coexist on every card — this is the differentiator. 2. **Gradient-mesh as warmth-beneath-frost — a structural metaphor, not decoration.** The gradient-mesh underlayer is almost invisible through the frost, but its presence is felt as warmth bleeding through cold. This inverts the typical gradient-mesh usage in the corpus (which uses meshes at full saturation as hero backgrounds). Here the mesh is a whisper, not a shout. And it's per-card, procedurally varied, making each specimen thermally unique. 3. **Zoom-focus depth-of-field hover — not a standard card hover.** At 6% of corpus, card-grid uses standard hover animations (scale, shadow lift, border reveal). This site implements a camera focus pull: the hovered card snaps to focus while its row-siblings go to 62% opacity and 1.5px blur, simulating a macro-lens shallow depth of field. The framing metaphor (specimen photography, field survey) motivates the interaction at a narrative level. 4. **Frost crystal dendrites as nature motif — microscale nature, not landscape.** The motif brief says "nature" and 60%+ of the corpus interprets this as leaves, mountains, waves, or forests. Here nature enters as frost crystallography: SVG dendritic ice crystals at card corners, scientifically accurate in their branching topology (3–5 generation recursive trees), rendered at 18% opacity in the frost midtone. It ties the palette name, the street aesthetic (scientific illustration has always informed graffiti art), and the scholarly tone into a single visual token. 5. **Zero photography in a 90%-photography corpus.** The decision is not just stylistic but structural: replacing photography with procedural gradient-mesh means every visual element is a deliberate composition, not a sourced asset. The result is a site that looks built rather than assembled, which is consistent with the field-journal / specimen-cabinet metaphor. **Avoided overused patterns:** - scroll-triggered animations (37% of corpus) — replaced by zoom-focus hover - photography (90% of corpus) — replaced by gradient-mesh - dark-mode (14% of corpus) — site is light/frost-dominant with near-black ink only for type