# Design Language for interplanetary.biz

## Aesthetics and Tone

`interplanetary.biz` is a **submerged cosmological library** — an institution that exists simultaneously at the bottom of an alien ocean and at the edge of known space. Picture a research compendium printed on vellum, then pressed between glass plates and sunk into phosphorescent brine for a century. The pages survived. The ink bled slightly, softening every serif into something half-fossil, half-hologram. The reading lamps are still on — their light diffuses through columns of rising micro-bubbles, each one a lens that briefly magnifies whatever text it floats past before popping.

Anti-design here is not destruction — it is deliberate reversal of convention. Where normal sites foreground clarity, this site foregrounds texture and friction. Where normal sites separate navigation from content, this site allows the two to colonize each other. Where normal sites are frictionlessly fast, this site is intentionally *weighted* — you feel the resistance of the medium (water, parchment, time) in every transition. The anti-design logic is always serving a scholarly-futuristic ambition: this is what academic publishing looks like after humanity has left Earth.

**Tone:** futuristic-cutting-edge meets book-scholarly. Cold-water research. The language of journals, footnotes, cross-references, and catalogs — but written for an audience who reads on substations orbiting Enceladus.

**Mood keywords:** saline luminescence, pressurized parchment, biblio-submersion, off-kilter taxonomy, paleofuturism, depth gradient.

---

## Layout Motifs and Structure

The layout is **modular-blocks** — but the modules are not clean cards. They are **manuscript folios**: unequal, slightly rotated, with visible fold-creases expressed as thin hairline dividers at irregular angles. Each folio block is a self-contained unit of content, but folios bleed across each other's margins in controlled ways — pull-quotes from one block float into the whitespace of the adjacent block, connected by a thread-fine dashed line that traces a trajectory across the page like a bubble rising toward the surface.

**Grid System:**
- Base: 12-column grid, 80px gutters on desktop, 24px on mobile.
- Blocks occupy 4, 6, 7, 8, or 12 columns — never identical widths on the same row; monotony is forbidden.
- Blocks are vertically misaligned by design: a 6-col block will sit 48px lower than its 4-col neighbor, creating a staggered folio stack.
- Horizontal dividers are broken — they are drawn at 89% width and positioned left-of-center or right-of-center randomly, never spanning the full viewport.

**Spatial Relationships:**
- Generous vertical rhythm: 96px between folio blocks.
- Within a block: tight, dense typography — 1.45 line-height for body, minimal paragraph spacing, like a typeset journal page.
- Margins carry content: footnote-style annotations appear in the left margin at 60% opacity, set at 80% of body size, rotated –90° on desktop.
- A persistent **depth-rail** runs down the left viewport edge — a 2px column of water-blue color that slowly darkens top-to-bottom, simulating ocean depth. It shows current scroll position as a bubble marker.

**Navigation:**
- No conventional navbar. Instead: a **bibliographic header** — two lines of small-caps text running across the top reading `interplanetary.biz — General Catalog — Issue Ω-17`. This is the site's only persistent UI.
- Page sections are accessed via a **footnote index**: a right-edge column of numbered superscripts (`¹ ² ³ ⁴`) that, when hovered, expand into one-line section descriptions, and when clicked, execute a slide-reveal transition to that section.

---

## Typography and Palette

**Type System (all Google Fonts):**

- **Primary Display & Headings — `Playfair Display`** (serif). Used for H1, H2, and block titles. Weight 700 italic for H1 (the catalog title), weight 400 regular for H2 (folio headers). Set at optical sizes: H1 at 72px / 0.94 line-height with –0.02em letter-spacing; H2 at 36px / 1.1 line-height. The slight swash quality of Playfair reads as both classical printing-press serif and slightly alien at large sizes — this is the intended effect.
- **Body & Running Text — `EB Garamond`** (serif). The primary reading font. Weight 400 normal, size 17px / 1.6 line-height on desktop, 16px on mobile. Garamond at this size has the exact texture of typeset academic paper — dense, authoritative, time-worn. The italic cut (weight 400 italic) is used for species names, foreign phrases, and technical designations in the scientific-catalog sections.
- **Captions, Footnotes, Indexes — `Cormorant Garamond`** (serif). Weight 300 italic at 13px / 1.5 line-height. Used in margin annotations, image captions, and the footnote navigation column. Its extreme-contrast thin strokes give it a quality of engraving — a footnote that looks like it was etched.
- **Data Labels, Coordinates, Catalog Numbers — `Space Mono`** (monospace). Weight 400 at 12px / 1.4 line-height. Used for coordinates, cross-reference codes (`IPB-Ω-17:443b`), and any numeric data. Space Mono's retro-technical character creates the exact tension the design needs: classical serif text interrupted by machine coordinates.

