# Design Language for adhoc.quest ## Aesthetics and Tone adhoc.quest is the catalog of an imaginary mid-century space program that never declassified its better ideas — a private bureau of *ad hoc* expeditions, each one improvised, well-funded, and lavishly documented. The aesthetic is **retro-futuristic** in the specific sense of *1962 Pan American World Airways meets Telstar 1 first-light press kit*: brass instrument bezels, gilded mission patches, walnut-veneer console panels, and ivory linen cardstock — all photographed under the warm tungsten light of a private operations theater somewhere in Geneva, 1968. The mood is **opulent-grand** without being modern-luxury: this is not "designer hotel," this is "the private library where the directors of the program still meet on Thursdays." Every surface looks expensive in the way an heirloom looks expensive — patinated, signed, individually serial-numbered. The tone is **dignified, slightly archaic, faintly mysterious**, and absolutely confident. Sentences are long. Captions are set in small-caps Latin abbreviations (*op. cit.*, *ibid.*, *q.v.*). The reader is treated as an inducted member of a quiet society who has just been handed the *1969 Field Codex of Improvised Inquiries*, leather-spined, slipcased, with a tipped-in honey-ribbon bookmark. There is no marketing voice. No "we believe." No "launch your journey." The site is a **reading object**, not a conversion funnel — the user moves through it the way one moves through a folio: page-as-room, room-as-mission-briefing. The retro-futurism is *honeyed*, not *neon*. We reject vaporwave magenta, we reject Frutiger Aero glass, we reject Y2K chrome. Our future is the one Stanley Kubrick photographed for the Pan Am ticket counter in *2001*: cream interiors, brass switchgear, sodium-amber readouts, and Kodachrome 25 slides held against a lightbox. The reader should feel they have walked into the **operations vault** of a program whose existence is gently denied. ## Layout Motifs and Structure The page is **full-bleed** — the canvas extends ear-to-ear, no centered max-width container, no "content well." Instead, content sits inside a **continuous viewport-spanning film strip** that scrolls vertically through eight numbered *Bulletins*. Each Bulletin occupies 100vh minimum and is composed as a **plate**: a single hand-set tableau where vintage photography, typeset captions, and engraved instrument illustrations sit in deliberate spatial conversation. **Plate composition rules:** - A persistent **hairline brass rule** runs vertically at the 8vw mark on the left edge of every plate, broken only to insert the bulletin's serial number (e.g. `BULLETIN · 003 / VIII`) set in 11px small caps DM Mono, rotated -90° so it reads bottom-to-top up the rule. - A second hairline brass rule runs horizontally 7vh from the top, terminating in a **filled brass dot** at the 92vw mark. Beneath this rule, in 14px humanist italic, the bulletin's *operating designation* is set: e.g. *PROVISIONAL APPROACH TO A QUESTION HASTILY POSED*. - Beneath the rule, the plate's main content occupies a **12-column asymmetric grid** with a deliberate quirk: the grid is *offset* by +1 column on every odd-numbered bulletin and -1 column on every even-numbered bulletin, so the reader feels a gentle pendular sway as they descend. The shift is 8.33% of viewport width, large enough to be felt, small enough to be denied if asked. - A footer rule at 92vh closes the plate, with a centered fleuron — a small honey-amber **delta glyph** (▽) — denoting "end of plate." **Bulletin sequence:** 1. **Bulletin I — Frontispiece.** The slipcase. The phrase *adhoc.quest* sits at the lower-left in oversized humanist roman, the upper-right is occupied by a single tipped-in vintage photograph — a hand holding a brass sextant against a sky of impossible warmth. No nav. No CTA. The reader is invited by the *absence* of invitation. 2. **Bulletin II — The Charter.** A 110-word charter set as a single justified paragraph in honeyed cream over walnut-warmth, with a 6-line drop cap "A" rendered as a hand-engraved brass capital with a subtle metallic sheen. 3. **Bulletin III — The Index of Improvisations.** A two-column directory of seven completed *ad hoc* missions, each with a serial number, a Latin operating designation, a date set in expanded small caps, and a 24-word abstract. Vintage photography sits in the gutter as half-bled half-page **plates within plates**. 4. **Bulletin IV — Plate of Instruments.** Full-bleed engraved-line illustration of three improvised instruments — a sextant retrofitted with a transistor, a compass with a sodium readout, an hourglass with a small antenna — annotated in the manner of a 1960s technical manual, callouts drawn in single-stroke brass. 5. **Bulletin V — Field Photograph.** A single full-bleed vintage photograph (warmly graded, ~3200K, with a faint Kodachrome grain overlay) occupies 78% of the plate. Beneath it sits a 32-word caption in italic humanist serif, with the photographer's initials and a serial in DM Mono small caps. 6. **Bulletin VI — Marginalia.** A reading column flanked by ample margin into which footnotes are tipped — set in 11px humanist italic with a brass leader rule connecting each note to its anchor in the body. The reader's eye moves laterally between body and margin in the manner of a scholarly edition. 7. **Bulletin VII — The Postscript Frieze.** A text-free band: a full-bleed honey-cream field bearing a slow, 24-second horizontal pan over a vintage panoramic photograph. The only text is a single rotated dateline (*GENEVA · MMLXVIII*) set in the lower-right margin in 10px DM Mono. 8. **Bulletin VIII — Colophon.** The press mark. Typefaces listed in small caps DM Mono. A single hand-engraved brass monogram "AQ" floating centered. A line that reads *Set by hand, on a console, in a room with the curtains drawn.* No "back to top." No social. No newsletter. The page ends. There is **no horizontal navigation.** There is **no sidebar.** There is **no sticky header.** There is **no scroll progress bar.** The reader's only instrument is the scroll wheel and the brass rule. ## Typography and Palette **Typefaces** (Google Fonts, all available): - **Cormorant Garamond** (variable, used 400 / 500 italic / 600) — the body voice. A Garamond revival with the slight oddness of a private revival. Set at 1.0625rem with line-height 1.78 in body passages. Used for the Charter, abstracts, captions, and marginalia. - **Playfair Display** (700 italic) — used *only* for pull-quotes and bulletin operating designations. Set in italic to feel hand-inscribed. Restricted use; never used for body or for headings. - **Cormorant SC** (small caps, 500) — the catalog voice. Used for serial numbers, dating, and section markers. Letter-spaced 0.16em. - **DM Mono** (300, 400) — the field voice. Used for footnote leaders, instrument annotations, photographer initials, dateline, colophon. Never larger than 0.78rem. - **Petit Formal Script** — used *exactly twice on the page*: once on the slipcase as a tipped-in directorial signature, once on the Colophon as the final fleuron-mark. The signature draws in via SVG path animation over 2200ms when the reader first encounters it. The headline voice is **humanist** in the precise sense: Cormorant Garamond at clamp(3.6rem, 8.4vw, 6.8rem), regular weight (not bold), letter-spaced -0.012em, set with optical kerning. Headlines are *quiet*. They do not shout. They occupy generous space and let the typesetting speak. **Palette — Honeyed Neutral:** | Role | Hex | Notes | |------|-----|-------| | Vellum (page) | `#F4E9D2` | Warm cream, the unprinted cardstock | | Walnut (deep field) | `#3A2A1B` | Deep oiled-walnut brown, the operations theater | | Brass-Antique (rule, glyph) | `#B8924E` | Aged brass, hairlines and small marks | | Honey-Amber (accent) | `#E0A648` | Sodium-tungsten warmth, used sparingly | | Tobacco (mid-tone) | `#7A5A38` | Body-text alternate on cream, footnote color | | Ivory-Linen (highlight) | `#FBF4E1` | Lift, used for tipped-in caption blocks | | Plum-Ribbon (single accent) | `#5B2E48` | Used *exactly once* — on the slipcase ribbon and nowhere else | | Bookbind-Black (only deepest type) | `#1A130C` | Used only for the brass monogram engraved fill | | Lightbox-Cool (correction) | `#D4C9AE` | A cool-warm cream used only inside Plate-of-Instruments callouts to suggest paper-tape printer output | The palette is **almost entirely warm**. The single use of plum-ribbon `#5B2E48` is the design's *formal accent* — the color of the silk bookmark, no other element on the page may use it. This restriction is the design's honor mark. Color contrast follows printer's logic: vellum-on-walnut for header plates, tobacco-on-vellum for body, honey-amber as accent only in instrument callouts and brass dot terminations. ## Imagery and Motifs **Vintage Photography.** Every plate that bears a photograph uses a *single* full-bleed image, warmly graded to ~3200K with a subtle Kodachrome 25 grain overlay (~9% noise, ~0.6px structure) and a barely-perceptible warm vignette. Subject matter: - A hand holding a brass sextant against a sodium-warm sky (Bulletin I). - An archival photograph of a control console — knurled brass switches, an oscilloscope showing a single still sine, a porcelain mug — taken in a windowless room (Bulletin III interstitial). - A panoramic field photograph of an alpine ridge at dusk, the kind of horizon you only see from a private aircraft (Bulletin V). - A panoramic of an empty ballroom or operations theater with brass instruments laid out on a velvet table (Bulletin VII frieze). All photographs are **uncropped and full-bleed** — the reader sees the entire frame, with an authentic 35mm aspect-ratio honored. There are *no* duotone treatments, *no* heavy filters; the warmth is integral to the original exposure, not applied as a Photoshop layer. The grain is the *only* post effect. **Engraved Instrument Illustrations.** Hand-drawn single-stroke SVG line illustrations in brass-antique `#B8924E` over vellum `#F4E9D2`. Three custom illustrations are required: 1. *Improvised Sextant with Transistor Module* — sextant body in single-line stroke, transistor module attached at the 4-o'clock position with hatch shading. 2. *Compass with Sodium Readout* — compass face with brass needle, lower half of face replaced with a digital seven-segment display showing nonsense glyphs. 3. *Hourglass with Antenna* — hourglass with a small whip antenna emerging from the top finial, sand mid-flow. Each illustration draws itself in via SVG `stroke-dasharray` animation when its plate enters viewport — 2400ms total, with the antenna and digital readout drawing *last* to deliver the retro-futurist punchline. **Tech Motifs.** The "tech" motif is *historically displaced*: it appears as 1960s-era instrumentation drawn in the visual language of an Encyclopedia Britannica plate, never as modern UI. Tech motifs include the seven-segment digital glyphs, a single oscilloscope sine, a paper-tape-printer ribbon (used as a bottom border on Bulletin IV), and a small punched-tape glyph used as a section break (▣ ▢ ▣ ▢). No screens. No keyboards. No code blocks. **Decorative Marks:** - **Honey-amber delta glyph** (▽) — section terminators. - **Brass dot** — line terminations at the 92vw mark on every horizontal hairline. - **Pearl-string** — a row of 12 brass `` elements, 4px diameter, 16px on-center, used twice (between Bulletin V and VI, between Bulletin VII and VIII), drawn in via stagger over 900ms. - **Tipped-in ribbon** — a CSS-only plum `#5B2E48` ribbon angled at -8°, sitting at the upper-right of the Charter plate, with a 2px sheen highlight. - **Hand-engraved monogram "AQ"** — in the colophon, a custom SVG monogram with single-stroke brass linework, ~96px tall, drawing in over 2000ms. There are **no icons in the modern sense.** No mobile-app glyphs, no Material chips, no Heroicons. Every visual element is hand-drawn or engraved in the manner of a 1960s technical document. ## Prompts for Implementation Build adhoc.quest as **one long full-bleed HTML document** — eight bulletins, no SPA, no router, no modals, no nav chrome. The reader scrolls top-to-bottom through the catalog like opening a slipcased folio at a private library reading desk. Prioritize *atmosphere over information*, *typography over imagery*, *one slow vertical descent over branching paths*. There is no CTA, no pricing, no testimonial, no stat-grid, no FAQ, no email capture, no "subscribe," no "get started." The page is a **reading object** wearing a brass-and-walnut frame. **Core experience prompts:** - **The slipcase opens first.** On page enter, the canvas is solid walnut `#3A2A1B`. Over 1800ms, a pair of horizontal honey-amber `#E0A648` rules sweep inward from the top and bottom edges to meet at 7vh and 93vh — the slipcase opening. Then over a further 1400ms, the vellum field `#F4E9D2` fades in from the top down, like cream paper being drawn out from inside walnut casing. Only then does the first bulletin's typography fade-reveal. The reader watches the *opening of the case* before they read a word. This is the design's overture and happens exactly once on session entry. - **Fade-reveal is the *only* scroll mechanic.** Implement via `IntersectionObserver` with `rootMargin: '-10% 0px -30% 0px'`. Each plate's content begins at `opacity: 0; letter-spacing: 0.32em`, transitioning to `opacity: 1; letter-spacing: normal` over 1200ms `cubic-bezier(0.16, 1, 0.3, 1)`. **No translation, no slide, no parallax, no scale.** Just opacity and letter-spacing relaxation. The page should feel like ink soaking into paper, not like elements flying in. - **The brass rule draws itself.** On every plate, the persistent vertical brass hairline at 8vw and the horizontal hairline at 7vh draw themselves in via SVG `stroke-dasharray` over 1600ms when the plate enters viewport, *before* the body text fades in. The brass dot at the line termination scales from 0 to 1 over 300ms after the line completes. The reader watches the page *rule itself* before it speaks. - **Bulletin II — The Charter** uses Cormorant Garamond at 1.1875rem, line-height 1.82, *justified* with hyphenation enabled, and an SVG-engraved drop-cap "A" 6 lines tall in brass-antique with hatch shading drawn line-by-line over 1800ms. The drop-cap appears *after* the body text fades in, with its own fade-reveal — the reader watches the capital "settle into" the paragraph it leads. - **Bulletin III — The Index** is a 12-column subgrid where each entry occupies a 6-column row. The serial number is set in Cormorant SC small caps `0.78rem` brass-antique, the operating designation is Playfair Display 700 italic at `1.6875rem` walnut, the date is DM Mono 0.78rem letter-spaced 0.18em tobacco, and the abstract is Cormorant Garamond 0.9375rem tobacco at line-height 1.66. Each entry is separated by a brass-rule that draws in over 700ms when its row enters viewport. There are seven entries, the seventh marked simply *—* (em-dash) as if the eighth is yet to be filed. - **Bulletin IV — Plate of Instruments** is the design's *aria*. The three engraved instruments are arranged in a triptych across the full bleed (33.33vw each), each in its own framed compartment with a hairline brass border. As the plate enters viewport, instruments stroke-draw left-to-right with a 400ms gap between them — first the sextant, then the compass, then the hourglass. After all three complete, their callouts (DM Mono 0.72rem, brass leaders) fade-reveal in a 200ms stagger. The retro-futurist punchline — the transistor on the sextant, the seven-segment readout on the compass, the antenna on the hourglass — is drawn *last* in each illustration with a 200ms delay to deliver the small joke. - **Bulletin V — Field Photograph** loads the full-bleed image at native resolution with a faint Kodachrome grain SVG overlay (`` baseFrequency=0.9, displacement at 9% opacity). The image fades from 0 to 1 opacity over 2400ms — slower than typography reveals — so the reader registers it as a photograph being *projected* onto the page, not loaded onto the page. Beneath the image, the caption fades in 800ms after the image completes. - **Bulletin VI — Marginalia** uses CSS Grid: the body column occupies columns 2–8, footnotes occupy columns 10–12 in DM Mono 0.78rem with brass-leader hairlines. Each footnote fade-reveals 500ms *after* its anchor in the body, simulating the reader's eye flicking from main text to margin and discovering the note already there. - **Bulletin VII — Postscript Frieze** is text-free (except a tiny dateline). The full-bleed panoramic photograph slowly pans horizontally from `translateX(-3%)` to `translateX(0%)` over 24 seconds, looped via CSS `@keyframes`. The grain overlay drifts *opposite* the pan at -1% over the same period. The frieze is a *visual breath* between long reading passages. - **Bulletin VIII — Colophon** is the closing pressmark. The hand-engraved brass monogram "AQ" strokes in over 2000ms. Beneath it the typefaces are listed in DM Mono small caps. Beneath that the line *Set by hand, on a console, in a room with the curtains drawn.* fades in. After that, the directorial signature (Petit Formal Script, brass-antique) draws itself in via SVG path animation over 2200ms — a single visible flourish, the only handwritten mark on the entire page besides the slipcase signature. There is no footer. There is no back-to-top. There is no social row. The page ends. - **The vellum breathes.** The page background is one full-bleed `body::before` pseudo-element bearing a barely-visible composite radial — `#F4E9D2` at center fading to `#EDE0C2` at edges — animated via CSS `@keyframes` over 32 seconds, the radial center drifting on a Lissajous curve through ±2vw. The shift is so slow the reader never consciously sees motion, but registers the page as "alive." - **Sodium-warm tungsten flicker.** Every honey-amber accent (`#E0A648`) — the brass dots, the section delta glyphs, the instrument-callout terminators — has a subtle CSS `filter: brightness()` keyframe that shifts between 0.96 and 1.04 over 7 seconds with random offset per element. The reader senses warmth without seeing flicker. (Disabled under `prefers-reduced-motion`.) - **No cursor effects.** Despite 54% of sibling sites using cursor-follow, adhoc.quest has *no* cursor reactivity — no magnetic buttons, no cursor highlight, no parallax-on-mouse. The page is an object, not a toy. The cursor is a cursor. - **No hover scale, no hover lift, no hover tilt.** The only links are inline footnote references and the colophon mark. They are styled with brass-antique underlines that stroke-draw on hover (320ms). That is the *entire* hover vocabulary. - **Reduced motion.** Under `prefers-reduced-motion`, the slipcase opening completes instantly, the gradient holds still, the tungsten flicker holds, the photograph appears at full opacity, and the panoramic frieze does not pan. Fade-reveals collapse to a 120ms opacity step. The page is still readable as a static composition — it must be, because this is a reading object first and a kinetic object second. - **Typography responds to viewport.** All clamp-based sizes scale fluidly between 360px and 1920px viewports. On viewports below 720px, the 12-column subgrid collapses to single column, marginalia tip *below* their anchors with a brass leader pointing up, and the instrument triptych stacks vertically (each at 100vw, 60vh). - **One sound, optional, off by default.** A loop of a brass console clock ticking at ~0.92Hz, faintly. An `