# Design Language for archaic.works ## Aesthetics and Tone archaic.works is a **cottagecore atelier preserved under a magnifying lens** — a pastoral printing-house catalogue rendered with the patience of a hedgerow naturalist and the precision of a 1923 type foundry's specimen book. The domain word is read literally: *archaic* (older forms still in working order) + *works* (the labour, the pressroom, the workshop's collected output). The site is therefore staged as the surviving daybook of a small, still-operating works — a one-room studio at the edge of a hayfield where antique craft is performed not as costume but as profession. The dominant mood is **the cool light of a stone-floored vestry on a clear afternoon in early September**: the windows are open, motes turn slowly in the shaft of sun across the press, and somewhere out of frame a kettle has just clicked off. Nothing on the page is hurried; nothing is loud. But everything is carefully made, and everything keeps moving — the cursor blinks, the press strikes, the bees fold over the lavender at the page edges. The tone is **professional in the old guild sense**: a master craftsperson speaking quietly to an apprentice. There is no hype, no greeting card sentimentality, no chocolate-box romance. Instead the writing reads like the front matter of a scholarly herbal: precise, dated, signed at the foot, slightly droll. Visual antecedents (not pastiche, but DNA): the Doves Press specimens before they were thrown into the Thames, Tasha Tudor's daybook ink-and-wash margins, Albertus Seba's plate annotations, the marbled endpapers of an 1890s seed-merchant's order book, the typewritten field-notes Beatrix Potter pinned beside her watercolours, and the long horizontal letter-press proof sheets hung on twine across a rural Sussex print shop. The aesthetic refuses sepia nostalgia — it is **high-contrast**, not faded. Ink is *black*. Paper is *white*. The botanicals are vivid, alive, freshly cut. The frame the visitor steps through is full-bleed, edge-to-edge, no margins, no card containers — the whole browser becomes the workshop window. ## Layout Motifs and Structure The page is a **full-bleed broadside-folio** — one continuous sheet that scrolls vertically through six dated chapters, each occupying at least `100svh` and bleeding to all four edges of the viewport. There is no sidebar, no top navigation bar, no card grid, no hero-with-CTA. There is only the broadside, unfolding. **The Folding Rule.** A single 1px hairline column-rule runs the full height of the document, positioned at exactly 38.2% from the left (the lesser portion of a golden cut). All composition hangs from this rule. Headings sit hard against it on the right; marginal annotations, dates, and folio numbers sit hard against it on the left. The rule is the spine of the workshop's daybook, not a decorative line — and on every chapter break it briefly flares to 2px and sprouts a small inked rosette. **Chapter cadence (top to bottom):** 1. **Front Plate — "archaic · works"** (`110svh`). The title is set at display size in classical serif and is being typed, character-by-character, by an unseen typewriter the moment the page settles. A frame of botanical line-art (dog-rose, cow-parsley, fox-and-cubs) is being drawn around the title in real time by an SVG path-draw — but the brushwork is generative: each session a different sub-species fills the corners, never the same hedge twice. Beneath the title, in lowercase typewriter, the subtitle types itself: *"a working press for old methods, kept alive by stubbornness, deadlines, and bees."* 2. **Colophon Strip** (`30svh`, narrow band). A horizontal strip in inverted contrast (white type on black ink) listing today's date in long form, the current barometric pressure (faked), the current moon phase as a small carved woodcut glyph, and the works' founding year. This is the only place the page goes inverse — everywhere else is dark ink on bright paper. 3. **The Casebook** (`120svh`). A typewritten field-notes column on the right of the Folding Rule narrates the studio's working method as plain prose paragraphs. The left of the Rule carries marginalia: hand-cut dates (`6.iv.`, `12.ix.`), ornamental drop-caps, and short Latin tags (*nota bene*, *vide infra*) that appear only when the corresponding paragraph scrolls into the central reading band. 4. **Plate I — The Working Garden** (`140svh`). A botanical plate occupying the full width. A generative-art floral composition is painted live in SVG: stems, leaves, and seed-heads emerge from random anchor points and grow upward according to an L-system, settling into a hedgerow tableau over roughly 6 seconds. The visitor can re-seed the plate by clicking the small inked phrase *re-sow* at the foot. Each seed is recorded as a six-character identifier in the margin (e.g. `seed: th-09f4`). 5. **Plate II — The Press Run** (`110svh`). A long, horizontally-laid letter-press composition. The chapter title is set at enormous size in classical serif, then progressively *struck* — character by character a soft platen-shadow drops behind each letter, exactly the way a hand-fed press would build up impressions. The strike rhythm is irregular, paced by a low metronome. 6. **Imprint & Foot** (`60svh`). A foot-of-the-broadside region in the manner of a 1908 colophon: type and paper provenance, a credit to the bees, and the works' mark — a small woodcut letter `A` enclosed in a wreath of three-pronged wheat. Beneath this, a single line in italic: *"set, struck, and posted from the works."* No CTA. No newsletter. No follow buttons. The grid is **not** a 12-column responsive grid. It is a **two-track folio rule** (38.2 / 61.8), with a typographic baseline locked to a fixed 6-pt rhythm so that every line of body type, every drop-cap, every botanical tendril aligns to an unseen ledger. On viewports narrower than 720px, the marginalia fold *under* the body paragraphs as indented foot-notes (the way a small-format paperback would set them); the Folding Rule remains, but at 50%. ## Typography and Palette **Typography — serif-classic, all on Google Fonts, no inventions.** Three faces, used in named, structural roles. No font outside these three appears anywhere on the site. - **Display & Body Serif: *Cormorant Garamond***. The full optical-size family. Used for the site title (weight 500, italic for the secondary line), all chapter headings (weight 600, regular), all body prose in the Casebook (weight 400, 1.55 line-height, 18.5px desktop / 17px mobile). The italic cut is used liberally for botanical Latin names, Casebook side-notes, and any directional instructions to the visitor. The deep contrast of Cormorant — hairline crossbars against bracketed serifs — is what holds the high-contrast palette together against the white page. - **Marginalia & Foot: *EB Garamond* (small caps cut)**. Used at small sizes (10px / 11px) for folio numbers, dates set in roman numerals (`vi.iv.mmxxvi`), and the imprint at the foot. EB Garamond's small-caps drawer is set tighter than Cormorant's and is therefore reserved for the structural metadata — never for prose. - **Mechanical Voice: *Special Elite***. Used **only** when the page is "typing" — the title strike, the subtitle strike, the seed identifier in the margin, and the inverse Colophon Strip. Special Elite has the soft-edged ink-bleed of a worn typewriter ribbon and is what gives the page its mechanical heartbeat. It never sets longer than two lines at a time. Type sizing follows a **modular scale of 1.250 (major third)** anchored at 18.5px body. The display size at the front plate is `clamp(72px, 11vw, 168px)`. The Folding Rule baseline grid is 6 points; every headline lands on it. **Palette — high-contrast, ink and paper, with three botanical accents.** Six colours. No gradients, no glows, no soft drop-shadows. - `#F7F3EA` — **Bleached Linen.** The page paper. Slightly warmer than absolute white, the colour of a fresh broadsheet held up to a north window. - `#101010` — **Pressroom Ink.** The body type, the rule, the drop-caps. Not pure black — a degree of softness so the small caps don't ring against the linen. - `#FFFFFF` — **Lampblack-Inverse.** Used only inside the Colophon Strip as the ground for inverse type. The strip's ink is `#0A0A0A`, the type sits in `#FFFFFF`. This single inverse band is what the high-contrast designation is for: it is a sudden tonal turn against the linen field. - `#7A0E1B` — **Madder Root.** A botanical red ground from the dyer's garden. Used **only** for the small inked rosette at chapter breaks, the *re-sow* call-line, and the wax-seal style works' mark in the imprint. - `#3F5A2A` — **Hedge Green.** A clipped-yew green for the generative botanical plates. Appears only as stroke in the SVG illustrations; never as background. - `#C49A2B` — **Quince Gold.** A faded gilt for the moon-phase glyph in the Colophon Strip and for the wreath in the works' mark. Used in fewer than five places on the entire page. The page never tints. Type is `#101010` on `#F7F3EA`, and that is it. The accents are reserved for the small, deliberate, inked moments. ## Imagery and Motifs **Imagery is generative-art, with floral-botanical motifs as the dominant visual lexicon.** No photography of any kind. No stock illustration. No hand-drawn raster brushwork. Everything decorative is rendered live in SVG, in-browser, at view time. **The Working Garden plate (generative).** An L-system-driven stem grammar (axiom `F`, rules `F→F[+F]F[-F]F` with stochastic weights) seeded per page-load. Stems are stroked in Hedge Green at 1.1px, leaves in the same green with a 0.6 fill alpha, seed-heads in solid Pressroom Ink. Twelve plant archetypes are pre-defined: *Anthriscus sylvestris* (cow-parsley), *Rosa canina* (dog-rose), *Lavandula angustifolia* (lavender), *Digitalis purpurea* (foxglove), *Pilosella aurantiaca* (fox-and-cubs), *Cynosurus cristatus* (crested dog's-tail), *Achillea millefolium* (yarrow), *Centaurea cyanus* (cornflower), *Daucus carota* (wild carrot), *Galium verum* (lady's bedstraw), *Knautia arvensis* (field scabious), *Stachys officinalis* (betony). Each render selects three at random and grows them in alternating clumps along an undulating ground line. Beneath each clump, the Latin name is set in *Cormorant Garamond* italic — also part of the SVG, also drawn line-by-line. **Decorative drop-caps.** Each Casebook section opens with a hand-cut botanical drop-cap rendered in SVG. The capital letter is the structural form; a single tendril of ivy or honeysuckle drawn in `path-draw` SVG winds around it during the chapter's reveal. Twelve drop-cap forms are pre-drawn (A, C, F, G, M, N, O, P, R, S, T, W); the cap is selected by the first letter of the section's first word. **Marginal rosettes.** At every chapter break the Folding Rule sprouts a small ink rosette (six-petalled, 22px diameter, Madder Root) — drawn live in SVG in roughly 800ms. The rosette is the only repeating decorative mark on the page; it appears five times in total. **The Bee.** A single small bee glyph (4-segment line-drawing, ~14px wide, in Pressroom Ink) drifts slowly across the page once per minute in a slow sinusoidal path, never crossing the same line of type twice. This is the only persistently animated element. It is acknowledged in the imprint: *"the bees are credited."* **Iconography — none.** No pictograms, no Material icons, no UI glyphs anywhere. Hyperlinks are inline text, underlined with a hand-drawn SVG stroke that has the slight wobble of a steel-nibbed pen. ## Prompts for Implementation Build archaic.works as **a six-chapter broadside that the visitor reads top to bottom in one breath**. The page must feel like a single sheet pulled fresh from a working press, not a website assembled from sections. There are no calls to action, no signup, no pricing tiers, no statistics, no testimonials, no logo wall, no feature grid. Storytelling, instrumentation, and atmosphere only. **Macro structure (top to bottom):** 1. **Front Plate (`110svh`).** The page settles white. After ~250ms the typewriter begins. The display title `archaic · works` types out at one keystroke per ~80ms in *Special Elite*, then dissolves character-by-character into *Cormorant Garamond* (the typewriter ink "sets" into proper letterpress). The subtitle types directly in *Special Elite* and stays. Around the title, four corner ornaments draw themselves as botanical line-art in SVG `stroke-dashoffset` over ~3 seconds. 2. **Colophon Strip (`30svh`).** Inverse band slides up from the foot. The date types itself in *Special Elite* white-on-black. Moon-phase glyph in Quince Gold fades in last. 3. **The Casebook (`120svh`).** As the visitor scrolls, body paragraphs in *Cormorant Garamond* enter the central reading band. The first letter of each paragraph blooms into a botanical drop-cap with a tendril winding around it (path-draw SVG, ~1.2s). Marginalia (date stamps, Latin tags) fade in at the left of the Folding Rule when their paragraph is in band. 4. **Plate I — Working Garden (`140svh`).** The plate begins drawing the moment its top edge crosses 80% of the viewport. L-system stems grow upward over 6 seconds. The phrase *re-sow* sits inked at the foot of the plate; clicking re-runs the generation with a new seed. The seed identifier prints itself in the margin in *Special Elite*. 5. **Plate II — Press Run (`110svh`).** The chapter heading sets at display size, then is "struck": one character at a time, a 4px translated shadow in `#101010` at 25% alpha drops behind the letter, accompanied by a brief 60ms scale-down/-up of the glyph (the platen impression). Strike rhythm is irregular and metronome-paced. 6. **Imprint & Foot (`60svh`).** The works' mark — letter `A` inside a wheat-wreath — draws itself in SVG path-draw over 2.5s, ending with a small Madder Root wax-seal disc that fades in beneath it. The imprint type sets in EB Garamond small caps, italic credit-line in Cormorant italic. **Animation — patterns required.** The site leans hard on three under-used patterns from the registry: - **typewriter-effect** is the page's mechanical heartbeat: it announces every chapter title, the subtitle, the date, and the seed identifiers. Use a deterministic `setTimeout` cadence with a slight per-character jitter (±15ms) to avoid a metronome feel; vary keystroke-down vs. keystroke-up timing. - **path-draw-svg** is used everywhere a botanical or decorative line appears. All stems, all drop-cap tendrils, the works' mark, the corner ornaments, the rosettes. Use `stroke-dasharray` matched to `getTotalLength()` and animate `stroke-dashoffset` with eased-out cubic timing in the 1–6 second range. - **scroll-triggered + stagger** is used to enter Casebook paragraphs, drop-caps, and marginalia in a folded cadence: each paragraph reveals over 700ms; its drop-cap begins drawing at +200ms; its marginalia date stamps in at +400ms. Use IntersectionObserver against the central reading band, not against the viewport edges. **Strict prohibitions.** - No hero with a CTA button. No pricing block. No stats grid. No testimonials. No logo wall. No FAQ accordion. No newsletter signup. No social-icon row. No "as featured in" strip. - No raster imagery anywhere. Every visual element is SVG or live-typed text. - No drop shadows on cards (there are no cards). No gradients (the palette is flat ink). No glassmorphism. No backdrop-filter. No glow. - No system UI fonts as fallback. The three Google Fonts must be loaded with `font-display: block` (the page is meant to wait for its proper voice; an FOUT in Helvetica would break the spell). - No JavaScript framework. Vanilla ES modules, one main file `works.js`, one stylesheet `works.css`, one HTML document `index.html`. **Pacing.** The page is meant to be read in 4–5 minutes. Animation should never block scrolling, but should never feel hurried either. When in doubt, ease longer. Let the bee drift. ## Uniqueness Notes **Differentiators from the existing registry (34 prior designs analysed):** 1. **Cottagecore as professional craft, not pastoral wallpaper.** The frequency report shows `cottagecore` at 2% (1 prior occurrence). archaic.works does not stage cottagecore as a nostalgic mood-board with watercolour stock and floral SVG borders — it stages cottagecore as a *working practice*: a small printing-house in the country whose output is the page. The pastoral is functional (working garden as visual lexicon, bees credited in the imprint, clipped-yew green only in the SVG strokes), not ornamental. This is materially different from the dominant `hand-drawn` aesthetic (82%) and the dominant `botanical` aesthetic (14%), neither of which frame the pastoral as labour. 2. **Typewriter-effect as the page's heartbeat, not a hero gimmick.** `typewriter-effect` is at 2% in the registry (1 prior occurrence). On archaic.works, the typewriter is not a one-line hero animation — it is the recurring mechanical voice of the document, used in five distinct contexts (front-plate title, subtitle, Colophon date, generative-plate seed identifiers, press-run strike). The typewriter is a *role* (Special Elite font, mechanical cadence, soft ink bleed) and is structurally separated from the body voice (Cormorant Garamond, set type). Few sites distinguish between "typed" and "set" voices; archaic.works does. 3. **Generative-art as botanical grammar, not abstract noise.** `generative-art` is at 2% in the registry; `botanical-illustration` at 5%; `floral-botanical` motifs at 5%. archaic.works fuses all three: a deterministic L-system grammar with twelve named hedgerow species, each rendered as live SVG with Latin name annotation. The generation is not chaotic abstract gradient mesh or particle noise (the more usual generative idiom) — it is *taxonomic*, named, and re-seedable by the visitor with a printed seed identifier. The visitor is invited into the printing process. 4. **High-contrast (11%) refuses sepia.** The dominant palette in the registry is `warm` (97%) with `gradient` (91%). archaic.works uses zero gradients and rejects the sepia/cream/oat-milk tonal range that almost always accompanies cottagecore. Ink is `#101010`; paper is `#F7F3EA` (warm linen, but not faded); accents are the dyer's garden (`#7A0E1B` madder, `#3F5A2A` yew, `#C49A2B` quince). The result is a botanical aesthetic that reads with the visual snap of a Doves Press specimen, not the haze of a Pinterest moodboard. 5. **Folding Rule at 38.2% replaces the centred-or-asymmetric default.** `centered` (91%) and `asymmetric` (50%) dominate the registry. archaic.works runs a single full-height vertical hairline at the lesser portion of the golden cut, and hangs all marginalia, dates, drop-caps, and chapter rosettes from it. The page has neither a centred axis nor a free asymmetric composition — it has a *folio rule*, which is a structural primitive from the broadside-folio tradition rather than from web layout convention. 6. **Avoided patterns from the frequency report.** The design deliberately omits the registry's heaviest tropes: photography (91%), warm gradient palettes (91% / 97%), parallax sections (88%), centred composition (91%), vintage motifs (85% — *vintage* would have been an easy default for this seed; the design refuses it in favour of *living archaic*), and mono typography (94% — the page uses no monospace at all; the Special Elite typewriter face is a slab/typewriter serif, not a monospace coder font). It also avoids any CTA, pricing, or stats block per the brief. **Chosen seed:** `aesthetic: cottagecore, layout: full-bleed, typography: serif-classic, palette: high-contrast, patterns: typewriter-effect, imagery: generative-art, motifs: floral-botanical, tone: professional` — used as planned and reinforced through every structural decision above, with rare-vocabulary slots (cottagecore, typewriter-effect, generative-art) treated as load-bearing rather than decorative.