# Design Language for cbdc.bar
## Aesthetics and Tone
cbdc.bar is **The Provincial Tea-Room of a Decommissioned Central Bank Digital Currency** — a sepia-nostalgic, sci-fi reverie set in the year 2087, in which a long-deprecated CBDC has been retired from civic circulation, rebooted as a contemplative cultural archive, and reinstalled inside the upper mezzanine of a former merchant clearing-house in a small mountain town. The conceit: somebody has reopened the marble-counter side-room — not as a bar in the modern sense, but as a *bar* in the older Italian sense (a long counter where one stands, drinks one ledger entry, and leaves) — and inside that room they have placed a single low brass terminal that still tenders the dead currency, accepts no transactions, and instead recites, in the quietest possible voice, the entire human story of the coin: who minted it, who held it, who refused it, and what they bought with it. The page is that terminal's interface — but rendered with the soft, slightly-out-of-focus warmth of an early-1970s Hasselblad still life, processed in albumen tones, then projected through a thin layer of velvet onto frosted glass.
The mood is **zen-contemplative**, not corporate-fintech. There are no exchange rates, no live tickers, no candlestick charts, no buy/sell buttons, no hero CTA, no pricing tiers, no "join the future of money" banners, no Web3 tropes, no wallet-connect modals, no token-supply infographics, no roadmap, no "as featured in" press strip. The visitor does not come here to transact; they come here to sit with a deactivated piece of monetary infrastructure and listen to it remember itself. Think the unhurried hush of a kintsugi-repair atelier crossed with the loading-screen ambience of *Outer Wilds*, narrated in the patient voice of a retired numismatist who has witnessed three currency abolitions and is no longer surprised by any of them. The future here is not chrome — it is patinated, foxed at the edges, and quietly relieved that the speculation is over.
The dominant emotional register is **the zen of the obsolete-but-still-warm**: a deprecated database that nonetheless still hums; a cultural object that has aged into instrument-quality dignity. The visitor should leave the site feeling slightly slower in their breathing, quietly skeptical of the next currency that will be pitched to them, and aware that even monetary protocols have a folk afterlife.
## Layout Motifs and Structure
The composition is an **asymmetric mezzanine ledger** — explicitly not a card-grid, not a hero-dominant landing, not a centered single-column. The viewport is treated as the brass top-plate of the bar's counter, viewed from the customer's seated angle (slightly oblique, not plan-view), and the entire document is laid down on it the way a museum docent might fan out related artifacts before a curious visitor: not aligned to a master grid, but related to each other through the lines of sight that the curator's hand has implied.
**The off-axis spine.** A single vertical reading-line — the *bar rail*, rendered as a 1px hairline of `#7a5a3a` (oxidized-brass) — runs the full height of the document, but at the **38.2% mark from the left edge** (golden-ratio minor, deliberately not 50%, deliberately not the thirds). All content negotiates with this rail: most paragraphs sit *to the right* of it (the reader's side of the counter), but periodic interjections — the artifact captions, the ledger annotations, the marginal footnotes by the imaginary numismatist — sit *to the left* of it (the bartender's side, the inside of the counter). The rail is unbroken; content does not jump over it carelessly. The asymmetry is the reading.
**Nine stations, not nine sections.** The document is divided vertically into nine *stations* — the Italian word for the discrete positions a customer might occupy along a long bar. Each station is its own composition; they do not share a column system. Station I is right-heavy, with a small left-side ledger entry. Station II inverts. Station III centers a single 380×540px sepia plate against deep negative space. Station IV is a stretched horizontal table of the coin's nine historical exchange rates against milk, salt, postage, and four other staples, set ragged-right at irregular column widths derived from the actual values. Station V is almost entirely empty — *ma*, the Japanese negative-space concept, deliberately quoted — with one 13-word epitaph floating at 41% from the top of the viewport. Stations VI–IX progressively re-densify, ending in a long ragged-edge colophon. The reader is meant to feel the rhythm of a long counter: lean, sip, pause, listen, lean again.
**No header, no nav, no footer chrome.** The document opens with the masthead `cbdc.bar / a deprecated currency, in residence` set ragged-left in 11px geometric-sans, and ends with a single line giving the imagined deprecation date and the imagined archivist's initials. There is no menu. There is no router. There is no breadcrumb. There is no "back to top" button. The only navigational affordance is the brass rail itself, which thickens to 2px and emits a 2px `#c89a5e` glow when scroll-velocity exceeds 1200px/s (the visitor is moving too fast; the rail is asking them to slow down).
**Blur as spatial grammar.** Content not currently in the viewport's central 60% is rendered at `filter: blur(1.4px) saturate(0.92)` — the **blur-focus** pattern, applied not as a hover trick but as a permanent spatial law. The reader's gaze defines the focal plane; the rest of the document recedes into the depth of field, the way distant tea things recede on a long counter. This is the only animation in the entire site that runs continuously, and it is gentle enough to be subliminal. A reduced-motion media query disables it, falling back to a static `opacity: 0.78` on the same regions.
**Asymmetric grid spec.** A 13-column tracking system (Fibonacci-adjacent, not 12) with column widths in the proportions `2 3 5 3 2 3 5 8 5 3 2 3 2`, summing to 46 units, with a 24px gutter between every pair. The whole grid is offset 21px to the right of the centered viewport line, so even the *grid itself* is asymmetric to its container. On viewports under 720px wide, the grid collapses to a single ragged-right column with the rail moved to the 21% mark — the asymmetry persists, just at a different ratio.
## Typography and Palette
**Typography — geometric-sans as the lead voice (2% in the corpus, deliberately rare).** The corpus is saturated with mono (96%), humanist (40%), and handwritten (32%); committing fully to geometric-sans is itself a positioning move. The typography is meant to evoke the European civic geometric tradition (Futura, Erbar, Avenir) without quoting it directly — the lineage of letterforms drawn with a compass and a straight edge in the late 1920s, then retrofitted in the late 1980s as the screen-friendly voice of public infrastructure.
- **`Jost`** (Google Fonts, variable wght 100–900, italic) — the lead voice. A modern open-license geometric sans in the Futura tradition with subtly humanist correction (the `a` is double-storey, the `t` has a real foot). Used for headings, station numerals (set in tabular small-caps at 13px tracking +0.18em), masthead, and station titles. Headings are set at 38px / 1.18 line-height / -0.012em letterspacing in weight 300 — light, never bold — with the deliberate decision that *no heading on the entire site will exceed 38px*. There is no oversized display type. The content does not shout.
- **`Sometype Mono`** (Google Fonts, variable wght 400–700) — the ledger voice. Used exclusively for the off-rail marginalia (timestamps, denominations, archivist initials, footnote anchors). Set at 11.5px / 1.55 line-height, tracking +0.04em. This is the only mono on the site, and it is rationed — there is more of it than there should be in a magazine, less of it than there would be in a developer dashboard.
- **`Cormorant Garamond`** (Google Fonts, italic, wght 300) — the *single* historical inflection. Used only for one element per station: the imagined direct-quotation from a historical figure (a baker in 1894, a customs clerk in 1923, an unnamed CBDC engineer in 2061) commenting on the coin. Set at 19px italic, ragged-left, indented one full grid-column off the rail. The contrast between the geometric body and the Cormorant italic is the typographic equivalent of finding a handwritten note tucked into a printed manual.
Body copy is 16.5px / 1.72 line-height / Jost weight 400, set ragged-right (never justified — justification implies certainty, and this site is uncertain on principle). Maximum measure is 62 characters, enforced by max-width on the prose containers. Drop caps are not used; the first word of each station is set in Jost weight 600 small-caps at +0.20em tracking. Paragraph spacing is 1em — tight, almost European-academic.
**Palette — sepia-nostalgic (4% in the corpus, paired with a single sci-fi accent).** The decision: take the sepia palette of an albumen print circa 1875 — the warm, slightly-foxed brown spectrum that an old photograph turns into when its silver halides oxidize — and contaminate it, exactly once, with a single cool-cyan accent that does not belong to the year 1875. That cyan is the only sci-fi tell. Everything else is patinated paper.
- **`#f4ead8`** — *paper field*. The base background. The color of a museum mat board after thirty years next to a window, photographed with daylight-balanced film.
- **`#e8d9b8`** — *secondary field*. Used for the off-rail marginalia panels and the station-V epitaph plate. Slightly more yellowed.
- **`#7a5a3a`** — *oxidized brass*. The rail color, the station-numeral color, the heading color. The exact tone of unpolished brass that has been touched by ten thousand fingers.
- **`#3d2b1f`** — *deep cocoa*. Body-text color. Never pure black — pure black on cream reads as printed; cocoa on cream reads as *aged*.
- **`#c89a5e`** — *honeyed amber*. Single warm accent. Used for the rail glow (when scroll is too fast), for the underline of the eight links that exist on the entire site, and for the small dot indicator that marks the current station.
- **`#8b3a2e`** — *deprecated red*. Used exactly once per page-load: the small "DEPRECATED" stamp diagonally across the masthead's coin-glyph. Never reused.
- **`#3a6e7a`** — *the cyan trespasser*. The only cool color on the site. Used exclusively for the sci-fi inflection: the eight-character timestamp at the bottom of each station that reads `2087.05.09` in Sometype Mono, and a single 1px horizontal rule under each station numeral. This color is not warm. It does not belong. That is the point: a page from 2087 has been trying to write itself into the album, and the album mostly resists.
The contrast ratio between cocoa-on-cream is 9.4:1; between brass-on-cream is 4.6:1. Color is never the sole carrier of meaning — every accent is also a typographic or positional one.
## Imagery and Motifs
**Imagery — mixed-media (3% in the corpus), executed as a triple-layer stack: archival photograph + technical line drawing + scan-line.** Photography (98% of the corpus) is rejected as the primary mode; instead, every plate on the site is a deliberately composed *triple exposure*:
1. **Layer A — sepia-toned still life photograph (rendered as SVG-traced + duotone-mapped raster)**. Each plate depicts a single physical artifact related to the deprecated CBDC: a brass token with a serial number, a paper receipt for a 0.034-CBDC purchase of milk, the corner of an obsolete clearing-house ledger, a hand-coiled wire from a 2061 hardware wallet, a tea-cup ring on a printout. Photographed in the style of Irving Penn's "Still Life with Watermelon" — directional north light, deep tonal range, no fill, no rim. Then traced into vector and re-rendered with a duotone mapping of `#3d2b1f` shadows to `#e8d9b8` highlights. There is no full-color photography anywhere on the site. There is, in fact, no raster anywhere on the site — the duotone is a CSS `filter: sepia(1) contrast(1.05) saturate(0.6)` applied to traced SVG, so every plate scales infinitely and weighs under 18KB.
2. **Layer B — schematic line drawing in cyan (the trespasser color)**. Overlaid on each photograph, hand-drawn in 0.75px strokes of `#3a6e7a`, is the technical schematic of the same artifact: the brass token's hashing algorithm as a state diagram, the receipt's signature chain as a cryptographic flow, the hardware wallet's pinout. The schematics are wrong — deliberately, gently wrong, in the way that a 1960s *Scientific American* technical illustration would be wrong about how a CPU worked. They evoke comprehension without delivering it. This is the **sci-fi** layer: the page from the future has been attempting to annotate the photograph from the past, and the annotation is partial, faded, and slightly off-register by 2px diagonally. The misalignment is the design, not a bug.
3. **Layer C — horizontal scan-line, 6% opacity, 2px pitch**. A near-imperceptible CRT scan-line (rendered as a `repeating-linear-gradient` in a fixed-position pseudo-element on the plate) lies over both the photograph and the schematic. It is the membrane between 1875 and 2087. It is the velvet through which both eras are being projected. On reduced-motion preferences, this layer is removed; on default, it drifts vertically at 3px every 4 seconds — slow enough to be beneath conscious notice, fast enough to make the plate feel *not still*.
There are exactly **eleven plates** on the site, hand-counted, never templated. Each plate is captioned in Sometype Mono with a six-character archive-id (e.g. `ART-027`), a date in `YYYY.MM` format, and a one-line provenance note in Jost italic. Captions sit on the bartender's-side of the rail, in the secondary field color.
**Motifs — cultural (7% in the corpus), specifically the iconography of small-town civic monetary culture.** The site is decorated, sparingly, with motifs drawn from the visual culture of *people's relationships to currency in places that were never the financial center*. Specifically: the marginalia of provincial European bank-notes from 1880–1940 (the small allegorical figures, the agricultural cartouches, the engraved-curl border ornaments, the watermark roses); Korean *gyebol* ledger calligraphy from the early-20th-century rural cooperative movement; Japanese *senbazuru* paper-crane folding diagrams as a metaphor for transaction unwinding; and Italian *bar-tabac* license plaques. These motifs appear as 36×36px hairline-vector inserts between stations — never larger, never colored beyond the brass tone — at a density of one motif per station, never two. The cultural motifs are a quiet refusal of the dominant Web3 visual canon of holographic chrome, glowing tokens, geometric coins-in-orbit, and metaverse-cyber-glyphs. The implication is: this currency was always going to be cultural infrastructure first and financial infrastructure second.
**A single piece of decorative chrome.** In the masthead, exactly one element references the deprecated CBDC's "official" iconography: a 28px circular glyph composed of a 12-pointed star (the imagined CBDC's mint-mark) overlaid with a diagonal `#8b3a2e` **DEPRECATED** stamp at -22deg rotation. That stamp does not appear anywhere else.
## Prompts for Implementation
**Storytelling spine (HTML structure).**
The site is a **single long vertically-scrolling document** — nine stations, plus masthead, plus colophon — totaling roughly 4,200 hand-authored words. The reader is expected to read top-to-bottom in approximately seven minutes. There is no traditional navigation, no router, no anchor-jump menu, no progress bar, no "back to top." The brass rail is the only navigational affordance, and it does nothing except *thicken* when scroll is too fast.
```
[cbdc.bar / a deprecated currency, in residence][Station I — The Coin That Was Never Spent][Station II — Three Receipts for Milk][Station III — A Plate, Alone][Station IV — Exchange Tables, 2061–2087][Station V — Ma (negative space, one epitaph)][Station VI — The Engineer's Last Note][Station VII — Folk Afterlives][Station VIII — How To Decommission a Currency][Station IX — Closing the Counter]
```
Each station carries: one prose body of 280–520 words; one or two of the eleven plates; zero or one Cormorant-italic historical quotation; one cyan timestamp; one cultural motif insert; one Sometype Mono marginal annotation on the bartender's-side of the rail. **No station may contain a CTA, a pricing block, a stat-grid, a logo cluster, a testimonial, or a "join us" element. The page is a document, not a storefront.**
**Content principles.**
- All prose is real, hand-authored, and specific. No filler text. No "your CBDC content here." If the section says "Three Receipts for Milk," the receipts are written out: dated, signed, denominated, ringed by tea-cup stains described in the caption.
- The site is set in the future (the deprecation has happened in 2087) but written in the past tense ("the coin was minted"; "the rail was polished") — so even the future is being remembered. This grammatical choice is the entire tone in eight words.
- No marketing language. No "revolutionizing." No "the future of." No "trustless." No "decentralized" outside of one quoted historical document. No "experience" used as a verb.
- The numismatist-narrator is named once in the colophon and never again. No about page.
**Animation budget — strict.**
Three motion behaviors only:
1. **Continuous: blur-focus depth-of-field**. As described above. Implemented via a single `IntersectionObserver` that tracks each station's distance from viewport-center and applies `filter: blur(...)` proportionally. CSS-only fallback uses `opacity` keyframes triggered by scroll position. Disabled under `prefers-reduced-motion`.
2. **Continuous: scan-line drift on plates**. A 4-second linear `transform: translateY(0 → 2px)` loop on the plate's pseudo-element. Total motion: 2 pixels. Disabled under reduced-motion.
3. **Triggered: rail thickens on fast-scroll**. When `scroll-velocity > 1200px/s` for more than 250ms, the brass rail animates from 1px to 2px width and emits a 2px honeyed-amber `box-shadow`, with a 600ms ease-out return. This is the only feedback the site ever gives. It is asking the visitor to slow down.
No parallax. No cursor-follow. No magnetic hover. No spring physics. No counter-animate. No typewriter effect. No card-flip. No stagger reveal. The dominant motion patterns of the corpus (parallax 94%, stagger 76%, spring 75%, cursor-follow 73%) are all explicitly absent. The site moves the way a long counter moves: it does not.
**Implementation stack — minimum.**
One `index.html`, one `style.css`, one `main.js` (under 4KB), no framework, no router, no service worker, no build step required. All fonts loaded from Google Fonts (`Jost`, `Sometype+Mono`, `Cormorant+Garamond:ital,wght@1,300`). All imagery is inline SVG. Total uncompressed bundle target: under 90KB excluding fonts. The site loads, renders, and is fully readable on a 56k modem in 2003.
**The reader's experience, narrated.**
The visitor arrives. The page is sepia. There is a brass line down the screen. The header says, quietly, that something has been deprecated. They scroll. The rail does not move. A photograph of a brass token appears, slightly blurred at the edges, with a cyan schematic over it that is clearly *wrong*. They read about who minted the coin. They scroll past a station that is almost empty — a single sentence at 41% from the top of the screen. They sit with it. They keep going. By Station VII they have stopped looking for the buy button. By Station IX they understand that the bar is closing and they have been given, for free and without obligation, the entire memory of an obsolete currency. They leave the tab open for a long time. They do not bookmark it. They tell one person about it, in person.
## Uniqueness Notes
This design's deliberate departures from the 100 designs already in the corpus, and from the typical CBDC / fintech / Web3 visual canon:
1. **Sci-fi at 9% in the corpus, executed as soft sepia-future, not chrome-future.** Every prior sci-fi design in the wild (this corpus included) defaults to neon, holographic chrome, dark-mode HUD, glowing-circuit motifs, and futuristic-cutting-edge tone. cbdc.bar inverts the entire genre: the future here is *patinated*, the year 2087 is rendered as a faded album, the only sci-fi tells are a single cyan accent (`#3a6e7a`) and the deliberately-misregistered schematic overlays. This is what *Tarkovsky's Solaris* taught about the future — that it would feel old. The corpus has no other design doing this.
2. **Geometric-sans typography at 2% — paired with sepia-nostalgic palette at 4% — for a combined position no other design occupies.** The corpus is saturated with mono (96%) and humanist (40%); committing to Jost as the lead voice while the palette stays in 1875 is a specific cross-axis combination that produces a "1928 Bauhaus poster reprinted on aged ledger paper" effect that nothing else in the registry approaches. The Cormorant italic single-quote-per-station detail is a third typographic axis that nobody else uses.
3. **CBDC subject matter, treated culturally not financially.** Every CBDC, fintech, and Web3 site on the visible internet treats the subject as forward-looking infrastructure, with charts, tickers, wallet-connect, and exchange functionality. cbdc.bar treats the subject as *cultural-archaeological residue* — a deprecated artifact in a small-town reading-room. There is no live data, no exchange rate, no token-supply diagram, no roadmap, no team page. The subject is approached the way a historian approaches a 19th-century provincial bank-note: with patience, specificity, and no urgency to sell anything.
4. **Asymmetric layout (52% in the corpus) used at the *grid level*, not just the section level, with the rail at golden-ratio 38.2%.** Most asymmetric designs in the corpus break symmetry within an otherwise-symmetric container. cbdc.bar has an asymmetric grid (column proportions `2 3 5 3 2 3 5 8 5 3 2 3 2`), the grid itself is offset 21px from the centerline, and the rail sits at a deliberately non-thirds, non-quarters, non-half ratio. The asymmetry is structural, not decorative.
5. **Blur-focus (8% in the corpus) applied as a permanent spatial law, not a hover trick.** The corpus uses blur-focus almost exclusively as a hover state. cbdc.bar uses it as the page's continuous depth-of-field — content outside the focal viewport zone is permanently soft. This is how an old camera sees the world; the visitor's gaze becomes the lens. No other design in the corpus does this.
6. **Mixed-media imagery (3% in the corpus), specifically as a stacked archival-photo + cyan-schematic + scan-line triptych.** Mixed-media in the existing registry tends toward collage-of-fragments. cbdc.bar's mixed-media is a deliberately-aligned (and deliberately-misaligned) triple-layer composition — photograph, technical schematic, CRT membrane — that no other design instantiates this way.
7. **Cultural motifs (7% in the corpus), specifically provincial-civic-monetary iconography rather than the more common East-Asian-broad-strokes or Mediterranean-tile usage.** The motifs here are not generic "world culture" — they are specifically the marginal ornaments of provincial 1880–1940 bank-notes, *gyebol* ledger calligraphy, *senbazuru* unwinding diagrams, and Italian bar-tabac plaques. The cultural specificity is the position.
8. **Zen-contemplative tone (6% in the corpus) applied to a financial-infrastructure subject.** Zen-contemplative is almost exclusively used in the corpus for portfolio sites, spa sites, gallery sites, and meditation apps. Applying it to a CBDC subject — a topic that the broader internet only discusses in tones of urgency, speculation, alarm, or hype — is a category-crossing position. The corpus has no other zen-contemplative fintech-subject design.
9. **Active refusals.** No CTA. No pricing. No stats grid. No testimonials. No logo cluster. No newsletter strip. No "as featured in." No live chart. No wallet-connect. No router. No menu. No footer chrome. No hover-magnetic. No parallax. No cursor-follow. No spring. No stagger. No counter-animate. No oversized display type. No raster imagery. No full-color photography. No pure black, no pure white. The site is defined as much by what it refuses as by what it contains, and the refusals are the position.
10. **Chosen seed (per assignment):** `aesthetic: sci-fi, layout: asymmetric, typography: geometric-sans, palette: sepia-nostalgic, patterns: blur-focus, imagery: mixed-media, motifs: cultural, tone: zen-contemplative`. Every axis is preserved; none is substituted. The seed's most underused dimensions in the corpus — geometric-sans (2%), mixed-media (3%), sepia-nostalgic (4%), zen-contemplative (6%), cultural (7%), blur-focus (8%), sci-fi (9%) — are all simultaneously honored, producing a position no other design in the registry occupies.
11. **Avoided patterns from frequency analysis:** hand-drawn aesthetic (95% — replaced by traced-vector duotone), photography imagery (98% — replaced by mixed-media SVG triptych), gradient palette (96% — replaced by flat sepia tones), warm palette generic (95% — kept warm but specifically sepia-archival), parallax (94% — entirely absent), stagger (76% — entirely absent), spring physics (75% — entirely absent), cursor-follow (73% — entirely absent), magnetic hover (62% — entirely absent), card-grid layout (72% — replaced by nine asymmetric stations), full-bleed (89% — refused; everything respects the brass rail), centered (80% — refused; everything is off-axis), mono typography (96% — used only in marginalia, never in body), and humanist (40% — replaced by geometric Jost). The site's rarity comes not from one differentiator but from the cumulative effect of declining the dominant patterns at every axis simultaneously.