# Design Language for opensource.bar

## Aesthetics and Tone

opensource.bar is a **pixel-art dive bar at 2:47 AM** — the kind of crooked, smoke-stained tavern where exhausted open source maintainers slump into vinyl booths to nurse their issue queues, swap horror stories about GPL forks, and let a jukebox of CHANGELOG.md files play softly in the background. The aesthetic fuses **late-90s/early-2000s pixel art adventure games** (think *LucasArts SCUMM* with its 320×200 dithered backgrounds) with **goblincore mess** — a soulful clutter of empty energy-drink cans, dog-eared O'Reilly books, sticker-bombed laptops, and a single string of failing Christmas lights nailed above the bar regardless of the season. The mood is **edgy-rebellious crossed with grounded-earthy**: not "hustle culture" energy, but the warm, slow camaraderie of people who maintain unpaid software because they love it and now everybody is exhausted but okay.

The tone refuses both the glossy SaaS gradient and the corporate "developer experience" patois. There are no hero CTAs. There are no Trusted By logos. The visitor is treated as a regular who already knows where the bathroom is. Copy is written like graffiti scratched into the wood of a bar table: short, dry, occasionally tender, occasionally cursed. A faint scanline CRT shimmer overlays the entire site, as if the whole thing were rendered on a 1998 Trinitron monitor running RealPlayer in a back office. The page hums with the low cyan glow of an Atari neon sign that flickers on the seventh hour of refresh.

This is a bar that has **chosen-family energy**: warm, dim, slightly sticky, deeply welcoming, and unmistakably refusing to be cool. It is the opposite of LinkedIn.

## Layout Motifs and Structure

