# Design Language for mores.quest ## Aesthetics and Tone mores.quest is **The Field Atlas of Unwritten Rules** — a fictional, perpetually-unfinished reference work compiled by an itinerant society of folklorists who travel not to map rivers or borders but to record *mores*: the customs, manners, taboos, courtesies and quiet conventions that hold a people together without ever being written down. The site presents itself as a single bound fascicle of that atlas — printed on a hand-fed press in a workshop that ran out of one ink and improvised with another. The aesthetic is **editorial / letterpress-almanac**: heavy laid paper the colour of a library card, a single deep ink with one stubborn second colour that bled through from the plate behind it, hairline rules drawn with a ruling pen, marginal glosses in a smaller hand, and woodcut-style diagrammatic illustrations — the kind that explain a bow, a handshake, a way of passing bread — rendered as flat two-ink line cuts. Nothing glossy. Nothing glassy. No depth-of-field, no gradients-as-décor, no neon, no 3D bevels. The "shine" of this site is the shine of *type pressed into damp paper* — a faint emboss, a slight ink halo, the ghost of the page beneath. The tone is **scholarly-intellectual but warm at the edges** — a footnoting voice that quietly delights in the strangeness of its subject. It is the tone of a curator who has read every card in the catalogue and still finds the collection astonishing. It is unhurried, sceptical of its own authority (every claim has a "but in the next valley…"), and never sells anything. The reader is addressed as a *fellow recorder*, handed the fascicle, and trusted to turn the pages. ## Layout Motifs and Structure The structure is a **magazine-spread / codex** model — the page is composed as *facing leaves of a printed atlas*, not as a scrolling feed. The governing grid is a **classical book canon**: a single tall text-block placed slightly above and toward the spine, generous outer margins reserved for glosses, a baseline grid that every line of body type sits on so the page reads like set metal. **The fascicle is organised into numbered Plates** (Plate I — *Greeting*; Plate II — *Threshold*; Plate III — *The Table*; Plate IV — *Gift & Counter-Gift*; Plate V — *Naming*; Plate VI — *Mourning*; Plate VII — *The Stranger*; Plate VIII — *Silence*). Each Plate is one full-viewport leaf. - **The Frontispiece** (the opening leaf): the atlas's title page — the work's name in large engraved capitals, the fictional imprint ("Recorded & Set by the Itinerant Society for the Study of Mores · Fascicle the First · Of Customs Held But Not Written"), a small woodcut device (a compass rose whose points are a hand, a loaf, a candle, a closed mouth), and a single line of running text that reads like the first sentence of a long book. No buttons. No menu bar across the top — instead a slim **running head** appears once the reader leaves the frontispiece: the fascicle name flush-left, the current Plate's name flush-right, a hairline rule between, exactly as a printed book carries running heads. - **Each Plate leaf** is built as a *plate-and-commentary spread*: a woodcut-style **figure** (the diagram of the custom) anchored to one side, occupying roughly the upper-outer quadrant; beneath/beside it a numbered **caption** in small caps; and flowing past it the **commentary** — two or three short columns of body type, justified, with the first line of the Plate set as a **drop initial** three lines deep, the historiated kind with a tiny scene worked into the letterform. - **Marginalia**: the outer margin of every leaf carries true glosses — short notes in a smaller size, set ragged, sometimes a pointing-hand (☞) manicule, sometimes a cross-reference ("cf. Plate VII"), sometimes a dissent ("the Society is not agreed on this"). These are not decoration; they are part of the reading. - **The Colophon** (the closing leaf): printed like the back of a real book — the press, the paper, the two inks named ("set in a revival of an old-style face; the second colour, a madder lake, applied by hand because the intended vermilion did not arrive"), a register mark, and the honest admission that the atlas is unfinished and always will be. The page literally ends; there is no footer of links, no "back to top," no newsletter. Composition rules: text-block never centred dead-centre — always offset toward the spine; figures never bleed to all four edges (a printed plate has a margin); rules are *hairline*, never bars; whitespace is the unprinted paper and is allowed to be vast. ## Typography and Palette **Typefaces — all available on Google Fonts:** - **Spectral** (variable; used 300 / 400 / 400 italic / 500 / 600) — the body voice. A contemporary screen-tuned old-style serif with a calm, slightly cool colour on the page; set at 1.0625rem, line-height 1.74, justified in the Plate columns with hyphenation enabled so the right edge is true like set metal. Carries the commentary, captions, and the running text. - **EB Garamond** (400 / 400 italic / 500) — used *only* for the marginal glosses and the small-caps captions, at ~0.8125rem; its slightly older, more inky character makes the margins read as a different hand than the main text block. - **IM Fell English SC** (400) — used *only and sparingly* for the small-caps Plate designations, the running head, and the imprint line on the frontispiece. It has the irregular, slightly broken texture of a 17th-century English foundry face — it supplies the "letterpress" voice without that texture invading the body. - **Cormorant Garamond** (600, used at very large display sizes only) — the engraved title capitals on the frontispiece and the drop initials. At display size its high contrast reads as engraving rather than typewriting. No sans-serif anywhere. No monospace anywhere. The whole document speaks in one extended family of old-style serifs, the way a single press would. **Palette — the two-ink press, on its paper:** - `#E9E2D0` — **laid paper.** The page. A warm-grey buff, the colour of a long-handled library card; everything is printed on this. - `#EFE9DA` — **deckle margin.** A fraction lighter than the page, used for the extreme outer margins / the "untrimmed" edge, so the text-block sits on a faint inset panel. - `#2B2A26` — **printing ink.** A near-black with a green-grey undertone, never pure #000 — this is the body type, the rules, the woodcut line work. - `#5C5648` — **half-tone grey.** A weakened ink for the marginalia, the running head, secondary captions — as if printed from a worn plate. - `#9E3A2E` — **madder lake (the second colour).** The stubborn second ink: a muted brick-red, slightly browned, used *only* for Plate numerals, the drop initials' historiated detail, manicules, the register mark, and a single hairline under each running head. It must feel scarce — never a background, never a button, no more than one or two appearances per leaf. - `#3F5A52` — **plate-behind green.** A muted pine, used at very low opacity (≤12%) as the faint "ghost" of an illustration on the leaf beneath — a printing accident made into atmosphere — and as the hairline of the baseline grid if shown. Contrast and weight come from the *near-black on warm-buff* and from the rhythm of the columns — not from colour. The madder red is the entire chromatic budget and it is rationed. ## Imagery and Motifs - **Woodcut-style figures.** Every Plate carries one diagrammatic illustration of its custom, drawn as a flat **two-ink line cut**: even-weight outline in printing-ink, the occasional fill in cross-hatch (never solid), and at most one small accent in madder lake. Subjects: two hands meeting at three heights (Greeting); a foot, a threshold-board, and a shoe being removed (Threshold); a laid table seen from above with the order of serving numbered (The Table); two open palms passing and returning a wrapped object (Gift & Counter-Gift); a child's name written, crossed, rewritten (Naming); covered mirrors and a stopped clock (Mourning); a chair turned to face the door (The Stranger); a closed mouth inside a compass rose (Silence). These are SVG, drawn in CSS-controllable strokes so they can be *inked in* on scroll (path-draw) rather than fading in. - **The compass-rose device.** The atlas's mark: a rose whose four cardinal points are not directions but the four domains of custom — a hand (manners), a loaf (hospitality), a candle (rite), a closed mouth (taboo). Recurs small at the frontispiece, the colophon, and as a section divider drawn at ~28px between Plates. - **Hairline rules & ruling-pen flourishes.** Thin (0.5–0.75px) rules separate running head from text, caption from commentary; occasionally a rule terminates in a tiny ruling-pen swell, the way a draughtsman lifts the pen. - **Manicules (☞).** The pointing-hand from old printed marginalia, in madder lake, marks the gloss the Society most wants you not to miss — used at most twice in the whole fascicle. - **The register mark & deckle.** A small crosshair-in-circle printer's register mark sits in the colophon; the outermost edge of every leaf carries a subtly irregular, faintly torn **deckle edge** (an SVG clip-path with gentle randomness), so each page feels hand-fed. - **Paper, not photographs.** No photography at all. The only "texture" is a near-invisible laid-paper grain (fine horizontal chain-lines, ~3–4% contrast) and the faint ink-halo around set type. Imagery is line, rule, letter, and the ghost of the leaf behind. ## Prompts for Implementation Build mores.quest as **one long single HTML document** — a frontispiece, eight Plate leaves, and a colophon — with no SPA, no router, no modal, no top navigation bar, no hamburger, no sticky CTA, no pricing block, no testimonial row, no stat-grid, no FAQ accordion, no email capture, no "subscribe," no "get started," no cookie banner styled as design. It is a fascicle. The reader turns it. - **The opening.** On load, the frontispiece composes itself the way a page is *printed*: the warm-buff paper is already there; then the title capitals press onto it — not fade, but a quick `letter-spacing` contraction + a 1px → 0 inset shadow that reads as type biting the page — followed a beat later by the imprint line in IM Fell SC, then the small woodcut device drawing itself in a single ink stroke (~1.4s path-draw). One short line of running text settles last. The whole overture is ~3 seconds, unskippable, silent. No logo flash, no spinner. - **Turning leaves.** Scroll is *page-by-page*: each Plate leaf snaps gently into the viewport (CSS scroll-snap, with a soft spring settle — not a hard lock), and as a leaf enters, its woodcut figure **inks itself in** via SVG `stroke-dashoffset` animation (the line being drawn by the press), its drop initial's historiated detail appears last in madder lake, and its commentary columns set themselves line-by-line in a quick top-down stagger (each line clipped from below, ~22ms apart) — the look of a galley being pulled. Marginalia fade in *after* the body of their leaf, slightly delayed, ragged. - **The running head** appears only once the reader leaves the frontispiece: fixed at top, fascicle name flush-left in IM Fell SC small-caps, current Plate name flush-right (it updates with a tiny crossfade as you cross into a new leaf), a 0.5px madder-lake hairline beneath it. It is the *only* persistent chrome. - **Reading interactions, all quiet.** Hovering a cross-reference gloss ("cf. Plate VII") underlines it with a slow ruling-pen draw and, on click, turns the leaf to that Plate with the same gentle snap. Hovering a manicule makes the pointing-hand nudge ~3px toward its gloss. The drop initial, on hover, deepens its emboss a hair. No tilt-3d, no magnetic buttons, no cursor-trailing blobs, no parallax of decorative layers — the page does not float; it lies flat like paper. The only "parallax" permitted is the ≤12% plate-behind-green ghost drifting a few pixels slower than its leaf, as if it were ink on the *previous* page showing through. - **Type as the hero.** Justify the Plate columns with hyphenation; honour a real baseline grid; let the outer margins be genuinely wide and genuinely empty except for glosses; never centre the text-block dead-centre. The drop initials are large (3 lines), historiated, and the single most ornamental thing on the page. Everything else is restraint. - **The colophon ends the document.** It prints, like the frontispiece, in a short emboss-and-draw sequence; it names the press, the paper, and the two inks; it carries the register mark and the compass device; and then the page simply stops on the warm buff. No footer links. No "made with." The atlas is unfinished, and it says so. - **Storytelling bias.** Each Plate is a tiny essay-in-place, not a card. The reader's journey is one slow descent through eight customs, each one quietly contradicted by its own marginalia, ending in a colophon that admits the work can never be complete. Atmosphere over information; type over image; one vertical descent over branching paths. ## Uniqueness Notes **Differentiators from sibling designs:** 1. **A two-ink letterpress *almanac*, not a website.** The entire visual system is the constraint of a real hand-fed press: one near-black ink, one rationed madder-red second colour that "bled through from the plate behind," a baseline grid that reads as set metal, justified-and-hyphenated columns, historiated drop initials, true marginal glosses with manicules, a deckle edge, a register mark, and a colophon that names the paper. No other site in the corpus is built as a *printed fascicle of an unfinished reference work*. 2. **Marginalia as primary content.** The outer margins are not whitespace and not décor — they carry glosses, dissents, and cross-references in a deliberately different typeface (EB Garamond vs. Spectral body), so the page is *read in two voices at once*. This is a structural choice almost nothing else does. 3. **No photography, no glassmorphism, no hand-drawn doodles, no warm-gradient hero.** Imagery is exclusively flat two-ink woodcut-style line cuts that *ink themselves in* on scroll via SVG path-draw — the press pulling a galley — rather than fading or floating. The "shine" is a type emboss, not a glass blur. 4. **Page-turning, not scrolling-feed.** Gentle scroll-snap leaves with a galley-pull line-by-line type stagger; the only persistent chrome is a printed running head; the only "parallax" is a ≤12% ghost of the previous leaf's ink showing through. 5. **It sells nothing and ends honestly.** No CTA, no pricing, no testimonials, no stat-grid, no email capture, no footer of links — the document opens with a frontispiece, descends through eight Plates of custom, and stops at a colophon that admits the atlas is forever unfinished. **Chosen seed / style:** `vintage newspaper layout` — reinterpreted as a *two-ink letterpress field-atlas / almanac*. Composite descriptor: `aesthetic: editorial, layout: magazine-spread, typography: serif-revival, palette: muted-vintage, patterns: scroll-triggered, imagery: line-illustration, motifs: cultural, tone: scholarly-intellectual`. **Avoided patterns from frequency analysis:** glassmorphism (77%), hand-drawn (96%), photography-imagery (98%), warm-gradient palette (96–98%), parallax (92%), cursor-follow (89%), magnetic (80%), tilt-3d (26%), card-grid (89%), centered dead-centre layout (85%), mono typography (94%), dashboards, neon, 3D bevels, CTA/pricing/stat-grid/testimonial/FAQ blocks — none of which appear here.