# Design Language for cbdc.studio ## Aesthetics and Tone A neubrutalist design studio where Central Bank Digital Currency concepts are forged with raw, unpolished energy. The visual identity embraces the deliberate roughness of neubrutalism -- thick black borders, clashing type scales, and unapologetic background colors -- applied to the serious domain of digital currency design. Think of a Berlin design collective's workshop: concrete walls, Post-it notes, marker-drawn wireframes, all focused on reimagining money for the digital age. The tone is approachable-casual despite the heavyweight topic: the site communicates "we take CBDC seriously, but we don't take ourselves seriously." ## Layout Motifs and Structure The layout uses stacked-sections: full-width horizontal bands of varying heights that alternate between dense content and breathing space. Each section has a distinct background color from the analogous palette, creating a layered paper-stack effect. Sections have thick 4px black (#1a1a1a) borders on top and bottom. Content within sections uses a loose 8-column grid with intentionally uneven column widths (some 1fr, some 2fr) to create an organic asymmetry. The hero section is a full-viewport stack with oversized text pushed to the left margin, leaving the right 40% empty. Cards and content blocks use border-radius: 0 (sharp corners) with heavy 3px black borders and 4px offset box-shadows in a contrasting color. Navigation is a chunky top bar with pill-shaped buttons in alternating colors. Scroll position is indicated by a thick 8px progress bar at the very top of the page. ## Typography and Palette **Typography:** - **Headlines:** "Space Grotesk" (Google Fonts) -- a proportional sans-serif with a techy, slightly quirky character. Used at 3rem-6rem, weight 700, letter-spacing: -0.03em, line-height 1.0. Some headlines intentionally overlap their containers. - **Body:** "Inter" (Google Fonts) -- a workhorse sans-serif optimized for screen readability. Used at 1rem-1.15rem, weight 400-500, line-height 1.7. - **Accents:** "Syne Mono" (Google Fonts) -- a creative monospace for labels, annotations, and marginalia. Used at 0.8rem, weight 400, letter-spacing: 0.03em. **Palette (Analogous):** - Primary: #ff5733 (burnt orange) -- primary actions, hero background - Secondary: #ff8d1a (warm amber) -- secondary sections, hover states - Tertiary: #ffc300 (golden yellow) -- accent sections, highlights - Black: #1a1a1a -- borders, text, shadows - White: #fafafa -- text on dark, card backgrounds - Marble: #e8e0d5 (warm marble) -- alternate section backgrounds ## Imagery and Motifs Marble textures appear as background overlays on key sections: CSS-generated veining effects using conic-gradient and radial-gradient layered at 8% opacity in warm grays. Organic blob shapes accent card corners and section transitions -- SVG blobs with smooth curves in the analogous palette colors at 15% opacity, positioned asymmetrically behind content. Currency-themed motifs include oversized currency symbols ($, EUR, JPY) used as decorative background elements at 5% opacity and 20rem size. Section dividers use hand-drawn-style wavy SVG lines instead of straight rules. Blur-focus effects: background elements behind the currently scrolled section are gaussian-blurred (8px) to direct attention. All imagery maintains the neubrutalist commitment to raw, unrefined surfaces -- no glossy renders, no polished photography. ## Prompts for Implementation The page should feel like browsing a physical design studio's wall of work-in-progress. The hero section slams in with no animation -- it's just there, bold and immediate, with "CBDC.STUDIO" in Space Grotesk at 6rem overlapping the section border. Stacked sections enter with a blur-focus transition: as one section scrolls into the viewport center, surrounding sections blur out over 300ms. Cards within sections use a hover effect where the 4px offset shadow shifts direction (from bottom-right to top-left) with a 200ms transition, creating a "pressed" feel. The 8px scroll progress bar at top uses a gradient transitioning through all three palette colors. Interactive elements use a chonky press animation: scale(0.97) on mousedown, snap back on release. Content blocks occasionally break their grid alignment by 8-16px, creating the neubrutalist "almost-aligned" tension. Avoid CTA-heavy layouts, pricing blocks, and stat-grids. This is a creative studio showcase, not a banking interface. ## Uniqueness Notes 1. **Neubrutalist CBDC design studio:** No other design applies raw neubrutalist aesthetics to central bank digital currency, creating tension between institutional finance and rebellious design culture. 2. **Blur-focus section scrolling:** The gaussian blur transition between scroll-centered and peripheral sections is a distinctive navigation feedback mechanism. 3. **Deliberately misaligned grid breaks:** Content blocks that intentionally break grid alignment by 8-16px create neubrutalist tension unique to this design. 4. **Analogous warm palette against marble backgrounds:** The burnt orange to golden yellow analogous range over marble textures creates an unusual warmth for a fintech-adjacent topic. Document chosen seed/style: aesthetic: neubrutalism, layout: stacked-sections, typography: serif-revival, palette: analogous, patterns: blur-focus, imagery: marble-texture, motifs: organic-blobs, tone: approachable-casual Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)