# Design Language for cbdc.bar ## Aesthetics and Tone cbdc.bar is a skeuomorphic timeline museum dedicated to Central Bank Digital Currencies -- imagine walking through a wood-paneled library where each display case contains a beautifully rendered artifact of monetary history, from clay tablets to paper bills to digital tokens, all arranged along a grand chronological timeline that stretches from the Mesopotamian shekel to tomorrow's CBDC pilot programs. The skeuomorphic aesthetic commits fully to physical-world metaphors: display cases with glass reflections, leather-bound section headers, brass hardware accents, and wooden shelf textures. The muted-vintage palette reinforces the museum atmosphere -- sepia tones, aged paper, tarnished brass. Yet the content is forward-looking, creating a productive tension between the antique presentation and the cutting-edge subject matter. The tone is optimistic-bright, even within the vintage aesthetic: each era of monetary evolution is presented as a positive step forward, building toward the promise of CBDCs as the next great leap. ## Layout Motifs and Structure The layout uses a **vertical timeline** as its primary organizational spine -- a single continuous line running down the center of the page, with alternating content panels branching left and right at each chronological milestone. **Primary structure:** - **Opening viewport (100vh):** A leather-textured header panel (dark brown with embossed grain) displays the "CBDC.BAR" logotype in condensed brass-colored type, centered. Below, a subtitle in book-scholarly style introduces the timeline concept. A thin brass line begins descending from center -- the timeline's starting point. - **Timeline spine:** A 2px vertical line in tarnished brass (#9E8B6E) runs down the page center. At each milestone, a circular node (20px diameter, brass border with slight 3D bevel effect) marks the chronological point. Content panels alternate left and right of the timeline, connected to their node by a thin horizontal line. - **Content panels:** Each panel is styled as a museum display case: a cream-colored card (#F5F0E4) with a subtle glass reflection effect (a diagonal linear-gradient from white at 5% opacity to transparent), a thin brass border (1px #9E8B6E), and a slight drop shadow suggesting depth. Inside: a heading in condensed type, a bokeh-style background illustration suggesting the era, and descriptive text. - **Era transitions:** Between major eras (ancient, medieval, modern, digital), full-width dark panels with a leather texture display era titles in large condensed brass type, breaking the timeline flow for emphasis. - **Footer:** The timeline terminates in a large node that expands into a circular "future" panel -- a glassmorphic circle containing optimistic projections about CBDC development, styled in contrast to the vintage panels above with a slightly brighter palette. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Oswald" (Google Fonts) -- a condensed sans-serif with a strong vertical emphasis that suits the timeline's vertical orientation and the authoritative museum setting. Weight 500 for section headings, 600 for era titles, 700 for the logotype. Size clamp(24px, 4vw, 56px). Uppercase with letter-spacing 0.06em. Its condensed proportions read like brass nameplates on museum cases. - **Body text:** "Crimson Text" (Google Fonts) -- a classical oldstyle serif with beautiful italic forms, evoking scholarly books and museum catalog entries. Weight 400 for body, 600 for emphasis, 400 italic for dates and attributions. Size 17px, line-height 1.75. - **Timeline dates/Labels:** "Oswald" weight 300, size 14px, letter-spacing 0.1em, uppercase -- used for date markers on the timeline and panel category labels. The light weight at small size creates an elegant engraved-brass quality. **Palette (muted-vintage):** - **Museum Cream:** #F5F0E4 -- primary background for content panels - **Aged Parchment:** #EDE4D3 -- page background, slightly warmer and darker than panel cream - **Tarnished Brass:** #9E8B6E -- primary accent for timeline spine, borders, and navigational elements - **Polished Brass:** #C4A95A -- highlight accent for active states, hovered timeline nodes, and the logotype - **Library Leather:** #3E2C1C -- dark surfaces for era transition panels and the header - **Faded Sepia:** #8B7D6B -- body text color, warm and aged - **Patina Green:** #6B8E6B -- subtle tertiary accent for occasional highlights, evoking oxidized copper on old coins ## Imagery and Motifs **Core visual motifs:** - **Bokeh-background era illustrations:** Each timeline panel contains a background illustration rendered as a soft, bokeh-style image: blurred, warm-toned shapes suggesting the visual character of each era. Ancient era panels have bokeh circles in gold and amber suggesting candlelight on coins; medieval panels show blurred parchment and wax seal shapes; modern panels have soft industrial grays and greens; digital panels show cool-toned LED-like dots. These are achieved via CSS: multiple layered radial-gradients with large spread values and low opacity (8-15%). - **Museum display case styling:** Each panel has the "glass case" treatment: a diagonal linear-gradient overlay (from rgba(255,255,255,0.08) at top-left to transparent at bottom-right) that simulates glass reflection. Combined with a 1px brass border and subtle box-shadow (0 4px 12px rgba(0,0,0,0.08)), each panel feels like a physical cabinet. - **Book-scholarly decorative elements:** Small ornamental devices borrowed from typographic tradition: fleurons (❧), section marks (§), and em-dashes used as decorative separators. These appear in Tarnished Brass between text elements, adding scholarly gravitas. - **Zoom-focus timeline interaction:** When hovering over a timeline node, the connected panel scales slightly (1.03) and brightens (filter: brightness(1.05)), while other panels dim (opacity 0.7). The brass node itself enlarges (1.5x) and gains a warm glow (box-shadow: 0 0 16px rgba(196,169,90,0.4)). This zoom-focus draws attention to one era at a time. - **Leather texture for dark panels:** Era transition panels use a leather-like texture achieved via layered CSS gradients and a noise filter: a dark brown base (#3E2C1C), overlaid with a subtle repeating radial-gradient creating a grain pattern, plus SVG feTurbulence at 3% for organic variation. ## Prompts for Implementation **Full-screen narrative experience:** The site is a single-scroll journey through monetary history. The vertical timeline is the structural backbone -- implement as a pseudo-element (::after on a centered container) with position: absolute, width: 2px, background: #9E8B6E, height calculated dynamically. **Opening sequence:** - Frame 0-500ms: Library Leather header panel visible. Logotype invisible. - Frame 500-1200ms: "CBDC.BAR" logotype in brass fades in with a slight metallic shimmer effect (a thin highlight gradient that sweeps left-to-right across the text via background-position animation on a linear-gradient background-clip: text). - Frame 1200-1800ms: Subtitle fades in below (opacity 0 to 1, 400ms). - Frame 1800-2800ms: The timeline's brass line begins drawing downward from center (height animates from 0 to first-node-position over 1000ms). First timeline node appears with a scale-bounce (0 to 1.2 to 1.0). - Frame 2800+: First content panel slides in from the left (translateX: -30px to 0, opacity 0 to 1, 400ms). **Timeline node scroll behavior:** As the user scrolls, new timeline nodes and their connected panels enter view. Use IntersectionObserver on each node. When a node enters viewport: (1) it scales from 0.5 to 1.0 with bounce easing, (2) the connecting horizontal line draws from center outward (width: 0 to full, 300ms), (3) the content panel fades and slides in from its side (left or right alternating). **Zoom-focus on hover:** Attach mouseenter/mouseleave to timeline nodes. On enter: scale node (CSS transition, 200ms), add glow shadow, scale connected panel (1.03, 200ms), dim all other panels (opacity transition to 0.7, 300ms). On leave: reverse all transitions. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, modern crypto dashboard aesthetics. This is a museum exhibition, not a trading terminal. ## Uniqueness Notes **Differentiators from other designs:** 1. **Vertical timeline as primary layout architecture:** While timeline elements appear elsewhere, this is the only design built entirely around a central vertical timeline spine with alternating left/right panels. The timeline is not a component within a layout -- it IS the layout. 2. **Skeuomorphic museum display case styling:** The full-commitment glass-reflection, brass-border, leather-texture treatment for every content panel creates a coherent physical-world metaphor not shared by any other design. Each panel genuinely looks like a museum vitrine. 3. **Bokeh-style era-coded backgrounds:** Using layered CSS radial-gradients to create era-specific atmospheric bokeh (candlelight for ancient, industrial for modern, LED for digital) is a distinctive visual technique that communicates chronological context through abstract color and light. 4. **Metallic shimmer text animation for logotype:** The brass gradient sweep across the logotype text is a specific micro-animation that establishes the material vocabulary (metal, tarnish, polish) from the first moment. **Chosen seed/style:** skeuomorphic aesthetic, timeline-vertical layout, condensed typography, muted-vintage palette, zoom-focus patterns, bokeh-background imagery, book-scholarly motifs, optimistic-bright tone. **Avoided overused patterns:** Avoided centered layout (93%), card-grid (80%), photography (73%), gradient palette (96%), parallax (90%), scroll-triggered (83%), cursor-follow (76%), mono typography (90%), mysterious-moody tone (73%). Instead used timeline-vertical layout (23%), zoom-focus patterns (3% -- very underused), bokeh-background imagery (6%), condensed typography (6%), book-scholarly motifs (3%), and optimistic-bright tone (3% -- very underused).