The layout abandons the dashboard/card-grid orthodoxy entirely and instead constructs a **playable single-room scene** — a horizontally panning side-view of a pixel bar drawn in 16-color isometric-leaning perspective. The viewport opens onto the front door of the bar and as you scroll **horizontally** (yes — horizontal-scroll is the primary axis), the camera trucks across the room: past the doorway, past the booths, past the jukebox, past the bar counter, past the back hallway with the unisex bathroom and the door marked SERVER ROOM (it's just a closet with a Raspberry Pi). The site is one continuous **immersive-scroll** room — about 7200px wide at the rendered resolution, scaled responsively via `image-rendering: pixelated` and integer scaling so the pixels stay crisp on every viewport.

Each "section" is a piece of furniture in the bar, and you read it by stopping in front of it:

- **Front door** (0–800px): a pixel-art wooden door with a paper sign taped to it. The sign is the headline. A bell hangs above; it jingles when the page first loads.
- **The booth** (800–2200px): a corner booth with a flickering CRT TV mounted in the wall. The CRT plays a looped 8-frame pixel animation of `git push --force` being typed and refused. Booth reads as the site's manifesto.
- **The jukebox** (2200–3400px): a Wurlitzer-style pixel jukebox. Each "record" is a project / repo / artifact featured by the bar. Click a record and it slides into the player; a pixel speaker thumps and a paragraph of project liner notes appears scrawled on a beermat.
- **The bar counter** (3400–5200px): the longest segment. A pixel bartender (a goblin with green skin and a maintainer's thousand-yard stare) wipes a glass forever. Stools line the counter. Each stool has an occupant — a pixel character representing a contributor, a sponsor, a reader of the room. Clicking a stool zooms-focus to a polaroid of that person pinned to the wall behind the bar.
- **The pool table & dartboard** (5200–6400px): community / events / meetups. The dartboard scoreboard is the upcoming-events list, written in chalk.
- **The back hallway** (6400–7200px): a quiet corridor leading to a door labeled `/exit`. This is the contact section: a payphone with a curling cord and a sticky note with the email address.

A **thin sticky bottom bar** runs across the viewport like a saloon-style HUD: it shows the current section as a pixel mini-map, the bar's "house rules" (Be Kind. Don't Force-Push. Tip Your Maintainer.), and a tiny pixel cat that walks back and forth depending on cursor proximity (cursor-follow). Vertical space is otherwise restrained — `ma-negative-space` above and below the scene gives the room a stage-set feel, like a dollhouse cross-section.

There is **no traditional grid**. There is only the room. Composition follows the **broken-grid** logic of furniture placement — askew booths, slightly tilted picture frames, posters peeling at one corner, a chair pulled back from the bar. Nothing aligns to a column system; everything aligns to physics and to the imagined floorboards.

## Typography and Palette

**Primary Display Font:** "VT323" (Google Fonts) — a freestyle pixel monospace evoking a 1980s VT220 terminal. Used for the pixel-perfect bar signage, the door sign headline (set at 56–88px), the CRT TV captions, and the chalkboard event list. Pixel-snapped. Ligatures off. Letter-spacing set to 0 so the pixel grid stays clean. Color-pumped to lean into its CRT-phosphor heritage.

**Secondary Display Font:** "Press Start 2P" (Google Fonts) — the canonical 8-bit pixel-game face. Used sparingly: for the bar's logo above the door (`OPENSOURCE.BAR` in 24px, all caps), for the jukebox button labels, and for the dartboard scoreboard numerals. Tracked-out at +2px for breathing room.

**Body / Reading Font:** "Special Elite" (Google Fonts) — a typewriter face with a slightly chipped, hand-stamped feel. Used for the longer reading copy: the booth manifesto, the beermat liner notes, the polaroid captions. Set at 18px / 1.65 line-height. Body copy is **not** pixel-snapped — it intentionally reads soft and human, in contrast to the hard pixel UI. This is the handwritten note in a pixel world.

**Accent / Graffiti Font:** "Rubik Glitch" (Google Fonts) — for the "house rules" graffiti above the urinal, the easter-egg messages on the bathroom stall door, and any error/warning state. Used at low volume, high impact.

**Color Palette — the "Closing Time" 8-color set** (chosen as a constrained 8-bit palette so the entire site can be rendered in only these 8 colors plus alpha, which both reinforces the pixel-art constraint and avoids the registry's overused warm-gradient default):

- `#1a0f1f` — **Last Call Black**: deep aubergine-near-black, used for floor, wall shadows, and the page background. Not pure black; it has a violet undertone, like the bar's interior at closing.
- `#3d2a4a` — **Smoke Plum**: midtone shadow color. Used for the sides of furniture, the booth upholstery, and the underside of the bar counter.
- `#7a3f5d` — **Pickled Beet**: midtone-warm. The bar counter's wood, the booth seats, the jukebox cabinet.
- `#e8a87c` — **Lager Glow**: warm peach-amber. The neon sign's glow, the lampshade halos, the polaroid edge tint.
- `#f4e3b1` — **Yellowed Receipts**: bone-cream, the off-white of old paper, polaroids, and the chalkboard chalk lines. Primary text-on-dark color.
- `#5dbb8e` — **Goblin Green**: the bartender's skin, the felt of the pool table, the LED on the jukebox.
- `#3fa9c9` — **CRT Cyan**: the glow inside the CRT TV, the neon "OPEN" sign, the highlight on the bartender's glass. Primary accent / link color.
- `#c94e4e` — **EXIT Red**: the EXIT sign over the back door, error states, the dot on the dartboard, the cherry on the maraschino jar. Used sparingly — under 3% of pixel area.

The palette is **dark-mode-native and warm-and-cool simultaneously** (warm reds/ambers playing against cyan/green LEDs) — explicitly NOT a gradient palette and NOT a monochrome warm palette, both of which dominate the registry.

## Imagery and Motifs

All imagery is **hand-pixeled SVG and PNG sprites at native 1× resolution**, then upscaled with integer-only scaling and `image-rendering: pixelated` so the chunky pixels are the point. No photography, no gradient meshes, no minimalist line art, no glassmorphic cards. Every piece of art is signed in the bottom-right corner of the bar in 4-pixel-tall lettering: `painted by hand at the bar — opensource.bar`.

**Signature recurring motifs:**

- **The flickering neon sign** above the door reading `OPEN SOURCE` in cyan, with the `SOURCE` letters intermittently buzzing out for 80–200ms at irregular intervals (the buzz is a CSS keyframe with stepped opacity changes, no smooth fading — pixel art doesn't smooth-fade). When `SOURCE` blinks out, the sign briefly reads just `OPEN`. This is the joke; it is also the welcome.
- **The bartender goblin** — a small (48×64px native) pixel character with green skin, a soft frown, a stained apron, and a single fanged tooth. He wipes one specific glass for the entire visit and never finishes. If you hover over him for >3 seconds he looks at you. If you hover for >7 seconds he raises one eyebrow. He is, in spirit, every burnt-out OSS maintainer.
- **The CRT TV** in the booth: a 96×72px pixel sprite of a tube TV. Inside the tube, an animated 8-frame loop: terminal text typing out `$ git push --force`, then the response `error: refusing to overwrite remote ref`, then a sad emoticon `:(`. Loops forever. Has a subtle scan-line shimmer that is an actual `<canvas>` overlay, not a background image.
- **The jukebox**: a Wurlitzer-style cabinet with bubbling colored tubes along its arch. Bubbles are individual 2×2 pixel sprites that float up at slightly randomized speeds. When a "record" (a featured project) is selected, an arm swings out and places the record on the turntable with three discrete stepped frames. The tonearm wobbles slightly at the start of playback (a 3-frame pixel jitter). A diegetic VU meter on the side bounces in time with a procedural waveform.
- **Beermat liner notes**: every project / piece of long-form text appears on a circular pixel beermat, complete with a coffee-ring stain and one bent corner. The mat is rotated by a small random angle (-7° to +7°). When you click it, the mat lifts off the bar with a 4-frame stepped animation and rotates to readable orientation.
- **Polaroids on the wall behind the bar**: contributor / sponsor portraits as pixel polaroids, taped at slightly drunken angles. Each polaroid has a hand-scrawled name on its white border in Special Elite.
- **The cat on the bar mini-map**: a 12×12px tabby cat that walks back and forth along the bottom HUD's mini-map. It pauses occasionally to sit. If the user is idle for 30+ seconds it curls up and sleeps. A tiny `Z` rises from it at intervals. It is a status indicator disguised as a creature.
- **The smoke**: throughout the scene, lazy curls of pixel-art smoke drift up from an unseen ashtray and from the lit candle on the corner table. Smoke is rendered as a tiny WebGL particle system but each particle is rounded to integer coordinates and drawn as a 3×3 or 5×5 pixel-art puff sprite.
- **Sticker-bombed laptop on the booth table**: covered in tiny pixel stickers — some are real OSS logos (penguin, octocat, gnu), some are nonsensical jokes (a sticker that just says `:wq`, a sticker of a bug, a sticker of a heart with a Git tree growing out of it). The stickers rotate which one is "newest" on each page load.
- **The graffiti above the urinal**: in the bathroom-easter-egg view, hand-stenciled phrases in Rubik Glitch — "PRs welcome", "have you tried turning it off and on", "respect the maintainer", "RTFM (with love)", and a tally of `LICENSE-VIOLATIONS-AVENGED: ████` carved into the wall.
- **The cork board near the back hallway**: a community board of thumbtacked notes — call-for-contributors, maintainer-wanted notices, "free hugs at PyCon" — each note rotated, layered, partially covering the others.

There is **no stock photography, no isometric vector iconography, no gradient mesh**, no SaaS hero illustration of a hand pointing at a graph. Every visual element is pixeled by an imagined drunken cartographer.

## Prompts for Implementation

**Build philosophy:** one room, one HTML page, one story. No router, no SPA framework, no React. Write it as a single hand-crafted `index.html` plus one CSS file plus one ~12kb vanilla JS file. The room must work without JS for reading; JS is for life.

**Core technical guidance:**

- The entire scene is composed of **layered absolutely-positioned pixel sprites** inside a `<main>` element with `width: 7200px; height: 100vh; position: relative;`. The `<body>` has `overflow-x: auto`, and the HUD bar at the bottom is `position: fixed`. CSS `image-rendering: pixelated` on every `<img>` and SVG. No anti-aliasing anywhere on the pixel art.
- **Horizontal scroll** is the primary axis. Hijack the wheel event so vertical mouse scroll translates to horizontal scroll (with a gentle ease, not 1:1 — use `scrollLeft += deltaY * 1.4`). Touch / trackpad horizontal scroll is supported natively. For keyboard accessibility, arrow keys and Page Up/Down move the camera in 600px increments.
- **Pixel-step animations only.** Every animation uses `animation-timing-function: steps(N, end)` rather than `ease` or `linear`. This is non-negotiable: smooth tweens break the pixel-art illusion. Examples: the neon flicker is `steps(2, end)` over 0.18s; the bartender's wipe is a 6-frame sprite cycling at `steps(6, end)` over 1.4s; the smoke puffs use `steps(8, end)` over 4s.
- **No parallax depth**, deliberately. The room is theatrically flat — a 2D set, not a 3D-faked one. (The frequency analysis shows parallax at 77%; we explicitly refuse it.)
- The bottom HUD's **pixel cat** is a 12×12px sprite with a 4-frame walk cycle. It updates `transform: translateX(...)` in integer-pixel steps via `requestAnimationFrame` throttled to 8fps (every 125ms). When idle, it switches to a 2-frame "sleep" cycle at 2fps.
- **CRT shimmer overlay**: a fullscreen `<canvas>` at z-index 9999, pointer-events none, drawing horizontal scanlines at 2px height every 4px with 0.06 alpha, plus a faint barrel-distortion vignette via radial-gradient. Do NOT use a heavy shader — keep it under 2ms per frame.
- **Audio is optional and silent by default.** A small "🔇 jukebox volume" toggle lives in the bottom HUD. When enabled, selecting a record on the jukebox plays a 4-second 8-bit chiptune stab generated via Web Audio (`OscillatorNode` with square waves and a short ADSR envelope) — no audio file downloads. The bell on the front door plays a single chiptune ding on first scroll if audio is enabled.
- **Storytelling beat**: program the scroll to pace itself like a visit to a bar. The first 600px of scroll should feel arrival-soft (a slight scroll-snap nudge once past the door), then free scrolling through the room, then a final scroll-snap as you reach the back-hallway exit door, which dims the room slightly via a `<canvas>` alpha overlay (the bar is closing).
- **Beermat reveal interactions**: each beermat is a `<button>` for accessibility. On click, animate it lifting off the counter via a 4-frame translateY+scale step animation, while a pixel-art "spotlight" beam appears behind it. The mat's content (project description) is rendered in Special Elite at 18px on a paper-textured beermat background. A close button is a tiny pixel "X" carved into the corner of the mat.
- **Polaroid hover-tilt**: when the cursor is near a polaroid (within 80px), it gently tilts toward the cursor in 3 stepped angle increments (-4°, 0°, +4°) — this is a discrete pixel approximation of magnetic attraction, not a smooth tilt.
- **Use `scroll-triggered` reveals sparingly** (registry has 32% — restrained use is fine). When a piece of furniture enters the right edge of the viewport, its sprite layer fades up in a single 2-frame stepped opacity (0 → 1) over 200ms. No long staggers; each item appears in one beat.
- **Refuse CTA-heavy patterns.** No "Sign up", "Get started", "Book a demo", "Join the waitlist" buttons anywhere in the room. The bar does not sell. The closest thing to a CTA is the back-hallway payphone with a sticky note reading `if you need to talk: hello@opensource.bar` — and even that is rendered as scrawled handwriting, not a button.
- **No pricing block, no stat grid, no "trusted by" logo wall, no testimonials carousel.** These are explicitly forbidden. If you feel the urge to include one, replace it with a piece of bar furniture instead.
- **The full narrative**: a visitor arrives at a quiet pixel-art bar at closing time, drifts through the room in a single horizontal pan, learns who's there and what they're working on, takes one beermat home (saves a project link), and exits through the back door into the night. The whole site should read like a short, warm comic strip you can scroll.
- **First load** should display the front door instantly (don't gate behind a loading screen). Sprites for further sections lazy-load via IntersectionObserver as the camera approaches them.
- The `<title>` is `opensource.bar — last call`. The favicon is a 16×16 pixel mug of green beer. The meta description reads: `a quiet pixel bar for tired open source maintainers. no signups, just a stool.`

## Uniqueness Notes

**Differentiators from the 350 other designs in the registry:**

1. **A single playable room as the entire site.** The frequency analysis shows 74% of registered designs default to dashboard layouts and 52% to card-grids. opensource.bar throws those out and renders a side-scrolling pixel-art tavern as one continuous left-to-right scene. No other design in the registry is a literal room you walk through; the closest analogues use parallax-sections or immersive-scroll vertically. This is a horizontal pixel diorama. The "site" is the *bar*, not a presentation of the bar.

2. **Pixel-art is the registry's least-used aesthetic (1%).** By committing to it fully — every sprite hand-pixeled, every animation `steps(N, end)`, every pixel snapped to an integer grid — opensource.bar occupies aesthetic real estate that 99% of other registry designs ignore. Combined with goblincore (2%) and a constrained 8-color palette, the visual identity is unmistakable from the first pixel.

3. **Refusal of the registry's gradient-warm-mono trinity.** 81% of registry designs use gradients, 81% use warm palettes, 81% use monospace typography. opensource.bar uses a flat 8-color discrete palette (no gradients), a cool-warm dual-temperature palette (cyan + amber against deep aubergine — not a "warm" palette in the registry's sense), and a typeface system anchored on **VT323 + Press Start 2P + Special Elite + Rubik Glitch** — none of which appear in the registry's typography frequency at meaningful levels.

4. **Pixel-stepped animation as a constraint.** While 77% of registry designs use parallax and 69% use stagger animations (both built on smooth easing curves), opensource.bar uses *only* discrete `steps()` timing functions. Nothing tweens. Every motion is chunky and frame-by-frame. This is the rarest motion language in the registry.

5. **Anti-CTA, anti-conversion narrative.** Most registry sites — explicitly or implicitly — funnel toward signup, demo-booking, or pricing. opensource.bar is structurally incapable of doing that: the bar has no door to a checkout. It is a place to *be*, not a funnel to traverse. The only "interaction" with the world outside the bar is a pixel payphone with a sticky note. This makes it the ideological inverse of the SaaS gradient-corporate-landing pattern that quietly underwrites a large fraction of the registry.

6. **Diegetic UI.** The HUD is not chrome — it's the saloon's house rules. The minimap is the bartender's mental map. The cursor-follow cat is a stand-in for a status indicator. The CRT shimmer is a fixture, not a "filter." Every piece of UI is also a piece of furniture. No registered design that I sampled (20241204.com, aei.st) commits to diegesis at this depth.

**Chosen seed / style:** `90s pixel art playful` (from `tools/design/seeds.json`) — leaned heavily into the *playful* axis but pulled emotionally toward goblincore-tinged grounded-earthy melancholy rather than the bright "playful" most pixel-art sites adopt. The result is pixel art with a hangover.

**Avoided patterns from frequency analysis (deliberately not used):**

- `hand-drawn` aesthetic (75% — overused; we use *pixel-drawn* instead, an explicit subversion).
- `gradient` palette (81% — replaced with flat 8-color discrete palette).
- `warm` palette in its registry sense (81% — replaced with cool-warm dual-temperature dark palette).
- `mono` typography in its registry sense (81% — VT323 and Press Start 2P are pixel-font kin to mono but typographically a separate family; Special Elite is a typewriter slab, deliberately not a coding monospace).
- `parallax` motion (77% — the room is intentionally flat; refused).
- `stagger` reveal animation (69% — replaced with single-beat 2-frame stepped reveals).
- `dashboard` layout (74% — replaced with diorama).
- `card-grid` layout (52% — replaced with furniture placement).
- `centered` layout (59% — replaced with horizontal panning composition).
- `friendly` tone (66% — replaced with edgy-rebellious + grounded-earthy in a 60/40 mix).
- `photography` imagery (80% — zero photographs; only hand-pixeled sprites).
- `CTA-heavy / pricing-block / stat-grid / trusted-by-logos` — all explicitly forbidden in the implementation prompts.
<!-- DESIGN STAMP
  timestamp: 2026-05-11T01:55:19
  domain: opensource.bar
  seed: seed
  aesthetic: opensource.bar is a **pixel-art dive bar at 2:47 AM** — the kind of crooked, smo...
  content_hash: cd1560c658fd
-->