# Design Language for adhoc.quest ## Aesthetics and Tone adhoc.quest is a **glacial cartography of unplanned journeys** — a cold, luminous timeline where each impromptu detour is recorded the way a meteorologist records auroral substorms: with reverence, instrumentation, and patience. The domain word "adhoc" is read literally — *for this, this only* — every event on the page is a one-off, never to recur. The aesthetic is **neomorphism cooled to permafrost**: soft extruded panels carved from a single pane of frosted glacial ice, lit from within by slow-moving aurora bands rather than from above by a sun. Inner shadows are not dark; they are **slightly more saturated cyan** than the surface. Outer highlights are **slightly more saturated rose-violet**. The overall mood is contemplative, almost monastic — the kind of calm that settles over a research station at four in the morning when the sky decides to perform. The tone is **calm-serene** without becoming sleepy. Animation is glacial — measured in seconds, not milliseconds — but never absent. The page breathes the way a thermosphere breathes during a coronal mass ejection: long inhales, long exhales, occasional shimmer. Nothing is shouted. Nothing is sold. The visitor is treated as a fellow watch-keeper rather than a customer. A second register layered beneath the calm is **glitch as honesty**. Because every entry is ad hoc, the data is imperfect — frames drop, timestamps stutter, color channels separate by a pixel for one frame every twenty seconds. The glitch is not aggressive; it is the soft electromagnetic interference one expects when recording the sky too close to magnetic north. It functions as the site's signature, proof that the record is unrehearsed. Inspirations: Tomas Saraceno's *Aerocene* photographs, Hiroshi Sugimoto's *Seascapes*, Kjell Henriksen Observatory all-sky cameras, the soft-UI dashboards of polar science instruments circa 2003, frost forming on the inside of a north-facing window, Arvo Pärt's *Spiegel im Spiegel*. ## Layout Motifs and Structure The page is a single **timeline-vertical** running edge to edge from a fixed top anchor (`00:00 UTC, Day 0`) to a soft horizon at the bottom (`∞`). It is read top-to-bottom like a column of recorded sky. The timeline is *not* a sidebar accessory — it is the spine and the load-bearing structure. Everything that happens on the page hangs from it. **The Spine.** - A vertical glass channel, 56 px wide, centered on the viewport at the desktop breakpoint and pinned to the left gutter on mobile. - The channel is rendered as a single neomorphic groove — a recessed soft-UI rail with cyan inner shadow on its right edge and rose-violet inner shadow on its left edge, giving it the convex/concave shimmer of a fiber-optic conduit. - A slow-moving **aurora ribbon** drifts inside the channel, a vertical band of greens, magentas, and pale blues that flows downward at exactly 1/12 of the user's scroll velocity. When the user stops scrolling, the ribbon continues its own ambient drift at 6 px/sec. - Tick marks every 64 px mark hours; longer ticks every 512 px mark days. Ticks are etched into the glass — not drawn on top. **The Stations.** Each event/section is a **station** — a frosted neomorphic capsule docked to the spine via a short horn. Stations alternate sides (left, right, left, right) but never symmetrically: each station's vertical position is offset by a Halton-sequence jitter of ±24 px so the rhythm feels recorded, not designed. A station is composed of: - A **horn** (8 px tall pipe) connecting station to spine, rendered as the same recessed soft-UI groove. - A **capsule** (rounded rectangle, 32 px corner radius) extruded from the page background by 6–10 px using paired soft inner-shadows. No borders, ever. - A **dial** (circular icon well, 88 px) sunk into the capsule's leading edge, holding the station's identifying glyph from the icon library. **Reading flow.** - Above the spine, a **horizon hero** the height of `100svh` introduces the journey: a static panorama of dark frost with an aurora band slowly translating laterally. The site title `adhoc.quest` is set into the frost as an embossed neomorphic engraving. - Below the hero, the timeline begins. Scroll-snapping is *off* — the timeline scrolls fluidly so that user pacing is preserved; momentum scroll feels like skating on ice. - The timeline supports **branch arms**: when an ad-hoc journey forks (a station with multiple outcomes), two horns extend from the same y-coordinate of the spine to two capsules on opposite sides, and the aurora ribbon temporarily bifurcates inside the channel for the duration of that segment, rejoining 256 px below. - The page ends at a **horizon foot** the height of `90svh`, mirroring the hero, where the spine fades to nothing and the aurora ribbon dissolves into a field of slow-twinkling pixels. No sidebar, no nav, no footer-as-link-grid. A single thin **filter-strip** floats at the top right — three neomorphic toggle pills marked `field`, `studio`, `interlude` — that ghost-fades stations not matching the active filter to 18% opacity rather than removing them, preserving the journey's continuity. ## Typography and Palette **Typography — serif-revival, all from Google Fonts.** The page is set in revived bookwork serifs that read as quiet instrument labels rather than literary ornament. Three faces only: - **Display:** *EB Garamond* — used for the site title `adhoc.quest`, station names, and any standalone large numerals (timestamps, dates). Weight 500 for engraved text on the spine, weight 800 for capsule headlines. Optical-size axis pulled toward 14 for headlines so the contrast between hairline and stem is visible. Tracking: −0.02em on display sizes; +0.04em on small caps. - **Body:** *Cormorant Garamond* — italic 400 and roman 500 — set at 17 px / 28 px. Italic is reserved for narration ("we did not plan this"), roman is reserved for record ("temperature: −38C"). Hyphenation on, widows orphans suppressed. - **Numerals and metadata:** *IBM Plex Serif* — weight 400, tabular numerals — used for the spine's tick labels and the station dials. Plex Serif chosen for its instrument-panel legibility while remaining a serif (preserving the revival register against the 90% mono-typography over-saturation in the registry). Headlines descend in size like a weather glass: hero engraving 168 px → station name 56 px → station subhead 28 px → body 17 px → metadata 13 px. Letter-spacing tightens as size grows. Italics never appear above 28 px. **Palette — translucent-frost, eight stops.** The palette behaves as a single sheet of frost backlit by an aurora. Surfaces are pale and cool; accents are auroral and saturated; nothing is warm. - `#E8EEF4` — *frost surface*, the base canvas. Very pale blue-grey, ~94% lightness. - `#D6DEE7` — *frost recess*, the inner-shadow tone for neomorphic grooves. - `#F4F7FB` — *frost highlight*, the outer-shadow / rim-light tone for neomorphic extrusion. - `#9CB6CC` — *winter pewter*, the muted ink for body type, never pure black. - `#1F2A3A` — *deep glacier*, the darkest text reserved for display engravings; sits at AAA against `#E8EEF4` but is used sparingly. - `#7BE3C8` — *aurora teal*, the primary auroral band color. - `#B49CFF` — *aurora violet*, the secondary auroral band color. - `#FF8FC2` — *aurora rose*, the tertiary auroral band color, used only at the spine's brightest moments and on glitch chromatic aberration. The aurora ribbon is rendered as a CSS conic-gradient blended with a noise mask, cycling through teal → violet → rose → violet → teal over 48 seconds. The chromatic-aberration glitch separates `#7BE3C8` and `#FF8FC2` channels by 1.5 px for one frame every ~20 seconds. ## Imagery and Motifs **Imagery is icon-heavy** — there are no photographs anywhere. The site's entire visual lexicon is a custom **glyph library** of 64 thin-line symbols representing ad-hoc events, drawn at 1.25 px stroke weight on a 24-grid, all sharing a common terminal cap and a common geometry of arcs. The glyphs sit inside the dial of every station and are the page's primary illustrative material. Categories of glyph: - **Field events** — compass with bent needle, a tent in side-profile with a curl of smoke, a bootprint with a pebble, a thermometer reading negative, a tin cup, a lantern. - **Studio events** — open notebook with a single line of writing, a tape reel mid-spin, a paint tube uncapped, a kettle steaming, a record needle hovering, a window with frost. - **Interlude events** — a candle just lit, a folded paper boat, a single fish-shape, a closed eye, a vapor trail. - **System glyphs** — an aurora arc, a fork in the spine, a glacier silhouette, a snowflake of asymmetric geometry (no two arms identical), a horizon line. Every glyph is monochrome `#1F2A3A` on the dial, then redrawn behind the dial as a soft-UI **embossed echo** (extruded into the frost) at 4 px offset, so every icon casts a tiny topographic ghost of itself. **Motifs.** - **Aurora-lights** as the only animated visual ambient. Bands flow inside the spine; bands also drift behind the hero and foot horizons. Bands are SVG paths animated with `` plus filter-driven turbulence. - **Frost crystallization** at station entry — when a station scrolls into view, hairline fractal frost lines bloom outward from the dial across the capsule for 1.4 seconds, then settle. - **Tick marks** — the etched marks on the spine — appear, repeat, and structure rhythm; they are the page's only "grid." - **Branch confluence** — at fork stations the spine's aurora ribbon visually bifurcates and rejoins. - **Horizon vignettes** — top and bottom of page, soft fades into frost. Decorative restraint is total: no waves, no particle confetti, no scribbles, no bubbles, no marbled busts. ## Prompts for Implementation Build adhoc.quest as a **single, slowly-traversed timeline** that narrates one continuous record of unplanned events. The visitor scrolls through it the way a watch-keeper scrolls through last night's sky cam. There is no homepage hero CTA, no pricing, no stats, no testimonials, no signup. Storytelling, instrumentation, and atmosphere only. **Macro structure (top to bottom):** 1. **Horizon Hero (`100svh`).** Static frost field. The aurora drifts left-to-right behind the engraved title `adhoc.quest`. A subtitle in Cormorant italic: *"a record of journeys nobody planned."* A timestamp `00:00:00 UTC` slowly increments in IBM Plex Serif tabular at the bottom-left, indicating the page has been alive since pageload. No nav. No button. The only affordance is a small etched glyph of a downward arc — a hint that there is more below. 2. **The Spine begins.** As the user scrolls past the hero, the central glass channel materializes by extruding upward from the bottom of the viewport, and the aurora ribbon ignites inside it. This single transition takes 900 ms. 3. **Stations scroll past.** Each station is intersection-observed; on entry it (a) crystallizes its frost lines outward from the dial, (b) raises its capsule from 0 px to 8 px extrusion, (c) reveals its name with a 220 ms staggered fade per word, (d) plays its glyph's micro-animation once (the kettle puffs steam, the tape reel completes one rotation, the candle's flame flickers). 4. **Branch arms** at fork stations show two outcomes side-by-side; below the fork the spine reunifies. 5. **Horizon Foot (`90svh`).** The spine fades, the aurora ribbon dissolves into a field of pixels that slowly cool to the frost surface tone. A single line in Cormorant italic: *"to be continued, ad hoc."* No subscribe, no share, no follow. **Animation guidance.** - Default easing: `cubic-bezier(0.32, 0.72, 0.24, 1)` — a long, calm exit. - Default duration: 900 ms for entry, 1400 ms for exit. - Aurora ribbon: SVG `` with `baseFrequency` animating between 0.012 and 0.022 over 14 s, displaced through `` at scale 38, fed into a conic-gradient mask. Use `prefers-reduced-motion: reduce` to halt only the turbulence; the gradient still drifts. - Glitch: every ~20 s, randomly select a single station currently in the viewport and apply a 90 ms chromatic-aberration: split `#7BE3C8` and `#FF8FC2` channels by ±1.5 px on the X axis, and overlay a 2 px scanline band that translates vertically once across the capsule. Then return to clean state. - Cursor: a small frost-colored circular halo (28 px) follows the cursor with 280 ms spring lag; when the cursor approaches a station's dial within 96 px, the halo magnetically nests into the dial and the dial's glyph plays its micro-animation. - Scroll: native momentum scrolling, no scroll-jacking. The aurora ribbon's vertical drift is the only thing tied to scroll velocity. **HTML/CSS/JS notes.** - Neomorphism is rendered with paired box-shadows: outer rim-light `4px 4px 12px #F4F7FB` and inner cool-shadow `inset -3px -3px 8px #D6DEE7, inset 3px 3px 8px #F4F7FB`. Recessed grooves invert these. The shadows are tinted, never grey. - Build the spine as a single `position: sticky` SVG that spans full document height; use a `mask-image` to clip the aurora gradient inside the channel; the ticks are SVG `` elements with `stroke-dasharray` for etched feel. - Glyph library is hand-drawn 24 px SVG sprites referenced via ``; each glyph also includes a `` for its embossed echo behind the dial. - Use `clip-path` and `backdrop-filter: blur(18px) saturate(140%)` on the capsules so that the aurora ribbon, when peeking through behind a capsule, is softly diffused. This is what makes the frost feel translucent rather than painted. - Type scale: define using `clamp()`; do not snap to pixel breakpoints. - All copy is set in the past tense and the first-person plural — *we left the road at noon, the snow began at three* — never in marketing voice. Dates are ISO-8601. Temperatures in C with negative sign. Locations are coordinates, not place names. **Avoid:** CTA buttons stacked under hero text, pricing tables, three-card "feature" grids, statistic counters that animate from 0 to N, hero images of laptops, gradient blobs, parallax layered hero (already 80% saturated in the registry), full-bleed photography (85%), warm palette (95%), monospace UI (90%), centered hero (85%), vintage motifs (75%), hand-drawn imagery (75%). ## Uniqueness Notes **Differentiators from the existing registry:** 1. **Timeline-vertical as a literal load-bearing spine, not a section.** The frequency report shows `timeline-vertical` at 0% across 20 prior designs. adhoc.quest does not merely "use" a timeline — the entire page is a single timeline; the timeline is the navigation, the structure, the imagery, and the metaphor. The aurora ribbon flows inside the timeline channel; stations dock to the timeline; even the hero and foot are anchored as endpoints of the timeline. Most existing designs in the registry are full-bleed (85%) and centered (85%); none are spine-bound. 2. **Neomorphism rendered cold rather than warm.** Soft-UI in 2020s practice almost always uses warm or neutral grey base tones; the registry shows warm palettes at 95% and neomorphism at 0%. This design specifies tinted shadows — cyan inner shadow on one edge, rose-violet outer highlight on the other — and a frost surface that is unambiguously cool. The neomorphism reads as carved ice, not as plastic clay. 3. **Aurora-lights as ambient atmosphere instead of a hero accent.** `aurora-lights` motif is at 0% in the registry. Most sites that flirt with auroral imagery treat it as a static gradient backdrop. Here the aurora is animated SVG turbulence flowing inside the spine's channel and drifting laterally behind the hero, behaving like an actual living atmospheric phenomenon with bifurcation, drift, and intensity changes. 4. **Translucent-frost palette with no warm tones at all.** Registry shows warm palettes at 95% and gradient palettes at 90%. translucent-frost is at 0%. adhoc.quest commits to a fully cool palette; even the auroral accents (teal/violet/rose) are cool-leaning, with the rose tipped magenta rather than orange. 5. **Glitch as honesty signal, not as aesthetic noise.** glitch as a pattern is rare in the registry (5%). When used elsewhere it is loud and crash-coded. Here the glitch is sub-second chromatic aberration on a single in-view capsule once every ~20 seconds, framed in the copy as "the record is unrehearsed." The glitch carries narrative weight rather than visual weight. 6. **Icon-heavy with a custom 64-glyph hand-drawn library and embossed echoes.** No photography (registry: 85% photography). Every illustrative element on the page is a custom thin-line glyph that doubles as an embossed neomorphic echo behind the dial — an aesthetic move I do not see anywhere else in the registry. 7. **Serif-revival typography in a registry over-saturated with mono.** Mono typography is at 90%. This design uses three serif faces (EB Garamond, Cormorant Garamond, IBM Plex Serif) and zero monospaced or sans faces, deliberately resisting the registry's dominant default. 8. **Calm-serene tone with no marketing voice.** Registry tones cluster around professional, friendly, bold-confident. calm-serene is at 0%. adhoc.quest commits to past-tense first-person-plural narrative copy throughout — *we left the road at noon* — and forbids CTA, signup, pricing, and stat-grid blocks entirely. **Chosen seed:** `aesthetic: neomorphism, layout: timeline-vertical, typography: serif-revival, palette: translucent-frost, patterns: glitch, imagery: icon-heavy, motifs: aurora-lights, tone: calm-serene`. **Avoided patterns from frequency analysis:** warm palette (95%), gradient (90%), mono typography (90%), photography (85%), full-bleed (85%), centered (85%), parallax (80%), vintage motifs (75%), hand-drawn aesthetic (75%), editorial aesthetic (50%), scroll-triggered animation as a default (50%), stagger as a default (50%). Where any of these would be a default choice (e.g., centered hero, parallax depth, photographic imagery), this design substitutes the spine-anchored alternative.