# Design Language for longitude.quest ## Aesthetics and Tone longitude.quest is a **neon meridian instrument** — a retro-futuristic navigation console that treats the act of finding one's position on Earth as a cinematic, high-stakes mission. The visual language borrows from 1970s analog spacecraft telemetry panels, Soviet-era space program propaganda posters, and the CRT phosphor glow of early GPS prototype hardware — all remixed through a dark neon lens where the ocean of space meets the ocean of Earth. The mood is **bold-confident and slightly menacing** — like a ship's navigator who hasn't slept in 48 hours but knows exactly where they are. Every element on screen communicates precision, velocity, and mastery of coordinates. The site does not ask permission; it declares position. Retro-futuristic vocabulary: phosphor green hairlines on near-black, amber readout numerals, magenta longitude meridians arcing across globe projections, the mechanical click-feel of toggle switches and rotating dials. Textures reference aged film negative, circuit board traces, and the static noise of old cathode-ray displays — but the motion is contemporary: smooth GPU-interpolated and cursor-reactive. Tone vocabulary: **authoritative, precise, kinetic, slightly alien**. Copy voice is telegraphic — short declarative bursts, like cockpit callouts. No soft marketing language. --- ## Layout Motifs and Structure The page is structured as **five full-viewport parallax sections**, each representing a different layer of depth in a navigation system — from the satellite orbital layer down to surface coordinates. Scrolling is not browsing; it is *descending through altitude bands*. **Structural schema (top → bottom):** 1. **ORBITAL LAYER (100svh hero)** — full-screen rotating wireframe globe, longitude lines pulsing in phosphor green. Site name "LONGITUDE.QUEST" rendered in stacked display-bold condensed caps, right-aligned, tracking +0.15em, with a blinking cursor appended. Background: near-black with subtle CRT scanline overlay (CSS repeating-linear-gradient, 2px strips, 3% opacity). Parallax: the globe rotates at 0.3× scroll velocity. 2. **MERIDIAN BAND (100svh)** — a dramatic diagonal composition. A single longitude line bisects the viewport at ~35° from vertical, rendered as a 2px glowing neon line (magenta, 0 box-shadow blur 20px). Left panel: dense amber monospace readout (coordinates, timestamps, signal data — all decorative). Right panel: hero copy in display-bold condensed, white on black. Cursor-follow: the meridian line bends slightly toward mouse position, like a compass needle finding magnetic north. 3. **SIGNAL DEPTH (100svh)** — concentric sonar-ring animation, phosphor green rings expanding outward from center point. Layered parallax: outer rings scroll at 0.6×, inner rings at 0.9×, center dot fixed. This section is pure atmosphere — no text except a single coordinate pair in amber monospace at lower-left. 4. **NAVIGATION GRID (100svh)** — a brutalist grid of coordinate tiles, each tile a dark card with a glowing border. Tiles animate on hover: border brightens to full neon, background shifts to deep indigo, and a small SVG globe-slice diagram appears. On desktop: 4-column grid. On mobile: 2-column. Tiles are staggered-entry animated (Intersection Observer, 80ms stagger delay per tile). 5. **GROUND ZERO (100svh footer-section)** — the terminal. Full-width amber-on-black monospace terminal aesthetic. Blinking block cursor. Coordinates display in large display type. Background: noise texture animated (CSS animation flickering the grain pattern at 8fps to mimic CRT static). **Spatial logic:** - No centered layouts — everything is asymmetrically weighted left-heavy or right-heavy - Grid lines (1px, 8% opacity phosphor green) run across the full viewport as a persistent background layer — like graph paper under all content - All horizontal rhythm snaps to a 8-column grid with 24px gutters - Vertical rhythm: 8px base unit, all spacing multiples of 8 --- ## Typography and Palette **Typography (Google Fonts only):** - **Primary display / headlines:** `Bebas Neue` — ultra-condensed all-caps, weight 400 (only weight available). Used for all large display text: site name, section labels, coordinate displays in hero. Set at `clamp(3.5rem, 9vw, 9rem)`, tracking `+0.08em`. The compressed geometry reads as instrument panel stenciling. - **Secondary display / subheads:** `Barlow Condensed` — weight 700 for section titles, weight 400 for supporting labels. Set at `clamp(1rem, 2.5vw, 2rem)`, all caps, tracking `+0.12em`. Bridges Bebas Neue's extreme compression with body copy. - **Monospace readouts:** `JetBrains Mono` — weight 400 for coordinate data, terminal lines, amber readout numbers. Set at `0.85rem` / `1.6` line-height. The monospace face reinforces the instrument panel / terminal aesthetic throughout. Used for all data-like text. - **Body copy (rare):** `Inter` — weight 300 only, used sparingly for any prose paragraph (maximum 2–3 short paragraphs across the entire page). Set at `1rem` / `1.7` line-height, color `rgba(224,224,240,0.75)` for deliberate low-contrast — body copy is atmosphere, not foreground. **Color Palette:** | Role | Name | Hex | |---|---|---| | Background (deepest) | Void Black | `#080810` | | Background (elevated) | Deep Space | `#0d0d1f` | | Background (card) | Dark Indigo Night | `#111128` | | Phosphor Primary | Neon Green | `#39ff6a` | | Phosphor Glow | Green Aura | `#00ff4433` (32% alpha) | | Meridian Line | Neon Magenta | `#ff2d9b` | | Readout Amber | Signal Amber | `#ffb700` | | Grid Lines | Ghost Green | `rgba(57, 255, 106, 0.08)` | | Body Text | Pale Starlight | `#e0e0f0` | | Accent Highlight | Electric Cyan | `#00f0ff` | | Border Active | Hot White | `#ffffff` | **Glow recipe (CSS):** Neon text elements use `text-shadow: 0 0 8px #39ff6a, 0 0 20px #39ff6a44`. Neon border elements use `box-shadow: 0 0 6px #39ff6a, inset 0 0 6px #39ff6a22`. --- ## Imagery and Motifs **Imagery is mixed-media** — combining three distinct visual registers: 1. **SVG wireframe globes** — hand-drawn-feel wireframe sphere projections rendered entirely in SVG. Longitude and latitude lines as 0.8px strokes in phosphor green at varying opacities (primary meridians 60%, minor grid 20%). No fills. The globes rotate via CSS animation (`transform: rotateY`) and are interactive: cursor position drives tilt via JS `perspective` transform. No photography of real globes — all wireframe geometry only. 2. **Raster noise textures** — CRT static grain: a single repeating PNG tile (64×64px, grayscale noise at 12% opacity) overlays all sections via CSS `mix-blend-mode: screen`. Creates the analog warmth of aged display hardware without breaking the dark color scheme. The grain animates: a `@keyframes` animation cycles through 4 offset positions at 8fps, simulating cathode-ray flicker. 3. **Abstract coordinate geometry** — decorative SVG path elements: meridian arcs, radial coordinate crosshairs, compass rose fragments, signal-propagation rings. These are drawn as pure geometry — no illustration, no icons. They appear as background decoration at low opacity (10–25%) and as foreground hero elements at full intensity. The crosshair symbol (`⊕`) rendered in Bebas Neue at 8rem is the site's primary visual motif — a human-readable coordinate marker. **Abstract-tech motifs vocabulary:** - Longitude/latitude grid overlays (always visible, always receding into background) - Blinking cursor `█` rendered in amber or green, animated via CSS `opacity` keyframes (0→1 at 50% interval, 500ms duration, step-start easing) - Signal propagation rings (SVG `` with `stroke-dasharray` animation) - Radial compass graduation marks at 5° intervals - Binary/octal number fragments at extreme low opacity as background texture (monospace, 6px, 4% opacity) --- ## Prompts for Implementation Build longitude.quest as a **cinematic descent through atmospheric layers** — from orbital altitude to ground zero. The visitor does not scroll a page; they *fall through strata*. Each of the five sections is a different altitude band with its own visual register and parallax behavior. **Implementation architecture:** The page is a single `index.html` with no frameworks — vanilla JS, CSS custom properties, and inline SVG. All parallax is driven by a single `scroll` event listener that calculates `scrollProgress` (0→1) and distributes it via CSS variables (`--scroll`, `--section-progress`) to each section. **Section-by-section implementation guidance:** **Section 1 — ORBITAL LAYER:** - Full-screen SVG globe rendered at `100vw × 100vh`. Use `viewBox="-50 -50 100 100"` with a set of SVG `` elements for longitude lines (15° spacing = 24 paths) and latitude lines (15° spacing = 12 paths). - All longitude paths drawn as cubic bezier curves approximating great-circle arcs on the projection. - CSS animation: `@keyframes globeRotate { from { transform: rotateY(0deg) } to { transform: rotateY(360deg) } }` on a `transform-style: preserve-3d` wrapper, duration `40s linear infinite`. - On scroll, reduce rotation speed to zero at section end (multiply animation `animation-play-rate` by `1 - scrollProgress`). - Scanline overlay: `::after` pseudo-element with `background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px)`. - Site name: `position: absolute; right: 8vw; top: 50%; transform: translateY(-50%)`. Stack "LONGITUDE" on line 1, ".QUEST" on line 2, both Bebas Neue, neon green, glowing text-shadow. **Section 2 — MERIDIAN BAND:** - The diagonal meridian line is an SVG `` element spanning full viewport diagonally, rendered via absolute-positioned SVG overlay. - Cursor-follow: add a `mousemove` listener. Compute cursor angle relative to line center. Animate line endpoints via CSS variables `--cx` and `--cy` with `transform: rotate(calc(var(--cursor-angle) * 0.15))` — a subtle 15% of full cursor angle. - Left panel amber readout: a `
` block of monospace coordinate text, `JetBrains Mono`, `#ffb700`, 0.8rem. Content: fake but believable telemetry (`N 34° 24' 18.92"`, `E 119° 41' 02.77"`, `ALT: 4,832 m`, etc.).
- Parallax: `transform: translateY(calc(var(--scroll) * -40px))` on the left panel, `translateY(calc(var(--scroll) * -80px))` on the right panel — different rates create depth separation.

