# Design Language for gabs.quest ## Aesthetics and Tone gabs.quest is a **botanist's pocket field-station, made the way a 1974 Czech instrument workshop would have built it if asked to imagine the year 2014.** It is skeuomorphic without being glossy, retro-futuristic without being chrome, and the entire screen behaves like a hinged brass-bound notebook resting open on a moss-soft table. "Gabs" reads as marginalia — the soft, unhurried voice of a traveller who chats to herself while pressing leaves. "Quest" is the very slow walk between two field-points; it is not heroic, it has no boss-fight, it ends each day with tea. The mood the page must produce, in order, on first scroll: **stillness, then small surprise, then patience.** The user should feel the cursor slow down on its own. Nothing on this page rewards haste. Pages that compete for engagement metrics earn the user's distrust — gabs.quest deliberately leaves three to five long seconds of unbroken negative space at the top of the fold before any motion begins, because that delay is the design. The botanist has not looked up from her press yet. The reference image stack — purely as visual mood, never to be served as actual photography — is: - A 1972 Czechoslovak Tesla portable spectrum analyser in a cherry-veneer case, with a green phosphor screen that warms up over six seconds. - A pressed-fern plate from a 19th-century Edinburgh herbarium, the ink slightly bled into the cream rag paper. - The matte olive-green of a Voigtländer field meter from 1968, with off-white silkscreen Czech labels. - The half-light inside a slow-cooling brass orrery just after sundown, when the sky behind it is `#D9C8A8`. - A handwritten plant-collection card whose corners have been rounded by being carried in a coat pocket for eight years. The tone vocabulary is **calm-serene** — but specifically the *botanist's calm*, not the meditation-app calm. It is alert, observant, mildly amused. It notices things. It has a small, dry sense of humour about its own equipment. It is not minimalist as an aesthetic stance; it is minimalist because the instrument only has eleven knobs and there was never a reason to add a twelfth. ## Layout Motifs and Structure The structural commitment is **ma — 間 — negative space as a load-bearing element**, not as breathing room around a busy layout. On gabs.quest, *the empty regions are the artefact*. They have weight. They are framed. The eye is asked to rest in them the way it would rest on a plain pale wall in a Kyoto teahouse. The viewport is divided not into a grid of content but into **three asymmetric chambers separated by long, deliberate silences:** 1. **The press (left chamber, 38% width on desktop).** A skeuomorphic leather-bound flat-press object, hinged at the top, that holds the current "specimen" — a botanical-illustration plate paired with a handwritten field note. The press is rendered as a 3D-ish object using nothing but layered box-shadows, inset highlights, and a noise-textured leather fill. It is not photographic and not raytraced; it is the way a 1990s desktop-publishing software would have *imagined* leather, lovingly, with eleven CSS gradients and a grain pattern. 2. **The margin (centre chamber, 28% width).** This is the ma — the deliberate stillness. It contains, at any given time, exactly one of three things: nothing, a single date in handwritten ink, or a horizontal line being drawn left-to-right by an SVG path-draw at 0.6px/ms. Most of the time it contains nothing. The user is supposed to learn that this column is a place, not an absence. 3. **The instrument (right chamber, 34% width).** A skeuomorphic field-meter panel in matte olive enamel with cream-silkscreened Czech labels. It is the navigation. Its dial selects which specimen page is open; its toggle switches expose the colophon, the index, and a slow-loading "today's walk" feed. The dial physically rotates on click — not a spring, but a *detented* rotation with five clicks of resistance, modelled on the click-feel of a 1968 Voigtländer aperture ring. Vertical rhythm is governed by a **botanical baseline**: every section is exactly 1.618 viewport-heights tall (the golden ratio is used here only because that is what 19th-century botanical plate-makers actually used to lay out herbarium pages, and it shows). Section transitions are not snap-scrolls; they are eased decelerations over 1100ms with `cubic-bezier(0.16, 1, 0.3, 1)`, which is slow enough that the user notices they have entered a new room. There is **no hero section** in the conventional sense — the page does not open with a slogan or a CTA. It opens with the closed press, hinged on the table, with a small hand-lettered tag tucked under its strap that says *gabs.quest — open me slowly*. The press takes 2.4 seconds to unhinge after the user's first scroll input, and the unhinge itself is the only "hero" the site provides. Mobile behaviour: the three chambers stack vertically in the order *press → margin → instrument*. The margin remains a tall, mostly-empty band. It is not collapsed. The negative space is the design and survives the breakpoint. ## Typography and Palette **Type stack — Google Fonts only, three faces, no exceptions.** - **Caveat** (variable weight 400–700) — primary handwritten face, used for all marginalia, field notes, dates, specimen captions, the press's tag, and the colophon. Caveat is set at 18–22px for body marginalia, 36px for the title-card on the press, and 14px for the silkscreened-style instrument labels (where it is rotated 0.4° clockwise to feel hand-pressed). It is given `letter-spacing: 0.012em` at body sizes and `0.000em` at 32px+. Caveat carries the *gabs* voice — soft, slightly slanted, unselfconscious. - **EB Garamond** (regular 400 and italic 400) — the herbarium voice. Used for specimen Latin names, page numbers on the press, and the four or five short paragraphs of long-form botanical prose that appear on detail pages. EB Garamond is set at 17/26 with `font-feature-settings: "onum", "liga"`, and old-style figures throughout. Italic Garamond is reserved for binomial names, always. - **Major Mono Display** (regular 400) — the instrument voice. Used *only* on the right-chamber field meter, for dial readouts, switch labels, and the small `MFG. PRAHA · 1974+` engraving along the meter's bottom rail. Set at 11–13px with `letter-spacing: 0.16em` and `text-transform: uppercase`. It is the only mono on the page; its rarity is the point. **Palette — eight values, retro-futuristic in the Eastern-European-instrument register, never neon.** - `#E8DFCE` — *Rag Paper.* The base canvas. Warm cream with a faint green undertone, the colour of cotton-rag herbarium paper that has aged forty years in a drawer. - `#D9C8A8` — *Sundown Sky.* Used for the deep horizon behind the press, and for the long unbroken vertical band that frames the ma column. Sits one step warmer than the canvas. - `#5C6E4A` — *Field Olive.* The instrument's enamel face. A soft, matte, mid-saturation olive with a hint of blue. This is the load-bearing *retro-futuristic* note — it is the colour of every Eastern-bloc lab instrument from 1965–1985. - `#3F4A33` — *Pressed Fern.* The deeper olive used for the instrument's bezel shadows, the press's leather binding, and the longest lines of the botanical illustrations. Always paired with Field Olive, never used alone. - `#8B6F47` — *Brass Patina.* The skeuomorphic metalwork — dial centres, hinge pins, the press's corner caps. Never glossy; always rendered with two layered linear-gradients at 18° apart and a noise overlay. This is the colour of brass that has been touched by hands every day for a decade. - `#C25450` — *Stamp Vermilion.* The single accent. Used *exactly three times* on the entire site: on the wax-seal-like load indicator, on the active dial position, and on the closing colophon flourish. If the user counts a fourth, that is a bug. - `#7A8A6E` — *Lichen.* A muted sage used for the botanical-illustration mid-tones and for the calm hover-state of the dial labels. Sits between Field Olive and the canvas in luminance. - `#2B2A28` — *Iron Gall.* The handwriting ink. Almost-black with a perceptible warm tint. All Caveat is set in this, never in pure black — pure black would feel printed, and this site is written. **Contrast rule.** Iron Gall on Rag Paper is the only required pairing. All other colours are decorative and may be reduced in opacity. There is no dark mode; the site is the page of a daytime field journal. ## Imagery and Motifs The site is built around **botanical-illustration as primary imagery** — a category appearing in only 2% of the registered designs. This is the most distinctive single decision on the page. Every "image" on gabs.quest is a hand-drawn-feeling botanical plate, but each plate is composed entirely of inline SVG paths so that they can be animated, recoloured, and gently de-rendered at will. The illustration system has three layers, each with its own behaviour: 1. **The specimen.** One full botanical plate per page, anchored in the press. The current rotation includes a fern (*Asplenium scolopendrium*), a yarrow (*Achillea millefolium*), a ginkgo branch, a wormwood sprig, a slender trillium, and one quietly-mislabelled cultivated mint. Each plate is 14–22 SVG paths, drawn at 1.25px stroke in Pressed Fern with 6–11 watercolour wash polygons in Lichen at 22% opacity beneath the line work. The plates are *deliberately not perfect* — line weights vary, one terminal will always overshoot its junction by 1–2px, and the leaf-veins are slightly out-of-register with the leaf outlines, the way they would be in a hand-coloured 19th-century engraving. 2. **The marginalia sketches.** Tiny one-or-two-stroke drawings — a pressed petal, a curl of stem, a half-finished spiral — that appear in the negative-space margin column. These animate in via path-draw-svg at 0.6–0.9px/ms and never animate out. They accumulate as the user scrolls. By the bottom of the page the margin is lightly populated with maybe nine small marks, the way a real notebook fills up with absent-minded doodling. None of them are interactive. They are not buttons. They are not links. They are evidence that someone was sitting here. 3. **The retro-patterns texture.** The Sundown Sky band running the length of the ma column carries a low-contrast retro-pattern — a 1970s East-German wallpaper repeat of stylised wheat-ears, rendered at 6% opacity in Brass Patina over Sundown Sky. The pattern appears in only 3% of the registered designs and is here used quietly, as wallpaper rather than as decoration. The eye registers it as texture before it registers it as motif. **Skeuomorphism direction.** This site uses skeuomorphism — also a 4%-rare aesthetic in the registry — but pointedly *not* in its 2008-Apple iCal-leather sense. The reference is *Eastern European industrial-design skeuomorphism circa 1968–1975*: matte enamel, cream silkscreened text, brass detents, slightly-too-large knobs, and labels in Czech and Latin rather than English. The press object and the field-meter are the two canonical instances. Both are constructed entirely from CSS — no images, no `` tags, no raster assets — using: - A base layer of solid colour from the palette. - Two to four layered linear-gradients at offset angles to imply curvature. - An SVG `` noise filter at 0.55 baseFrequency, applied with `feComposite in="SourceGraphic"` at 6% opacity, to produce the matte-enamel grain. - Inset and outer box-shadows in pairs (one warm, one cool) to imply lit edges. - For brass parts: a `conic-gradient` in Brass Patina with a 14° rotation and a faint noise overlay. **No photography. No icons from a free icon set. No 3D renders. No emoji.** The page is built by hand, the way the 1974 Tesla workshop would have built it, knob by knob. **Border-animate** is the page's primary motion pattern (registry-rare at 3%). Every interactive surface — the press's hinge, the dial, the toggle switches, the colophon's frame — has a 1px Iron Gall border that, on hover or focus, **draws itself in from a single starting point**, animating around the perimeter over 720ms with `stroke-dasharray` on an SVG overlay. This is the entire interaction vocabulary; there are no fills-on-hover, no lifts, no glows. The border draws, and that is how you know the surface noticed you. ## Prompts for Implementation Build gabs.quest as **one HTML document, one CSS file, one ES module** — no framework, no router, no build step, no service worker, no analytics. The site is a single artefact. Total uncompressed payload target under 95KB; the only fonts loaded are the three Google Fonts above, subset to Latin + Latin-Ext + a small handwriting accent range. **The page is a story, not a product surface.** Resist every instinct to add a CTA bar, a pricing section, a stat grid, a testimonials carousel, a feature-bullet column, or a mailing-list capture. None of those things belong here. If the page must do conversion at all, it does it by being memorable enough to be revisited; the colophon at the bottom contains exactly one quiet line — "if you would like a postcard, write to gabs at gabs dot quest" — and that is the entire CTA surface. **Page event timeline, from first paint:** - **0.00s — first paint.** The Rag Paper canvas. Nothing else. The user briefly thinks the page has not loaded. - **0.40s — the press fades up** at 1.0 opacity over 320ms, closed and strapped, in the left chamber. The hinge is visible. The tag is visible. Nothing animates further. - **0.80s — the instrument fades up** in the right chamber at 1.0 opacity over 320ms. The dial is in its leftmost detent. The phosphor readout glows from `#3F4A33` to `#5C6E4A` over 1400ms — a deliberate "warming up" cue, slow enough that the user has time to read it as a real instrument behaviour. - **2.20s — first marginalia mark appears** in the ma column: a small ink date, hand-lettered, of today's date (live-rendered client-side, not server-rendered, and intentionally written in EU format `09. května 2026`). - **3.10s — the press's tag swings gently 4° on a damped pendulum**, once, and stops. This is the only invitation the site offers. - **on first scroll input — the press unhinges over 2400ms.** The straps unbuckle (skeuomorphic motion: each strap rotates around its buckle pin), the front cover lifts at the hinge, and the first specimen plate is revealed. The path-draw on the plate's line work begins as soon as the cover clears 60° of rotation. - **steady state — drift.** The marginalia sketches in the ma column appear as the user scrolls, one every ~140vh. The botanical specimen rotates each time the user clicks the instrument's dial: the press closes (1100ms), pages flip (a stack-of-paper motion, three intermediate plates flickering for 80ms each), and the press opens onto the new plate (1100ms). Total dial-to-new-specimen: 2.4 seconds. This is intentionally slow. The dial *clicks audibly* — a single muted wood-on-brass sound at 280Hz — using a 6KB inline `