# Design Language for opensource.bid ## Aesthetics and Tone opensource.bid is a site about **the public auction of code** — the strange ritual where forks, pull requests, maintainer time, and abandoned repositories are placed on a block and called for bids in plain view. The visual identity refuses every default of the "open source" cliche (no green Octocat-mossy palettes, no terminal screenshots, no flat-illustrated developers high-fiving over laptops). Instead it stages a single, deliberate collision that sits nowhere else in the registry: a **pixel-art** aesthetic — the chunky 24-color, 1-pixel-grid vocabulary of late-1990s arcade and trading-card games — rendered entirely in **chrome-metallic** finishes, displayed inside a **masonry** of auction lots, and narrated in the warm, **conversational** voice of a regional auctioneer who knows every bidder's first name. The mood is *Friday-evening tabletop swap-meet*, not *Bonhams*. The auctioneer is leaning on the lectern, microphone slightly off-axis, telling you the story of lot 042 — a 14-year-old ImageMagick fork — before they call for bids. Every chrome highlight on every pixel sprite has the slight dustiness of a thrift-shop trophy under fluorescent tubes. **Cultural** motifs are deployed as the connective tissue: the imagery of public market days drawn from many traditions — the Korean *jangteo* day-market, the Moroccan *souk*, the Mexican *tianguis*, the Iranian *bazaar*, the New England estate sale — flattened into the same 16x16 sprite vocabulary. Open source is presented not as a software phenomenon but as the latest entry in humanity's long anthropology of the marketplace: people gather, bring goods, name a price, haggle, leave with something someone else made. The tone is patient, slightly self-deprecating, never urgent. Words like "synergy," "ecosystem," "world-class," and "next-generation" do not appear. The auctioneer says things like *"alright, we've got a sleepy little CSV parser here, three contributors, hasn't seen a commit since the last World Cup, opening at one cup of coffee."* The site reads like a transcript of a real auction lightly typeset, with the occasional sprite-chime when a bid is called. ## Layout Motifs and Structure The governing structure is **masonry** — a vertical, true-masonry layout (using `grid-template-rows: masonry` where supported, `column-count: 4` fallback elsewhere). This is a deliberately underused layout (4% in the registry) and the only one whose grain matches the mental model of an auction catalog: lots of varying heights, each a self-contained tile, the eye free to skim and snag. **Macro spine — "The Saturday Catalog":** 1. **The Marquee** (full-bleed, 100vh). A single hand-pixeled chrome banner spelling `OPENSOURCE.BID` in a 7-pixel-tall slab serif, polished like a neon diner sign that has been re-skinned in aluminum. Beneath it, a one-line ticker scrolls right-to-left at 18px/s: lot numbers, brief descriptions, current bid amounts in fictional currencies (cups of coffee, conference stickers, weekend hours, six-packs). Behind the marquee, a single warm **lens-flare** sweeps slowly across the viewport at 0.3deg/s — the only true light source on the page, suggesting an overhead clip lamp at a flea-market booth. 2. **The Auctioneer's Greeting** (~70vh). A single column of conversational text, max-width 38ch, set in a chunky slab serif, narrating the day's catalog in plain English. No headings, no bullets, no CTAs. Reads like a paragraph from a Sunday newsletter. 3. **The Catalog Floor — main masonry body** (no fixed height). A four-column masonry of 30-50 *lots*. Each lot is a self-contained pixel-art card, 240px wide, height anywhere from 280px to 720px depending on contents. Tiles are uneven by intent — some are tall (a forked Linux distro, with a long lineage diagram), some are squat (a deprecated NPM helper, three lines of description). The masonry **never reflows on hover** to keep the floor stable; only the focused tile lifts. 4. **The Provenance Wall** (full-bleed, ~80vh). A horizontally scrolling pixel-art panorama showing the same marketplace scene drawn five times across world cultures (jangteo / souk / tianguis / bazaar / estate sale), each scene 1200x600px, smoothly cross-faded in chrome-blue moonlight. The user scrolls the wall horizontally with vertical-wheel-to-horizontal-translation. This is the site's only deviation from vertical scroll, and it is the cultural argument made literal. 5. **The Closing Bell** (~50vh). A single pixel-art bell sprite, polished to mirror finish, with one line of text: *"that's the catalog. take what speaks to you. the floor stays open."* No newsletter signup, no "join our community," no Discord pill. **Lot tile anatomy** — every masonry tile contains, top to bottom: - a 64x64 pixel-art **sigil** of the lot (chrome-rendered icon: a forked-tree, a key, a printer, a moth, an anchor, a soup pot — culturally drawn, never the standard vector-icon library) - a tall slab-serif **lot number** ("LOT 042") in inset chrome - a one-line conversational **title** ("a CSV parser nobody asked for, but it's here") - a 4-6 line **provenance paragraph** (history, contributor count, last commit, vibe) - a chrome-rendered **bid panel** showing current bid in an absurd unit ("3 cups of coffee", "1 weekend", "a thank-you note") - a soft 1px chrome **bevel** around the entire tile that catches the lens-flare as it sweeps There is exactly **zero** sidebar, hero-with-form, dashboard panel, stat grid, pricing comparison, or testimonial row. The catalog *is* the content. ## Typography and Palette **Primary display — slab-serif, pixel-rendered:** **"Workbench"** (Google Fonts, variable). A modern slab serif with a programmable "ROUG" axis that introduces controlled pixel-edge roughness — perfect for the chunky, slightly hand-cut feel of an auction-house signboard. Used for the wordmark, lot numbers, and section openings. Sizes: `clamp(2.6rem, 6vw, 7.2rem)` for the marquee, `clamp(1.6rem, 2.4vw, 2.4rem)` for lot numbers. Letter-spacing: `-0.01em` for the wordmark, `0.02em` for lot numbers. The "ROUG" axis sits at 28 — visible chunkiness without illegibility. **Secondary slab — body-comfortable:** **"Roboto Slab"** (Google Fonts). The auctioneer's voice. Weight 400 for narration, 600 for emphasis. Size: `1.0625rem` (17px) at base, line-height `1.65`, max-width `38ch` for prose, `28ch` inside lot tiles. The choice is intentional: Roboto Slab is *common*, *unpretentious*, *Saturday-paper* — exactly the right register for a flea-market voice. No Garamond, no Cormorant, no ornamental serifs; nothing that would make a lot feel like an estate-sale catalog by Christie's. **Accent — pixel display:** **"Silkscreen"** (Google Fonts) at 8px and 16px for ticker text, ledger numbers, and bid amounts. Silkscreen is a true 5x7 bitmap face; it sits visually flush with the 16x16 sprite art and renders the ticker as if printed by an LED matrix. **Palette — chrome-metallic, dusty edition:** - `#1B1A1F` — **Tarmac Black**. The page background. Not pure black; there is a slight purple-grey dust in it. The chrome reads against this, never against true white. - `#D9DDE2` — **Brushed Aluminum**. The dominant chrome midtone. All sprite mid-grays. - `#F4F6F8` — **Polished Chrome**. The sprite highlights, the lens-flare core, the wordmark face. - `#7C8088` — **Gunmetal Shadow**. Sprite shadow side, masonry tile bevels' dark edge. - `#3A3D44` — **Pewter Deep**. Inset shadows, ticker background, tile separators. - `#FFB960` — **Auctioneer's Bulb**. The single warm tone on the page. Used **only** for: the lens-flare's halo, the active bid amount in tiles, and the bell sprite's warm reflection. Restraint is the entire trick — one warm color in a sea of cool chrome makes every appearance feel like a struck match. - `#86C5D9` — **Moonlit Blue**. The Provenance Wall's atmosphere. Cool, distant, slightly dusty. - `#9B7FB3` — **Faded Lilac**. Used at 8% opacity in the page-background dust noise; never a foreground color. Gives the chrome a slight evening-cool cast. **Color rules:** the chrome must never be pure-white-on-pure-black. The page background is `#1B1A1F`. The brightest highlight is `#F4F6F8`. The contrast is high but the color temperature of both endpoints is slightly off-neutral, which is what makes the chrome feel *thrift-shop-real* instead of *3D-render-clean*. Saturated colors (the Auctioneer's Bulb, Moonlit Blue) appear in less than 6% of any frame's pixels — the eye is drawn to them precisely because the rest of the world is metal. ## Imagery and Motifs **Pixel-art as the entire visual substrate, not as accent.** Every illustrative element on the page — sigils, bell, marquee, provenance panorama, ticker glyphs, bid icons — is drawn at the pixel level, on a 1px grid, then scaled up `image-rendering: pixelated` for crispness. Total sprite count: ~80 unique 16x16 sigils, 24 unique 32x32 lot-class icons, 5 panoramic 1200x600 cultural-marketplace scenes, 1 master marquee, 1 closing bell. Every sprite is rendered using a **chrome-metallic** sub-palette of 5 tones (Tarmac through Polished Chrome) plus the Auctioneer's Bulb for one accent pixel where appropriate. Anti-aliasing is forbidden. There is no color-bleed, no soft-edge feathering, no gradient ramp longer than 4 steps. **The 80 cultural sigils** — the project's central labor. Each sigil represents one *kind of thing being auctioned*, drawn from human marketplace history rather than tech-industry icon libraries: - *forked-tree* (split repository) — drawn as a chrome-metallic Tree of Jesse with two trunks - *kettle* (long-running daemon) — a Korean iron jangteo kettle on a brazier - *moth* (a deprecated bug in the wild) — a chrome luna moth, wings catching the bulb-light - *seed-pouch* (a starter project) — a Mexican mercado seed-vendor's drawstring sack - *cracked-bell* (a project that broke at scale) — a Liberty Bell, hairline drawn in pixel-line - *anchor-and-key* (a security library) — a Mediterranean port-master's brass key on chain - *teapot* (the famous 418 status) — a Persian *qalyan* teapot, chrome-rendered, Auctioneer's-Bulb steam - *printer's-block* (a typesetting library) — a chrome Gutenberg lead-type sort - *abacus* (a numerical library) — a Chinese suanpan, beads in brushed aluminum - *embroidered-square* (a UI component library) — a quilt patch from a New England estate sale - *pestle-and-mortar* (a build tool) — a Moroccan *mehraz*, brass-finished - ...continuing for ~80 entries, each a hand-placed pixel artifact from a specific cultural marketplace tradition Sigils are not interchangeable with the kind of Lot they describe — the matching is literal and historical. The user, after enough scrolling, begins to read sigils faster than the lot titles. **The lens-flare** is the page's only true atmospheric effect. A single radial gradient in CSS, 480px diameter, `mix-blend-mode: screen`, animated to drift slowly across the viewport on a 32-second cycle — left to right at the top, right to left at the bottom, crossing diagonally between. Its core is `#FFB960` at 60% opacity, falling to `#FFB96000` at the edge. As it passes over chrome surfaces, those surfaces brighten momentarily — implemented via per-tile CSS variables driven by IntersectionObserver + bounding-box math against the flare's current position. No lot is permanently bright; the bulb is a moving thing. **The provenance panorama.** Five horizontally-scrolling 1200x600 scenes, hand-pixeled: 1. **Jangteo at dawn** (Korean farmers' market) — wooden stalls, paper lanterns, a chrome cooking pot, vendors arranging vegetables. 2. **Souk at noon** (Moroccan medina) — chrome lanterns hanging in rows, a brass-keyed door, a pestle merchant. 3. **Tianguis on Sunday** (Mexican open market) — striped tarps in chrome-blue, a kettle vendor, a chrome marigold. 4. **Bazaar at evening** (Iranian covered bazaar) — vaulted ceiling beams catching the bulb-light, a teapot stall, kilim patterns rendered in 16x16 tiles. 5. **Estate sale on Saturday** (New England yard sale) — chrome lawn chairs, a glass-fronted display case, a hand-lettered sign. Each scene contains exactly one **opensource.bid lot** placed quietly inside it — a tiny lot-card sigil sitting on a stall, a packet of seeds bearing the silkscreen-fonted ID `LOT-024`, etc. Spotting them is the page's single hidden game. **The ticker.** A 28px-tall chrome strip running 8px below the marquee, scrolling continuously at 18px/s. Format: `LOT-042 · sleepy-csv-parser · 3 cups of coffee • LOT-007 · the-printer-block · 1 weekend • LOT-091 · cracked-bell-distributed-cache · a thank-you note • ...`. Pure Silkscreen at 16px. The ticker pauses for 1.2s every time a `•` separator passes the dead-center of the viewport — the rhythm of an auctioneer drawing breath. **The bell.** A single 96x96 chrome bell sprite, dead-center on the closing section. On click, the bell rotates 18deg with a classic spring physics curve, an SFX-free "ding" represented by a 6-frame pixel sparkle around its rim, and one line of text fades in: *"sold."* ## Prompts for Implementation **Storytelling spine.** Build as a single long-scroll HTML page that reads as the catalog of a single Saturday's auction at opensource.bid. The narrative is: *the auctioneer opens (Marquee) → speaks plainly to the room (Greeting) → walks the catalog (Masonry Floor) → reminds the room that markets are old (Provenance Wall) → rings the bell (Closing)*. There are no routes, no modals, no expand-to-read accordions, no "click here for more." The page is a transcript and the user's scroll is their attention. Absolutely no CTAs, pricing comparisons, testimonial carousels, stat-grids, "trusted by" logo bars, newsletter signups, "as featured in" rows, or hero-form combos. The site asserts its honesty by refusing marketing scaffolding entirely. **Pixel-art rendering pipeline.** All sprites are authored as PNGs at native pixel dimensions (16x16, 32x32, 64x64, 96x96, 1200x600). They are scaled in CSS via `image-rendering: pixelated; image-rendering: crisp-edges;`. No SVG conversion of pixel art (it ruins the bitmap honesty). The marquee is the only exception — it is rendered as inline SVG with chunky 4px-grid path construction, allowing the chrome gradient to be `` rather than per-pixel. Every other illustrative element is a real PNG bitmap. **Chrome shading rule.** All chrome surfaces follow the 5-tone rule: highlight (`#F4F6F8`) at top-left, midtone (`#D9DDE2`) on the body, shadow (`#7C8088`) on the lower-right, deep shadow (`#3A3D44`) on the bottommost edge, accent dot (`#FFB960`) wherever the shape would catch the auctioneer's bulb. This is enforced for every single sprite. The result is that 80 different sigils all "feel like the same metal," giving the masonry a strict visual grammar despite wildly different shapes. **Masonry implementation.** Use `grid-template-rows: masonry; grid-template-columns: repeat(4, minmax(220px, 1fr));` with `@supports not (grid-template-rows: masonry)` falling back to CSS `column-count: 4; column-gap: 24px;` and `break-inside: avoid` on tiles. The grid itself never animates; only individual tiles animate (see Spring section). Gutters are `24px` horizontal, `24px` vertical. Below 920px viewport the grid drops to 3 columns; below 640px, 2 columns; below 420px, 1 column. The masonry rhythm must survive on mobile. **Spring animation system — the page's chosen interaction grammar.** All micro-motion uses the `spring` family of timing functions. Use a custom `cubic-bezier(0.34, 1.56, 0.64, 1)` for "settle" springs and `cubic-bezier(0.68, -0.55, 0.27, 1.55)` for "punch" springs, and three concrete behaviors: 1. **Lot-tile hover.** On pointer-enter, the focused tile's `transform: translateZ(0) scale(1.04)` over 280ms with the settle spring. Its bevel inverts (highlight moves from top-left to bottom-right, as if the tile rose toward the bulb). On pointer-leave, returns over 380ms. Adjacent tiles do not move — masonry is stable. 2. **Bid-amount appear.** When a tile enters the viewport via IntersectionObserver, the silkscreen-rendered bid number counts up from 0 to its true value over 600ms with the punch spring, the digits twitching slightly each tick — the unmistakable visual of an old mechanical odometer. 3. **Bell ring.** Click triggers a 4-stage spring: `rotateZ(-12deg)` over 80ms (wind-up) → `rotateZ(18deg)` over 220ms with punch spring (strike) → `rotateZ(-6deg)` over 280ms with settle spring → `rotateZ(0)` over 320ms with settle spring. Pixel sparkles emit at frames 2, 5, and 8 of the strike, each a 4-frame loop of 4px chrome stars rotating outward from the rim. Strict rule: **no parallax, no scroll-driven multi-layer translation, no stagger fade-ins.** The flagged-overused interaction grammar of the registry (parallax 77%, stagger 69%) is replaced entirely by spring physics tied to either pointer or single-element scroll-into-view. The page does not feel like a parallax site; it feels like a *machine* with springs in its joints. **Lens-flare implementation.** A single absolutely-positioned `
` at z-index 8, `pointer-events: none`, `mix-blend-mode: screen`, 480px diameter, with a CSS radial gradient. Animated via a `requestAnimationFrame` loop that interpolates `--flare-x` and `--flare-y` along a Lissajous-like path with periods 32s and 47s (coprime, so the path never repeats). The flare is the only thing on the page that *moves on its own* — every other animation is response-to-user. **Voice rules for all microcopy.** Every word visible on the page must pass the auctioneer test: *would a Saturday-morning regional auctioneer say this without irony?* Forbidden: "platform," "ecosystem," "leverage," "world-class," "AI-powered," "next-generation," any em-dash flourish. Required: short sentences, contractions, the occasional aside. Lot descriptions read like they were spoken aloud: *"alright, this one's a quiet little JSON validator, two contributors, one of them hasn't logged in since 2022, but the tests still pass."* **Cultural-motif honesty.** Every sigil is drawn from a real artifact, not invented. Where a culture is represented (Korean jangteo, Moroccan souk, etc.), the artifact must be drawable from a specific real reference; sigils are noted with their cultural origin in alt-text and in a small "provenance map" anchor at the bottom of the Provenance Wall. The site treats global marketplace traditions with research-grade specificity — no generic "world" iconography. **Accessibility-of-narration (creative choice, not a11y compliance).** Each lot tile's `aria-label` is the *spoken* version of the lot — i.e. what the auctioneer would say about it — so screen-reader listeners experience the same conversational voice as sighted readers. This is presented as a design decision, not a checkbox. ## Uniqueness Notes **Differentiators from other designs in the registry:** 1. **Pixel-art (1%) + chrome-metallic (5%) is a never-attempted pairing.** Pixel art across the entire registry is overwhelmingly used in either *cottagecore-cute* (sprite gardens, soft pastels) or *retro-arcade-bright* (vaporwave neon, candy-bright). It is never deployed as a *chrome-finished* surface. The combination forces every sprite to be a hand-tuned 5-tone metal study, a constraint no other design imposes. Joint frequency in registry: zero. 2. **Masonry as a thesis, not a fallback.** Masonry layout is at 4% in the registry and almost universally used for portfolio/photography sites. opensource.bid uses masonry as the literal *catalog of an auction*, where each tile is a Lot — the layout's irregular heights are a feature, not a side effect. Pinterest-style use cases for masonry are commerce-display; this is the first registry use of masonry as *narrative artifact* (a working auction catalog). 3. **One conversational auctioneer voice, sustained for the entire page.** No other design in the registry commits to a single human persona and sustains it across every line of microcopy, alt-text, and bid description. The "auctioneer test" is the editorial spine — a higher constraint than tone-of-voice guidance, and the reason no marketing language survives. 4. **Cultural-motif honesty over generic "world" iconography.** Where most designs that touch "cultural" motifs (5%) reach for vague pan-Asian or pan-African pattern accents, opensource.bid draws each sigil from one specific marketplace tradition (jangteo, souk, tianguis, bazaar, estate sale) with research-grade attention. The Provenance Wall is the explicit thesis: open source sits inside the long human history of public markets, not above it. 5. **Springs-only interaction grammar — the absence of parallax/stagger.** Parallax (77%) and stagger (69%) are the most overused patterns in the registry. opensource.bid uses neither. All motion is spring physics tied to user action or single-element entry, plus one autonomous moving element (the lens-flare). This produces a feel closer to a mechanical object than a website. 6. **One warm color in a sea of metal.** Chrome-metallic is typically rendered with full luxury-cool palettes (silver/black/blue). opensource.bid restricts itself to one warm tone — *Auctioneer's Bulb* `#FFB960` — used in less than 6% of any frame's pixels. The rule is severe enough that the warm color, when it appears (the active bid, the lens-flare core, the bell's reflection), reads as physically warm — almost a temperature change. 7. **Refusal of every marketing affordance.** No CTAs. No "Start Bidding." No newsletter pill. No "trusted by" row. No pricing tier. No testimonial slider. No stat grid. The site asserts its seriousness by being a transcript, not a conversion funnel. This refusal is total — not "minimized" but absent. **Chosen seed/style (planned):** `aesthetic: pixel-art, layout: masonry, typography: slab-serif, palette: chrome-metallic, patterns: spring, imagery: lens-flare, motifs: cultural, tone: conversational` **Avoided patterns from frequency analysis:** - *hand-drawn* (75%, the most overused aesthetic) — replaced by strict pixel-grid. - *gradient* palette (81%, near-universal) — replaced by 5-tone chrome with one warm accent dot. - *photography* imagery (80%, near-universal) — replaced 100% by hand-pixeled sprites. - *parallax* (77%) and *stagger* (69%) — replaced entirely by spring physics + lens-flare. - *mono* typography (81%) — replaced by slab-serif (3%) + Silkscreen accent. - *dashboard* (74%) and *centered* (59%) layouts — replaced by masonry (4%). - *friendly* tone (66%) — narrowed to *conversational* (4%), specifically the regional-auctioneer register. - *warm* palette (81%) — appears only as one accent color (Auctioneer's Bulb) in <6% of any frame. The result is a design whose every dimension is deliberately drawn from the under-used quadrant of the registry's vocabulary, then welded together by a single human voice and a single visual rule (everything is metal, except where the bulb shines on it).