# Design Language for opensource.bid ## Aesthetics and Tone opensource.bid is staged as **the auction catalogue of an estate sale for abandoned open-source repositories** — a dignified, slightly mournful broadsheet printed the night before a public lot-viewing. The conceit: somewhere there is a quiet auction house that takes consignment of orphaned codebases — projects whose maintainers have moved on, whose stars have gone cold, whose last commit is dated like a tombstone — and prints a letterpress catalogue listing each one as **Lot No. ___**, with provenance, condition report, and a reserve price denominated not in money but in *attention* (watchers willing to fork, hours pledged, issues triaged). The whole site reads like that catalogue: heavy ink, ruled columns, fleurons between entries, the smell of newsprint implied through grain. The tone is **scholarly-intellectual crossed with grounded-earthy** — an estate appraiser's prose, dry and exact, never breathless. No exclamation marks. No "revolutionary." Just: *"Lot 14. A static-site generator, circa 2017. 312 commits. Documentation: incomplete but legible. One known memory leak, disclosed in the condition report. Provenance: a solo author, two contributors, one fork that briefly flourished. Reserve: 40 hours pledged."* It is melancholy without being maudlin — the dignity of giving abandoned work a proper viewing rather than letting it rot unannounced in a registry. There is faint dark humour in treating `node_modules` like a haunted attic, but the humour is bone-dry, set in small caps, never winking. Visually: **ink-black on warm paper, no gradients anywhere, no glassmorphism, no photographs.** Everything is type, rule, fleuron, and woodcut-style line engraving. The mood is a Sotheby's catalogue printed by a 19th-century newspaper press that ran out of every colour except black and one rust-red reserved for the gavel. ## Layout Motifs and Structure The governing structure is a **bound auction catalogue read as a long vertical scroll** — `editorial-flow` and `magazine-spread` instead of the corpus-standard `card-grid` (90%) and `full-bleed` (88%). The page is set in a **rigid two-column broadsheet measure** (a narrow outer "marginalia" rail at ~22% and a wide "lot column" at ~78%), with a 12px baseline grid that *everything* snaps to — paragraphs, rules, fleurons, lot numbers. There is no hero image, no full-bleed banner. The page opens the way a catalogue opens: a **title page** — auction house name set in a tall engraved display face, the sale date, the line "VIEWING BY APPOINTMENT — `git clone` TO INSPECT", and a single hairline rule. Below the title page, the catalogue proper: **lot entries stacked one after another**, each separated by a centred **fleuron** (✦ / ❧ / ⁂ style ornaments rendered as SVG, not emoji). Each lot entry is a small fixed module: a large outlined **Lot No.** in the left marginalia rail, then in the lot column — a one-line **title set in small caps**, a three-to-five-line **condition report** in the serif body, a **provenance line** in italic, and a **reserve** line in the rust-red, right-aligned, with a tiny engraved gavel glyph. No images inside lots — only a **2px ruled box** around each, like a catalogue plate frame, and occasionally a small woodcut-style line engraving (a folder, a wrench, a candle stub, a key) floated into the marginalia rail. Navigation is a **running header** that behaves like a printed page header: the auction house name on the left, "LOT __ OF __" on the right, updating as you scroll — the only "interactive" chrome on the page. No sidebar nav, no hamburger, no sticky CTA bar. The catalogue ends with a **colophon block**: who set the type (the design system), what press it was printed on (the stack), and a final ruled line. There is no contact form, no pricing table, no testimonials, no stats grid, no newsletter — the page is the artifact. One signature spatial move: **the "Conditions of Sale" page** — a single full-height spread, set entirely in a dense single justified column at ~62ch, listing the (fictional) terms under which an abandoned repo may be claimed, numbered like legalese, in 13px serif. It reads as the fine print at the front of a real auction catalogue, and it is deliberately, beautifully boring. ## Typography and Palette **Type system (Google Fonts only — three families, strict roles):** - **Engraved display face — `Cardo`** (or its closest sibling, used at the title page and lot titles): a Renaissance-revival serif with sharp bracketed serifs and a tall, narrow capital — it stands in for the engraved copperplate look of an auction house masthead. Used at 64–96px on the title page (auction house name), tracked tight at `-0.01em`, and at 18–22px small-caps for lot titles (`font-variant: small-caps; letter-spacing: 0.08em`). - **Catalogue body — `Spectral`** (variable, weights 300–600, with italic): a transitional serif designed for screens with generous x-height and crisp ink-trap details — used for all condition reports, conditions-of-sale, colophon. Set at 17px / 1.6 line-height on the 12px baseline grid; italics carry every provenance line. - **Marginalia & micro-labels — `IBM Plex Mono`** at 300/400: used *only* for the running header, lot numbers in the rail, the date stamps ("LAST COMMIT: 2017-03-04"), and the `git clone` line on the title page. The single concession to "code" — mono appears, but cornered into the margins, never the body. Tracked `0.04em`, often uppercase. **Palette (no gradients, no photography, four inks total):** - `#F4EFE3` — **catalogue paper**: a warm, slightly yellowed cream, the dominant field. Carries a faint multiply-blended paper-grain texture (SVG noise at ~3% opacity). - `#181410` — **press ink**: a near-black with the faintest brown undertone, for all body type, rules, fleurons, and the lot frames. Never pure `#000`. - `#9C9486` — **faded ink / aged stamp**: a soft warm grey for secondary text, the baseline grid lines (when toggled), and "withdrawn" / "lot closed" overprints. - `#A6342A` — **gavel rust-red**: the one chromatic ink, reserved with monastic discipline for reserve prices, the gavel glyph, the running-header lot counter, and a single hairline under the title. Nothing else is ever this colour. Hairlines are `0.5px` (or `1px` where rendering forces it); lot frames are `2px`; the title-page rule is `1px` rust-red. There is no third weight. ## Imagery and Motifs **No photographs. No 3D renders. No gradient meshes.** All imagery is either type-as-image or **woodcut-style single-weight line engravings** drawn fresh as inline SVG, in press-ink `#181410` only: 1. **The auction gavel** — a small (24px) engraved gavel-and-block, used beside every reserve line and once, large (180px), centred on the Conditions of Sale spread. Drawn in the manner of a 19th-century catalogue cut: cross-hatched shadow under the head, no fill, all line. 2. **Fleurons between lots** — a rotating set of five typographic ornaments (a curling vine bracket, a three-leaf aldus, an asterism ⁂, a printer's bullet flanked by hairlines, a tiny pointing manicule ☞) rendered as SVG, centred, ~32px, in faded-ink grey so they recede. 3. **Marginalia cuts** — small line engravings floated into the outer rail beside selected lots: a closed manila folder (the repo), an oil can (maintenance), a guttering candle (the dying project), an iron key (the licence), a dust-covered jar (`node_modules`), a magnifying glass (the condition report). Each ~40–56px, single weight, no fill. 4. **The lot frame** — a 2px ruled rectangle around each lot, with the corners drawn as tiny printer's-corner crossmarks (┼) rather than rounded joins — a registration-mark detail from real letterpress. 5. **Overprints** — a few lots carry a faded-grey rotated stamp reading `WITHDRAWN`, `RELISTED`, or `CLAIMED — VIEWING CLOSED` in mono caps, set at -8° like a real rubber stamp slammed across the entry. These are static, part of the catalogue's fiction. 6. **The baseline grid** — toggleable via a tiny `[grid]` button in the colophon: when on, faint 12px horizontal rules appear behind everything, proving the type is set, not floated. A craft flex, off by default. Decorative texture: a single full-page **paper grain** (SVG fractal noise, mix-blend-mode multiply, ~3% alpha) and nothing else — no blobs, no particles, no aurora, no bokeh. ## Prompts for Implementation Build opensource.bid as **one HTML page, one CSS file, one small ES module** — no framework, no build step, no canvas, no WebGL. The page *is* an auction catalogue; the reader scrolls through it the way they'd turn pages at a viewing. There is **no CTA, no pricing block, no stat-grid, no testimonials, no email capture, no FAQ accordion, no logo wall, no contact form, no cookie banner, no chatbot.** The artifact is the deliverable. **Narrative sequence (vertical scroll, ~9 movements):** 1. **Title page.** Full viewport, catalogue paper. Auction house name in `Cardo` at clamp(56px, 9vw, 96px), centred. Below, in `IBM Plex Mono` caps: the sale designation, the date, and `VIEWING BY APPOINTMENT — git clone TO INSPECT`. A single 1px rust-red hairline, 40% width, centred beneath. As the reader begins to scroll, the title page **doesn't parallax** — it simply scrolls away like a real page being turned; the running header *fades in* once it leaves the viewport. 2. **The catalogue note.** A short justified paragraph in `Spectral` italic at 62ch, explaining (in appraiser's voice) what this sale is: *"The following lots comprise software consigned to public memory by maintainers who could no longer keep them. Each has been inspected. Each condition report is honest. Bids are accepted in the only currency that matters here..."* Ends with a fleuron. 3–7. **The lots (5–8 lot entries).** Each is a ruled 2px frame on the 12px baseline grid. Left marginalia rail: outlined `Lot No.` in `Cardo` at ~48px, the number stroked not filled (`-webkit-text-stroke: 1.5px #181410; color: transparent`). Lot column: title in `Cardo` small-caps; below it a `IBM Plex Mono` micro-line (`LAST COMMIT: YYYY-MM-DD · COMMITS: ___ · STARS: ___`); below that a 3–5 line condition report in `Spectral`; an italic provenance line; and a right-aligned reserve line in rust-red with the 24px engraved gavel SVG. Some lots carry a marginalia cut (folder, oil can, candle, key, dust-jar); two carry a rotated faded-grey overprint stamp. Lots are separated by centred SVG fleurons. **Entrance animation:** as each lot frame enters the viewport, draw the 2px rule **like ink being laid down** — animate `stroke-dashoffset` on an SVG rect from full perimeter to 0 over ~600ms `ease-out`, then fade the text in beneath it at low stagger (~40ms per line). The reserve line's gavel does a single **2° "tap" rotation** on first reveal and never again. No spring, no bounce, no magnetic cursor, no tilt-3D, no parallax — the motion vocabulary is *the catalogue being printed*, line by line, calm and mechanical. 8. **Conditions of Sale.** A full-height spread: dense justified single column at ~62ch, `Spectral` at 13px, numbered clauses in fictional-legalese voice ("3.1 The Buyer accepts the Lot in the condition disclosed. 3.2 No warranty of maintainability is given or implied. 3.3 The Reserve, once met in pledged hours, is binding for ninety days..."). A large 180px engraved gavel centred above the heading. This page is deliberately the quietest on the site — almost no motion, just a slow fade-in. It is the "boring on purpose" centrepiece. 9. **Colophon.** Final ruled block: who set the type (this design language), the press it ran on (the HTML/CSS/JS stack, named drily as "a single-impression web press"), the typefaces used, and the `[grid]` toggle button that overlays the 12px baseline grid across the whole document. A last full-width 0.5px press-ink rule, then the page ends. No footer links, no social row. **Interaction details:** - **Running header** (`position: sticky; top: 0`): auction house name left, `LOT __ OF __` right in rust-red mono, the number incrementing via IntersectionObserver as each lot scrolls past its midpoint. A 0.5px rule beneath. This is the *only* persistent chrome. - **Hover on a lot frame:** the frame ink deepens very slightly (`#181410` → unchanged, but the faded micro-line goes from `#9C9486` to `#181410`) — the entry "comes into focus," as if held closer to a lamp. No lift, no shadow, no scale. - **`[grid]` toggle:** adds a class to `` that paints repeating 12px `background` rules in 8%-alpha faded-ink behind the whole document. Off by default. - **Reduced-motion:** all stroke-draw and fade-in collapse to instant; the catalogue simply *is*, fully printed. - Respect the 12px baseline grid in CSS via a custom property (`--baseline: 12px`) and derive every margin, line-height, and rule offset from multiples of it. The craft is in the snapping. Bias the entire build toward **stillness and ink**: this is a quiet, full-screen reading experience, not a landing page. If a section feels like it wants a button or a sign-up, delete the section. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Auction-catalogue-as-website, with no commerce.** The corpus is saturated with `card-grid` (90%) product/portfolio layouts; this is an `editorial-flow` printed catalogue where every "card" is a *lot entry* with provenance and a condition report, and the "price" is denominated in pledged attention, never money. There is no checkout, no pricing table, no CTA — the auction conceit is used purely as a narrative frame for *abandoned open source*, which is a subject almost no design treats with dignity. 2. **Zero gradients, zero photography, zero glassmorphism — pure letterpress.** Against an 95–98% prevalence of gradient + warm + photography palettes and an 80% glassmorphism rate, this site is four flat inks on warm paper, all imagery hand-drawn as single-weight woodcut-style SVG engravings, and a 12px baseline grid that everything snaps to. The "warm" here is yellowed newsprint, not a sunset gradient. 3. **Motion vocabulary = "the catalogue being printed."** Instead of the corpus-standard parallax (91%) / cursor-follow (89%) / spring (85%) / magnetic (81%), the only animations are: ink-laying stroke-draw on lot frames, a low line-stagger fade, and a single 2° gavel "tap." Calm, mechanical, one-shot — the opposite of springy reactive chrome. 4. **A deliberately boring centrepiece.** The "Conditions of Sale" spread — dense justified 13px serif legalese — is the structural heart of the page and is *intentionally* the least animated, least decorated screen. Most designs put their flashiest moment at the centre; this one puts the fine print there, and treats that as the point. 5. **Mono is exiled to the margins.** `mono` typography appears in 94% of the corpus, usually as a hero/body voice; here `IBM Plex Mono` is permitted *only* in the running header, the rail lot numbers, the date stamps, and the `git clone` line — never in body copy. The body is `Spectral`/`Cardo` serif throughout, so the "code" register is present but firmly subordinate. **Chosen seed/style:** *aesthetic: editorial · layout: magazine-spread / editorial-flow · typography: serif-revival (Cardo + Spectral) · palette: monochrome (warm-paper + press-ink + faded-ink + a single rust-red) · patterns: path-draw-svg + fade-reveal + stagger · imagery: line-illustration (woodcut engravings) · motifs: vintage / book-scholarly · tone: scholarly-intellectual + grounded-earthy* — closest seed phrase: **"vintage newspaper layout"** crossed with **"classic serif revival book"**. **Avoided patterns from frequency analysis:** hand-drawn aesthetic (96%), glassmorphism (80%), photography imagery (98%), gradient-mesh imagery, card-grid layout (90%), full-bleed layout (88%), centered hero-dominant layouts, warm-gradient palettes (95–98%), mono-as-body typography (94%), parallax (91%), cursor-follow (89%), spring (85%), magnetic (81%), tilt-3d (28%), and all CTA/pricing/stat-grid/testimonial conventions.