# Design Language for relative.quest ## Aesthetics and Tone relative.quest is a **wordless lecture hall for the idea of relativity** — not the celebrity-physics kind with E=mc² posters, but the older, quieter realization that *there is no such thing as a stationary observer*. The site is built as a Swiss-International scientific broadsheet that has been wired for motion: imagine a 1960s Basel physics monograph — ruled margins, ranging numerals, hairline rules, a single accent ink — that someone has carefully animated so the diagrams *actually move relative to you as you scroll*. The mood is **cool, precise, intellectually generous**: it treats the reader as a graduate student, not a customer. Nothing is warm, nothing is gradient-soft, nothing is hand-drawn. Every surface is paper-flat, every edge is a measured rule, every word is set in a tight grotesque. The emotional arc is the arc of *grokking* — confusion, the moment the frame snaps, the calm afterward — and the design choreographs that arc with deliberate restraint. Where most of the corpus reaches for honeyed warmth and blurred glass, relative.quest is **graph paper at dawn**: ink-cool, exacting, faintly austere, but never cold-hearted — it wants you to *understand*, and it builds the page like a patient proof. ## Layout Motifs and Structure The spine is a **persistent split-screen**: a fixed left column (38vw) holds the *frame of reference* — a small caption block, a section index in ranging numerals (01 / 02 / 03…), and a live readout of "your velocity relative to this section" that ticks as you scroll; the right column (62vw) is the *observed world* — full-bleed scientific plates that slide, shear, and re-register against the left column's ruled baseline grid. At three pivot points the split **rotates into diagonal-sections**: the dividing seam tilts to 14° and the two halves scroll at different rates, so the page itself demonstrates relative motion. Everything sits on an exposed **modular baseline grid** — 8px vertical rhythm, 12-column horizontal, with the column rules left *visible* as 0.5px hairlines, never hidden. There is no hero image, no card-grid, no bento box, no centered marketing column. Sections are numbered chapters of a single argument: *01 Two Trains*, *02 The Light Clock*, *03 Simultaneity Breaks*, *04 The Twin Walks Back*, *05 Everything Is a Frame*. A thin horizontal **light-cone diagram** runs as a sticky progress indicator along the very top — a 45° "now" wedge that widens as you read. The footer is a single ruled line and a colophon set in 9px caps. Negative space is generous and *deliberate*, in the Swiss `ma` tradition: roughly 40% of every spread is intentionally empty paper, so the diagrams have room to move without colliding. ## Typography and Palette **Type system (Google Fonts only):** - **Display / headings — `Archivo` (variable, used at weights 600–800 with width axis tightened):** a robust, slightly squarish grotesque in the Akzidenz/Helvetica lineage, but with enough character to anchor large numerals. Section numbers and chapter titles are set in Archivo at 96–160px, tracked to `-0.03em`, all lowercase except the leading numeral. - **Body / captions — `Inter` (weights 400 / 500):** the neutral humanist workhorse for running text, set at 18px / 1.6, measure capped at 62ch, with `font-feature-settings: "tnum"` so the relativity readouts use tabular figures. - **Data labels / readouts — `IBM Plex Mono` (weights 400 / 500):** for the velocity ticker, axis labels, equation fragments, and the colophon — anything that should read as *instrument output* rather than prose. Set in caps at 10–12px, tracked `+0.08em`. Type is **monochrome ink on paper plus one accent** — no second color in text, ever. Equations appear as inline SVG, never as images, set in Plex Mono with proper italic variables for the physics quantities. **Palette (cool-gray base, single triadic-ish accent trio held in tight reserve):** - `#FAFAF7` — paper white (page ground, never pure #fff — a hair of warmth so the cool inks read cooler by contrast) - `#16181C` — graphite ink (all body text, rules, diagram strokes) - `#5B6068` — slate gray (secondary text, hairline grid, captions) - `#E6E6E0` — newsprint gray (block fills, the "observed world" panel ground on alternating sections) - `#1E40AF` — cobalt (the *primary accent* — the "light" in every light-clock, the active section number, the 45° now-wedge; used on maybe 4% of pixels) - `#B91C1C` — vermilion (the *second accent* — reserved exclusively for the moving frame / the traveling twin / "this is the thing that's different"; appears perhaps twice in the whole page) - `#047857` — pine (the *third accent* — the rest frame / the stay-at-home twin / "this is the thing that stays"; the quiet counterpart to vermilion) The three accents are a deliberate primary-triad echo (blue / red / green) used the way a physics chalkboard uses colored chalk: each color *means* something and is never decorative. ## Imagery and Motifs **No photography. No stock. No hand-drawn doodles.** All imagery is **vector scientific plates rendered as inline SVG**, in the visual language of mid-century technical illustration: 1. **The Two Trains plate** — two long flat-color train silhouettes on parallel ruled tracks, one cobalt-edged, one graphite; thin leader lines with tnum velocity labels; a dotted "platform observer" stick figure between them. As you scroll, train B slides relative to train A *and the labels recompute*. 2. **The Light Clock** — the canonical bouncing-photon-between-two-mirrors diagram, drawn as two horizontal rules with a cobalt dot tracing a path; in the rest frame the path is vertical, in the moving frame it stretches into a visible zig-zag — and the zig-zag is drawn *live* as the section's split-screen shears. 3. **Light-cone wedges** — 45° "future" and "past" cones in hairline cobalt, used as the top progress bar and as section dividers; the "now" line is always horizontal, always vermilion-tipped. 4. **Worldlines** — straight and curved ink lines on a faint t-vs-x grid; the twin's worldline kinks (vermilion), the stay-home worldline runs straight up (pine). This is the only "data-viz" surface and it is rigorously plain. 5. **Marginalia rules & registration marks** — every plate sits inside printer's crop marks and a corner registration target (the little cross-in-circle), reinforcing the "this is a printed plate that has come alive" conceit. 6. **The grid itself is a motif** — exposed 0.5px column rules, baseline ticks every 8px in the left margin, like an architect's sheet. Decorative restraint is the point: ornament is forbidden; the only "flourish" is a tiny ⌖ registration glyph used as a section bullet. ## Prompts for Implementation Build relative.quest as a **single static HTML page, one stylesheet, one ES module — no framework, no build step, no service worker**. It is a roughly 2-minute scrolled essay in five numbered chapters, and it must *demonstrate relativity by moving*, not just describe it. **Structure & storytelling (full-screen, scroll-driven, no marketing furniture):** - **Chapter 00 — Title.** Left column: the wordmark `relative.quest` set small in Archivo, plus a single line of Inter: *"there is no observer at rest."* Right column: an empty newsprint panel with one slowly drifting cobalt dot and a Plex Mono readout: `frame: yours · velocity: 0.000 c`. Scroll begins the proof. - **Chapter 01 — Two Trains.** The classic relative-velocity setup. As the user scrolls, the right-panel train shears past the left-panel train; the left column's velocity readout counts up; a caption explains, in two sentences, that "moving" only ever means "moving relative to *something*." - **Chapter 02 — The Light Clock.** Diagonal split engages: the seam tilts to 14°, halves scroll at 1× and 0.82×, and the light-clock photon path visibly stretches from vertical to zig-zag in lockstep with the shear. One equation fragment appears, drawn as SVG, with the γ term highlighted cobalt. - **Chapter 03 — Simultaneity Breaks.** Two events (vermilion dot, pine dot) that line up in one frame and *don't* in the next; a horizontal "now" line rotates as the frame changes. The whole right panel re-registers with an audible-looking *click* (a 90ms snap, no easing — see motion notes). - **Chapter 04 — The Twin Walks Back.** A t-vs-x worldline plot draws itself with `path-draw-svg`: pine line straight up, vermilion line out-and-back with a sharp kink. A counter (`counter-animate`, tabular figures) tallies the proper-time difference at the reunion. Two sentences of Inter close the thought. - **Chapter 05 — Everything Is a Frame.** Recap: the five plates shrink and tile into a calm 5-up filmstrip along the baseline grid; the velocity readout settles back to `0.000 c (frame: yours)`. Final line in Inter: *"you were never standing still. neither was anyone."* Ruled-line footer + 9px-caps Plex Mono colophon. **No CTA, no email capture, no pricing, no testimonials, no stats grid, no logo wall, no FAQ, no chatbot, no newsletter, no cookie banner.** **CSS / motion direction:** - Layout via CSS Grid: a fixed 38vw / 62vw split that becomes `transform: skewY(14deg)`-paired halves at pivot sections; respect a `prefers-reduced-motion` fallback that drops the shear and just cross-fades. - **`scroll-triggered`** is the dominant interaction model — use `IntersectionObserver` + `scroll-timeline` (with a JS fallback) to drive: the velocity readout, the light-clock photon path, the worldline draw, the now-line rotation, and the diagonal shear amounts. The page should feel *scrubbable* — scrolling back un-runs the proof. - **`fade-reveal`** (8px rise + opacity, 320ms, custom cubic-bezier `.2,.7,.2,1`) for incoming captions and plates — never bounce, never elastic; this is Swiss, motion is *measured*. - One deliberate exception: the Chapter-03 "simultaneity click" is a hard 90ms linear snap with zero overshoot — the *absence* of easing is the effect, like a relay closing. - Hairline grid rules animate in with a `path-draw-svg` wipe at section entry (left-to-right, 500ms), then hold static. - Type: set everything in `ch`/`rem`, baseline grid enforced via `line-height` multiples of 8px; large Archivo numerals get `font-variation-settings` width-axis animation (subtle, ±2%) only on the active section number, tinted cobalt. - Absolutely no parallax-of-decoration, no cursor-follow blob, no magnetic buttons, no glassmorphic cards, no warm gradient mesh — if it would look at home on a SaaS landing page, it does not belong here. - All equations and diagrams are inline SVG with `currentColor` strokes so they inherit the ink color and stay crisp at any zoom. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Swiss-scientific broadsheet, not warm/hand-drawn/glass.** The corpus is ~94% hand-drawn, ~82% glassmorphism, ~98% warm-palette, ~94% gradient. relative.quest is the opposite on every axis: paper-flat, exposed modular grid, cool-gray monochrome ink + a meaning-bearing triad, condensed grotesque headlines, zero gradients, zero glass, zero doodles. It reads like a Basel physics monograph that learned to scroll. 2. **The layout *is* the argument.** Instead of decorative parallax (~90% of corpus) or cursor-follow toys (~89%) or spring/magnetic micro-interactions (~85%/~80%), the only motion is scroll-triggered choreography that physically demonstrates relative motion — split-screen shearing into diagonal sections, light-clock paths stretching live, worldlines drawing themselves. Animation here is pedagogy, not garnish. 3. **No marketing furniture at all, and no narrative warmth.** No CTA, no pricing, no stat-grid, no testimonials, no logo wall, no email capture — and unlike the ~34% pastoral-romantic / ~22% warm-inviting tone majority, this is scholarly-intellectual to the bone: it addresses a grad student, uses colored "chalk" semantically (cobalt = light, vermilion = the moving frame, pine = the rest frame), and treats white space as a Swiss `ma` discipline rather than a vibe. 4. **Imagery is inline-SVG technical plates with crop marks and registration targets** — mid-century scientific illustration, not photography (~98% of corpus) and not gradient-mesh abstraction; the "this is a printed plate brought to life" conceit (crop marks, ⌖ bullets, ranging numerals) appears nowhere else here. **Chosen seed / style:** `swiss typography clean` — from `seeds.json`, composed as *aesthetic: swiss · layout: split-screen + diagonal-sections · typography: condensed (grotesque) + humanist body + tech-mono labels · palette: cool-grays + triadic accent reserve · patterns: scroll-triggered + fade-reveal + path-draw-svg + counter-animate · imagery: data-viz / line-illustration (inline SVG plates) · motifs: grid-lines + sharp-angles · tone: scholarly-intellectual.* **Avoided overused patterns (per frequency analysis):** hand-drawn (94%), glassmorphism (82%), photography imagery (98%), card-grid (91%), full-bleed-hero, warm palette (98%), gradient (94%), parallax (90%), cursor-follow (89%), spring (85%), magnetic (80%), tilt-3d, mono-as-default-everything — none of these appear. Underused territory deliberately entered: swiss aesthetic (6%), split-screen (2%), diagonal-sections (5%), scholarly-intellectual tone (8%), data-viz imagery (6%), condensed type (14%), cool-grays palette (5%).