# Design Language for opensource.bar ## Aesthetics and Tone opensource.bar is **a 2 a.m. dive bar where the bartender is a shell prompt and every cocktail is a software license**. The conceit is total: this is not "a tech site styled like a bar," it is a *bar* — a long zinc counter, a backlit shelf of bottles, a chalkboard of specials, a paper tab that grows as you scroll — and the bar just happens to serve `git`, `MIT`, `GPLv3`, and a house pour called *the Fork*. The aesthetic is **terminal command-line dev warmth, decanted into a low-lit speakeasy** — amber-on-near-black, the glow of a single Edison bulb over a monospace menu, the faint phosphor halo of an old terminal blended with the honey color of whiskey under a pendant lamp. Tone is **conversational, dry, and a little nocturnal** — the copy talks like a bartender who has heard every dependency horror story twice. Nothing shouts. The mood is `mysterious-moody` softened by `warm-inviting`: dim but not cold, intimate, the kind of place where you'd actually read the LICENSE file. No corporate gloss, no SaaS gradients, no neon cyberpunk overload — this is *terminal* aesthetic re-lit with tungsten, not RGB. Think `tmux` after midnight in a room that smells faintly of oak. ## Layout Motifs and Structure The page is **a single vertical pour** — `single-column`, `immersive-scroll`, centered narrow measure (max ~720px text column) like a bar menu you hold in one hand. No sidebar, no card-grid, no bento. Structure follows the rhythm of *ordering a drink*: - **The Counter (hero).** Full-bleed dark, a single horizontal "zinc rail" line of light spanning the viewport. Above it a blinking block cursor and the words being typed: `$ open source.bar` → resolves to the wordmark. Below the rail, a low row of three "bar stools" rendered as ASCII glyphs. - **The Backbar Shelf.** A horizontal band of "bottles" — tall thin rectangles, each a license (MIT, Apache-2.0, GPLv3, BSD, MPL, Unlicense), backlit with a soft amber gradient behind them as if a light strip runs along the shelf. They are *not* a stat grid; they're a still-life. - **Tonight's Specials (chalkboard).** A dark slate panel with hand-chalk-style lettering (a single handwritten display face) listing "drinks": *The Fork — bittersweet, served over a cold checkout*. Each item is a tiny prose poem about a real OSS concept. - **The Tab (the spine of the page).** A narrow perforated-edge "receipt" runs down the right gutter on wide screens, printing a new line every time you cross a section — `1× curiosity ............ free`, `1× pull request ........ free`. It accumulates. At the bottom it totals to `$0.00 — open bar`. - **Last Call (footer).** The Edison bulb dims via a CSS filter as you reach the end; the cursor stops blinking; one line: `// last call — the source is always open`. Spacing is generous and dark — `ma-negative-space` rendered in shadow rather than white. Section seams are thin horizontal hairlines like the grout lines of a zinc bar top, never hard color blocks. ## Typography and Palette **Fonts (Google Fonts only):** - **`JetBrains Mono`** — the bar's native tongue. All terminal lines, the receipt/tab, license labels, prompts, the wordmark itself. Used at a confident size for the prompt line, small and tight for the receipt. Ligatures on. This is the *terminal-mono* voice and it carries ~70% of the type. - **`Caveat`** — the chalkboard hand. Used *only* on the "Tonight's Specials" slate panel, oversized, slightly rotated lines (−1° to +2°) so it reads as actual chalk scrawl. The single warm, human, imperfect voice in the room. - **`Inter`** — the quiet reader. Body prose in the menu descriptions and the bartender's asides, set generously leaded so the dark page breathes. Stays out of the way; never bold, never display. **Palette — "tungsten over phosphor":** - `#0B0A08` — *back wall*: the near-black base, faintly warm (not pure #000), like an unlit room with a candle somewhere. - `#1A1610` — *zinc shadow*: panel and slate backgrounds, the chalkboard. - `#E8B65A` — *Edison amber*: the primary glow — bulb light, the prompt cursor, active license backlight, hover states. Whiskey-under-a-lamp. - `#7FB069` — *phosphor green*: a restrained nod to the terminal ancestor — used sparingly for "$" prompts, successful command echoes, the `free` price column. Never a full screen of it. - `#C9C2B4` — *paper*: receipt stock and primary body text — warm off-white, like a printed tab. - `#8A7E6A` — *dim brass*: secondary text, hairlines, the perforation marks, disabled/quiet UI. - Accent flicker: `#F3D58C` for the bulb's hottest highlight; `#5C5446` for deep recesses. High-contrast amber-on-black for headlines; everything else low-contrast and hushed. No gradients except the one soft amber wash behind the backbar shelf. ## Imagery and Motifs **No photography. No 3D renders. No stock.** Everything is built from monospace characters, thin SVG strokes, and CSS light. The bar exists entirely in glyphs. - **ASCII furniture.** Bar stools (`▟▙`-ish forms), the zinc rail (a single 1px line with a soft `box-shadow` amber glow), bottles as bordered rectangles with a faint top-light gradient, the Edison bulb as a small SVG filament drawn with `stroke` and animated `path-draw-svg` flicker. - **The blinking cursor** — a solid amber block `▮` that blinks on a slightly irregular interval (not a clean 1s — bartenders aren't metronomes) and follows the typed text. - **The receipt/tab** — a CSS-drawn perforated strip: dashed border-left, `radial-gradient` notches down the edge, monospace lines that *type in* (`typewriter-effect`) as sections enter. - **License "bottles"** — each backbar bottle has the license's SPDX id set vertically up its side, a tiny SVG "cork," and a hover state where the amber backlight `pulse`s and a one-line tasting note slides up: *"Apache-2.0 — full-bodied, patent grant on the finish."* - **Chalk dust** — a faint grain/noise overlay confined to the chalkboard panel only (`grain-overlay` at low opacity), so it reads as slate, not as a blanket texture. - **Steam/no-steam** — no particles drifting across the whole page; the only "atmosphere" is the bulb's glow radius gently breathing via `box-shadow` keyframes. Motif keywords: `candle-atmospheric` (the bulb), `vintage` (zinc bar, receipt, Edison filament), `tech` (the terminal substrate underneath it all). ## Prompts for Implementation Build opensource.bar as **one route, one HTML file, one CSS file, one small JS module** — a ~70-second scroll through a bar that serves licenses. It is a *narrative*, not a landing page. **No CTA buttons, no pricing tables, no stat grids, no testimonial rows, no signup form, no feature cards.** The only "conversion" is reading to last call. **Scene sequence (vertical, immersive-scroll):** 1. **Cold open — dark room.** Page loads near-black. A faint amber glow fades up in the top-center (the bulb warming). A `$` prompt appears; `typewriter-effect` types `open source.bar`, pauses, the cursor blinks irregularly, then the line resolves into the wordmark as the zinc rail slides in left-to-right with a soft glow wipe. ASCII stools fade in beneath. Subtitle in Inter, dim brass: *"open 24/7. the tab is always zero."* 2. **The backbar.** As it scrolls into view, an amber light strip "switches on" (gradient wash animates in), then the six license bottles `stagger` up from the shelf. Hover any bottle: backlight `pulse-attention`, tasting-note line slides up in JetBrains Mono. This is play, not data. 3. **Tonight's specials (chalkboard).** The slate panel `fade-reveal`s; Caveat lines write themselves on with a chalk-stroke `path-draw` feel (or simple opacity stagger if SVG is overkill). 3–4 "drinks," each a small witty paragraph about an OSS idea (forking, the pull request, the maintainer's burnout, the changelog). Bartender asides in Inter beneath each. 4. **House rules.** A short monospace block — the four freedoms reworded as bar rules: *"Rule 0: drink it however you want."* Rendered like a `MOTD` printed when you sit down. 5. **The tab.** On wide viewports a perforated receipt has been printing down the right gutter the whole time, one `typewriter` line per section crossed (`scroll-triggered`), every price `0.00` in phosphor green. Here it totals: `TOTAL ........ $0.00`, then stamps `// OPEN BAR` diagonally. 6. **Last call.** The bulb `box-shadow` dims over ~2s, the cursor stops blinking and goes hollow `▯`, ASCII stools fade. One final centered line in amber: `last call — the source is always open`. A single quiet link, underlined-on-hover (`underline-draw`), back to the top: `another round →`. **Interaction texture:** `cursor-follow` is *minimal* — maybe the bulb's glow center drifts a few px toward the pointer, like the light catching where you lean. `parallax` only between the bulb layer and the bar-top layer (subtle, ≤8% offset). Everything `spring`-eased and slow; nothing bounces hard — this is a tired-but-content bartender, not an energy drink. Honor `prefers-reduced-motion`: kill the flicker, the typewriter resolves instantly, the bulb is just on. **Tech notes:** semantic HTML (`
`, `
`, `
` for each special); the receipt is `position: sticky` in the gutter; bulb glow is layered `box-shadow` + `filter: blur()` keyframes; bottles are flexbox; the typewriter is a tiny vanilla-JS char loop with a randomized interval; no framework, no canvas, no WebGL. Total page weight tiny — this bar runs on a single bulb. ## Uniqueness Notes Differentiators against the frequency corpus (terminal 24%, dark-mode 12%, mono 94%, photography 98%, card-grid 90%): 1. **Terminal aesthetic re-lit in tungsten, not RGB.** The 24% of designs that go "terminal" almost all reach for phosphor-green-on-black or neon-cyberpunk. opensource.bar deliberately demotes green to a 5%-of-pixels accent and makes **Edison amber** the lead — a warm, candle-lit terminal. That chromatic inversion of the terminal trope appears, from the corpus, to be unrecognized territory. 2. **A literal bar as the organizing metaphor — a printing paper "tab" as the page spine.** Not a hero, not a bento box: a perforated receipt that accumulates `$0.00` lines as you scroll and totals to "open bar." No other site in the set uses an itemized receipt as structural navigation/progress. 3. **No photography, no card-grid, no CTA — the entire UI is glyphs + CSS light.** Against 98% photography and 90% card-grid, this is a single narrow column built from monospace characters, thin SVG strokes, and one breathing bulb-glow. Imagery score is effectively *zero raster assets*. 4. **Three-voice type with a chalk hand confined to one panel.** `Caveat` chalk lettering appears *only* on the specials slate — a single deliberate intrusion of the human/imperfect into an otherwise machine-set page, rather than handwriting smeared everywhere (handwritten 27% — but rarely this surgically scoped). 5. **Anti-energy motion design.** `spring`/`magnetic`/`cursor-follow` are present (they're 80–90% common) but explicitly *dialed down* to "tired bartender" pacing — slow, irregular cursor blink, ≤8% parallax — a counter-statement to the bouncy default. Chosen seed: `terminal command line dev` — re-themed. Effective vocabulary: *aesthetic: terminal + cottagecore-warmth blend (dim, candle-lit), layout: single-column / immersive-scroll, typography: tech-mono (JetBrains Mono) + handwritten (Caveat) + humanist (Inter), palette: warm-earthy / midnight-with-amber, patterns: typewriter-effect + scroll-triggered + path-draw-svg + pulse-attention, imagery: line-illustration / minimal (no photography), motifs: candle-atmospheric + vintage + tech, tone: conversational + mysterious-moody + warm-inviting.* Avoided per frequency analysis: glassmorphism (80%), card-grid (90%), full photography (98%), gradient-mesh, neon-electric/dopamine-neon overload, dashboard layout, hero-dominant CTA stacks.