# Design Language for opensource.day ## Aesthetics and Tone opensource.day is built as **a digital scriptorium** — a monastic copy-room reimagined as a UNIX terminal, where the open-source contributor is a hooded scribe transcribing, annotating, and forking the great texts of the commons. The conceit: the entire web of free software is one enormous illuminated manuscript that everyone is permitted to copy, marginalize, and re-bind. A `git commit` is a stroke of the quill. A pull request is a marginal gloss submitted to the chapter house. A `LICENSE` file is the colophon. A fork is a daughter codex carried to a new abbey. The mood sits at the exact crossing of **two tempers that rarely meet**: the *cold, monospaced, blinking-cursor patience of a 1979 VT100 session* and the *warm, ink-and-vellum devotion of a 12th-century manuscript page* — gold leaf, rubricated initials, dotted ruling-lines, marginalia in a smaller hand. Neither register dominates; the page is literally a parchment leaf rendered inside a terminal pane, the `$` prompt drawn in the same red ochre a medieval rubricator would have reserved for the first word of a verse. The tone is **scholarly-intellectual but quietly devotional** — reverent toward the labor of maintainers the way a scriptorium was reverent toward the labor of copyists, and faintly liturgical: contribution as a daily office, hence *opensource.day* as a feast day on a contributor's calendar. Everything is unhurried. No urgency, no conversion funnel, no "get started in 60 seconds." The visitor is a pilgrim who has wandered into the copy-room and is invited to watch the ink dry. ## Layout Motifs and Structure The site is a **single continuous vertical scroll structured as a codex leaf, ~640vh, divided into eight "gatherings"** (the bookbinder's word for a folded sheaf of leaves). The dominant structural conceit is the **medieval manuscript page armature** — a layout almost extinct on the web — rendered with strict geometric ruling: - **The text-block (the "written area")** occupies a tall, narrow column offset *left of center*, leaving a deliberately wide outer margin on the right — exactly as scribes left room for glosses. This is an **asymmetric single-column** layout, never centered, never a card-grid. - **Ruling lines**: faint horizontal hairlines at a fixed baseline pitch run the full width behind all text, like the hard-point ruling pricked into vellum. Two vertical bounding lines (the "frame ruling") box the written area. These lines are 0.5px, in a desaturated sepia, and they *never move* — the text scrolls past them as if the leaf were being unrolled behind a fixed lectern frame. - **The right margin is an active gutter**: as you scroll, real marginalia accrete there — tiny commit-hash sigils, hand-shaped *manicules* (☞) pointing at important lines, a *nota bene* monogram, and contributor "names of copyists" set in a smaller hand. Some marginalia are rotated 90° to fit, the way cramped medieval annotators turned text sideways. - **Rubricated section openers**: each of the eight gatherings begins with a **drop-capital initial** — a large letterform occupying 4–5 ruled lines, drawn as a hybrid of a Lombardic versal and an ASCII box-drawing character (the initial's counter-space filled with a faint terminal-green `0`/`1` lattice). - **The terminal pane is the binding**: the whole leaf sits inside a thin-stroked window chrome with three "wax seal" dots (UNIX-window-controls drawn as blobs of sealing wax — ochre, indigo, leaf-green) and a title bar reading the current `pwd`-style path (`/var/commons/opensource.day —`). A blinking block cursor lives at the bottom of every gathering, waiting. - **A vertical scroll-progress "spine"** runs down the far left edge — rendered as the *sewn binding* of the codex, with little stitch-marks (chain-stitch pattern) that fill in thread as you descend, so the act of reading is literally the act of binding the book. No hero image. No bento boxes. No stat-grid. The page is a leaf, and you read it. ## Typography and Palette **Three Google Fonts families, each with a strict liturgical role.** - **IM Fell English / IM Fell English SC** (the body, the homilies, the "vellum voice"). A genuine 17th-century revival face cut from the Fell types — irregular, lightly inked, with an antique warmth. Used for all running prose at 19px / 1.7 line-height, set ragged-right (never justified — scribes weren't either). The small-caps variant (`IM Fell English SC`) carries every gathering's running title and the colophon. - **JetBrains Mono** (the terminal voice, the "command office"). Every `$` prompt, every commit hash, every file path, every code fragment, every marginal sigil. 15px / 1.5. This is the page's **mono** spine — the cold counter-temper to the Fell warmth. It also draws the ASCII box-rules and the drop-cap lattices. - **Cormorant Garamond** (display only — the rubricated versals and the eight gathering numerals "I"–"VIII"). Used at 88–132px, weight 600, for the drop-capitals and the great opening word of each gathering. Tracked tight. This is the *elegant-serif* register that lets the versals feel hand-drawn rather than typeset. **Palette — the scriptorium's pigment-box, eight pigments.** - `#1C1A14` — **oak-gall ink** (near-black warm brown; the primary text color and the terminal "foreground"). - `#F4ECD8` — **aged vellum** (the page ground; warm cream, faintly mottled). - `#E8DCC0` — **pumice vellum** (a darker leaf tone for alternating gatherings and the margin gutter). - `#A8331C` — **red ochre / minium** (rubrication: the `$` prompt, drop-cap fills, the first word of each gathering, manicules, error glyphs). - `#B58A2E` — **gold-leaf** (used sparingly — versity numerals' inner shimmer, the colophon flourish, the "starred" repos; rendered with a subtle linear-gradient sheen, not flat). - `#2E4A3C` — **terminal verdigris** (a deep desaturated green for the `0`/`1` lattices, code-comment text, the binding stitches, "merged" states). - `#3A4A6B` — **lapis / woad** (cool indigo accent for links, the second wax-seal dot, "in review" states; links underlined with a dotted-leader rule, not a solid bar). - `#7C7259` — **sepia ruling** (the 0.5px hard-point ruling lines and frame ruling; never used for text). High-contrast where it matters (oak-gall on vellum is a near-perfect reading pair); muted and earthy everywhere else. No pure white, no pure black, no neon, no gradient meshes. ## Imagery and Motifs **Four motif families, all drawn — no photography anywhere.** 1. **Manuscript apparatus** (the signature layer): drop-capital versals; *manicules* (the pointing-hand ☞, hand-inked, used in the margin to flag important commits); a *nota bene* monogram (NB tangled into one glyph); paraph marks (¶ drawn as a flourished pilcrow) ending each paragraph of the colophon; *catchwords* — at the very bottom of each gathering, the first word of the next gathering is printed tiny in the lower-right corner, exactly as a binder's catchword, so the scroll feels foliated. Hard-point **ruling lines** and **prick-marks** (tiny dots down the margin where a scribe would have pricked the vellum). 2. **Terminal glyphs** (the cold layer): the blinking block cursor `█`; box-drawing rules (`├──`, `╰─`, `┌─┐`) used as section dividers and to "bracket" code; a stylized `$` and `~` rendered in red ochre at versal scale at gathering-openers; commit-hash sigils (7-char hex strings) scattered as margin ornament the way medieval pages carried tiny zoomorphic doodles; an ASCII **git-graph** — the `* | \ /` lattice of `git log --graph` — but drawn as an *illuminated vine*, the branch-lines flowering into leaf-green tendrils where they merge. 3. **Heraldry of the commons** (the emblematic layer): tiny drawn "arms" for the great licenses — a shield quartered for the GPL (with a copyleft-mirrored "C"), a simple bezant for MIT, an Apache feather, a BSD checkmark-cross — used once each, in the margin, beside the relevant line. A **colophon device** at the very end: a printer's-mark-style monogram weaving the letters O-S-D around a small candle (the scriptorium worked by candlelight). 4. **The candle and the cursor** (the atmospheric layer): a faint, slow, hand-drawn flame iconography near the binding spine that flickers subtly (CSS keyframes, very low amplitude) — the only "ambient" animation; it casts the merest warm vignette into the left margin. The cursor at the foot of each gathering is its cold mirror — both are "still burning." Decorative borders are restrained: a single hairline vine that runs *only* down the inner frame-ruling of the written area, sprouting one small leaf at each gathering boundary, so by the end the vine has eight leaves — a tally of the day's contributions. ## Prompts for Implementation Build opensource.day as **one HTML document, one CSS file, one small vanilla ES module — no framework, no router, no build step beyond a single bundling pass. No React. No CSS framework.** It is one continuous scroll, ~640vh, eight gatherings, read top to bottom and then left behind. There is no second page and the page does not link out (the license "arms" are decorative, not links). **Storytelling is the organizing principle, not navigation.** The eight gatherings together compose **a single fictional text — "The Day-Office of the Commons"** — a faux-medieval/UNIX hybrid treatise on what it means to contribute: - *I — Matins (the empty repo)*: a blank vellum leaf, one blinking cursor, `$ git init` rubricated huge. The drop-cap "I" hollow, slowly filling with the green `0`/`1` lattice as you scroll into it. - *II — The Scribe's Hand*: on cloning, copying, the first patch. ASCII git-graph begins growing down the margin as illuminated vine. - *III — The Marginal Gloss*: pull requests as glosses; the right gutter becomes thick with manicules and copyists' names; some annotations rotate 90°. - *IV — The Chapter House*: review, consensus, the merge. The git-graph vine flowers leaf-green where lines converge; a verdigris "✓ merged" rubric. - *V — The Daughter Codex*: forking. The text-block visibly *splits* — a second narrow column buds off to the right for a few screens, then the parent column resumes. - *VI — The Colophon*: licenses, attribution, the heraldry-of-the-commons margin shields, the LICENSE file rendered as a real medieval colophon ("Here ends..."). - *VII — The Long Maintenance*: the unglamorous office — issue triage, bug-fixes, the candle burning low. Muted pumice-vellum ground; the flame animation dims a notch. - *VIII — Vespers (the day closes)*: the eighth leaf on the binding-vine; the colophon device with the candle-monogram; the cursor blinks one last time; `$ ` and nothing typed after it. **Animation guidance:** - **Path-draw-svg** is the hero technique: the binding stitches sew themselves, the marginal vine grows leaf by leaf, the git-graph branch-lines ink in, the drop-capitals' outlines draw before their fills wash in — all tied to scroll position, eased gently (no spring bounce; this is a quill, not a rubber band). - **Scroll-triggered fade-reveal** for each paragraph of Fell prose — text "wicks in" like ink spreading on damp vellum (a slight blur-to-sharp + opacity, ~600ms, generous stagger between lines). - **Typewriter-effect** *only* for the `$ git ...` command lines at gathering openers — typed character by character with the block cursor, then the cursor moves down to wait. Used maybe six times total. Never on prose. - The **candle flame** loops subtly forever; the **block cursor** blinks at ~1.1s. These are the only two non-scroll animations on the page. - A faint **paper grain** and an ultra-subtle vellum mottle (CSS, layered radial-gradients or a tiny tiling SVG noise at very low opacity) sit under everything; the ruling-lines render *above* the grain so the leaf feels physically pricked. - Marginalia in the right gutter parallax *slightly* slower than the main text-block — the margin is "further from the eye" — but the ruling-frame stays absolutely fixed. One axis of parallax only; nothing flies. **AVOID:** CTA buttons of any kind, pricing tiers, stat-grids, "trusted by" logo walls, signup forms, card-grids, hero-with-screenshot, glassmorphic panels, dopamine neon. If a section feels like a landing page, redraw it as a leaf of the manuscript. ## Uniqueness Notes Differentiators this design commits to — none should be duplicated by any other site in the cohort: 1. **The scriptorium × terminal fusion.** The frequency analysis shows `terminal` aesthetic at 24% and `editorial`/`scholarly` at the low-mid range — but the load-bearing conceit here is the **medieval illuminated-manuscript page armature** (written-area + outer gloss-margin + hard-point ruling + catchwords + drop-cap versals + sewn-binding scroll-progress) *rendered as a UNIX terminal pane*. That specific crossover — git-graph-as-illuminated-vine, `$`-prompt-as-rubrication, PR-as-marginal-gloss, fork-as-daughter-codex — is the signature of opensource.day and would be plagiarism if copied. 2. **An active right-margin gutter as a first-class layout region.** Almost every site in the cohort is centered or card-gridded; this one is deliberately asymmetric with a *live margin* that accumulates manicules, copyists' names, commit-hash sigils, and 90°-rotated annotations as you scroll. The margin is not decoration sitting in whitespace — it is a parallel column with its own content. 3. **Fixed ruling-frame, scrolling leaf.** The 0.5px hard-point ruling lines and the frame-ruling box *do not move*; the text scrolls past them. Combined with the binding-spine that sews itself shut as you read, the physical metaphor is "unrolling/foliating a manuscript," not "scrolling a webpage" — and the eight-leaf tally-vine makes the scroll itself a counting ritual. 4. **Typeface casting against type.** IM Fell English (a deliberately *irregular, antique-inked* revival) for body — not the usual clean humanist or grotesk — paired with JetBrains Mono as the cold counter-voice and Cormorant Garamond reserved *exclusively* for hand-drawn-feeling versals. No sans-serif anywhere in running text. **Chosen seed / style:** `terminal command line dev` (from seeds.json) — pulled hard toward the scriptorium/illuminated-manuscript pole so the terminal register reads as a *scribe's copy-office* rather than a hacker dashboard. **Avoided patterns from frequency analysis:** no `hand-drawn` cartoon illustration (96% — saturated) beyond the specific manuscript-apparatus pen-work; no `glassmorphism` (80%); no `card-grid` (90%); no `full-bleed` hero; no `photography` (98%); no `cursor-follow`/`magnetic`/`tilt-3d` interactions (80–90% each — replaced entirely by `path-draw-svg` and `fade-reveal`); no gradient meshes or dopamine neon. Warm earthy palette is common in the cohort, but the *pigment-box framing* (oak-gall, minium, gold-leaf, verdigris, woad, pumice) and its one-pigment-per-semantic-state discipline is specific to this design.