# Design Language for ringworld.quest ## Aesthetics and Tone ringworld.quest is the **field journal of a being who lives on the inside of a ring** — a habitat band a million miles wide, spun around a sun, where the ground rises on both sides until it disappears into the glare of the Arch overhead. The site is not a product page and not a portal. It is a **slow lateral traverse along the inner surface of an impossible megastructure**, read like a horizontal scroll of a single continuous mural — the way you would read a scroll painting, or pan a telescope across the band of the Milky Way. The tone is **cartographic, unhurried, faintly elegiac** — the voice of an archivist-surveyor who has walked a few thousand miles of a ten-million-mile shoreline and is in no rush. Not "epic space opera" loud; closer to the quiet awe of a long-exposure photograph of a structure too large to photograph. Hard-science romance: rim walls, spill mountains, day-edge and night-edge, the shadow squares strobing the false night, the centrifugal "gravity" that is really just the floor pushing up forever. Wonder treated as a measurable thing. Visual register: **observatory plate meets engineering survey meets star atlas.** Deep instrument-panel darks, the warm grey-blue of dawn seen from orbit, a single hot filament of sun-glare along the Arch. Everything feels *measured* — there are tick marks, scale bars, bearing readouts — but the measurement is in service of awe, not commerce. Think the calm of a planetarium dome at the moment before the lights go down. ## Layout Motifs and Structure **The page scrolls sideways.** This is the defining structural choice. The site is a **horizontal traverse** — the reader pans rightward (or leftward, mirrored) along the inner band of the Ring, and the entire document is one continuous **panorama strip** roughly 7–9 viewport-widths long, divided into numbered **Arc Segments** (Segment 0x01 through 0x08). Vertical scroll wheel maps to horizontal motion; the page never scrolls down. **The Arch is always present.** Across the *top* third of every screen runs a thin luminous band — the far side of the Ring seen overhead, a hairline of land arcing up from one horizon, across the zenith, and down the other. It does not move at the same rate as the foreground; it parallaxes *slower* and curves subtly with traverse position, so the structure feels genuinely enormous. The sun sits as a fixed bright nucleus near the Arch's apex, never leaving the frame. **Three depth registers, all panning at different rates:** 1. **The Arch band** (top) — slowest, the megastructure's far side, with the shadow-square chain crossing it. 2. **The mid-distance** — spill mountains, rim-wall haze, distant inland seas rendered as flat tonal washes. 3. **The near ground / foreground rail** (bottom 18vh) — a survey rail with kilometer ticks, bearing numbers, and the segment markers; pans fastest, like the dashboard of a slow train. **Segment composition rules:** - Each Arc Segment is one *plate*: a wide tableau with a survey caption set against the lower rail and at most one block of running text floated into the negative space of the sky. No card grids. No bento boxes. No stat-grid, no pricing tier, no testimonial carousel. - Text columns are *narrow* (max 34rem) and *vertically generous*; they sit like field-notebook entries pinned to a vast landscape, never filling it. - A **scale bar** lives in a fixed corner — "◀ 1,000,000 mi ▶ — you are here: 12,403 mi traversed" — and updates as you pan. It is the only persistent UI. - Transitions between segments are *seams*, not slides: a faint vertical ruled line with a segment number, the way panels of a panoramic photograph are joined. - Optional final segment: **night-edge** — the reader has panned far enough that a shadow square has slid over the sun; the whole panorama dims to false-night, stars come out *between* the Arch and the ground, and the survey rail switches to bioluminescent ink. Then it brightens again. A breath, not a CTA. ## Typography and Palette **Typefaces** (all Google Fonts, all real): - **Spectral** (variable; 300, 400, 500, 600 italic) — the body voice. A screen-native serif with a slightly literary, slightly scientific cool to it; reads like the prose of a good popular-astronomy book. Body set at 1.075rem, line-height 1.8, generous measure. Used for all running narration, segment abstracts, captions. - **Big Shoulders Stencil Display** (700, 800) — used *only* for the giant segment designations ("ARC SEGMENT 0x05 — THE SHADOW-SQUARE TRANSIT") that sit ghosted at ~12rem in the sky, low-opacity, like stencilled markings on the hull of something. Never used for body, never for the rail. - **Space Mono** (400, 400 italic, 700) — the instrument voice. Bearing readouts, the scale bar, kilometer ticks, coordinate stamps, the "SURVEYOR'S NOTE:" labels, footnote numerals. Tracked +0.04em, used small (0.72–0.82rem), uppercase for labels. **Palette** — instrument-dark with one hot filament: - `#0b0f17` — **Vacuum Slate.** The base sky/background, the deep dark above the Arch. - `#141b29` — **Rim Shadow.** Panels, the survey rail bed, segment seams. - `#2c3a52` — **Dawn-from-Orbit.** Mid-distance washes, spill-mountain haze, the cool blue-grey of land seen across a million miles. - `#7d8aa3` — **Plate Grey.** Secondary text, faded captions, tick marks. - `#e8e2d4` — **Survey Vellum.** Primary text — warm off-white, the colour of an old chart, never pure white. - `#f4a13c` — **Sun Filament.** The single saturated accent: the glare line along the Arch, the apex sun, the "you are here" marker, active link underlines. Used *sparingly* — it is the brightest thing on the page and earns it. - `#5fd6c4` — **Bioluminescent Ink.** Reserved exclusively for the night-edge segment — the false-night rail, stars, the night survey notes. Never appears in daylight segments. Gradients are used only as **atmospheric tonal washes** (sky-to-haze, daylight-to-nightside), never as button fills or decorative blobs. ## Imagery and Motifs - **The Arch.** The signature image, hand-built in SVG/Canvas, never a stock photo: a thin band of curved land arcing overhead, with a chain of **shadow squares** — black trapezoids on the inner-ring orbit — strung across it like beads, slowly drifting. As you pan, the Arch's curvature and the squares' positions update. - **Spill mountains** at the rim walls — rendered as layered flat silhouettes in `#2c3a52` and `#141b29`, getting bluer and fainter toward the horizon, like sumi-e mountains. - **Survey instrumentation** — fine line-illustration of a theodolite, a centrifuge-gravity gauge, a "rim-wall altimeter," drawn in single-weight `#7d8aa3` strokes, appearing small beside the relevant note like marginalia in an engineering log. - **The scale rail** — a horizontal ruled band along the bottom with kilometer ticks, every 1000 mi a labelled major tick in Space Mono, a moving `#f4a13c` "you are here" caret. - **Inland seas and the day-edge** — pale tonal washes; the *day-edge* (the terminator where shadow-square shadow meets lit ground) is a soft `#f4a13c`-to-`#2c3a52` gradient line that the traverse occasionally crosses. - **Constellations between the Arch and the ground** — only in the night-edge segment: tiny `#5fd6c4` and `#e8e2d4` star dots scattered in the gap between the overhead land-band and the near horizon. - **No people, no UI chrome, no logos floating in space, no glassmorphic cards, no neon hud.** The only "interface" is the survey rail and scale bar, and those are diegetic. ## Prompts for Implementation Build ringworld.quest as **one long horizontally-scrolling HTML document** — no SPA router, no modals, no nav menu, no hamburger. Wheel/trackpad vertical input is captured and translated to horizontal `translateX` of a long panorama track (with native horizontal scroll as the fallback and the source of truth for position; respect `prefers-reduced-motion` by allowing plain horizontal scrollbar use). The reader pans left-to-right (mirror to right-to-left for variety) along the inner surface of the Ring like panning a telescope along the Milky Way. Layering: a fixed-height (100vh) stage with **four parallax layers** moving at different rates as a function of scroll position `t` (0→1 across the whole traverse): - `arch` layer: `translateX(t * -W * 0.35)` plus a subtle `rotate`/`skew` that re-curves the band; shadow squares drift at a 4th independent rate. - `far` layer (haze, distant seas): `t * -W * 0.6`. - `mid` layer (spill mountains, silhouettes): `t * -W * 0.85`. - `near` layer (survey rail, captions, segment text): `t * -W * 1.0` — the true content track. Animation priorities — **slow, instrument-like, never bouncy.** Easing should feel like a heavy turntable: long ease-out, no spring, no elastic, no magnetic cursor-follow. As each Arc Segment enters frame, its giant Big Shoulders Stencil designation fades up from 0 to ~0.14 opacity over ~900ms and its survey note does a quiet `blur(6px)→0` + opacity reveal staggered line-by-line (~70ms per line). The scale bar's "you are here" figure counts up smoothly as you pan (counter animation on the *distance traversed* number only — the one place a counting number belongs here, because it is literally a position readout). Kilometer ticks on the rail tick past with a 1px `#7d8aa3` flick. The night-edge segment: as `t` crosses ~0.86, cross-fade the whole palette toward `#05070c`, fade the sun behind a shadow-square trapezoid, scatter `#5fd6c4` stars into the Arch-gap with a slow twinkle (opacity 0.3↔0.9, 3–6s, randomized), recolor the survey rail to bioluminescent ink. Hold ~1.5 viewport-widths, then brighten back to daylight before the final segment closes. No "the end," no email capture — just a final survey stamp: `— TRAVERSE LOGGED. 9,481,602 MI REMAIN. —` in Space Mono. **AVOID:** CTA buttons, "get started" / "sign up" / "subscribe", pricing blocks, tier tables, stat-grid trios ("10k users / 99.9% uptime / 24/7"), testimonial carousels, FAQ accordions, feature card grids, hero-with-centered-headline, glassmorphism panels, neon cyberpunk HUD overlays, mascot illustrations, vertical scroll of any kind. If a section feels like a landing page, delete it and replace it with a survey note about the curvature of the floor. ## Uniqueness Notes **Differentiators from sibling designs:** 1. **Pure horizontal traverse with a persistent overhead Arch.** The entire site scrolls sideways and the megastructure's far side is *always* visible curving across the top of the screen, parallaxing slower than everything else. Horizontal-scroll layouts are rare in the corpus (~8%) and none pair it with a fixed curved-overhead-landmass conceit that re-curves with scroll position — the structural metaphor *is* the layout. 2. **Diegetic survey instrumentation as the only UI.** No nav, no menu, no buttons — the sole persistent interface is a kilometer-ticked survey rail with a moving "you are here" scale bar reading distance-traversed against a million-mile band. The one counting-number animation in the whole site is a literal position readout, not a vanity metric. 3. **Instrument-dark palette with a single hot sun-filament + a quarantined night-edge ink.** `#f4a13c` Sun Filament is the only saturated colour in daylight and is rationed; `#5fd6c4` Bioluminescent Ink appears *only* during the shadow-square-transit night-edge segment and nowhere else — a palette that physically changes when a shadow square slides over the sun. No gradient-mesh blobs, no glassmorphism, no neon HUD. 4. **Typographic casting against type:** a literary-scientific screen serif (Spectral) for narration, a *stencil display* face (Big Shoulders Stencil Display) used only as ghosted hull-markings in the sky, and Space Mono confined to instrument readouts — deliberately avoiding the ubiquitous "mono everywhere" and "humanist sans body" defaults. **Chosen seed / style:** `horizontal scroll gallery` — reinterpreted as a lateral telescope-pan along the inner surface of a Ringworld, an observatory-survey aesthetic rather than a portfolio gallery. **Avoided patterns from frequency analysis:** glassmorphism (82%), hand-drawn (95%), card-grid layout (91%), centered layout (82%), warm/gradient palettes as fills (98%/94%), cursor-follow (88%), spring (84%), magnetic (79%), photography imagery (98%), mono-everywhere typography (94%), pastoral-romantic tone (34%). This design instead leans on horizontal-scroll (8%), layered-depth/parallax used *structurally* not decoratively, a cool instrument-dark monochrome-plus-one palette, serif body type, and an unhurried cartographic tone.