**Palette (creamy-pastel with depth):**
- `#F5F0E8` — Vellum: the primary background. Off-white with a slight warm yellow cast, like aged paper held to light. This is the page.
- `#EDE8DC` — Pressed Leaf: secondary block background, slightly cooler and more gray. Used for alternate folio blocks to give the stack visual separation.
- `#C8DDD6` — Aquifer Mist: a desaturated, muted seafoam. Used for the depth-rail, bubble SVGs, hovered footnote expansions, and any decorative waterline elements.
- `#A8C4BF` — Benthic Calm: deeper muted teal. Used for borders on active/focused elements, the bubble marker on the depth-rail, and link underlines.
- `#7B9E9A` — Abyssal Reed: cool muted jade-green. Used for H2 and caption text, providing the "wet ink" quality without going full dark.
- `#3D4B4A` — Deep Sill: very dark desaturated teal, nearly black. Used for H1, body text, and the bibliographic header. Not pure black — the teal undertone keeps it marine.
- `#E8D5C0` — Amber Wash: warm cream with a faint orange cast. Used for pull-quote backgrounds and call-to-attention blocks, like a highlighter mark on old paper.
- `#B5A898` — Sediment: muted warm gray. Used for decorative fold-crease lines, margin rules, and inactive footnote superscripts.

---

## Imagery and Motifs

**Water Bubbles as Primary Visual Language:**

The site's entire decorative system is built from **micro-bubbles** — SVG circles rendered with a specific optical formula: a white specular highlight at upper-left (4px filled circle at 90% opacity), a thin rim stroke in `#A8C4BF` at 0.8px, a radial gradient fill from `rgba(200, 221, 214, 0.25)` at center to `rgba(200, 221, 214, 0.05)` at edge. These bubbles are not background texture — they are **semantic objects**:

- **Navigation bubbles**: the footnote-index superscripts are each encircled by a 28px bubble that slowly drifts 3px upward and back on a 4-second ease loop.
- **Section-transition bubbles**: when a slide-reveal transition fires, a chain of 12–20 bubbles rises from the bottom of the departing section, each one carrying a fragment of the next section's text briefly visible before the bubble pops at the top edge.
- **Marginalia bubbles**: in the left margin, extremely small bubbles (6–10px diameter) drift upward continuously at 0.4px/frame, created and destroyed in a CSS animation loop. These are pure atmosphere — they simulate the column of water above.
- **Bubble constellation**: the hero block contains a 100svh panel where 60 bubbles of varying sizes (8px–48px) form a slow-drifting arrangement. Each bubble is associated with one keyword from the site's catalog (visible on hover as a Cormorant Garamond label inside the bubble).

**Book-Scholarly Motifs:**

The page carries the visual language of an old academic monograph throughout:
- **Folio numbers**: each modular block has a small folio number in the upper-outer corner, set in Space Mono at 10px: `[fol. 17]`, `[fol. 18]` etc.
- **Running headers**: at the top of each block, a thin small-caps line in Cormorant Garamond reads the chapter-equivalent. Like a book's running head.
- **Cross-reference threads**: dashed hairline rules (`border: 1px dashed #B5A898`) connect a term in one block to its definition block elsewhere on the page via a curved SVG path drawn at page-load.
- **Marginalia**: left-margin annotations in Cormorant Garamond italic, rotated –90° on desktop, give the page a manuscript quality. On mobile these collapse into a horizontal footnote strip at the bottom of the block.
- **Taxonomy labels**: a recurring decorative element is a classification label — a small rectangular tag with `Species:`, `Class:`, `Order:` fields filled with fictional interplanetary taxonomy, rendered as if stamped in faint ink. These appear in the bottom-left corner of select folio blocks.

**Futuristic Intrusions:**

The scholarly base is interrupted by futuristic elements that feel natural because the setting is far-future:
- **Coordinate overlays**: every primary image or decorative panel has a faint coordinate grid (0.3px, `rgba(61,75,74,0.08)`) with labeled axes in Space Mono at 9px.
- **Signal-decay glyphs**: decorative characters drawn from mathematical and IPA symbol sets (∮ ≋ ⊗ ⊞ ∿) appear at section breaks, set large (48px) in Cormorant Garamond at 15% opacity.
- **Phosphorescence pulse**: key terms in the body copy glow faintly on hover — a `text-shadow: 0 0 12px rgba(168, 196, 191, 0.7)` that fades in over 600ms, as if the word is bioluminescent.

