# Design Language for cbdc.studio ## Aesthetics and Tone cbdc.studio is an isometric digital workshop where Central Bank Digital Currency concepts are visualized as three-dimensional building blocks in a forested environment -- imagine a tabletop strategy game set in a national park, where currency nodes are log cabins, transaction paths are hiking trails, and the central bank is a fire lookout tower, all rendered in a charming isometric illustration style surrounded by pine trees and fern undergrowth. The isometric aesthetic brings technical precision (30-degree angles, consistent projection) while the forest-green palette and nature imagery ground the digital currency subject matter in the physical, living world. "Studio" implies a creative workspace, so the site feels like a designer's workbench where isometric CBDC models are being prototyped and refined. The tone is approachable-casual: complex monetary policy concepts made accessible through spatial metaphors and natural-world analogies, presented with the relaxed confidence of a friend explaining things over a campfire. ## Layout Motifs and Structure The layout uses a **broken-grid** composition -- elements break free of traditional column/row alignment, overlapping and offsetting in ways that create visual energy and suggest the three-dimensionality of isometric space projected onto a 2D screen. **Primary structure:** - **Opening viewport (100vh):** A large isometric scene fills the center -- a forest clearing with a central structure (the "CBDC studio" workshop, rendered as an isometric building with forest surroundings). The "cbdc.studio" logotype floats above in handwritten type, as if chalked onto a wooden sign. Nature elements (trees, ferns, birds) frame the scene but break the viewport edges, establishing the broken-grid sensibility from the start. - **Content blocks:** Information is presented in irregularly positioned panels that overlap at edges. A block about "What is CBDC?" might sit at 10% from the left, spanning 55% width, while an adjacent illustration panel sits at 45% from the left, spanning 50% width, overlapping the text block by 5%. This layering creates depth without traditional parallax. Each panel has rounded corners (12px) and a subtle forest-themed border (2px #4A7C59). - **Isometric diagram sections:** Full-width sections contain interactive isometric diagrams where CBDC concepts are spatialized: a forest-village representing a national economy, with log-cabin nodes for banks, trail networks for transaction channels, and the fire tower for the central bank. Users can hover elements for details. - **Nature strip dividers:** Between sections, horizontal strips display continuous isometric forest landscapes (treeline silhouettes in layered greens) that extend edge-to-edge, breaking the broken-grid sections with moments of horizontal calm. ## Typography and Palette **Fonts:** - **Headlines/Logotype:** "Caveat" (Google Fonts) -- a handwritten font with natural, casual strokes that complement the nature setting and approachable tone. Weight 700 for the logotype, 400 for section headings. Size clamp(28px, 5vw, 64px). The handwriting quality reinforces the "studio sketchbook" feeling -- these are design notes, not corporate announcements. - **Body text:** "Nunito" (Google Fonts) -- a rounded sans-serif with warm, friendly letterforms that support the approachable-casual tone while maintaining excellent readability. Weight 400 for body, 600 for emphasis. Size 17px, line-height 1.75. Its softness pairs well with the organic nature theme. - **Technical terms/Labels:** "Fira Code" (Google Fonts) -- a monospaced font with programming ligatures, used sparingly for CBDC-specific technical terms, code-like references, and isometric diagram labels. Weight 400, size 14px. Adds a "working prototype" quality to technical content. **Palette (forest-green):** - **Canopy Green:** #2D5A3F -- primary dark green for headers, borders, and isometric building faces - **Meadow Light:** #F0F7F0 -- primary background, a barely-green white - **Fern Accent:** #4A7C59 -- secondary green for text emphasis, panel borders, and interactive elements - **Bark Brown:** #6B4E37 -- tertiary accent for wooden textures, the logotype, and warm structural elements - **Forest Floor:** #3D6B4F -- isometric shadow faces (darker green for depth illusion) - **Sunlit Moss:** #8FBF7A -- highlight green for hover states, active elements, and nature accent illustrations - **Morning Mist:** #E8F0E8 -- card/panel backgrounds, soft green-tinted white ## Imagery and Motifs **Core visual motifs:** - **Isometric forest-CBDC scenes:** The primary illustration system renders CBDC concepts as isometric forest settlements. Each scene uses the standard isometric projection (120-degree angles between axes). Buildings (banks, exchanges) are log cabins with pitched roofs in Canopy Green with Bark Brown trim. Transaction paths are winding trails. Data flows are represented by small birds or butterflies moving along paths. The central bank is a tall fire lookout tower visible from all scenes. - **Nature-elements integration:** Every technical element has a natural counterpart: encryption is represented by dense forest canopy (privacy through coverage); decentralization is a network of connected clearings; smart contracts are beehives with structured hexagonal cells. These nature metaphors appear as small isometric vignettes adjacent to explanatory text. - **Micro-interactions throughout:** The broken-grid layout is animated with subtle micro-interactions. On hover, content panels lift slightly (translateY: -4px, box-shadow increases). Isometric scene elements respond to hover with informational tooltips that appear with a gentle bounce. Navigation elements have a smooth color transition (200ms) from Fern Accent to Sunlit Moss on hover. - **Handwritten annotations:** Small handwritten notes (in Caveat, 14px, Bark Brown, rotated 2-5 degrees) appear near isometric diagrams like a designer's sketching notes: "could this be distributed?", "resilience point", "single point of failure?". These add personality and reinforce the studio/workshop metaphor. - **Broken-grid overlap shadows:** Where content panels overlap, a subtle shadow layer (box-shadow: -4px 4px 12px rgba(0,0,0,0.06)) on the overlapping panel creates the illusion of physical paper layers on a desk, reinforcing the broken-grid depth. ## Prompts for Implementation **Full-screen narrative experience:** The site should feel like touring a designer's workbench where CBDC concepts are being modeled as isometric forest scenes. The broken-grid layout creates a dynamic, workshop-like arrangement where nothing is too neat or corporate. **Opening scene construction:** - Frame 0-400ms: Meadow Light background appears with a subtle texture (CSS noise, 1% opacity). - Frame 400-1400ms: The isometric forest scene builds from the ground up. First, the ground plane draws in (an isometric diamond shape, scale 0 to 1). Then trees grow upward (scaleY: 0 to 1, transform-origin: bottom) in a staggered sequence (80ms apart, starting from back to front for depth). - Frame 1400-2200ms: The central workshop building constructs itself: base appears, then walls (slideUp), then roof (drops from above with a slight bounce). Smoke from a chimney begins a slow upward drift animation. - Frame 2200-2800ms: "cbdc.studio" logotype in Caveat handwriting animates in as if being written (SVG stroke-dashoffset for each letter sequentially, 80ms per character). - Frame 2800+: Small birds begin their perpetual flight-path animations along isometric trails. **Broken-grid scroll behavior:** Content panels are positioned using CSS Grid with explicit grid-column and grid-row placements that create intentional overlaps. On scroll, panels enter with staggered micro-interaction animations: each panel slides in from a slightly different direction (the leftward-positioned ones from left, rightward from right) with translateX/translateY transitions of 20-30px, opacity 0 to 1, duration 400ms. IntersectionObserver at threshold 0.2 triggers these entries. **Isometric scene interaction:** SVG-based isometric scenes with individual element groups. Hover on any building/element adds a CSS class that: (1) brightens the element (filter: brightness(1.1)), (2) shows a tooltip panel positioned above the element (opacity 0 to 1, translateY: 8px to 0, 200ms), (3) adds a subtle pulse ring around the element (a circle that scales from 1.0 to 1.5 while fading out, 600ms). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, dark crypto dashboards, neon aesthetics. This is a nature workshop, not a trading floor. ## Uniqueness Notes **Differentiators from other designs:** 1. **Isometric forest scenes as CBDC concept models:** No other design visualizes financial technology concepts as isometric forest settlements. The metaphor system (log cabins for banks, trails for transactions, fire tower for central bank) is entirely unique and provides both visual charm and conceptual clarity. 2. **Broken-grid layout with overlapping paper-layer depth:** While broken grids appear occasionally in design, this implementation specifically uses the overlap shadows and varied-angle entry animations to create a "papers on a workbench" feeling that reinforces the studio concept. 3. **Handwritten annotation layer over technical content:** The scattered Caveat-font annotations ("could this be distributed?") near isometric diagrams create a thinking-out-loud quality unique to this design, making technical content feel like active design exploration rather than finished documentation. 4. **Nature-metaphor system for cryptocurrency concepts:** The comprehensive mapping of CBDC technical elements to natural phenomena (encryption = forest canopy, smart contracts = beehives, decentralization = connected clearings) is a unique pedagogical approach not found in other designs. **Chosen seed/style:** isometric aesthetic, broken-grid layout, handwritten typography, forest-green palette, micro-interactions patterns, nature-elements imagery, nature motifs, approachable-casual 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 broken-grid layout (13%), micro-interactions patterns (6% -- underused), nature-elements imagery (3% -- very underused), handwritten typography (20%), nature motifs (20%), and approachable-casual tone (3% -- very underused).