# Design Language for lower.quest ## Aesthetics and Tone lower.quest is the field journal of a descent. It treats the act of going *down* — into bedrock, into archive vaults, into the quiet sub-basements where institutions keep what they cannot throw away — as a deliberate, dignified expedition rather than a fall. The aesthetic is **corporate expedition-log**: the visual language of a serious organization (measured margins, ledger-ruled columns, embossed seals, the calm authority of a board report) crossed with the **sci-fi-hud** instrumentation of a deep-descent vehicle — depth gauges, pressure readouts, sonar pings, a slowly counting altimeter that runs in the *negative*. The tone is **grounded-earthy**: warm, mineral, unhurried. Nothing flickers anxiously; the only thing that pulses is the slow heartbeat of a descent telemetry ring, a steady ~52 BPM that says *we have time, the depth is real, keep going down*. Inspiration: the production design of *Annihilation*'s "Area X" briefing rooms; 1970s NASA mission documentation printed on cream stock; the leather-bound dive logs of bathyscaphe *Trieste*; the embossed letterhead of a geological survey; the amber glow of a single instrument panel in an otherwise dark cabin. This is **sepia-nostalgic** without being a costume. It is not "vintage" — it is the patina that real institutional paper acquires after thirty years in a climate-controlled vault: not yellowed by neglect, but warmed by time and careful keeping. The site should feel like opening a leather portfolio you were *trusted* with. ## Layout Motifs and Structure **Primary layout: centered, single ledger-column descending through depth strata.** The entire experience is a vertically-centered column — `max-width: 760px`, generous symmetric gutters — that the visitor *descends* through. The centered constraint is the concept made literal: this is a focused shaft, a borehole, not a sprawling landscape. Everything important happens on the centerline. Fixed to the left and right edges of the viewport (outside the column, in the gutters) are two thin **HUD rails**: - **Left rail — Depth Altimeter:** a vertical track with a tick every 50 units, and a small bracket marker that slides downward as the visitor scrolls, displaying a *negative* readout (`−000`, `−240`, `−1,640 …`) in a monospace face. It never resets; the deeper you scroll, the lower the number. - **Right rail — Pressure & Status:** a slim instrument stack — a faux pressure bar that fills warm amber as you descend, a "HULL: NOMINAL" status chip, and a tiny pulsing telemetry dot (the 52-BPM heartbeat). The column itself is divided into **depth strata** — sequential full-viewport-tall sections, each a distinct geological/archival layer: 1. **SURFACE / 0m — The Briefing.** Embossed corporate seal of "lower.quest" on a leather-textured plate; the descent objective stated in calm Baskerville; a single instruction: *Begin descent.* 2. **−240m / TOPSOIL & FILING.** Where recent records live. Warm cream, ledger ruling visible. 3. **−1,200m / SEDIMENT.** Layered horizontal striations across the section background; text emerges between strata. 4. **−4,800m / BEDROCK.** The cream darkens toward warm umber; the HUD glow becomes the dominant light source. 5. **−10,994m / THE FLOOR (CHALLENGER DEEP datum).** The deepest archival point — a single embossed plaque, the heartbeat at its slowest, the column briefly *stops*. 6. **RETURN / ASCENT LOG.** A short colophon framed as a debrief: pressure normalizing, altimeter ticking back toward 0, the portfolio closing. Section transitions are **drilled, not scrolled**: as one stratum exits, a thin amber horizon-line sweeps down across it and the next stratum's background tint is already a shade deeper. There is no `card-grid`, no `bento-box`, no `dashboard` — the only "dashboard" elements are the two diegetic HUD rails, which are framing instruments, not content tiles. ## Typography and Palette **Typography:** - **Display / Stratum Titles & Depth Markers:** **"Libre Baskerville"** (Google Fonts) — the screen-tuned revival of Baskerville's transitional serif: high stroke contrast, bracketed serifs, the unmistakable calm of an 18th-century title page reissued as a 1970s corporate annual report. Used for stratum names and the large embossed depth figures. Weight 700 for titles, 400 italic for epigraphs. Letter-spacing: 0.04em. The "baskerville-refined" voice — composed, authoritative, never shouting. - **Body / Briefing Prose:** **"Spectral"** (Google Fonts) — a low-contrast serif with a steady, readable color on screen; the texture of a well-set internal memo. Weight 400, 1.7 line-height, measure capped at ~64 characters by the centered column. - **Instrumentation / HUD Readouts & Labels:** **"Space Mono"** (Google Fonts) — fixed-width, slightly mechanical, perfect for the altimeter digits, pressure values, "HULL: NOMINAL", and stratum coordinates. Uppercase, 0.18em tracking, small sizes (0.7–0.8rem). This is the only "tech" typeface and it lives exclusively in the gutters and on small caption chips — never in body copy. - **Section eyebrow tags:** Space Mono uppercase, e.g. `STRATUM 03 · SEDIMENT · −1,200m`. **Palette — sepia-nostalgic, warm and mineral:** - `#f2e8d5` — **Vault Cream**: the surface-stratum paper; primary background up top. - `#e3d3b8` — **Aged Ledger**: secondary paper tone, ruling lines, panel fills. - `#3a2c1c` — **Umber Ink**: primary text on cream; the deep-stratum background as you descend. - `#5b4730` — **Walnut Leather**: leather-texture plates, embossed-seal base, mid-tone dividers. - `#c08a3e` — **Brass Instrument**: the HUD accent — altimeter marker, pressure-bar fill, horizon-sweep line. The amber glow. - `#8a6a3c` — **Patina Bronze**: secondary HUD ticks, hairline rules, hover states. - `#2a1f12` — **Sub-Bedrock**: the darkest stratum background (the −10,994m floor), nearly black-brown. - `#d9c3a0` — **Lamplit Sand**: muted text on the dark deep strata; the "low light" reading color. Contrast pairing rule: warm-on-warm always — never introduce a cool grey or a pure white. Highlights are achieved with **brass `#c08a3e` at varying opacity and a faint glow**, never with white. ## Imagery and Motifs - **Leather-texture plates (the signature surface):** Key elements — the masthead seal, stratum-number medallions, the −10,994m floor plaque — sit on rectangular plates rendered as *embossed leather*. Built in pure CSS: a `#5b4730` base, a layered `radial-gradient` + `repeating-conic-gradient` grain at 4–8% opacity to suggest pebbled hide, a tight inset `box-shadow` (dark top-left, light bottom-right reversed for the *debossed* areas — text pressed *into* the leather), and a 1px brass keyline. Optionally a very faint SVG `feTurbulence` displacement on a `::before` to break grain regularity. No photographs of leather — it is *constructed*, the way a brand asset is. - **Embossed corporate seal:** A circular SVG mark for "lower.quest" — concentric rings, a downward chevron stack at the center (▽▽▽), the words `LOWER · QUEST · DEPTH SURVEY` set in Space Mono around the rim. Rendered debossed into the leather masthead plate (dark inner shadow), with a thin `#c08a3e` rim catching "light." - **Depth-gauge altimeter:** The left-rail instrument — an SVG vertical scale, major ticks every 50 units in brass, minor ticks in patina bronze, a triangular bracket marker that translates downward bound to scroll progress, and a live `−`-prefixed counter (the *only* counter on the site, and it counts *down*, inverting the genre's usual upward "stat counter"). - **Sediment striations:** Section backgrounds for the SEDIMENT stratum carry horizontal banded gradients — irregular-width stripes in `#e3d3b8` / `#d9c3a0` / `#c08a3e`-tint — like a core sample laid sideways. Text appears in the lighter bands. - **Sonar / pressure ping:** A diegetic SVG ring on the right rail that expands-and-fades on the heartbeat interval (the pulse-attention motif): `opacity 1 → 0`, `scale 1 → 2.4`, easing `ease-out`, every ~1.15s (≈52 BPM). It is small, quiet, and constant — a heartbeat, not an alarm. - **Ledger ruling:** Faint horizontal hairlines (`#8a6a3c` at 10–14% opacity) behind body prose in the upper strata, fading out entirely by BEDROCK — paper gives way to rock. - **Horizon-sweep divider:** Between strata, a 1px `#c08a3e` line with a soft `box-shadow` glow sweeps top→bottom across the outgoing section as it scrolls out, leaving the next (darker) stratum behind it. ## Prompts for Implementation - **Build it as one immersive vertical descent — a single HTML document, one unbroken scroll.** No routing, no page transitions, no nav menu. The visitor *descends*; the page *is* the borehole. Bias hard toward the full-screen narrative: each stratum is ~100vh, content vertically and horizontally centered in the 760px column. - **The two HUD rails are `position: fixed`, gutter-pinned, and diegetic.** Left = depth altimeter (negative counter + sliding bracket). Right = pressure bar (amber fill bound to scroll) + "HULL: NOMINAL" chip + sonar-ping heartbeat ring. They are *instruments framing the document*, not UI chrome — style them as etched brass-on-leather, not as buttons. - **The negative altimeter is the hero animation.** On scroll, compute descent progress and render a `−`-prefixed, comma-grouped figure (`−1,640m`) in Space Mono, with the bracket marker sliding down the left-rail scale. It accelerates slightly through SEDIMENT and BEDROCK, and *holds dead still* at `−10,994m` on the FLOOR stratum (pin the section, freeze the counter, let the heartbeat reach its slowest visible beat — a held breath at the bottom of the world). On the RETURN stratum it ticks smoothly back toward `−000`. - **Stratum entrances (IntersectionObserver):** stratum eyebrow tag types in (Space Mono, character-by-character, ~28ms/char — the typewriter feel of an instrument logging a coordinate); the Baskerville stratum title rises 24px and fades in over 0.9s `cubic-bezier(.16,1,.3,1)`; the leather medallion *presses in* — a quick scale `1.04 → 1` with its inset shadow deepening, as if stamped. Body prose slide-up 16px, 0.7s, 120ms after the title. - **Background-tint descent:** Interpolate the page background from `#f2e8d5` (SURFACE) → `#e3d3b8` (TOPSOIL) → mixed warm umbers → `#3a2c1c` (BEDROCK) → `#2a1f12` (FLOOR) as a function of scroll, so the act of reading *darkens the room*. Body text color crossfades cream-ink → `#d9c3a0` lamplit-sand in step. Ledger ruling opacity fades to 0 by BEDROCK. - **Horizon-sweep between strata:** as a stratum's bottom passes ~70% of the viewport, animate a glowing 1px `#c08a3e` line from its top to its bottom over ~600ms, then reveal the next stratum already a shade darker beneath it. - **The pulse-attention heartbeat** is the sonar ring + a synchronized faint brightening of the right-rail telemetry dot, interval ~1.15s. It must read as *calm vital signs*, never as a notification badge. Slow it visibly as depth increases; slowest at the FLOOR. - **Leather and emboss are pure CSS** — gradients, `box-shadow` inset stacks, optional SVG turbulence. No raster textures, no stock imagery, no hero photos. - **Respect the centered constraint absolutely.** Content never breaks out of the 760px column. The only things in the gutters are the two instrument rails. This focus is the design. - **AVOID:** CTA buttons, "Get Started" / "Contact us" blocks, pricing tables, three-up feature grids, testimonial carousels, stat-grids of upward-counting numbers, logo clouds, hamburger menus, hero-with-a-button. There is nothing to *buy* here — only a depth to *reach*. ## Uniqueness Notes 1. **A negative, never-resetting altimeter as the central counter** — in a portfolio where 92% of designs use upward `counter-animate` "stats," lower.quest's signature number counts *down into the negative* and is diegetic instrumentation (a descent gauge), not a marketing metric. Going lower is the whole point, expressed numerically. 2. **Reading the page literally darkens the room** — the background tint interpolates cream → sub-bedrock as a function of scroll depth, with body-text color and ledger-ruling opacity following in lockstep, so the visitor physically descends from a lit surface office into a lamplit deep vault. Most "immersive scroll" sites change *content*; this one changes *available light*. 3. **Constructed embossed leather as a brand surface, not a photograph** — leather-texture renders at 0% in the imagery frequency table; here it is built entirely in CSS as debossed institutional plates (seal, medallions, floor plaque), treated like a corporate asset rather than a skeuomorphic decoration. 4. **Diegetic HUD rails confined to the gutters** — the sci-fi-hud vocabulary (3% in the registry) appears only as two thin instrument rails *framing* a strictly-centered ledger column, never as dashboard tiles inside the content — instrumentation around a document, not a control panel. 5. **A held still-point at −10,994m** — the FLOOR stratum pins the scroll, freezes the altimeter at the Challenger Deep datum, and slows the heartbeat to its quietest visible beat: a deliberate pause at the bottom of the descent that no linear-scroll site in the registry attempts. - Chosen seed: **aesthetic: corporate, layout: centered, typography: baskerville-refined, palette: sepia-nostalgic, patterns: pulse-attention, imagery: leather-texture, motifs: sci-fi-hud, tone: grounded-earthy** - Avoided per frequency analysis: upward `counter-animate` stat-grids (92%), `mysterious-moody` default tone treatment (94% — kept grounded-earthy instead), `card-grid`/`bento-box`/`dashboard` layouts, glassmorphism, photography-heavy imagery (66%), cool greys and pure white. Leaned deliberately into near-zero patterns: `pulse-attention` (0%), `leather-texture` (0%), `baskerville-refined` (0%), and the rare `sci-fi-hud` motif (3%) and `grounded-earthy` tone (9%).