---

## Prompts for Implementation

Build `interplanetary.biz` as a **scrolling academic catalog for an institution that operates between worlds**. The visitor reads it the way a researcher reads a field guide — they are looking for something specific and will tolerate density, footnotes, and cross-references because the content warrants them.

**The Anti-Design Logic — implement this first:**
Before placing any content, establish the deliberate rule-breaks:
1. The grid is 12 columns but blocks refuse regular subdivision — hardcode block widths at `4-col`, `7-col`, `6-col`, `5-col` in deliberate asymmetry.
2. Typography has hierarchy but ignores vertical rhythm grids — H2s can sit 20px lower than expected, creating the folio-stack effect.
3. The navigation is hidden unless you know to look for the right-edge footnote column — anti-UX as aesthetic commitment.
4. Every horizontal rule is broken (89% width, off-center).

**The Slide-Reveal Pattern — implement with precision:**
The `slide-reveal` pattern is the site's primary transition mechanism. It must be built as a full-section reveal, not a card animation:
- A CSS mask (`clip-path: inset(0 100% 0 0)`) on the incoming section, transitioning to `inset(0 0% 0 0)` over 800ms with `cubic-bezier(0.16, 1, 0.3, 1)`.
- The wipe direction is always left-to-right — a page being turned.
- During the wipe, the bubble-chain animation fires: 12 bubbles rise through the `clip-path` reveal line as it passes, using `position: fixed` and JS-calculated x-positions along the wipe front.
- The incoming section's text begins at `opacity: 0` and reaches `opacity: 1` at 400ms into the 800ms wipe — so text fades in behind the reveal, not with it.

**Section Macro Structure (top to bottom):**

1. **Bibliographic Header (fixed, 40px tall)**
   - Full-width bar in `#EDE8DC`. 
   - Left: `INTERPLANETARY.BIZ` in Space Mono 11px tracked +0.15em.
   - Center: `General Catalog — Issue Ω-17` in Cormorant Garamond 12px italic.
   - Right: date in Space Mono 11px, updating in real-time.
   - Bottom edge: a 1px rule in `#B5A898`, broken at 89% width, shifted 5% from left.

2. **Hero Folio (100svh)**
   - Background: `#F5F0E8` with the bubble constellation SVG layer (60 drifting bubbles, `z-index: 1`).
   - Above bubbles: a large-format title `interplanetary.biz` in Playfair Display 72px italic weight 700, set in `#3D4B4A`, positioned at 38% from top, 8% from left — deliberately not centered.
   - Below title: a subtitle in EB Garamond 18px italic: *"A perpetually updated catalog of interplanetary business practice, taxonomy, and correspondence."*
   - Lower right: a taxonomy stamp (`Class: Mercantile / Order: Interstellar / Species: Active`) in a 160×60px bordered box.
   - Depth-rail: the 2px left-edge column in `#C8DDD6` fades in after 1200ms.

3. **Folio Block Row 1: 4-col + 7-col**
   - 4-col: `#F5F0E8` background. Dense EB Garamond body text. Left margin annotation rotated –90°.
   - 7-col: `#EDE8DC` background. Contains the first cross-reference thread origin.
   - Shared row has 96px top padding, 48px bottom padding.

4. **Full-Width Interstitial (pulled quote)**
   - 12-col, `#E8D5C0` background. A single EB Garamond pull-quote in 28px weight 400, centered but with the left margin set to 15% (not 50%) — offset on purpose.
   - A horizontal dashed rule below, 89% width, right-aligned.

5. **Folio Block Row 2: 6-col + 6-col (staggered: right block 48px lower)**
   - Left block: contains a bubble constellation panel (mini, 280×320px), 30 small bubbles with hover labels.
   - Right block: dense taxonomic list in EB Garamond. A taxonomy stamp in the lower-left corner.

6. **Slide-Reveal Section Gate**
   - A full-width trigger that fires the slide-reveal transition on scroll-enter (IntersectionObserver at 20% threshold).
   - The bubble-chain fires as the wipe crosses. The next section slides in.

7. **Folio Block Row 3: 8-col + 4-col**
   - 8-col: primary text. Contains phosphorescent-hover terms.
   - 4-col: running footnotes — a numbered list in Cormorant Garamond 13px.

