# Design Language for cbdc.bar ## Aesthetics and Tone cbdc.bar is imagined as **The Treasury Speakeasy** -- a fictional clandestine lounge where central bankers, economists, and cypherpunks meet to drink programmable money. The domain's three letters (Central Bank Digital Currency) meet the "bar" TLD, so we lean into that pun with absolute conviction: this is a velvet-roped underground establishment where every cocktail is a monetary policy, every patron is a ledger entry, and the menu updates in real time as interest rates shift. The aesthetic is **art-deco ornate luxury** cross-wired with a subtle **terminal-ledger** undercurrent -- gilded brass fan-motifs and Chrysler-spire geometry rendered alongside monospaced cursor blinks and flickering monetary data. Think Jay Gatsby's ballroom if Gatsby were a Bank for International Settlements governor; think the lobby of the Federal Reserve re-imagined by the set designers of "The Grand Budapest Hotel," with every window opening onto a different country's yield curve. The tone is **opulent-grand** layered with **mysterious-moody**: confident, knowing, slightly conspiratorial. Copy addresses the visitor as if they have already been admitted -- no introductions, no pitches, no "learn more" -- only menu items, house rules, and the quiet assumption that they know why they are here. We avoid fintech tropes (blue gradients, hero dashboards, coin icons) completely. Instead we build a world where money is theatre, where the bar itself is the monetary authority, and where every interaction feels like ordering a drink from a very old, very patient bartender who has seen every currency die. ## Layout Motifs and Structure The site is a **single vertical descent** -- a **ma-negative-space** composition with **layered-depth** -- modelled on walking down the marble staircase of a 1930s hotel lobby into a basement lounge. We reject card-grids, bento-boxes, and dashboard layouts entirely. Instead the structure mimics a theatrical program folded into a cocktail menu. Six acts, each a full-bleed **100vh** chapter, separated by ornamental art-deco dividers (sunburst fans, stepped lozenges, chevron rails) that draw themselves as the scroll advances. **Act I -- The Vestibule.** A near-black viewport with a single brass doorknob centred in a pool of amber light. Above it, in oversized serif display type: "cbdc.bar". Below, a blinking monospaced line: `// est. 2026 // open when rates are cut //`. The doorknob rotates slowly on mouse proximity; clicking it unlocks the rest of the page (scroll-locked until then). A faint orchestral drone plays only if the visitor enables sound. **Act II -- The Ledger-Menu.** The scroll descends into a two-column asymmetric spread: on the left, a hand-lettered cocktail menu styled after Manhattan hotel bars of 1932; on the right, the same items rendered as JSON-ledger entries with timestamps, transaction hashes, and fee schedules. The same "drink" appears twice -- once as romance, once as settlement. No grid aligns the two columns; they meet and diverge like a conversation. **Act III -- The House Rules.** A central narrow column (max-width 46ch) of typeset rules in warm cream on oxblood, interrupted periodically by full-bleed art-deco panels bearing single-word verdicts: PRIVACY, FINALITY, DISCRETION. Each verdict fades up from a stepped pyramid motif that assembles from 8 radial segments. **Act IV -- The Back Bar.** A horizontal frieze of 12 "bottle silhouettes," each a different CBDC archetype (Wholesale, Retail, Intermediated, Synthetic, Programmable, Offline, Cross-border, Tokenised Deposit, Stablecoin-adjacent, Regional, Wholesale-Only, Experimental). They are not cards -- they are apothecary bottles on a brass shelf. Hovering tilts a bottle forward; clicking pours its contents (a short paragraph) into a coupe-glass panel that materialises at the bottom of the frame. **Act V -- The Private Room.** A deliberately sparse full-viewport moment: a single velvet armchair silhouette in the lower-right, a ceiling fan motif rotating slowly in CSS, and one pull-quote set in enormous serif italics floating in negative space. This is the site's moment of silence. **Act VI -- The Closing Time.** A footer chapter rendered as a last-call chalkboard: opening hours listed as Federal Reserve meeting dates, address listed as "SWIFT BIC // undisclosed," and a final line: `// last call is when the printer stops //`. The brass doorknob reappears, now inverted, as the exit. ## Typography and Palette **Typography** (all Google Fonts, verified): - **Display / Act Titles:** "Cormorant Garamond" -- a contemporary revival with exaggerated high-contrast thicks-and-thins that read as both 1930s jewellery advertisement and serious institutional authority. Used at `clamp(3rem, 10vw, 11rem)` for act openings, italic weight 300 for pull-quotes, regular weight 600 for titles. Tracking tightened to `-0.02em` on display sizes. - **Ornamental / Brass Labels:** "Poiret One" -- a geometric art-deco display face with elegant thin strokes, used sparingly for section dividers, bottle labels, and the initial dropcaps on the House Rules. Always uppercase, tracked open to `0.25em`. - **Body / Menu Copy:** "Cormorant Infant" -- a softer, slightly calligraphic companion to the display face, weight 400 for menu romance-copy and long-form rules. Line-height 1.55, measure capped at 68ch. - **Ledger / Terminal Counterpoint:** "JetBrains Mono" -- used exclusively for the ledger-entry column, the blinking cursor lines, transaction hashes, and footer metadata. Weight 400, slightly reduced font-size so the ledger feels like a quiet accountant beside the loud bartender. This mono voice is the site's second, colder personality. **Palette** (8 colors): - `#0B0806` -- Vestibule black (the outside-the-door backdrop; slightly warm, not pure black). - `#1A1411` -- Lounge oxblood-black (interior walls; the dominant body background after Act I). - `#2E1A14` -- Deep oxblood (House Rules panel, velvet armchair). - `#C9A24A` -- Old brass (doorknob, fan motifs, dividers, primary accent). - `#E8C87A` -- Champagne brass highlight (edge-lighting on ornaments, hover states). - `#F2E4C7` -- Cream vellum (primary text on dark surfaces; menu paper). - `#7A5C3E` -- Aged leather brown (shadows, secondary strokes, ornamental fills). - `#9C1B2B` -- Velvet-curtain crimson (used only for the single House Rules panel and for the ledger's "DEBIT" lines). Gradients are avoided almost entirely; when used, they are radial amber pools (C9A24A → 0B0806) simulating pooled lamplight, never linear tech-gradients. ## Imagery and Motifs **Art-Deco Geometry as Structural Furniture.** The recurring ornamental vocabulary is drawn from 1925-1935 sources: stepped zigguratic pyramids (Chrysler Building spire), sunburst fans (radio-era advertisements), chevron rails, lozenge chains, and scalloped arches. These are rendered as inline SVG (never bitmap) so they can be animated stroke-by-stroke via `stroke-dasharray` draw-on as each act enters the viewport. Each act opens with a unique ornament drawing itself in brass stroke across 1.6 seconds. **The Brass Doorknob.** A signature single object rendered as layered SVG with radial brass shading and a subtle specular highlight that tracks the cursor. It appears in Act I (entry) and Act VI (exit, mirrored). Its rotation is hand-tuned spring physics -- slow, weighty, as if turning a real brass mechanism. It is the site's navigation: there is no menu bar. **The Ledger Ticker.** A slim monospaced strip runs along the right-hand edge of the viewport from Act II onward, displaying fabricated transaction lines that scroll vertically in slow 12-second loops: `0x4a…c9f1 MINT 2.4 CBDC @ 03:14:07`. Each line dims as it leaves the viewport. This is the site's only real "live" element -- a reminder that money is always in motion, even in a bar. **Bottle Silhouettes.** Twelve hand-drawn SVG apothecary-bottle shapes, each distinct: tall slender, squat round, fluted, hexagonal, crystal-faceted, etc. Their labels are tiny Poiret One type on rectangular brass plaques. They stand on an SVG brass shelf with a subtle engraved-line texture. **Smoke and Lamplight.** Subtle CSS-only ambient effects: a slow-drifting radial gradient "lamp pool" in the hero, and a barely-perceptible animated noise layer (SVG feTurbulence at low opacity) simulating cigar smoke drifting across dark panels. Never more than 6% opacity; the room is smoky but tasteful. **No photographs. No stock icons. No coin imagery.** If a currency symbol appears anywhere, it is a bespoke glyph set in Cormorant Garamond at display size, nothing more. The site explicitly rejects every visual cliché of fintech (blue, gradients, dashboards, coins, charts, abstract meshes). ## Prompts for Implementation **Story-first, not component-first.** Build the six acts as discrete full-viewport sections stitched with `scroll-snap-type: y proximity` (proximity, not mandatory -- we want guided flow without forcing). The site is a walk through a room, not a product page. Resist any instinct to add a call-to-action, pricing block, testimonial grid, feature comparison, stat counter, or newsletter signup. There are no such elements here. The bar does not advertise. **The Vestibule Lock.** Act I must prevent scroll until the doorknob is clicked. Use `overflow: hidden` on `` with a JS toggle that, on doorknob click, removes the lock and smoothly scrolls 100vh downward. Before the click, only the doorknob and the blinking mono line are interactive. After the click, the entire document is available. **Ornament Draw-On.** Every art-deco divider is inline SVG with `stroke-dasharray` / `stroke-dashoffset` set via IntersectionObserver. When a divider enters the viewport, its brass strokes draw across 1.4-1.8s with `ease-out` timing, slightly staggered between sub-paths. Once drawn, ornaments remain static -- no looping. **Cursor as Lamplight.** A large (420px) soft radial `--cursor-x`/`--cursor-y` custom-property glow follows the cursor across dark sections, rendered via a `background: radial-gradient(...)` pseudo-element. Opacity 0.08. On Act V (The Private Room) the glow intensifies slightly to feel like a lone reading lamp. **Bottle Interaction.** Each bottle is an SVG with three grouped layers (glass, label, liquid). On hover, the whole bottle tilts `rotate(-4deg)` with a 280ms spring. On click, the liquid layer animates a `clip-path` "pour" downward into a coupe-glass panel that slides up from `translateY(60%)` to `0` with `cubic-bezier(0.22, 1, 0.36, 1)`. Only one coupe can be filled at a time -- ordering a second drink empties the first. This enforces the bar-metaphor in interaction, not just in visuals. **Ledger Ticker.** Generate 40-60 fake ledger lines at page load using deterministic pseudo-random hashes (seeded so the list is stable across reloads within a session). Animate the entire ticker column with a slow `translateY` loop; mask the top and bottom 20% with a linear-gradient fade-to-transparent so lines appear to emerge from and dissolve into shadow. **Kinetic Typography in Act V.** The pull-quote in The Private Room animates word-by-word using CSS `@keyframes` and staggered `animation-delay`. Each word fades up from `opacity: 0; translateY(12px); filter: blur(6px)` over 700ms. The italic serif at display size feels like a thought forming in the room's silence. **Sound is optional and silent by default.** A tiny brass-bell toggle in the bottom-left corner controls an ambient audio bed (low orchestral drone + occasional distant glass-clink) streamed from a single 90-second looping OGG. No autoplay. No modal asking for permission. Just the bell, off by default. **Favour SVG and CSS over raster.** Every ornament, bottle, doorknob, and divider is vector. The only raster asset permitted is a subtle paper-grain texture tile (512x512, <40KB) used as a `background-image` on the menu column in Act II. Everything else is code. **Mobile: collapse without apology.** On narrow viewports the two-column Ledger-Menu stacks (menu first, ledger below), the bottle frieze becomes a horizontal-scroll shelf, and Act V retains its silence. The doorknob lock remains. Do not introduce a hamburger menu; there is nothing to navigate to. **Copy voice.** Write every string as if it were overheard in a very old bar: understated, lightly archaic, confident. Good: "House rules are published quarterly, like rates." Bad: "Learn more about our approach to compliance." The site never asks the visitor for anything -- no email, no signup, no contact form. It is a room they walked into. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Room-as-metaphor, not page-as-document.** Most designs in the portfolio -- including the other CBDC sibling domains -- treat the browser as a canvas or a dashboard. cbdc.bar treats it as an interior space. The visitor doesn't "browse"; they descend a staircase, order a drink, sit in a chair, and leave through the same door they entered. This spatial-narrative framing is not present in any of the 50+ existing designs sampled. 2. **Rejection of the fintech visual canon.** 90% of existing designs use the "corporate" aesthetic and 98% use gradients. cbdc.bar deliberately abandons both. No blue, no gradient-mesh, no glassmorphism, no dashboard, no chart, no coin icon, no hero CTA. The palette is oxblood and brass; the structure is theatrical acts; the imagery is art-deco ornament. A visitor arriving from a Stripe or Circle website should feel they have walked into a different century. 3. **Doorknob-locked entry.** No other design in the portfolio gates its first scroll on a diegetic interaction (click the knob, turn the lock). This converts the landing page from a passive reveal into an active threshold-crossing, echoing the speakeasy metaphor at the interaction layer. 4. **The dual-voice Ledger-Menu.** The Act II spread pairs romantic cocktail-menu prose with cold JSON ledger entries for the same item. This typographic duet -- Cormorant Infant versus JetBrains Mono -- dramatises CBDC's central tension (human money vs. machine money) in the typography itself, not in copy or explanation. 5. **Art-deco as structural vocabulary (seed: "art-deco ornate luxury").** Frequency analysis shows art-deco at effectively 0% adoption across the portfolio's aesthetic category. Sunbursts, stepped pyramids, and chevron rails appear nowhere else. This design claims that territory wholesale: every divider, every ornament, every frame border is drawn from a 1925-1935 vocabulary. 6. **No CTAs, no forms, no growth funnel.** Pricing blocks, stat-grids, testimonial carousels, feature comparison tables, newsletter signups, and contact forms are explicitly absent. The site refuses to transact with the visitor. This radical subtraction aligns with the "opulent-grand + mysterious-moody" tone and distinguishes it from the 90% corporate-aesthetic baseline. **Avoided patterns from frequency analysis:** - Gradients (98% used) -- avoided except for a single radial amber lamp-pool. - Card-grid layout (94% used) -- replaced with theatrical full-bleed acts. - Scroll-triggered reveal (94% used) -- used but reframed as ornament-draw, not stagger-in-cards. - Mono-only typography (90% used) -- mono is present but subordinate to Cormorant serif. - Corporate aesthetic (90% used) -- actively rejected. - Centered layout (88% used) -- replaced with asymmetric two-column spreads and negative-space singular compositions. - Photography (94% used) -- entirely absent; all imagery is SVG vector. **Chosen seed / style:** `art-deco ornate luxury` (from seeds.json) -- an aesthetic at effectively 0% frequency in the existing portfolio, chosen for its deep resonance with both "central bank" (institutional gravity, marble lobbies, engraved currency) and "bar" (Prohibition-era speakeasies, hotel lounges, velvet interiors). The rare cross-wiring with a subordinate "terminal-ledger" monospaced voice makes this design genuinely unlike any other in the collection.