# Design Language for longitude.quest ## Aesthetics and Tone longitude.quest is a contemplative chronicle of *the longitude problem* — the three-century human struggle to know one's exact place at sea, resolved at last by John Harrison's marine chronometers and the quiet authority of a ticking machine. The site is not a museum brochure and not a startup landing page; it is a **luxurious wabi-sabi reliquary** — imagine a private collector's reading room where a brass H4 sits under a single warm lamp, its case dimmed by two hundred years of handling, the lacquer worn through at the winding key, a hairline crack across the enamel dial that no restorer will ever touch because the crack *is* the object now. The mood is **patient, oceanic, and quietly opulent**. Wabi-sabi here means: nothing is shiny, nothing is symmetrical, nothing is finished. Edges are deckled. Brass is tarnished, not gold-plated. The "luxury" is the luxury of *time* — slow scroll cadence, generous emptiness, the confidence to let a quarter of the screen hold nothing but a faint horizon line. Think of the tonal world of a Patek Philippe archive crossed with a salt-bleached nautical chart left open on a captain's table; the visual temperature of dusk over the English Channel; the restraint of a Japanese tea master who happens to own a Greenwich chronometer. Tone in copy and motion: measured, almost whispered, with the occasional sharp declarative sentence that lands like a chronometer's strike. Never urgent. Never salesy. The visitor is a guest, not a lead. ## Layout Motifs and Structure **Primary layout: editorial-flow folio — asymmetric, ruled, off-axis — built around a single drifting meridian line.** The page is organized as a sequence of full-viewport **"longitudes"** — vertical chapters, each anchored to a degree of arc (0°, 45° W, 90° W, the International Date Line). They are *not* centered. The text column lives off-axis, riding a 12-column grid where content occupies columns 2–7 in one chapter, columns 6–11 in the next, so the eye sails left-and-right down the page like a ship tacking against wind. Margins are immense (14–18vw on desktop). A faint baseline grid of hairlines (#9aa7a4 at 6% opacity) sits behind body text like the latitude rules on a chart. **The drifting meridian.** A single vertical line — 1px, in tarnished brass (#a98b4e) — runs the height of the document, but it does not stay put: as you scroll, it slowly slides horizontally across the viewport (parallax-free, driven by scroll position with a slow easing), so by the journey's end it has migrated from the left third to the right third. It is the prime meridian rotating beneath you. At chapter boundaries it kinks at a **sharp angle** — a hard 30° dogleg — never a curve, echoing the abrupt corrections a navigator makes when a sighting comes in. **Section architecture (editorial chapters, no nav bar, no footer links):** 1. **0° — The Cost of Not Knowing.** A near-black field. Off-center, low and left, a single deckled-edge plate (vector engraving of a foundering ship on rocks) fades up. One sentence in large grotesque type, broken across three lines, sits high-right. The meridian line enters from the left edge. 2. **The Reward.** An angled section — the content block is rotated −2.5° within an otherwise upright page, like a slipped chart. Tells of the £20,000 Longitude Prize. 3. **Failed Instruments — a drifting gallery.** A horizontal-scroll band *inside* the vertical flow: four vector plates (lunar-distance tables, a Whiston rocket-flare scheme, a magnetic-dip theory, a "wounded dog powder" curiosity) glide past as you scroll, each captioned in small caps. They overlap slightly, edges torn, like papers shuffled on a desk. 4. **Harrison — H1 through H4, a zoom sequence.** This is the centerpiece and uses the **zoom-focus** motif (see Imagery). The visitor descends through four scales of one machine. 5. **The Tick.** A nearly empty viewport: just the meridian line, now near the right edge, and a single line of text — "It kept time. That was all. That was everything." A subtle metronomic pulse animates one small dot. 6. **Colophon.** Lower-right, small, ruled off by two hairlines: a quiet credit-and-source plate set like the imprint on the verso of a fine book. No buttons. No hero CTA, no pricing, no stat-grid, no testimonials. The structure *is* a voyage; the only "conversion" is having finished it. ## Typography and Palette **Typography — neo-grotesque display against a humanist serif body, with a monospaced accent for coordinates.** - **Display / chapter titles:** **"Space Grotesk"** (Google Fonts, weight 500 and 700). A neo-grotesque with just enough quirk in the lowercase *g* and the geometric *t* to feel contemporary without being cold. Used very large — `clamp(2.6rem, 7vw, 6.5rem)` — set in mixed case, with negative tracking (−0.02em) and tight `line-height: 0.96`. Titles are deliberately broken mid-phrase across 2–4 lines to create the editorial rag. - **Sub-display / kickers and small caps:** **"Archivo"** (Google Fonts, weight 600), letter-spacing 0.18em, uppercase, ~0.78rem. Used for the degree markers ("45° WEST"), captions, and the colophon. - **Body text:** **"Spectral"** (Google Fonts, weight 300 for running text, 500 for emphasis). A screen-tuned serif with a calm, slightly literary voice — the typeface of a well-set hardback. Size `clamp(1.05rem, 1.25vw, 1.3rem)`, `line-height: 1.7`, measure capped at 62ch. Wabi-sabi touch: the first line of each body block is set with a hanging initial that is *not* a drop cap — just an oversized first word, slightly raised. - **Coordinates / numerals / the "instrument readout":** **"IBM Plex Mono"** (Google Fonts, weight 400). Used only for actual numbers — degrees, minutes, seconds, dates, prize sums — so figures feel engraved on a dial rather than typeset. **Palette — "coastal-blend": a weathered estuary at dusk, brass on slate, salt on paper.** - `#0e1518` — **Channel Night** (deep blue-charcoal; primary dark background, never pure black) - `#1b2a2d` — **Slate Tide** (a muted blue-green; secondary panel ground, the rotated chart sections) - `#e7e2d4` — **Salt Chart** (warm off-white paper; primary light background and body text on dark) - `#c8c0ad` — **Bleached Linen** (a dimmer paper tone for secondary text and worn edges) - `#a98b4e` — **Tarnished Brass** (the meridian line, rule accents, the chronometer motif — matte, never metallic gradient) - `#5f8c87` — **Estuary Verdigris** (cool muted teal; link underlines, the date-line chapter, faint glows) - `#8a3b2e` — **Foxed Vermilion** (a dull terracotta-red, the colour of age-spots on old paper; used sparingly for a single emphasized word per chapter and the "wounded dog" curiosity) - `#9aa7a4` — **Chart Hairline** (desaturated grey-green for the baseline grid and ruled dividers, always at low opacity) High-contrast pairing is Salt Chart on Channel Night; the warm/cool tension between Tarnished Brass and Estuary Verdigris carries the brand. **No gradients** beyond a single ~6% vignette to soften the dark field's corners. ## Imagery and Motifs **No photography.** Everything is **vector-art** — clean line engravings in the spirit of 18th-century scientific plates and Admiralty chart cartouches, redrawn as crisp SVG with deliberately uneven, slightly hand-trembled stroke widths (0.75px–1.4px varying along a path) so they read as *etched*, not auto-generated. Core visual elements: 1. **Engraved plates.** Single-colour SVG line drawings on "torn paper" panels: a foundering brig on rocks; a sextant mid-sighting; the four Harrison timekeepers (H1's gridiron pendulum cage, H2's bar balances, H3's circular balances, H4's pocket-watch form); a lunar-distance diagram with the moon clearing a star. Each plate sits on a panel with a **deckled SVG edge** — an irregular `clip-path` or filter-roughened border, never a clean rectangle. 2. **The zoom-focus sequence (chapter 4).** As the visitor scrolls through the Harrison chapter, the H4 vector engraving is the constant — but the *crop and scale* changes in four discrete, snap-eased steps: (a) the whole watch in the lower-left; (b) zoom into the dial face, where a hairline crack and the worn winding square become visible; (c) zoom further into the escapement teeth, rendered as fine radiating lines; (d) pull all the way back so the watch is a tiny silhouette against a vast empty Channel Night field with the words "30 seconds. Across the Atlantic." Each zoom step is accompanied by the body text reflowing to a new off-axis column. This `zoom-focus` choreography appears in no other site in the set. 3. **Sharp-angles motifs.** The decorative system is built from hard diagonals — never blobs, never organic curves. The meridian line's doglegs; section dividers that are single thin lines set at 22°–34° rather than horizontal; the "compass rose" reduced to an austere asterisk of straight rays; chapter-2's whole content block tilted −2.5°. Hover states on the gallery plates: the plate snaps to a 1° rotation, a tiny brittle adjustment. 4. **Wabi-sabi texture details.** A faint, fixed-position **foxing layer** — a sparse SVG noise/blotch overlay at ~4% opacity in Foxed Vermilion — sits over the light "paper" sections so they look gently aged. Rule lines have 1–2px breaks in them at irregular intervals (the pen lifted). The site logotype, "longitude·quest", has the middle dot rendered as a small off-centre brass circle that is *almost* but not quite vertically aligned with the x-height. 5. **Coordinate readouts.** Throughout, small IBM Plex Mono labels float at panel corners — "51°28′40″ N · 0°00′00″" near Greenwich plates, "1714" by the prize, "1773" by H4's success — like the engraved data on an instrument's bezel. ## Prompts for Implementation **Build a full-screen, scroll-driven narrative voyage — no traditional page chrome.** No sticky header, no hamburger menu, no footer link farm. The only persistent UI is the drifting brass meridian line and a faint degree-marker that updates ("0°" → "45° W" → …) fixed small in a corner as chapters pass. Treat the whole document as one continuous chart unrolled top to bottom. **Storytelling first.** Each chapter is a *scene* with a single idea: the cost of not knowing → the prize → the failures → Harrison's machine → the silence of a working clock. Copy is sparse and literary; let typography and emptiness do the work. Body blocks should never fill the viewport — aim for 35–55% screen coverage so the wabi-sabi negative space breathes. **Motion — slow, weighted, mechanical, never bouncy.** - Use IntersectionObserver to trigger per-chapter reveals: text lines rise 16px with a *long* `cubic-bezier(0.16, 1, 0.3, 1)` ease over ~900ms, staggered ~120ms per line. No spring overshoot — chronometers don't bounce. - The meridian line's horizontal drift and its sharp-angle doglegs are driven by `scrollY` mapped to a `translateX`, eased with `requestAnimationFrame` lerp (factor ~0.06) so it lags slightly behind the scroll like a heavy needle settling. - The zoom-focus Harrison sequence: pin the engraving (`position: sticky`) for the chapter's duration; map scroll progress within the section to four snap points, each cross-fading the SVG `viewBox` (animate the `viewBox` attribute or use a CSS `transform: scale()` + `transform-origin` shift) over ~700ms with a slight ease-in so the "lens" feels like it's *focusing*. Hold each step briefly before the next. - The "Tick" chapter: one small Estuary Verdigris dot scales 1→1.18→1 on a steady 1.2s loop — a metronome, the only repeating animation on the site. Everything else animates once. - Gallery band (chapter 3): horizontal `overflow-x` translated by vertical scroll progress; plates have `will-change: transform`; on hover, snap a plate to `rotate(1deg)` with a fast 180ms ease — a small dry click of an adjustment. - Respect `prefers-reduced-motion`: drop the meridian drift and zoom choreography to instant state changes; keep the reveals as simple fades. **Texture and material in CSS:** dark sections get a `radial-gradient` vignette at ~6% black in the corners only. Light "paper" sections get a tiled, very subtle SVG `feTurbulence` foxing overlay at ~4% opacity, `mix-blend-mode: multiply`. Panel edges use `clip-path: polygon(...)` with many slightly-jittered points (or an SVG `filter: url(#deckle)` displacement map) so no panel is a clean rectangle. Rule dividers: thin pseudo-elements with `mask-image: linear-gradient` that introduces a couple of transparent gaps. **Typography in CSS:** load Space Grotesk (500, 700), Archivo (600), Spectral (300, 500), IBM Plex Mono (400) from Google Fonts. Headlines: large `clamp()`, `letter-spacing: -0.02em`, `line-height: 0.96`, manually `
`-broken for a ragged silhouette. Body: Spectral 300, `line-height: 1.7`, `max-width: 62ch`, the opening word of each block bumped up ~1.35× and nudged with negative `margin-left`. All numerals wrapped in a `.coord` class → IBM Plex Mono, `letter-spacing: 0.04em`, Tarnished Brass. **AVOID:** CTA-heavy layouts, "Get started" buttons, pricing tables, statistics grids, testimonial carousels, glassmorphic cards, neon glow, generic centered hero text, parallax-of-everything, counter-up number animations, typewriter effects. This is a quiet, expensive-feeling editorial voyage — not a SaaS funnel. ## Uniqueness Notes 1. **Zoom-focus as the structural climax.** The Harrison chapter uses a four-step pinned `viewBox`/scale "lens focusing" choreography on a single SVG engraving — the `zoom-focus` pattern, which sits at 0% usage across the entire portfolio. No other site treats progressive magnification of one object as a narrative device; here it literally enacts "looking closer at the machine that solved the problem." 2. **A meridian line that migrates.** Instead of the ubiquitous static-spine or parallax-layer treatment, the single brass rule physically translates across the viewport as you scroll (with hard sharp-angle doglegs at chapter seams), so the prime meridian *rotates beneath the reader*. It's the page architecture made of one moving line — `sharp-angles` motif (2% usage) doing structural work, not decoration. 3. **Wabi-sabi luxury without warmth-spam.** The portfolio is 96% gradient / 90% warm palettes; this design refuses both. It pairs a cool weathered-estuary `coastal-blend` palette (2% usage) with `wabi-sabi` imperfection (6% usage) and a `luxurious` tone (4% usage) — opulence expressed through *aged, cracked, off-axis restraint* (a hairline crack on the chronometer dial that is intentionally never "fixed") rather than gold gradients or glass. 4. **Vector-only, etched, trembling-line illustration.** No photography (the portfolio is 64% photography-driven); every image is single-colour SVG line-art with deliberately uneven stroke widths and deckled panel edges — 18th-century scientific-plate aesthetics rebuilt for the browser. 5. **Numbers as engraved instrument readouts.** All numerals are isolated into IBM Plex Mono "coordinate" labels floating at panel corners, treated like data etched on a chronometer's bezel — a small consistent system that ties the typography to the subject matter. **Chosen seed/style:** `aesthetic: wabi-sabi, layout: editorial-flow, typography: grotesque-neo, palette: coastal-blend, patterns: zoom-focus, imagery: vector-art, motifs: sharp-angles, tone: luxurious` **Avoided per frequency analysis:** corporate aesthetic (92%), gradient palette (96%), warm palette (90%), mono typography as primary (94%), counter-animate (91%), parallax-everything (69%), mysterious-moody-as-default tone (94%), centered layout (92%), photography imagery (64%).