**Section 3 — SIGNAL DEPTH:**
- Pure SVG animation: five concentric `` elements centered at viewport center.
- `stroke-dasharray` animated from `0, circumference` to `circumference, 0` on staggered `animation-delay` values (0ms, 400ms, 800ms, 1200ms, 1600ms).
- Stroke color: `#39ff6a`. Stroke width: 1px. Fill: none.
- On scroll-entry (Intersection Observer), trigger the animation. Rings expand outward once and then hold at full size, pulsing at 3s interval.
- Coordinate pair in lower-left: `JetBrains Mono`, amber, `0.75rem`, `position: absolute; bottom: 5vh; left: 5vw`.
- Parallax: entire SVG canvas `transform: scale(calc(1 + var(--section-progress) * 0.12))` — the rings slowly zoom in as user scrolls through.

**Section 4 — NAVIGATION GRID:**
- CSS Grid: `grid-template-columns: repeat(4, 1fr)` on desktop, `repeat(2, 1fr)` on mobile.
- Each card: `background: #111128; border: 1px solid rgba(57,255,106,0.25); border-radius: 4px; padding: 24px`.
- On hover: `border-color: #39ff6a; box-shadow: 0 0 16px #39ff6a44`. Transition `200ms cubic-bezier(0.25, 0.46, 0.45, 0.94)`.
- Each card contains: a coordinate label (Bebas Neue, neon green, 2rem), a short descriptor (Barlow Condensed 700, white, 0.9rem all-caps), a mini SVG globe-slice diagram (50×50px, wireframe, static), and a one-line monospace data point (JetBrains Mono, amber).
- Staggered entry via Intersection Observer: add class `visible` on entry, CSS transition `opacity 0s→1`, `transform: translateY(20px)→translateY(0)`, `transition-delay: calc(var(--card-index) * 80ms)`.

