# Design Language for cbdc.bar ## Aesthetics and Tone The visual identity of cbdc.bar draws from the intersection of corrupted archival film footage and the quiet dignity of central banking institutions in decline -- imagine a Federal Reserve press conference recorded on deteriorating magnetic tape, played back on a monitor with a failing cathode ray tube. The aesthetic is **glitch** rendered not as chaotic energy but as **calm entropy**: data decaying gracefully, numbers dissolving into static with the unhurried inevitability of autumn leaves. The mood is that of a museum exhibit about the future of money, curated fifty years after the fact -- sepia-toned display cases holding holographic coins that flicker and corrupt, accompanied by wall text printed in severe display type on aged linen paper. The tone is **calm-serene**, paradoxically achieved through visual corruption. Glitch artifacts here are not aggressive or anxious; they are the visual equivalent of a whisper -- gentle scan-line drift, slow RGB channel separation, soft pixel displacement that feels like watching sand shift in an hourglass. The overall sensation should be contemplative: a visitor standing alone in a dim gallery, studying a screen that shows currency symbols dissolving into beautiful noise. There is no urgency. The decay is accepted, even welcomed, as part of the natural order. Inspiration references: William Basinski's "Disintegration Loops" album artwork, the amber-and-cream interfaces of 1970s banking terminals, Gerhard Richter's photo-paintings where photographic clarity melts into painterly abstraction, the aged patina of paper currency held to light revealing watermarks, and the meditative slow-cinema of Andrei Tarkovsky where time itself becomes visible through the gradual deterioration of physical spaces. ## Layout Motifs and Structure The layout is **full-bleed** -- every section extends to the absolute viewport edge with no container margins, no safe-area padding. The browser window itself becomes the frame of a deteriorating film strip, and content presses against it as if trying to escape the boundaries of its own medium. There are no visible gutters, no breathing room at the edges -- the visual field is total and immersive. **Structural Architecture:** The page is divided into 5-7 full-viewport sections, each representing a "frame" in a degrading film sequence. These frames are not scrollable cards or contained blocks; they are environments that the user moves through vertically. Each frame occupies exactly 100vh and 100vw, creating a series of complete visual moments. **Frame Composition System:** Within each full-bleed frame, content is positioned using a custom offset grid built on CSS Grid with `grid-template-columns: repeat(24, 1fr)` and `grid-template-rows: repeat(16, 1fr)`. This 24x16 micro-grid (evoking the aspect ratio of analogue film) allows content placement at non-standard positions -- text blocks starting at column 3, row 7; icon clusters spanning columns 15-22, rows 2-9. Nothing is centered by default. Elements occupy deliberate coordinates within the film-frame grid, creating compositions that feel cinematically framed rather than web-designed. **The Corruption Layer:** Overlaying the content grid is a persistent corruption layer -- a fixed-position div spanning the full viewport that renders semi-transparent glitch effects: horizontal scan lines at 2px intervals with alternating opacity (0.03 and 0.06), occasional horizontal displacement bands (translate 2-8px left or right) applied via CSS animation to pseudo-elements, and a subtle RGB fringe effect achieved through layered box-shadows on the corruption container. This layer never obscures content to the point of illegibility; it is atmospheric, like looking through old glass. **Frame Transitions:** Between frames, a brief "tape splice" moment: as one frame scrolls away, a 40px horizontal band of pure noise (CSS background using repeating-linear-gradient with randomized color stops) appears at the seam, simulating the physical splice point where two strips of film were joined. This band is visible for approximately 200ms during scroll. **No Traditional Navigation:** There is no navbar, no hamburger menu, no sticky header. The only navigation affordance is a vertical sequence of thin horizontal lines (5px wide, 1px tall) positioned 16px from the right viewport edge, one per frame, with the current frame's indicator glowing at #D4A564 while others remain at #8B7355 with 40% opacity. This minimal navigation evokes the frame-counter markings on the edge of 35mm film. ## Typography and Palette **Typography:** - **Primary Display / Headlines:** "Bebas Neue" (Google Fonts) -- a condensed, all-caps display face with sharp vertical geometry and zero ornamentation. Used at 6rem-12rem for frame titles, always uppercase, letter-spacing: 0.06em. The tall, narrow proportions echo the elongated numerals found on paper currency. For the primary hero text, rendered at 10rem with `color: #D4A564`, applied with a CSS `mix-blend-mode: difference` against the sepia background to create a ghostly inversion effect. Bebas Neue's mechanical uniformity makes it feel stamped rather than written -- like serial numbers on banknotes. - **Secondary Display / Subheadings:** "Cormorant Garamond" (Google Fonts) -- an elegant, high-contrast serif with fine hairlines and dramatic thick-thin stroke variation. Used at 1.8rem-3rem, weight 300 (Light) for subheadings and frame descriptors. Set in mixed case with `letter-spacing: 0.04em` and `line-height: 1.35`. The delicate serifs and classical proportions evoke the engraved lettering on government bonds and currency certificates. Applied with `color: #C9B896` and occasional `opacity: 0.85` to suggest fading ink. - **Body / Captions:** "Space Grotesk" (Google Fonts) -- a proportional sans-serif with geometric clarity and a subtle technical character (squared-off curves, consistent stroke width). Used at 1rem-1.2rem, weight 400, for any body text or icon labels. `line-height: 1.65`, `letter-spacing: 0.01em`, `color: #A89878`. The geometric precision contrasts with the organic decay of the glitch layer, creating visual tension between the orderly and the entropic. **Color Palette (sepia-nostalgic):** | Role | Color | Hex | Description | |------|-------|-----|-------------| | Background Primary | Deep Sepia Void | #1A150E | Near-black warm brown, like the unexposed margin of aged film | | Background Secondary | Tobacco Dark | #2A2118 | Slightly lighter warm brown for alternate frame backgrounds | | Accent Primary | Tarnished Gold | #D4A564 | The color of brass fittings on a Victorian cash register, warm and luminous | | Accent Secondary | Aged Parchment | #C9B896 | Yellowed paper, old vellum, the edge-tone of a century-old ledger | | Text Primary | Faded Ink | #A89878 | Warm gray-brown, like iron gall ink that has oxidized over decades | | Text Muted | Dust | #6B5D4A | For secondary labels, navigation indicators at rest, whispered information | | Glitch Highlight | Amber Burn | #E8C078 | Bright warm amber for momentary glitch flashes and scan-line highlights | | Corruption Tint | Film Fog | #3D3228 | Semi-transparent overlay color for the corruption layer elements | The palette never touches pure white or pure black. Every value exists within the sepia continuum, from near-black (#1A150E) to bright amber (#E8C078), maintaining the relentless warmth of aged photographic material. ## Imagery and Motifs **Icon-Heavy Visual Language:** All visual content is communicated through a system of **custom icons** rendered as monoline SVG drawings with a consistent 2px stroke weight, no fills, using the Tarnished Gold (#D4A564) stroke color. The icon vocabulary draws from the **cultural** motifs of monetary systems across civilizations: 1. **Currency Symbols:** Stylized glyphs for historical and speculative currencies -- the denarius mark, the shekel cross, the tael weight, a generic digital currency diamond, the yen, the pound sterling, the rupee. Each rendered as a 64x64 SVG icon with deliberate geometric simplification, reducing complex symbols to their essential strokes. These icons appear as constellations within frames, positioned across the 24x16 grid at seemingly random but carefully composed coordinates. 2. **Banking Architecture Icons:** Simplified elevations of neoclassical bank facades -- columned porticos, pediments, vault doors with radial lock mechanisms, the distinctive octagonal shape of a safety deposit box. These architectural icons appear at larger scales (128x128 to 256x256) as frame anchors, with glitch displacement applied via CSS animation (horizontal translate oscillation of 1-3px over 4-second cycles). 3. **Ledger Motifs:** Horizontal ruled lines with periodic tick marks evoking accounting ledger pages. These appear as background texture within frames, rendered via CSS `repeating-linear-gradient` with #3D3228 lines at 24px intervals, subtly shifting opacity. Overlaid are small handwritten-style numerals (using Cormorant Garamond at 0.75rem, weight 300, opacity 0.3) positioned as if they were entries in a decaying financial record. 4. **Seal and Stamp Patterns:** Circular seal motifs composed of concentric rings, radiating lines, and small text set on a circular path (using SVG `textPath`). These seals reference the official stamps found on government-issued currency and appear at 0.15 opacity as watermark-like background elements, slowly rotating via CSS animation (`transform: rotate(360deg)` over 120 seconds). 5. **Data Corruption Icons:** A set of icons depicting the process of digital decay: a barcode dissolving into static, a QR code with missing modules, a fingerprint scan with scan-line interference, a blockchain chain with a broken link. These "corrupted" icons use the same monoline style but with deliberate gaps and displaced segments, as if the SVG path data itself has been partially corrupted. 6. **Cultural Artifact Motifs:** Icons referencing the physical culture of money -- a wax seal, a merchant's balance scale, a counting board (abacus), a cowrie shell, a gold ingot with stamped markings, a knotted string (referencing quipu record-keeping). These motifs create a cultural thread connecting ancient commerce to digital currency concepts. **Glitch Treatment on Icons:** Icons are not static. Each icon has a subtle CSS animation that periodically (every 8-15 seconds, randomized per icon via `animation-delay`) triggers a "corruption flash": the icon's `filter` property transitions to `hue-rotate(15deg) brightness(1.3)` for 150ms, accompanied by a 2px horizontal `translate` shift that snaps back. This creates the effect of icons glitching briefly in the viewer's peripheral vision -- never aggressive, always gentle, like a memory stuttering. **Scale-Hover Interaction:** When the user hovers over any icon, it smoothly scales to 1.15x its resting size over 400ms (`transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1)`) while simultaneously increasing stroke opacity from the default 0.7 to 1.0 and applying a subtle `drop-shadow(0 0 8px #D4A564)` glow. The scale-hover interaction is the primary interactive pattern -- it transforms passive icons into responsive elements that reward curiosity without demanding action. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport field of Deep Sepia Void (#1A150E). For 1.5 seconds, the screen appears almost empty -- just the faintest suggestion of horizontal scan lines (the corruption layer fading in from opacity 0 to its resting 0.04 opacity). This extended pause establishes the calm-serene tempo of the entire experience. At 1.5 seconds, the first icon materializes: a single currency symbol (a stylized "C" with a vertical bar, suggesting a generic central currency) drawn via SVG path animation (`stroke-dashoffset` transitioning from full-length to 0) over 1.2 seconds, positioned at grid coordinates [12, 8] -- the visual center of the frame. The icon draws itself in Tarnished Gold (#D4A564) against the near-black sepia background. At 2.7 seconds, the hero text appears: "CBDC" in Bebas Neue at 10rem, each letter fading in sequentially with 200ms stagger, positioned at grid row 5, spanning columns 2-23. The text renders with `mix-blend-mode: difference`, causing it to appear as a warm, inverted ghost against the background. Simultaneously, the subtitle -- "Central Records of a Decaying Ledger" -- appears in Cormorant Garamond Light at 2rem beneath the hero text, fading from 0 to 0.85 opacity over 800ms. **Scroll Behavior:** Use CSS `scroll-snap-type: y mandatory` on the main container, with each frame having `scroll-snap-align: start`. This creates a paginated scrolling experience where the viewport locks to each frame. The scroll-snap creates a deliberate, measured pace -- each frame demands to be seen in full before yielding to the next. **Frame-by-Frame Narrative Sequence:** - **Frame 1 (Hero):** The central icon, the title, and the scan-line corruption layer. Minimal content. This is the title card of the film. - **Frame 2 (Origins):** A constellation of 12-15 cultural artifact icons (cowrie shell, balance scale, abacus, etc.) arranged asymmetrically across the grid. A single line of body text in Space Grotesk at the bottom: a contemplative sentence about the origins of recorded value. Icons enter with stagger animation as the frame comes into view. - **Frame 3 (Architecture):** Three large banking architecture icons (neoclassical facades) positioned as a triptych across columns 3-7, 10-14, and 17-21. Behind them, faint ledger lines. The corruption layer intensifies slightly in this frame (opacity increases to 0.06) suggesting the degradation is progressing. - **Frame 4 (Corruption):** The data corruption icons take center stage. The scan lines become more pronounced. A horizontal displacement glitch band appears across the middle of the frame, offsetting content 4px to the right for a duration of 2 seconds before snapping back. Text in this frame uses a slightly reduced opacity (0.7) as if fading. - **Frame 5 (Dissolution):** Icons from previous frames reappear but with increased glitch animation frequency and magnitude. The ledger numerals in the background become denser. A large circular seal motif (watermark style) occupies the center of the frame, slowly rotating. The color palette shifts subtly warmer -- accent colors push toward Amber Burn (#E8C078). - **Frame 6 (Silence):** Nearly empty. A single small icon (the broken blockchain link) at grid position [12, 8]. Copious negative space. The corruption layer returns to minimal opacity. One line of text in Cormorant Garamond: a closing contemplation. This frame is the exhale after the narrative crescendo. **Animation Principles:** - All animations use `cubic-bezier(0.23, 1, 0.32, 1)` for a gentle, decelerating motion - No animation exceeds 1.5s duration for entrance effects - Glitch effects use `step()` timing functions to create the characteristic digital stutter (e.g., `animation-timing-function: steps(4, end)`) - The `prefers-reduced-motion` media query should disable glitch displacement but retain opacity transitions **Technical Constraints:** - Total SVG icon payload should remain under 40KB (monoline icons compress well) - Corruption layer uses only CSS -- no canvas or WebGL required - All glitch effects are achieved through CSS transforms, filters, and pseudo-elements - No external image assets; everything is SVG, CSS gradients, and typography **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, bright neon color schemes, playful bouncing animations, corporate gradient backgrounds, navigation-heavy headers, card-based grid layouts, stock photography. ## Uniqueness Notes **Differentiators from other designs:** 1. **Calm Glitch Paradox:** While other glitch designs in the portfolio (7% frequency) lean into chaotic, aggressive, high-energy distortion, cbdc.bar inverts the paradigm entirely -- glitch as meditation. The corruption effects are gentle, slow, and atmospheric rather than jarring. This is not a broken website; it is a website observing its own graceful decay. No other design in the collection attempts to pair glitch aesthetics with a calm-serene tone. 2. **Sepia-Nostalgic Color Containment:** The entire palette exists within a narrow sepia band (from #1A150E to #E8C078) with zero cool tones, zero pure neutrals. At only 1% frequency in the portfolio, the sepia-nostalgic palette is virtually unique. While warm palettes are common (100%), none restrict themselves to this specific amber-brown continuum that evokes aged photographic material and oxidized currency paper. 3. **Cultural Monetary Iconography System:** The icon-heavy imagery approach (0% portfolio frequency for this specific combination) uses a bespoke set of icons drawn from cross-cultural monetary history -- cowrie shells, quipu knots, balance scales, neoclassical bank facades, corrupted barcodes. No other design builds its entire visual language around the cultural archaeology of money and value systems. 4. **Film-Frame Grid Architecture:** The 24x16 micro-grid within full-bleed frames, referencing analogue film aspect ratios, is a structural concept not present in any other portfolio design. Content is composed cinematically rather than webly, with elements placed at specific grid coordinates like objects arranged within a film frame. 5. **Scale-Hover as Sole Interactive Pattern:** Rather than deploying multiple interaction patterns, cbdc.bar commits to a single interaction gesture -- scale-hover on icons -- as its only user-initiated animation. This restraint reinforces the calm-serene tone and avoids the pattern-stacking (parallax + scroll-triggered + stagger) that appears in 50%+ of existing designs. **Chosen seed/style:** aesthetic: glitch, layout: full-bleed, typography: display-bold, palette: sepia-nostalgic, patterns: scale-hover, imagery: icon-heavy, motifs: cultural, tone: calm-serene **Avoided overused patterns:** playful aesthetic (96%), centered layout (98%), mono typography (98%), warm generic palette (100%), scroll-triggered as primary pattern (98%), minimal imagery (96%), vintage motifs (58%), friendly tone (96%). Instead, this design uses exclusively low-frequency seed values: glitch (7%), display-bold (7%), sepia-nostalgic (1%), scale-hover (5%), icon-heavy (0%), cultural motifs (3%), calm-serene (7%).