8. **Catalog Index Section (full-width)**
   - A grid of 20 catalog entries, each 2 lines: a Space Mono catalog number + an EB Garamond description. Like a bibliography.
   - Each entry has a small navigation bubble (28px, drifting) to the left of the number.

9. **Footer Folio**
   - `#EDE8DC` background. Left: folio number `[fol. ∞]`. Center: `interplanetary.biz — Issue Ω-17 — End of Catalog`. Right: signal-decay glyphs in a row.
   - The depth-rail terminates here in a slightly larger bubble (16px), marking ocean floor.

**Animation Palette:**
- Bubble drift: `transform: translateY()` from 0 to –3px, `duration: 4s`, `timing: ease-in-out`, `iteration: infinite`, `direction: alternate`. Staggered with `animation-delay` per bubble.
- Phosphorescence hover: `text-shadow` fade, `transition: text-shadow 600ms ease`.
- Slide-reveal: `clip-path` + `opacity`, 800ms, `cubic-bezier(0.16, 1, 0.3, 1)`.
- Footnote expand: `max-height: 0` to `max-height: 80px`, `overflow: hidden`, `transition: 300ms ease`.
- Cross-reference SVG threads: drawn with `stroke-dashoffset` animation on page-load, 1200ms, staggered 200ms per thread.

**AVOID:**
- CTA buttons with high-contrast fill colors
- Pricing tables or stat grids
- Navigation hamburger menus
- Hero sections with centered headings and centered subheadings
- Cards with rounded corners and drop shadows (this is parchment, not glass)
- Any layout that could be described as "clean and minimal" — it must be dense and textured

---

## Uniqueness Notes

**Chosen Seed (per assignment):**
aesthetic: anti-design, layout: modular-blocks, typography: serif-revival, palette: creamy-pastel, patterns: slide-reveal, imagery: water-bubbles, motifs: book-scholarly, tone: futuristic-cutting-edge

**Differentiators from existing registry designs:**

1. **The only design where anti-design serves an academic premise.** Anti-design in this registry almost always means noise, disruption, or visual aggression (e.g., raw color clashes, broken type). `interplanetary.biz` is the first site where the anti-design logic is *bibliographic*: rules are broken because manuscript pages break rules — they are folded, annotated, stained, cross-referenced into each other. The visual friction is scholarly rather than aggressive.

2. **Slide-reveal as a page-turn metaphor, not a generic wipe.** The frequency report shows `slide-reveal` at 1% — nearly unused in the registry. This design makes it the primary interaction primitive and gives it specific semantic meaning: turning the page of a catalog. The bubble-chain rising through the wipe front is unique to this implementation and ties the transition physically to the site's aquatic imagery.

3. **Water-bubbles as semantic objects, not decoration.** The registry's imagery vocabulary uses bubbles in the `bubble-playful` category (4%), which is decorative background texture. `interplanetary.biz` makes each bubble a functional element: navigation bubbles, transition bubbles, marginalia bubbles, and keyword-carrying constellation bubbles. The bubble is both an ocean metaphor and a content delivery mechanism.

4. **Full triple-serif typographic stack with no sans fallback.** All four typefaces (Playfair Display, EB Garamond, Cormorant Garamond, Space Mono) are either serif or monospace. The registry data shows ~83% mono presence but no design that runs three serif cuts simultaneously. The visual consistency of an all-serif page with monospace interruptions creates a texture that is genuinely unlike anything else in the registry.

5. **The creamy-pastel palette deployed at ocean depth, not surface brightness.** The registry uses `creamy-pastel` minimally. This design takes the palette's warm neutrals and cools them with aquifer blues and abyssal teals, creating a palette that reads simultaneously as parchment and as deep water. The result is a color system that has never appeared in the registry: warm-cool balance across a single page where warmth = land/paper and cool = depth/sea.

**Patterns explicitly avoided based on frequency analysis:**
- `vintage` motif (50% usage) — avoided entirely; the scholarly motif is the alternative
- `mono` typography as dominant face (83% usage) — used only for data/coordinates
- `typewriter-effect` (5% pattern) — not used
- `underline-draw` (5% pattern) — not used
- `tech` motif (18%) — futuristic elements are scholarly, not generically technical
<!-- DESIGN STAMP
  timestamp: 2026-05-08T11:15:08
  seed: seed
  aesthetic: `interplanetary.biz` is a **submerged cosmological library** — an institution th...
  content_hash: 737d74294d1e
-->