**Section 5 — GROUND ZERO:**
- Terminal aesthetic: `background: #080810; color: #ffb700; font-family: 'JetBrains Mono'; padding: 10vh 10vw`.
- Large coordinate display: Bebas Neue at `clamp(4rem, 10vw, 11rem)`, phosphor green, glowing text-shadow. Shows "N 00° 00' 00.000" / "E 000° 00' 00.000" — updating live via JS `setInterval` to add fractional drift (last decimal place increments slowly, simulating GPS signal lock).
- Blinking cursor appended to coordinate string: a `` with CSS animation `@keyframes blink { 50% { opacity: 0 } }` at 700ms step-start.
- Noise texture flicker: background PNG tile animated at 8fps between 4 positions using `@keyframes noise`.
- Below coordinates: three lines of amber monospace text in smaller size: `SIGNAL LOCKED`, `ACCURACY: ±1.4m`, `MERIDIAN: ACTIVE`.

**Cursor-follow interaction (global):**
- Single `mousemove` listener on `document`. Updates two CSS custom properties: `--mouse-x: {pageX}px; --mouse-y: {pageY}px`.
- A persistent `
` with `position: fixed; pointer-events: none; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(57,255,106,0.06) 0%, transparent 70%); transform: translate(calc(var(--mouse-x) - 100px), calc(var(--mouse-y) - 100px))`. Follows cursor with `transition: transform 0.12s linear`.
- The meridian line in Section 2 bends toward cursor as described above.
- Cards in Section 4 subtly rotate on cursor proximity: each card computes distance from cursor center and applies `rotateX(calc(dy * 0.02deg)) rotateY(calc(dx * 0.02deg))` — a very shallow tilt (never more than 4°).

