# Design Language for annual.quest

## Aesthetics and Tone

**annual.quest** is conceived as a **Victorian Naturalist's Almanac** — a leather-bound, gilt-edged compendium of an entire year, reimagined as a digital chamber where each scroll is a turning page in the ledger of one's twelve-month expedition. The aesthetic draws from 1880s scientific journals (the *Annales*, the *Royal Society Proceedings*, Audubon's plate books), antiquarian map vendors, and the marginalia of Charles Darwin's correspondence. We are unmistakably **scholarly-intellectual**: a quiet, candle-lit reading room where ambitions are catalogued like specimens and milestones are pinned beside their Latin nomenclature.

The mood is **hushed, deliberate, ceremonial** — the user is not a "customer" but a **subscriber to a learned society**. Pages feel pressed between glass, edges softened by 130 years of touch. There is grandeur, but it is the grandeur of the small: a single sentence set in 14pt italic Playfair, rule-bordered in 0.5px hairlines, framed in copperplate scrolls. The site whispers; it never shouts. Every rotation of a card-flip is the unsealing of a wax-stamped envelope; every transition carries the weight of a year considered.

This is **not nostalgia for nostalgia's sake**. The Victorian skeleton is loaded with modern engineering — the broken grid would have been alien to 1885 typesetters, the card-flips impossible in letterpress. We use the Victorian library as **stage**, not costume. The result is a contemplative, almost monastic interface where users feel they have stepped into a scriptorium and emerged with their year transcribed in copperplate.

## Layout Motifs and Structure

**Broken-grid as bound folio with loosened spine.** The page is not a single rectangular column; it behaves like a folio whose stitching has slackened, leaves overlapping at uneven angles. The base lattice is a 14-column asymmetric grid (CSS `grid-template-columns: 0.4fr 1fr 1.2fr 0.8fr 1.4fr 0.6fr 1fr 1.1fr 0.5fr 1.3fr 0.7fr 1fr 0.9fr 0.4fr`), seeded once and held constant — every section derives its anchors from this irregular spine. Sections **do not align with each other**: chapter headings hang into the left gutter at -3rem, body columns sit between cols 4–9, marginalia and footnote-glyphs jut into cols 11–13 at vertical offsets of 2.5rem, 8rem, 14rem.

**The Annual Spread** is the dominant macro-motif. The hero region is a two-page facsimile of an opened almanac: the verso (left) holds a hand-drawn frontispiece (engraved compass rose, ribbon banderole reading *ANNUAL · QUEST · MMXXVI*), the recto (right) holds a single italicized epigraph centered between rule-borders. A subtle inner gutter shadow (radial gradient, 8% black) suggests the binding's valley.

**Twelve Plates** structure the body: one section per month of the user's quest, each laid out as a numbered scientific plate. Plate I (January) sits flush-left with margin-flora at col 12; Plate II inverts; Plate III pulls into the center bordered by oval cartouche. Every plate is **slightly rotated** (-1.2°, +0.7°, -0.4°, +1.8° in stagger) to suggest physical pages clipped into a portfolio.

**Card-flip as central interaction**. Each plate contains 3–6 specimen-cards (a milestone, a habit, a reflection, a measurement). The card recto displays the catalogued label in Playfair small-caps with a hand-drawn ornamental dingbat; the verso, on flip, reveals the body — a journal entry in italic, dated, signed in the lower right with a flourish-mark. Flips are triggered by hover (desktop) or tap (touch) and animate over 720ms with a custom easing (`cubic-bezier(0.7, 0, 0.2, 1)`) that mimics the resistance of stiff card-stock. The flip axis alternates by row (row 1 horizontal-Y, row 2 vertical-X, row 3 diagonal) so the page feels alive with multiple bookbinding mechanisms.

**The Marginalia Column** runs at col 13 throughout — a vertical ribbon of footnote-style annotations (italic, 11pt, indented with a hanging asterisk-star or pilcrow), updating contextually as the reader scrolls past each plate. These are not navigation; they are commentary, like the hand of a Victorian editor.

**Closing Colophon**. The page ends with a centered colophon block (cols 5–10) bordered by a hand-drawn double rule with corner ornaments, declaring the volume number, the printing date in Roman numerals, and the Latin motto *Annus Quaestionis Vivit*.

## Typography and Palette

**Type stack (Google Fonts, hand-confirmed):**
- **Display & Headings:** `Playfair Display` (variable, weights 400–900, italics enabled) — used at 92px for hero, 56px for plate numerals (Roman: I, II, III…), 32px for plate titles. Optical sizing pushed to display-grade with `font-optical-sizing: auto`. Letter-spacing -0.02em on display, +0.04em on small-caps headings.
- **Body & Editorial:** `Cormorant Garamond` (weights 400 regular, 500 medium, 400 italic) — for journal entries, marginalia, and long-form prose. 18px base, 1.65 line-height. Italic is heavily used: every epigraph, every card verso, every footnote.
- **Capitals & Catalog Labels:** `IM Fell English SC` (Google Fonts) — small-capitals face with antiquarian texture, used for plate titles, card recto labels, navigation anchors. Tracked +0.12em.
- **Marginalia & Footnotes:** `EB Garamond` 11pt italic for the marginalia column and date-marks.

**Type rules:** No Sans-serif anywhere — this is an inviolable constraint. Pull-quotes use a **drop-cap** in Playfair Black at 6em, with a hand-drawn floral cartouche behind it (CSS background-image, monochrome SVG). Numerals are **always Roman** in chapter/plate contexts; only data-numerals (counts, dates within a card) appear as Arabic, set in old-style figures (`font-feature-settings: "onum"`).

**Palette — Forest-green, deeply saturated, candlelit:**
- `#1F3326` — **Forest Ink** — the dominant text color, deeper than black, the color of oak-gall ink dried on parchment.
- `#2D5440` — **Hunter's Cloth** — the primary accent green, used for rules, borders, and the spine of the bound folio.
- `#4A7856` — **Verdigris** — for hover states, link underlines, and the patina on metallic ornaments.
- `#7A9B7E` — **Lichen Pale** — for muted captions, secondary marginalia, dividers.
- `#F2EBD9` — **Vellum** — the page background, a warm cream that absorbs light rather than reflecting it; never pure white.
- `#E8DCC0` — **Aged Parchment** — used for card recto backgrounds, sub-panels, and quote blocks.
- `#B8985F` — **Antique Brass** — for ornaments, drop-cap accents, the gilt edges of card borders, the ribbon-banderole.
- `#8B5A3C` — **Bound Leather** — for the spine indication, for the edges of plate borders.
- `#3A1F1A` — **Sepia Shadow** — used in shadows, deep recesses, and as the second ink for marginalia.
- `#C73E1D` — **Cinnabar Seal** — sparingly, for the wax-seal motif at the colophon and for "active state" emphasis. One drop of crimson per page, no more.

The composite palette is **loamy, library-quiet, slightly damp** — it should evoke a closed room with a leaded window, late afternoon light filtered through ivy.

## Imagery and Motifs

**Line-illustration is the exclusive imagery mode** — no photography, no 3D renders, no gradient-mesh, no neon. Every visual element is rendered as a hand-drawn ink line, archived from public-domain Victorian sources or generated to match.

**Required illustration assets (SVG, hairline-stroke 0.6–1.2px in Forest Ink):**
- A **compass rose** with sixteen rhumbs, central fleur-de-lis, surrounded by the twelve months as a calendrical ring (used in the hero frontispiece).
- **Twelve calendrical insignia** — one per month — drawn in the style of botanical-zoological plates: January = naked oak-branch with frost crystals; February = a sleeping wren; March = a furled fern fiddlehead; April = a butterfly mid-emergence; May = lily-of-the-valley sprig; June = a honeybee on clover; July = a wheat-stalk; August = a pomegranate cross-section; September = an acorn cluster; October = a lantern-mushroom; November = a single oak-leaf in skeletal decay; December = a holly-sprig with three berries.
- **Ornamental dingbats** for card recti — fleurons, pilcrows, asterism (⁂), section marks (§), Aldus leaves — drawn fresh, not Unicode.
- **Banderoles, ribbons, and cartouches** — oval, rectangular, and vesica-shaped frames with rolled corners and inner-shadow detailing.
- **A wax-seal** — circular, lobed-edge, with the monogram "A·Q" and a quill-and-laurel device, used at the colophon.
- **Decorative rules** — single, double, and ornate-double dividers with central diamond ornaments.

**Retro-patterns motif** is delivered through:
- **Damask panels** as section backgrounds — repeating fleur-de-lis lattice in Lichen Pale at 6% opacity, hand-drawn (not stock).
- **Hatching and stippling** as shading on every illustration — no flat fills; every form is built from cross-hatch density.
- **Ledger-rule background** behind body text columns: faint horizontal hairlines at 28px intervals in Lichen Pale at 12%, suggesting writing in a journal.
- **Endpaper marbling** as the very topmost and bottommost full-bleed bands — algorithmic SVG marbling (Spencerian swirls, Forest Ink + Antique Brass + Bound Leather) suggesting the inside-cover of a leather-bound volume.

**Texture overlay**: a single, full-page noise/grain layer (`feTurbulence` SVG filter) at 4% opacity multiplied over the whole document gives the page the speckled fog of aged paper. A second layer of widely-spaced **foxing spots** (irregular brown-tan blotches, 5 per viewport) drifts behind the content.

## Prompts for Implementation

**Macro narrative direction** — annual.quest is a **scrolling almanac**, not a marketing page. Build it as a **single, continuous full-bleed reading experience** that takes the reader from frontispiece (the year's beginning) through twelve plates (the months) to colophon (the year sealed). NEVER include: pricing tiers, feature-grids, testimonial walls, statistics-counters, signup CTAs as rectangles, "trusted-by" logo bars. If conversion is needed, embed it in the colophon as a single italicized line: *"Subscribe to next year's volume —"* followed by an ink-quill input field.

**HTML structure** — Use semantic `<article>` for each plate, `<aside>` for the marginalia column, `<figure>` with `<figcaption>` for every illustration, and `<blockquote>` for epigraphs. Headings are `<h2>` with a child `<span class="plate-number">I.</span>`. The whole document sits inside a `<main class="folio">` element with `aria-label="The 2026 Annual Quest"`.

**CSS approach** — Use `display: grid` on `<main>` with the asymmetric 14-column lattice. Use `grid-column` on every child to place it explicitly within that lattice; **never use auto-flow**. Use `transform: rotate()` on plates with custom-property variation per nth-of-type. Use `mix-blend-mode: multiply` on the noise layer over the parchment background. Use `mask-image` with hand-drawn SVG masks to give every illustration a slightly torn or deckle-edged border.

**Card-flip mechanism** — The single most important interaction. Each `.specimen-card` has two children: `.card-recto` and `.card-verso`. Apply `transform-style: preserve-3d` and `perspective: 1400px` to the card. Recto: `transform: rotateY(0deg)`; verso: `transform: rotateY(180deg) translateZ(0)`. On `:hover` or `[data-flipped="true"]`, the inner wrapper rotates 180deg over 720ms with `cubic-bezier(0.7, 0, 0.2, 1)`. Add a subtle `box-shadow` swing during the flip to simulate the card's mass passing through a light source. **Critical detail**: the back of the card should show a faint **show-through** of the recto image, achieved with a low-opacity copy on the verso element (4% opacity, mirrored). Alternate flip-axes per row as described in Layout.

**Scroll choreography** — Use `IntersectionObserver` to trigger plate animations as they enter the viewport. Each plate's entrance: (1) the page-rotation settles from a slight extra +1.5° to its resting angle over 900ms, (2) the plate-numeral Roman numeral hand-draws itself via `stroke-dasharray` on an SVG outline over 1100ms, (3) body text fades from 0 to full opacity with a tiny upward shift of 12px over 600ms in stagger (one paragraph at a time, 80ms gap), (4) marginalia in the right column type-revealing letter-by-letter at 25ms per glyph using a JS span-by-span typewriter — but only for the first paragraph; subsequent appear normally.

**Cursor behavior** — Replace the default cursor with a custom **dip-pen nib** SVG (`cursor: url('quill.svg') 4 4, auto`). Over interactive elements, swap to an **inkwell** cursor. When the user hovers over a card, a faint **ink-droplet** trail follows the cursor for 400ms before fading.

**Page-turn audio (optional, off by default)** — Behind a single italic toggle in the colophon (*"with sound"*), enable a faint paper-rustle on every plate-entry and a soft "thunk" on every card-flip. Subtle, never invasive.

**Marginalia behavior** — The right-column marginalia is **scroll-pinned per plate**. As each plate enters, its marginalia content cross-fades in over 350ms in the marginalia ribbon. Use `position: sticky` with intersection-aware swapping.

**Drop-caps & first-paragraphs** — The first paragraph of each plate begins with a `::first-letter` drop-cap rendered in Playfair Black at 6em, floated left with `shape-outside: circle()`, set in Antique Brass against a hand-drawn floral cartouche background.

**No motion-mocking-Victorian-stiffness** — animations should feel **considered and deliberate**, never bouncy or springy. Use linear-out easings (`cubic-bezier(0.4, 0.0, 0.2, 1)`) and durations of 600–1100ms. **No magnetic, no elastic, no parallax** — these would betray the period sensibility. Card-flip is the one approved gesture, and it is treated as the centerpiece.

**Dark-mode (single, opt-in via the colophon)** — In "Lamplight" mode, the parchment darkens to `#2A1F18` (oxblood night), text becomes `#E8DCC0` (the Aged Parchment elevated), greens shift toward Verdigris (`#4A7856`) as the dominant rule-color, and the noise overlay's blend-mode flips to `screen`. The page becomes a leather-bound book read by a single oil lamp.

## Uniqueness Notes

**Three-or-more differentiators against the existing 60-design corpus:**

1. **Victorian-ornate aesthetic at 1% representation** (per the frequency analysis, only 1 of 60 designs used it). This site stakes out that under-explored territory deeply, treating it not as a decoration layer over a modern grid but as the structural and emotional foundation. Most sites in the corpus default to hand-drawn (93%) or glassmorphism (65%); annual.quest deliberately rejects both and reaches further back into typographic history.

2. **Forest-green palette at 5% representation** with a specific candlelit, library-quiet tonality — `#1F3326` Forest Ink and `#F2EBD9` Vellum form a pairing that no other design in the corpus uses. Combined with the Cinnabar Seal accent (used once per page), this creates an instantly recognizable visual signature that resists the warm-gradient (91% / 93%) defaults.

3. **Card-flip as central interaction at 5% representation**, deployed not as gimmick but as the **literal interaction-metaphor** of the site (each card is a specimen-card in an almanac, the flip is the unsealing of a journal entry). Most sites use card-flip incidentally; annual.quest builds the entire information architecture around it, with axis-alternation by row and 720ms stiff-card easing.

4. **Playfair-elegant typography at 1% representation** — the rarest typography token in the catalog. Paired with `IM Fell English SC` and `Cormorant Garamond` (also rare/unrepresented), the type stack is wholly unlike the 95% mono-dominant corpus.

5. **Line-illustration imagery (3% in corpus) as exclusive mode** — no photography (96% in corpus) appears anywhere. Every visual is hairline ink-line work, hand-drawn or generated to match Victorian plate conventions, with cross-hatching and stippling as shading.

6. **Retro-patterns motifs (6%)** delivered as damask panels, ledger-rules, endpaper marbling, and ornamental dingbats — physical-printing references rather than digital-pattern flourishes.

7. **Scholarly-intellectual tone at 3% representation** — the voice is that of a Victorian naturalist editor; no startup energy, no warm-friendly handholding (18% in corpus), no playfulness. Marginalia speaks Latin mottos. The user is a *subscriber to a learned society*, not a customer.

8. **Broken-grid layout (5%)** held with rigorous discipline — a single 14-column irregular spine seeded once, every section derives from it, plate rotations alternate per nth-of-type. Most designs default to centered (78%) or card-grid (60%); annual.quest is unmistakably broken.

**Chosen seed (per assignment):**
*aesthetic: victorian-ornate, layout: broken-grid, typography: playfair-elegant, palette: forest-green, patterns: card-flip, imagery: line-illustration, motifs: retro-patterns, tone: scholarly-intellectual*

**Patterns avoided per frequency analysis:** parallax (93%), spring (63%), stagger as primary (61%), cursor-follow (58%), magnetic (41%), photography imagery (96%), mono typography (95%), gradient palette (93%), warm palette (91%), full-bleed-as-default (85%), centered (78%), card-grid (60%) — each rejected in favor of the Victorian almanac vocabulary above. Where stagger appears (plate body-paragraph reveal), it is used **once per plate**, not as a global pattern; where cursor-follow appears (the ink-droplet trail), it is restricted to card hover only and is not a general mouse-tracker.

**Reference avoidance:** This design shares no significant DNA with the two reference designs read (aei.st-v1's memphis/diagonal/terracotta, adhoc.quest-v1's retro-futuristic/full-bleed/honeyed). The Victorian-almanac-as-stage approach is original to this volume.
<!-- DESIGN STAMP
  timestamp: 2026-05-09T07:11:39
  domain: annual.quest
  seed: seed
  aesthetic: annual.quest** is conceived as a **Victorian Naturalist's Almanac** — a leather-...
  content_hash: 76d07e0b2a33
-->