# Design Language for cbdc.study ## Aesthetics and Tone cbdc.study inhabits the visual world of a meditation room inside a currency printing facility that has been abandoned for decades -- the machines still hum with residual charge, the air carries the ghost-scent of cotton-linen banknote paper, and moss has begun to colonize the concrete floor in patterns that resemble circuit traces. The aesthetic is **wabi-sabi** applied to the concept of digital money: the beauty found in the impermanence of monetary systems, the patina that accumulates on economic certainty, the cracks in the facade of central authority rendered visible and even cherished. The tone is **luxurious** -- not in the gaudy sense of gold leaf and marble lobbies, but in the way that a hand-thrown ceramic bowl holding matcha in a 400-year-old tearoom is luxurious. It is the luxury of considered imperfection, of deliberate negative space, of silence as a design element. Every pixel on cbdc.study should feel like it was placed with the care of a calligrapher executing a single brushstroke -- and that the slight wobble in the line is not an error but the proof of a human hand. The subject matter -- Central Bank Digital Currencies -- is presented not as a fintech pitch deck but as an evolving study, an open question rendered in light and shadow. The site treats CBDC as a philosophical and historical phenomenon: money as a social contract being rewritten in real time. The visual language communicates that this is a place of contemplation, not conversion. ## Layout Motifs and Structure The layout follows a **stacked-sections** architecture -- the page is composed of vertically stacked, full-viewport sections that the user descends through like walking down a spiral staircase in a library tower. Each section is a self-contained visual environment with its own spatial logic, connected by the gravity of the scroll itself. There is no visible navigation bar. The only wayfinding is a thin vertical progress indicator on the right edge of the viewport: a line of #00FFC8 (Phosphor Mint) that grows downward as the user scrolls, like mercury rising in a thermometer. **Section Architecture:** 1. **Opening Void** (100vh): An almost-empty field of #0A0A0F (Obsidian Void). A single line of text fades in with typewriter cadence at the vertical center. No logo, no navigation, no call to action. Just the question that the site exists to explore, rendered in Josefin Sans at 1.2rem, letter-spacing 0.35em, color #00FFC8. 2. **The Fracture** (100vh): A section that appears to be a solid wall of dark color, but as the user scrolls into it, hairline cracks appear -- thin lines of #FF2D6B (Voltage Rose) that spread across the surface like crazing on aged ceramic glaze. Within the cracks, text is visible: fragments of historical monetary policy quotes, set in Cormorant Garamond italic at 0.9rem. 3. **The Study** (150vh): The primary content section. Text is arranged in two asymmetric columns -- a narrow left column (25% width) containing chapter markers and dates, a wider right column (60% width) containing the body text. A 15% gap between them is not empty but inhabited by a slowly drifting field of particle effects -- tiny dots of #00FFC8 and #FF2D6B that drift upward like embers from an unseen fire below. 4. **The Specimen** (100vh): A single duotone photograph fills 70% of the viewport -- a close-up of aged paper currency, processed through a duotone filter of #0A0A0F and #00FFC8. The image is slightly rotated (transform: rotate(-1.2deg)), breaking the rigid geometry of the surrounding sections with the wabi-sabi principle of deliberate irregularity. Overlaid text in Josefin Sans uppercase provides a key data point or observation. 5. **The Coda** (80vh): A return to near-emptiness. The background transitions from #0A0A0F to #0D0D14 (Midnight Ink). A single closing statement types itself out character by character. The particle effects from Section 3 return but are now fading, their opacity decreasing as the user reaches the bottom. The site ends not with a footer but with a gradual dissolution into darkness. **Spatial Principles:** - No section uses a traditional container -- content is positioned with absolute and fixed positioning relative to the viewport, never constrained to a max-width wrapper. - Horizontal rules are replaced by hairline fracture lines that extend edge-to-edge. - Vertical rhythm is established by generous padding (min 8vh between content blocks within a section). - The entire page has zero horizontal scrolling -- only vertical descent. ## Typography and Palette **Typography:** - **Primary Display / Section Headers:** "Josefin Sans" (Google Fonts) -- weight 300 (Light). A geometric sans-serif with elegant, airy proportions and a distinctive vintage-modern character. The light weight gives it a fragile, impermanent quality that aligns with the wabi-sabi aesthetic. Used at clamp(2rem, 5vw + 0.5rem, 4.5rem) for section headers. Always uppercase, letter-spacing: 0.25em. Color: #00FFC8 on dark backgrounds. The wide letter-spacing creates a sense of breath and spaciousness -- each character standing alone like a standing stone in a field. - **Body / Study Text:** "Cormorant Garamond" (Google Fonts) -- weight 400 (Regular) and 400 Italic. A refined, high-contrast serif with sharp hairlines and generous x-height. The serif choice against the geometric sans creates a temporal tension: old form meeting new subject matter. Used at clamp(1rem, 1.2vw + 0.4rem, 1.25rem), line-height: 1.85, color: #B8B0A8 (Weathered Stone). The generous line-height creates vertical breathing room that prevents the dark background from feeling oppressive. - **Accent / Data / Chapter Markers:** "Space Mono" (Google Fonts) -- weight 400. A monospaced face used exclusively for numerical data, dates, and the typewriter-effect sequences. The mechanical regularity of the monospace contrasts with the organic imperfection of the overall aesthetic, creating a productive tension between the digital precision of CBDC systems and the handmade quality of the visual environment. Used at 0.85rem, letter-spacing: 0.12em, color: #FF2D6B. **Palette:** The palette is **dark-neon** -- a foundation of near-black surfaces punctuated by two high-saturation accent colors that glow against the darkness like neon tubes in a shuttered building. | Role | Name | Hex | Usage | |------|------|-----|-------| | Background Primary | Obsidian Void | #0A0A0F | Main page background, section backgrounds | | Background Secondary | Midnight Ink | #0D0D14 | Alternate section backgrounds, subtle depth variation | | Background Tertiary | Charcoal Fog | #151520 | Card backgrounds, elevated surfaces, hover states | | Accent Primary | Phosphor Mint | #00FFC8 | Headlines, progress indicator, particle effects, links | | Accent Secondary | Voltage Rose | #FF2D6B | Data highlights, crack lines, chapter markers, typewriter cursor | | Body Text | Weathered Stone | #B8B0A8 | Paragraph text, descriptions | | Muted Text | Ash Patina | #6B6560 | Captions, secondary labels, de-emphasized content | | Highlight Glow | Spectral Teal | #00FFD0 | Text-shadow glow effect on hover, selection highlight (at 20% opacity) | **Color Behavior:** - The two accent colors never appear adjacent to each other -- they are always separated by at least 40px of dark background, creating discrete pools of color in the darkness. - All accent colors carry a subtle CSS text-shadow or box-shadow glow: `0 0 20px rgba(0, 255, 200, 0.15)` for Phosphor Mint, `0 0 20px rgba(255, 45, 107, 0.12)` for Voltage Rose. - The body text color #B8B0A8 has a warm undertone (note the slight yellow-pink cast) that prevents the dark-neon palette from feeling purely clinical. This warmth is the wabi-sabi element in the color system -- an organic imperfection in a digital palette. ## Imagery and Motifs **Duotone Photography:** All photographic imagery is processed through a strict duotone filter. The two-tone mapping uses Obsidian Void (#0A0A0F) for shadows and Phosphor Mint (#00FFC8) for highlights, creating images that look like they were developed in a darkroom illuminated by a single neon tube. Subject matter for photographs is drawn from the material culture of money: - Extreme close-ups of banknote microprinting, the text barely legible, the paper fibers visible as a landscape - Watermark patterns viewed from oblique angles, ghostly and partial - The surface of coins showing wear patterns -- where millions of thumbs have rubbed the relief smooth - Printing press rollers, intaglio plates, the mechanical infrastructure of currency production - Empty bank vaults, safe deposit boxes with doors ajar, the architecture of stored value All images are rendered with a subtle CSS `filter: contrast(1.1) brightness(0.9)` to deepen the duotone effect, and each carries a `mix-blend-mode: luminosity` layer of #0A0A0F at 8% opacity to further integrate it into the dark background. **Particle Effects:** A persistent but subtle particle system floats in the viewport. Particles are tiny circles (1-3px diameter) in either #00FFC8 or #FF2D6B at 20-40% opacity. They drift upward at 0.2-0.5px per frame, with slight horizontal oscillation (sine wave, amplitude 10px, period 4 seconds). Particle density is low -- no more than 30-40 particles visible at any time across the entire viewport. They appear to originate from the bottom of The Study section and persist through subsequent sections with decreasing density. The effect suggests embers, or data packets dissolving, or the slow thermal drift of dust in a beam of light. **Ceramic Crack Motifs:** The wabi-sabi aesthetic manifests through a recurring motif of fine crack lines -- inspired by kintsugi (golden repair of broken ceramics) but rendered in neon. These cracks are SVG paths with a 0.5-1px stroke in #FF2D6B, animated to draw themselves using stroke-dashoffset transitions as the user scrolls into view. They appear: - As section dividers (replacing horizontal rules) - Radiating from the edges of duotone photographs - Framing key quotations or data points - Along the left margin of the chapter marker column The cracks are never symmetrical, never straight, never predictable. Each is hand-drawn in character (using cubic bezier curves with irregular control points) to maintain the organic, imperfect quality that wabi-sabi demands. **Typewriter Sequences:** Key text elements are revealed through a typewriter effect -- characters appearing one at a time with a 60ms interval, accompanied by a blinking cursor in #FF2D6B (500ms blink cycle). The typewriter effect is used sparingly: - The opening statement in Section 1 - The closing statement in Section 5 - Key definitions or terms within The Study section (triggered on scroll-into-view) The typewriter sound is implied through visual rhythm alone -- no audio. The cursor persists for 2 seconds after the typing completes, then fades to 0 opacity over 800ms. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to 100vh of Obsidian Void (#0A0A0F). For 2 full seconds, nothing happens. The screen is completely dark -- not even a loading indicator. This deliberate pause is a wabi-sabi gesture: the emptiness is the first design element, and the visitor's momentary uncertainty ("Is the site broken?") is the first emotional beat. At the 2-second mark, a cursor appears at the center of the viewport -- a thin vertical line in #FF2D6B, blinking. After 500ms, text begins to type: the site's central question, character by character, in Space Mono at 1rem. The text is not centered vertically in a mathematical sense -- it sits slightly above center (45% from top), creating a subtle visual tension that the viewer registers subconsciously as "alive" rather than "designed." **Scroll Behavior:** - CSS `scroll-snap-type: y mandatory` on the main container, with each section as a snap point. The snap creates a deliberate, section-by-section descent. - Between sections, a 200ms pause is enforced via scroll-behavior timing, creating a moment of stillness at each transition -- the user must breathe between sections. - Scroll-triggered animations use Intersection Observer with a threshold of 0.3 -- elements begin their entrance animations when 30% visible, creating early, gentle reveals rather than sudden pops. **The Fracture Section Implementation:** The crack lines in Section 2 are implemented as SVG overlay with `pointer-events: none`. On initial render, all crack paths have `stroke-dasharray` set to their total length and `stroke-dashoffset` set to the same value (fully hidden). As the section enters the viewport, a requestAnimationFrame loop gradually reduces `stroke-dashoffset` to 0 over 3 seconds, with each crack path starting at a random delay (0-1.5s) to prevent uniform appearance. The cracks are accompanied by a CSS `backdrop-filter: brightness(1.02)` applied to thin rectangular regions along the crack paths, creating the illusion that light is leaking through the fractures. **Typography Animation:** - Headlines fade in from opacity 0 to 1 over 1.2 seconds with a concurrent translateY from 20px to 0 -- a slow, heavy reveal as if the text is settling into position like sediment. - Body text paragraphs appear with a stagger of 150ms per paragraph, fading in from opacity 0 with no transform -- they simply materialize. - The chapter markers in the left column of The Study section are fixed-position elements that update as the user scrolls through content blocks, transitioning between values with a 400ms crossfade. **Particle System Implementation:** The particles are rendered on a `` element positioned `fixed` at `z-index: 1`, with `pointer-events: none`. The canvas is sized to the viewport and redrawn at 30fps (not 60 -- the lower frame rate creates a slightly stuttery, organic movement quality). Each particle is an object with x, y, radius, color, opacity, and velocity properties. On each frame: y decreases by velocity, x oscillates via `Math.sin(Date.now() * 0.001 + particle.phase) * 0.3`. Particles that drift above the viewport are recycled to the bottom with randomized properties. The particle system is initialized with 0 particles and adds 1 particle every 400ms until reaching the cap of 35, creating a gradual population of the visual field. **AVOID:** - CTA buttons, "Get Started" blocks, or any conversion-oriented elements - Pricing tables, feature comparison grids, or SaaS-style layouts - Stat counters, percentage bars, or dashboard-style data visualization - Heavy navigation menus, hamburger icons, or breadcrumb trails - White backgrounds or light-mode variants -- the dark-neon palette is absolute - Stock photography of business people, handshakes, or office environments - Decorative borders, rounded corners > 4px, or card-style containers with visible shadows - Any element that suggests "sign up," "subscribe," or "learn more" ## Uniqueness Notes **Differentiators from other designs:** 1. **Wabi-Sabi + Neon Paradox:** No other design in the portfolio attempts to marry the Japanese aesthetic of imperfection and impermanence (wabi-sabi, 8% frequency) with a dark-neon color palette (3% frequency). These are seemingly contradictory impulses -- wabi-sabi suggests muted earth tones and organic textures, while dark-neon suggests synthetic precision and electric saturation. cbdc.study resolves this contradiction by using neon colors as the "kintsugi gold" -- the glowing repair material that fills the cracks in imperfect surfaces. The neon does not fight the wabi-sabi; it illuminates it. 2. **Typewriter-Effect as Philosophical Device:** While typewriter effects exist in the pattern vocabulary, they appear at 0% frequency in current designs -- cbdc.study is the first to use them. More importantly, the typewriter effect here is not decorative but philosophical: the character-by-character reveal of text mirrors the slow, deliberate process of "studying" a subject, forcing the visitor to read at the speed of thought rather than the speed of scanning. The 60ms per-character timing is calibrated to be slightly slower than comfortable reading speed, creating a meditative friction. 3. **Duotone Photography with Material Focus:** The duotone-photo imagery approach (1% frequency) is nearly unique in the portfolio, and cbdc.study applies it exclusively to the physical artifacts of monetary systems -- banknote fibers, coin wear patterns, vault architecture. No other design treats CBDC as a material-culture subject rather than a technology subject. The photographs are archaeological in sensibility, studying money as artifact rather than abstraction. 4. **Deliberate Emptiness as Content:** The 2-second opening void and the near-empty Coda section use negative space not as a design technique but as actual content -- the emptiness communicates the uncertainty and open-endedness of the CBDC question. This is a direct application of the Japanese concept of "ma" (the meaningful pause), which no other dark-neon palette design in the portfolio employs. 5. **Stacked-Sections Without Escape:** The stacked-sections layout (3% frequency) combined with CSS scroll-snap creates a page that must be experienced sequentially, like turning pages in a bound volume. There is no navigation menu, no jump links, no way to skip ahead. This constraint is intentional: cbdc.study is a study, and studies require progression through material in order. **Chosen Seed/Style:** - aesthetic: wabi-sabi - layout: stacked-sections - typography: futura-geometric - palette: dark-neon - patterns: typewriter-effect - imagery: duotone-photo - motifs: particle-effects - tone: luxurious **Avoided Overused Patterns:** - playful aesthetic (96%) -- replaced with wabi-sabi contemplation - centered layout (98%) -- replaced with stacked-sections with asymmetric internal composition - scroll-triggered as primary pattern (98%) -- typewriter-effect is the primary pattern; scroll-triggered is used only as a secondary trigger mechanism - mono typography as dominant face (98%) -- Space Mono is tertiary; Josefin Sans (geometric) and Cormorant Garamond (elegant serif) lead - warm palette (100%) -- dark-neon is fundamentally cool, with only the body text color carrying warmth - friendly tone (96%) -- replaced with luxurious contemplative distance - minimal imagery (96%) -- duotone photography and particle effects create a visually rich environment - vintage motifs (60%) -- particle-effects and ceramic crack motifs are contemporary and abstract