**AVOID in this design:**
- CTA buttons with gradient fills — use text-only links in Barlow Condensed all-caps with a bottom-border underline in neon green only
- Pricing blocks, feature comparison tables, testimonial carousels
- Soft rounded corners everywhere — only Section 4 cards have `border-radius: 4px`; everything else is `border-radius: 0`
- Stock photography of any kind

---

## Uniqueness Notes

**Differentiators from the existing registry (reference: a6c.quest used velvet-reliquary card-flip; adhoc.quest used glacial timeline-vertical):**

1. **Altitude-band parallax as the primary narrative device.** No other design in the registry uses the concept of "descending through atmospheric layers" as its scroll metaphor. Rather than scrolling through sections, the visitor falls through altitude strata — each section has a distinct visual register tied to a real-world navigation layer (orbital, atmospheric, acoustic, surface, terminal). The parallax rates are not decorative; they encode altitude: higher sections scroll slower (as if more distant).

2. **Cursor-reactive longitude meridian line.** The bending diagonal meridian in Section 2 — reacting to cursor position like a compass needle finding north — is a unique interaction not present in any reference design. The cursor-follow pattern is used here as a *physics metaphor*, not merely a visual effect. The line's slight magnetic attraction to the cursor makes the site feel navigational rather than decorative.

3. **Live coordinate drift in the terminal footer.** The GPS coordinates in Section 5 are not static — the last decimal place drifts in real time via `setInterval`, simulating an active GPS lock being refined. This single interaction transforms a static footer into a live instrument readout and reinforces the precision/navigation identity of the brand without any copy explaining it.

4. **CRT scanline + noise-grain dual texture system.** Most designs in the registry use a single texture layer. longitude.quest uses two independent texture systems in overlay: the CSS scanline grid (structural, always visible) and the animated PNG noise grain (organic, flickering at 8fps). The combination produces an analog warmth that static textures cannot achieve, and it is unique in the registry.

5. **Mixed-media in a single coherent register.** The three image types (SVG wireframe globes, raster noise, abstract coordinate geometry) are drawn from completely different technical origins but cohere visually because they share the same phosphor-green-on-void-black color space. This is a harder design constraint than using a single image type, and the coherence it produces is a differentiator.

**Chosen seed:** `aesthetic: retro-futuristic, layout: parallax-sections, typography: display-bold, palette: dark-neon, patterns: cursor-follow, imagery: mixed-media, motifs: abstract-tech, tone: bold-confident`

**Avoided patterns (from frequency analysis):**
- `photography` (89% in registry — deliberately avoided; all imagery is wireframe SVG and abstract geometry)
- `minimal` (38% in registry — this design is maximalist in atmosphere, minimal in copy but dense in visual texture)
- `gradient-mesh` (10% in registry — not used; glow effects are radial spot-lights, not mesh gradients)