# Design Language for historic.day ## Aesthetics and Tone `historic.day` is staged as **the private herbarium-and-almanac of a fictional 19th-century horological society** — a guild that believed each calendar day carried a "pressing," a botanical specimen that could only be gathered on that date, and that the act of remembering history was indistinguishable from the act of preserving a flower between two sheets of rag paper. The whole site behaves like a **vellum-bound day-book** retrieved from a humidity-controlled vault: deckle-edged leaves, gilt-tooled spines, glassine interleaves, marbled endpapers, a brass clasp that catches the light. Onto this antiquarian object we have grafted exactly one anachronism — **the abstract-tech motif**: faint circuit-like filigree, etched in the same copperplate hand as the botanical plates, threading through the margins as if the guild's clockwork had been drawn by the same engraver who drew the ferns. The conceit reads three ways: *historic* as in "the great days of the calendar," *historic* as in "a pressed specimen, dated and labelled," and *historic* as in "the patina of the page itself." The domain `.day` is the organizing unit — the site is a single, slow, scrollable *day-leaf*, one specimen, one date, one quiet meditation on what was kept. The mood is **pastoral-romantic but never twee** — it is the romance of the *archive*, not the meadow: the smell of beeswax polish and old paper, the hush of a reading room, dust held in a shaft of afternoon light. It is **luxury-premium in the antiquarian register** — the luxury of a Sotheby's lot description, of hand-marbled Cockerell paper, of a single full-page chromolithograph tipped in by hand — not the luxury of chrome and serif logos. Restraint is the flex. Generous margins are the flex. The willingness to let one botanical plate occupy an entire screen, captioned only in tiny copperplate italic, is the flex. ## Layout Motifs and Structure The composition is a **card-grid — but read as a *plate-and-glassine* card-grid**, the way a museum drawer of mounted specimens reads as a grid. Each "card" is a **specimen mount**: a cream rag-paper rectangle with a narrow letterpress rule-border (1.5px, ink-brown, with hairline 0.5px inner shadow-rule 3px inside it — a double-rule "frame" exactly as Victorian herbarium sheets used), a tipped-in botanical illustration, a printed label cartouche in the lower-right corner (date, "specimen no.", a line of pseudo-Latin binomial), and — overlaid in `mix-blend-mode: multiply` at 12% opacity — a single sheet of **glassine**: a faintly warm-grey translucent veil with a soft directional sheen, the protective interleaf you have to mentally "lift" to read the plate clearly. On hover the glassine **slides up and away** (translateY, 480ms, custom cubic-bezier easing that decelerates like paper settling) and the plate beneath gains 4% saturation and 2px of focus — the *blur-focus* / progressive-disclosure beat, but dressed as turning past tissue-paper. Structural inventory, top to bottom — the site is one continuous **immersive scroll**, ~640vh, conceived as a single day-leaf: 1. **The Frontispiece (100vh).** Marbled-endpaper background (procedural CSS — see prompts), a centered gilt-tooled cartouche with the wordmark "historic.day" set in the serif-revival display face, and beneath it, in tiny copperplate italic, *"a day-book of pressed time."* A brass clasp icon at the page-foot pulses faintly (*pulse-attention*, 4s, ≤6% scale) inviting the scroll. 2. **The Colophon Leaf (90vh).** A single column, max-width 58ch, set like the title-verso of an antiquarian book: the "society's" fictional charter, printer's device, a date of "founding." Wide marbled margins left and right. 3. **The Specimen Drawer (220vh).** *The card-grid proper.* A 3-column desktop grid (2 on tablet, 1 on mobile) of specimen mounts, each carrying one botanical-illustration plate. The grid is **deliberately, gently irregular** — mounts vary ±8% in height and sit on a 12px baseline, the way real drawer-mounted sheets never perfectly align. Each mount staggers in on scroll (*stagger* + *fade-reveal*, 90ms cascade). This section also hosts the only "interactive" affordance: a **specimen request slip** — a small letterpress form ("request a viewing") whose single text input, if left blank on submit, performs the *shake-error* beat: the slip judders left-right 3× over 380ms with a faint ink-blot bloom at the field, then a copperplate marginal note appears: *"the archivist requires a name."* (No real submission, no backend, no CTA pressure — it is a *bookbinding-flavoured* form, a piece of theatre, the site's one moment of friction-as-charm.) 4. **The Tipped-In Plate (130vh).** A full-bleed reveal: ONE oversized botanical chromolithograph, edge-lit, occupying the entire viewport with a hand-cut deckled border. As you scroll through it, a thin glassine veil *peels diagonally* off the top-left corner (*path-draw-svg* tracing the peel edge + *scroll-triggered* translate). Caption floats in copperplate italic, lower-right, 13px. 5. **The Marginalia (60vh).** A two-column "annotations" leaf: the right column is the "text," the left is a narrow rail of *abstract-tech* filigree — clockwork-meets-circuit linework, drawn in the same engraving hand — that *draws itself* (`stroke-dashoffset` animation) as it scrolls into view. This is the anachronism made explicit and beautiful. 6. **The Back-Pastedown (110vh).** Closing leaf: marbled endpaper again (a different procedural seed, so it doesn't mirror the front), a gilt rule, a single closing line of copperplate, and a small embossed "ex libris" plate. The brass clasp icon reappears, now *clasped* (the loop animation closes). There is **no nav bar** — there is a thin **vertical "ribbon bookmark"** pinned to the right edge (a 6px-wide strip of faded silk-ribbon red, #8B2E3C), and as you scroll its little tasseled end glides down the page; clicking a section's ribbon-notch eases you there. No hamburger. No sticky header. No footer-with-links. The page does not link out. ## Typography and Palette **Typefaces — Google Fonts only, three families, used with bindery discipline.** - **Cormorant Garamond** (display + serif-revival voice; weights 400, 500, 600, plus 400-italic and 600-italic). Carries the wordmark (set 88px / 0.95 line-height / +0.5px tracking, weight 600), all leaf-headings (44px, weight 500, small-caps via `font-variant: small-caps`), and the running body of the colophon and marginalia leaves (20px / 1.62 line-height, weight 400, generous `text-rendering: optimizeLegibility`). This is the "antiquarian book" voice — high-contrast, lyrical, slightly archaic, with the gorgeous ball terminals and old-style figures that read as *1820s revival*. Drop-caps on the first leaf use Cormorant Garamond 600 at 5 lines tall, ink-brown. - **EB Garamond** (text-companion, weights 400 + 400-italic + 500). Used *only* inside the specimen-mount label cartouches and the "request slip" form: 13px, the pseudo-Latin binomials in **400-italic**, the dates and "specimen no." in 500-caps with +1.2px tracking. Slightly more even in colour than Cormorant at small sizes — it survives being printed tiny in a cartouche. Also the *copperplate italic captions* throughout (14px, 400-italic, ink-brown at 80% opacity, `letter-spacing: 0.2px`). - **IBM Plex Mono** (the anachronism's typographic echo; weight 400 + 500). Used *exclusively* in the Marginalia rail's abstract-tech annotations — tiny technical labels beside the filigree ("esc. 18,000 bph", "fol. 144 r", coordinate-style notations), 11px, 500, tracked +0.8px, in a desaturated slate (#5A6B6E). It is the one "machine" voice on a page of "hands," and its rarity is the point — it appears on exactly one leaf. **Palette — "the herbarium drawer." Warm, aged, jewel-tones held in reserve like the colours of a hand-tinted plate.** - `#F2E9D8` — **rag paper / leaf ground.** The dominant warm-cream of every mount and every text leaf. Slightly uneven (a faint 1.5% noise-texture overlay) so it never reads as flat #fff-adjacent. - `#E5D3B3` — **glassine / aged-tissue veil.** The interleaf colour, used at 12–20% opacity in `multiply`; also the colour of deckled paper edges. - `#3A2A1C` — **ink brown.** All body text, all rules, all engraving linework. Never pure black — this is iron-gall ink that has mellowed for a century. - `#6E2B3A` — **garnet (jewel-tone #1).** The hand-tinted "flower" accent — petals, the ribbon-bookmark's deeper notches, the drop-cap shadow, the "ex libris" plate ground. A deep wine-rose, the colour of a pressed peony. - `#1F4C3C` — **bottle-emerald (jewel-tone #2).** The "leaf/stem" accent in botanical plates, the marginalia rule, the colophon's printer's-device ground. A dark, glassy forest-green — the green of malachite or a deep-cut emerald, not a grassy green. - `#2C3A5E` — **deep lapis (jewel-tone #3).** Used sparingly: the abstract-tech filigree's "circuit" highlights, the section-ribbon's title-notch, a single hairline rule on the frontispiece. Holds the cool note that keeps the warm scheme from going monochrome-sepia. - `#B08D3E` — **antique gilt.** Gradient-stop gold for all "tooled" elements: the cartouche border on the frontispiece, the gilt rules, the clasp. Rendered as a 3-stop linear-gradient (#8C6A23 → #D9B45A → #8C6A23) at a shallow angle to fake foil, never flat. - `#8B2E3C` — **silk-ribbon red.** The vertical bookmark ribbon only. A faded, dusty scarlet. Backgrounds are **never** pure white and **never** dark-mode; the page glows like paper under a reading lamp. Marbled endpapers are built from layered radial-gradients in garnet / bottle-emerald / gilt over the rag-paper ground at low opacity, with a `feTurbulence` SVG filter warping them into the classic "Stormont"/"Spanish wave" comb pattern. ## Imagery and Motifs **Three motif families, layered in strict hierarchy: botanical-illustration (dominant), abstract-tech (the anachronism, used once-and-pointedly), and bindery-ornament (connective tissue).** **1. Botanical-illustration (the heart).** Every specimen mount and the tipped-in plate carry a botanical plate in the manner of **Pierre-Joseph Redouté / Curtis's Botanical Magazine** — but *drawn in CSS/SVG*, not photographed: fine copperplate-engraving linework (0.6–1px strokes in ink-brown) describing the form, with hand-tint washes (garnet petals, bottle-emerald foliage) laid in as soft `radialGradient` fills that don't quite reach the linework — exactly the "colour slightly outside the lines" charm of a 19th-century hand-coloured plate. Specimens: a peony, a fern frond unrolling, a sprig of rue, a poppy seed-head, a vine tendril, a single iris. Each gets a pseudo-Latin binomial in EB Garamond italic in its cartouche (e.g., *"Paeonia mnemonica"*, *"Filix temporis"*). NO stock photography anywhere. NO photographic flowers. The whole imagery system is line + wash, on paper. **2. Abstract-tech (the one anachronism).** Confined to the **Marginalia leaf** and a whisper of it in the page-foot filigree. It is **clockwork drawn as circuitry**: escapement wheels whose teeth resolve into PCB traces, a balance-spring that spirals into a coil inductor, going-train gears connected by trace-lines and via-dots — all rendered in the *same copperplate engraving hand* (0.6px ink-brown strokes), so it looks like the guild's engraver was handed a circuit diagram and drew it the only way he knew how. It **draws itself** via `stroke-dashoffset` on scroll. Tiny IBM Plex Mono labels annotate it. This motif is the site's signature — antiquarian botany + a single engraved circuit is a combination that should appear nowhere else in the cohort. **3. Bindery-ornament (connective).** Letterpress rule-borders (single and double), a printer's device / colophon mark (a stylized "h.d" monogram inside an oval of laurel, gilt), corner-piece fleurons at the four corners of the frontispiece cartouche, a deckled-edge SVG mask used on the tipped-in plate and the mount-edges (procedural irregular path), a brass clasp icon (two states: open/clasped), and an "ex libris" embossed plate (debossed via inset box-shadow + a 1px highlight rule). Glassine interleaves (translucent warm-grey veils with directional sheen) sit over every plate as the recurring "lift the tissue" interaction. **Textures, applied globally:** a 1.5% monochrome noise-texture (`feTurbulence` → `feColorMatrix` desaturate, multiply blend) over the whole page for the rag-paper tooth; a very faint vignette (radial, ink-brown, 4% at the corners) so the page feels lit from a window; on the tipped-in plate, an extra "foxing" layer — three or four 60px soft garnet-brown radial spots at 6% opacity, the age-blooms of old paper. ## Prompts for Implementation Build `historic.day` as **one HTML document, one CSS file, one small ES module** — no framework, no router, no React, no build step beyond a single bundling pass. The page is one continuous vertical scroll, ~640vh, six leaves (Frontispiece → Colophon → Specimen Drawer → Tipped-In Plate → Marginalia → Back-Pastedown). The visitor lands, scrolls slowly through the day-book, and leaves. There is no second page. The page does not link out. **Storytelling is the organizing principle, not navigation.** The six leaves compose a single, quiet, fictional narrative: *a horological-botanical society's day-book, the day-leaf for one date, recovered from the archive.* Copy is sparse, lyrical, antiquarian — printer's-charter language, copperplate captions, pseudo-Latin binomials. Never marketing voice. Never "Sign up." Never "Learn more." If a sentence could appear on a SaaS landing page, delete it and write it again as if for a 1840s book of plates. **Required animation beats (the page is mostly still — these are the few moments of motion, all paper-physical):** - **Glassine lift** on every specimen mount (hover/focus): the translucent veil `translateY(-110%)` over 480ms with a settling cubic-bezier; plate beneath gains +4% saturation and a 2px focus pass. On touch devices, the first scroll-into-view of each mount auto-lifts its glassine once. This is the *blur-focus / progressive-disclosure* pattern, costumed. - **Specimen-drawer stagger** (scroll): mounts `fade-reveal` + 12px rise, 90ms cascade, IntersectionObserver-driven, `prefers-reduced-motion` collapses it to instant. - **Shake-error** on the "request a viewing" slip: blank-on-submit → 3× horizontal judder over 380ms, an ink-blot bloom (`scale` + fade of a garnet radial) at the empty field, then a copperplate marginal note types in (*typewriter-effect*, 22ms/char) reading *"the archivist requires a name."* Filling the field and "submitting" again simply fades the slip to a "noted." stamp — no real network call. - **Tipped-in-plate glassine peel** (scroll): an SVG path traces the diagonal peel edge (`path-draw-svg`) while the veil layer rotates ~6° and translates off the corner, synced to scroll progress through that leaf. - **Marginalia self-drawing filigree** (scroll): the clockwork-circuit linework reveals via `stroke-dashoffset` 0→full as the leaf enters; IBM Plex Mono labels `fade-reveal` after their corresponding trace finishes. - **Brass clasp** loop: open at the top of the page, gently `pulse-attention` (≤6% scale, 4s) on the Frontispiece; at the Back-Pastedown it animates *closed* (a 600ms latch with a tiny gilt glint sweep). - **Ribbon bookmark**: the silk-ribbon strip's tasseled end tracks scroll position down the right edge; clicking a section-notch eases the page there (`scroll-behavior` + JS fallback, 700ms ease). - **Marbled endpaper**: animate the `feTurbulence` `baseFrequency` *extremely* slowly (a 60s loop, ±0.002) so the marbling seems to "breathe" like wet paper — almost subliminal. **Procedural marbled-paper recipe (CSS/SVG):** rag-paper base `#F2E9D8`; stack 5–7 large `radial-gradient`s in garnet `#6E2B3A`, bottle-emerald `#1F4C3C`, and gilt `#B08D3E` at 8–14% opacity, offset and varied in size; wrap the lot in an SVG `` with `feTurbulence type="turbulence" baseFrequency="0.012 0.03" numOctaves="3"` feeding a `feDisplacementMap scale="40"` to comb the gradients into the classic Spanish-wave pattern; overlay the 1.5% noise texture and the corner vignette. Two seeds: one for the Frontispiece, a different `seed=` for the Back-Pastedown so they're siblings, not twins. **Botanical-plate recipe (SVG):** build each specimen as a single inline ``: linework in `` describing petals/leaves/stems with hand-drawn-feeling Béziers; hand-tint washes as ``-filled shapes placed *behind* the linework and deliberately offset 2–4px so colour spills past the lines; a faint cast-shadow under the specimen (`feGaussianBlur` ink-brown ellipse, 8% opacity) to "lift" it off the mount; the cartouche label as an absolutely-positioned HTML block in the mount's lower-right with EB Garamond. Keep stroke counts modest — suggestion, not botanical-textbook accuracy. **Layout/CSS notes:** CSS Grid for the Specimen Drawer (`repeat(3, 1fr)` desktop / 2 / 1, `gap: clamp(24px, 3vw, 56px)`), with each mount given a small random `--jitter` custom property (±8px translateY, ±0.4deg rotate) set inline at render so the drawer reads hand-arranged. Generous `max-width: 58ch` and `margin-inline: auto` on every text leaf. Letterpress double-rule borders via `box-shadow: 0 0 0 1.5px #3A2A1C, inset 0 0 0 1px #3A2A1C` plus a 3px transparent padding ring. Honour `prefers-reduced-motion`: kill all scroll/loop animation, keep glassine-lift as an instant opacity swap, keep everything readable and beautiful as a *static* book. **AVOID:** any CTA-heavy layout, pricing blocks, stat-grids, testimonial carousels, sticky headers, hamburger menus, cookie-banner aesthetics, hero-with-two-buttons, dark mode, neon, glassmorphism-blur cards, stock photography. If it looks like a startup page, it has failed. It should look like a $40,000 antiquarian book that happens to scroll. ## Uniqueness Notes Differentiators this design commits to — none should be duplicated by any other CMassC site: 1. **Botanical herbarium + a single engraved circuit.** The frequency analysis shows `botanical-illustration` imagery at 2% and `abstract-tech` motifs at 4% — their *intersection* (a 19th-century hand-engraved botanical plate world that contains exactly one "clockwork-drawn-as-circuitry" leaf) is the load-bearing conceit and appears nowhere else. Copying it would be plagiarism. 2. **`luxury-premium` aesthetic in the antiquarian-archive register.** `luxury-premium` reads at **0%** across 252 designs — this is the first. And it deliberately *rejects* the obvious "gold-on-black, big serif logo" reading of luxury in favour of "Sotheby's lot description / hand-marbled Cockerell paper" luxury. The flex is restraint and margins, not chrome. 3. **The glassine-interleaf interaction as the core UI verb.** Every plate is veiled by a translucent "tissue" the visitor mentally lifts (hover slide-away on desktop, auto-lift-once on touch). No other site in the cohort uses "turn past the protective tissue" as its progressive-disclosure metaphor. 4. **Procedural marbled-endpaper backgrounds** (`feTurbulence` + `feDisplacementMap` combing radial-gradient washes into a Spanish-wave pattern, breathing on a 60s loop) instead of any gradient-mesh / photo / blob background — and a *different seed* for the front vs. back leaf so they're a matched pair. 5. **The `shake-error` beat as bookbinding theatre, not a real form.** `shake-error` is at 4%; here it's the "request a viewing slip" that judders, ink-blots, and answers in a copperplate marginal note ("the archivist requires a name") — friction reframed as charm, with no backend, no CTA pressure. 6. **`serif-revival` typography executed as a true 1820s revival pairing** — Cormorant Garamond (display + lyric body) over EB Garamond (cartouche/caption micro-type) over a single rare IBM Plex Mono voice for the anachronism — old-style figures, small-caps headings, 5-line drop-caps. `serif-revival` is at 6%; this is the *antiquarian-book* take on it, not the editorial-blog take. 7. **No nav, no footer, no links out** — a silk-ribbon vertical bookmark is the only wayfinding, and the whole 640vh page is conceived as one physical *day-leaf* from a bound volume, honouring the `.day` TLD literally. Chosen seed (from assignment): **aesthetic: luxury-premium, layout: card-grid, typography: serif-revival, palette: jewel-tones, patterns: shake-error, imagery: botanical-illustration, motifs: abstract-tech, tone: pastoral-romantic.** Avoided overused patterns from the frequency analysis: no `photography` imagery (99%), no `glassmorphism` (66%), no `hand-drawn` aesthetic (96%), no `mono`-dominant typography (95% — mono appears on exactly one leaf as the anachronism), no `cursor-follow`/`magnetic`/`spring`-juiced interaction layer (80–87%), no `dashboard`/`centered`-default layout reflex, no `gradient`+`warm` mesh background reflex (98%). The card-grid (87%, overused) is in the assigned seed but is re-imagined as a *museum specimen drawer*, not a feature-card grid.