# Design Language for historic.quest ## Aesthetics and Tone historic.quest is a **wandering field-notebook for time** — a calm, paper-skinned reading room where someone has been quietly pressing the loose petals of history between pages: a half-burnt edict, the marginalia of a dead scribe, a treaty folded too many times, the smell of a millennium. The aesthetic is **muji-grade restraint dreaming in soft focus**: the unbranded, no-logo, paper-and-pencil discipline of muji — flat raw surfaces, generous emptiness, honest materials, zero ornament-for-ornament's-sake — but tilted into a **dreamy-ethereal** haze so the page reads like a memory rather than a museum label. Nothing shouts. Everything is set down gently, as if the reader might wake something. The mood is **dawn light through a linen curtain in an archive that smells of vellum**. Warm, low-contrast, slightly underexposed, the way old paper photographs in morning sun. It is *not* dark-academia (no gothic gravitas, no oxblood leather, no skull-and-candle theatrics), *not* sepia-nostalgia kitsch (no torn-edge PNG borders, no faux-coffee stains), *not* corporate-history-org (no timeline-as-product, no "explore our archive" CTA). It is a person, alone, turning pages — and the page turning back. The voice in the copy is **hushed and second-person-adjacent**: "you find a page", "someone underlined this once", "the ink has gone the colour of weak tea". Present-tense, sensory, never lecturing. History here is not data to be queried; it is a **botanical pressing** — fragile, faded, beautiful precisely because it is incomplete. ## Layout Motifs and Structure The whole site is **one continuous magazine-spread that scrolls horizontally then settles vertically per spread** — built as a sequence of **seven double-page openings** (call them *Folios I–VII*), each Folio a true two-column spread with a deep central gutter (a 48px channel of bare paper, slightly shadowed inward, like the valley of an open book). The reader moves left-to-right *within* a Folio (recto reveals after verso), then drops down the page-edge into the next Folio. It reads like flipping through an oversized art-press monograph laid flat on a table. **Grid system:** a strict **12-column muji grid** per page (so 24 across a full spread), 88px base column, 24px gutters, with a **6-column-wide hanging text measure** (never full-bleed text — text always floats in a calm channel of one-third the page, the rest is breathing paper). Vertical rhythm locked to a **28px baseline grid**; all type sits on it, all imagery snaps to it. **Ma (negative space) is 55–65% of every spread** — emptiness is the primary design element, the pressed-flower's "page". **Composition rules:** - Each Folio has exactly **one "pressed specimen"** (a custom illustration of a historical artifact-as-botanical-pressing) anchored asymmetrically — never centred, always offset toward the gutter or an outer corner, with a long quiet drift of empty paper opposite it. - **Folio numerals** are set in the extreme outer margin, rotated 90°, tiny, like a printer's signature mark. - A **thin horizontal "thread-line"** (0.5px, warm-grey) runs along the top of every spread at the 28px line — the binding thread. It is the only persistent rule on the page. No top nav bar. No hamburger. No footer block. - Navigation is a **slim bottom edge-strip** showing seven faint page-tabs (I–VII) like the deckle edge of a sketchbook; the active tab nudges up 4px and warms by one shade. That is the entire chrome. - The opening Folio is a **near-empty spread**: the domain set small in the lower recto, one pressed-petal illustration drifting in from the top-left gutter, 70% of the spread blank cream paper with a single line of intro text hung low. ## Typography and Palette **Type system — Google Fonts only:** - **Primary face — `Commissioner`** (variable, weights 300/400/500, plus its true italic and the slanted "flair" axis where useful). Commissioner is the *commissioner-versatile* workhorse: a low-contrast humanist sans with calligraphic genes, designed to be set unobtrusively at length — exactly the muji ethos of "good tool, no signature". Used for **all body copy, captions, folio labels, and the domain wordmark**. Body at 18px / 28px line / `-0.003em` tracking / weight 350. Captions at 13px / weight 400 / `0.02em`. The wordmark *historic.quest* is set in Commissioner 400, all-lowercase, `0.01em`, **never bolded, never coloured beyond ink** — because muji brands by *not* branding. - **Display / specimen-label face — `Fraunces`** (variable, "Soft" optical size, weights 300–400, with its wonky italic). Fraunces is used *sparingly and only* for the **Folio opening phrase** (one line, ~40px, soft-serif, low weight) and for the **handwritten-feeling specimen names** in italic ("*edict, half-burnt, c. 1184*"). Its old-style warmth and slightly imperfect curves read like a typesetter's note rather than a headline. It never appears in bulk. - **Marginalia / metadata face — `Commissioner`** again at 11px, `0.06em`, uppercase, weight 500, warm-grey — the only place letterspacing goes wide, used for rotated outer-margin numerals and the bottom tab labels. No third family. No mono. The restraint *is* the type system. **Palette — warm-earthy, low-contrast, paper-first (minimum required colours; here are eight):** - `#F4EDE0` — **Unbleached Leaf** — the dominant page paper, a warm bone-cream; ~85% of pixels. - `#EAE0CE` — **Deckle Shadow** — slightly deeper cream for the gutter channel, recto/verso tonal split, and card-fields. - `#3B352B` — **Vellum Ink** — the primary text colour, a soft warm near-black (never pure #000); all body type. - `#7A6E58` — **Weak Tea** — faded-ink warm-grey for marginalia, folio numerals, secondary captions, the binding thread-line. - `#B97A4E` — **Burnt Edict** — a muted terracotta-tan, the single accent; used only for the active page-tab, hover warmth, the underline-on-link, and one stroke inside each specimen illustration. - `#8C9A6E` — **Pressed Sage** — a dusty botanical green; the secondary illustration tint (leaf-veins, stem-lines in the floral-botanical motif work). - `#C4A1A0` — **Faded Rose** — a dried-petal muted pink; the tertiary illustration tint (petal fills, the dreamy bloom-haze in backgrounds). - `#D6CBB6` — **Foxing** — the palest warm tan, used at very low opacity for the soft-focus halo / vignette and the ethereal blur-bloom that pools around each specimen. Everything stays inside a **narrow warm value band** — deliberately low contrast (the dreamy-ethereal softness), with `Vellum Ink` on `Unbleached Leaf` as the only high-contrast pairing, reserved for reading text. ## Imagery and Motifs **The core conceit: every historical artifact is drawn as a botanical pressing.** Each Folio carries one **custom illustration** — hand-feeling vector line-work (0.75–1.25px strokes, slight wobble, no perfect circles), as if a botanist sat down to press *history* the way one presses flowers: - **Folio I — A pressed dawn:** a single faded rose-petal cluster drifting in from the gutter, half-translucent, the "specimen" being *the beginning itself*. - **Folio II — Edict, half-burnt (c. 1184):** a scroll-fragment drawn like a curled dried leaf, its burnt edge rendered as a botanical "blight" — the floral-botanical motif fused with a charred frond; stem-lines in Pressed Sage, char in Burnt Edict. - **Folio III — A scribe's marginalia:** loops of dead handwriting drawn as climbing-vine tendrils in the margin, with tiny ink-blot "berries"; the text of the page literally has a botanical vine growing up its left rule. - **Folio IV — Treaty, folded too many times:** a document drawn as a pressed and pressed-again paper-flower, fold-creases as leaf-veins radiating from a central crushed bloom. - **Folio V — Coin / seal:** rendered as a flattened seed-head, the relief profile abstracted into the radial geometry of a dried dandelion clock, mid-dispersal — petals/seeds drifting (the magnetic-drift motion lives here). - **Folio VI — A map's worn fold:** topography lines drawn as the venation of a single enormous pressed leaf; rivers as the leaf's midrib. - **Folio VII — A blank page (the unrecorded):** an empty herbarium mount with only the faint ghost-outline of where a specimen *would* have been pinned — labelled, but holding nothing. The quietest spread. **Decorative system (muji-minimal):** - The **binding thread-line** (0.5px) is the only structural rule. - Each specimen sits inside an inferred **herbarium mount**: not a drawn box, but four tiny corner-tick marks (8px) in Weak Tea, like photo-album corners — the muji "frame that isn't a frame". - A soft **dreamy bloom-halo**: each illustration is wrapped in a 120px radial-blur pool of Foxing at 6% opacity, so the artifact seems to float in warm haze (the ethereal softening). - **Tiny botanical glyphs** (a 6px pressed-petal, a 5px seed, a 4px frond) used *only* as the seven bottom navigation tabs and the scroll-progress marks — never decoratively scattered. - **No photographs. No textures. No torn edges. No drop shadows except the single inward gutter shadow.** Paper is paper. ## Prompts for Implementation Build historic.quest as a **single HTML page, one CSS file, one ES module** — no framework, no build step, no service worker, no analytics. The experience is a **slow horizontal-then-vertical page-flip through seven Folios**, ~90 seconds of unhurried scrolling. Treat it as an interactive art-press monograph, not a website. **There is NO: call-to-action, signup form, email capture, pricing block, stat grid, "X artifacts catalogued" counter, testimonial row, logo wall, FAQ accordion, contact form, newsletter, chatbot, cookie banner, hero with a button, or sticky nav.** The only interactive chrome is the seven bottom page-tabs and the natural scroll. **Structure & motion (the `magnetic` pattern is the signature interaction):** 1. **Layout primitive:** CSS Grid, 24-column full-spread grid, `scroll-snap-type: both proximity` so each Folio gently settles. Horizontal scroll *within* a Folio container (recto slides in from the right at +60px, fading from 0→1 opacity over the last third of its entrance), then a vertical drop to the next Folio. Use `position: sticky` on the binding thread-line so it threads continuously across all spreads. 2. **Magnetic specimens:** each pressed-artifact illustration has a **magnetic hover field** — when the cursor enters a ~180px radius, the illustration (and *only* the illustration, not its mount-corners) eases toward the cursor with a soft `cubic-bezier(0.22, 1, 0.36, 1)` spring, max travel 14px, returning slowly on exit. Petals/seeds in Folio V each have their *own* tiny magnetic pull (max 6px, staggered) so the dandelion-clock "breathes" toward the reader. This is the muji-quiet version of magnetic: barely-there, like paper lifting in a draught. 3. **Magnetic page-tabs:** the seven bottom tabs are magnetic to the cursor (pull 8px), and the active one stays nudged up 4px and warmed to Burnt Edict. Clicking smooth-scrolls to that Folio over 1100ms. 4. **Reveal:** body text in each Folio fades up 12px on a 0.8s ease as its Folio enters the snap zone — `prefers-reduced-motion` disables all travel and just fades. 5. **The dreamy-ethereal layer:** a fixed full-viewport `::before` with a very soft radial-gradient bloom of Foxing (6%) that drifts *extremely* slowly (a 60s linear translate loop, ±20px) so the "morning light" subtly moves. A faint 0.4px paper-grain via a tiled inline SVG `feTurbulence` at 3% opacity — the only texture allowed. 6. **Links** (there will be few — maybe a single "the rest is unrecorded" line that scrolls to Folio VII): underline drawn in Burnt Edict via an animated `background-size` underline, 0.3s. 7. **Type:** load `Commissioner` and `Fraunces` variable fonts; `font-display: swap`; everything snaps to a 28px baseline; max text measure 6 grid columns. 8. **Folio VII** ends not with a footer but with the empty herbarium mount, four corner-ticks, and one Fraunces-italic line low on the verso: *"and the rest of it you'll have to imagine."* — then nothing. The page just stops, like a notebook running out of pages. **Emotional target:** the reader should feel like they were left alone with something fragile and trusted not to ruin it. Quiet, warm, a little wistful, never sold to. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **muji aesthetic used at full strictness, not as a buzzword.** Only ~2% of the corpus touches muji, and almost everything else leans hand-drawn (96%) or glassmorphism (66%). historic.quest is *aggressively* unbranded: no logo cluster, no nav bar, no buttons, no CTA, paper-only surfaces, ma at 55–65%, the wordmark deliberately un-styled. The restraint is the design. 2. **"History as botanical pressing" conceit** — a single sustained metaphor (floral-botanical motif, only 3% of corpus) where every historical artifact is re-drawn as a herbarium specimen. This fuses the underused floral-botanical motif with the underused custom-illustration imagery (2%) into one coherent visual language nothing else in the codebase has. 3. **magazine-spread layout as literal book-flip** (only 6% of corpus uses magazine-spread; almost none horizontally) — true two-page openings with a shadowed gutter channel, horizontal-then-vertical scroll, printer's-mark folio numerals in rotated outer margins. Reads like an oversized art monograph, not a scrolling site. 4. **dreamy-ethereal tone** (only 2% of corpus) achieved through low-contrast warm-earthy values + a slow-drifting Foxing bloom-halo + soft-focus pools around each specimen — wistful and underexposed rather than crisp. 5. **magnetic pattern in its quietest possible register** — instead of the usual punchy magnetic buttons, here magnetism is "paper lifting in a draught": 6–14px barely-perceptible pulls on illustrations and petals, so the page feels alive but never gimmicky. Subverts the 80%-common magnetic pattern into something near-invisible. 6. **commissioner-versatile typography** (only 3% of corpus, vs. 95% mono) — `Commissioner` doing nearly all the work, with `Fraunces` soft-serif allowed only one line per spread. A two-face system where the *primary* face is chosen precisely for being unobtrusive. **Chosen seed:** aesthetic: muji, layout: magazine-spread, typography: commissioner-versatile, palette: warm-earthy, patterns: magnetic, imagery: custom-illustration, motifs: floral-botanical, tone: dreamy-ethereal **Avoided per frequency analysis:** hand-drawn aesthetic (96%), glassmorphism (66%), editorial (36%); photography imagery (99%); full-bleed (94%), card-grid (87%), centered (84%) layouts; parallax (96%), cursor-follow (87%), spring (86%), stagger (80%) treated as dominant — only a restrained magnetic + minimal fade-reveal used here; warm+gradient palette cliché (98% each) — warm is kept but gradients are limited to one near-invisible bloom; mono typography (95%) entirely avoided; pastoral-romantic / warm-inviting tones (the obvious 36%/28% defaults) avoided in favour of dreamy-ethereal.