# Design Language for cbdc.study ## Aesthetics and Tone An anti-design research vault where Central Bank Digital Currency scholarship lives in deliberate visual tension. The site rejects conventional fintech aesthetics in favor of a mysterious, archive-like atmosphere -- imagine a secret library where forbidden economic research is stored on glowing terminals. Dark burgundy surfaces contrast with neon-lit text, creating the feeling of reading classified documents by the light of a single desk lamp. The sidebar-driven layout evokes academic paper management systems, but twisted through an anti-design lens where rules are broken with purpose. The tone is mysterious-moody: knowledge here feels earned, not freely given. ## Layout Motifs and Structure The layout is sidebar-driven: a persistent 280px left sidebar houses navigation, search, and study session controls, while the main content area (calc(100vw - 280px)) scrolls independently. The sidebar has a dark burgundy (#4a1528) background and stays fixed on scroll. Main content uses a single-column layout (max-width 680px, centered within its area) optimized for long-form reading. Content blocks are separated by 48px vertical gaps. Featured research cards use a glowing neon left-border (4px, #ff4da6) as the only decorative flourish against the dark surface. Section headers span the full content width with a 1px bottom border in #6b2e45. The footer is minimal: a single line of metadata in monospace. Scrollbar is custom-styled to match the burgundy palette. On mobile, the sidebar becomes a slide-out drawer triggered by a hamburger icon. ## Typography and Palette **Typography:** - **Headlines:** "JetBrains Mono" (Google Fonts) -- a developer-focused monospace with excellent legibility and distinctive character shapes. Used at 1.5rem-3rem, weight 700-800, letter-spacing: -0.01em, line-height 1.2. - **Body:** "Crimson Pro" (Google Fonts) -- a refined serif with scholarly personality, excellent for sustained reading in dark-mode contexts. Used at 1.05rem, weight 400, line-height 1.8, color: #e8d5c4. - **Labels/Meta:** "JetBrains Mono" (Google Fonts) -- at smaller sizes for metadata, citations, and navigation labels. Used at 0.75rem, weight 400, letter-spacing: 0.06em, text-transform: uppercase. **Palette:** - Primary Dark: #1a0a10 (midnight burgundy) -- main content background - Sidebar: #4a1528 (deep wine) -- sidebar background - Cream: #e8d5c4 (warm parchment) -- body text, secondary elements - Neon: #ff4da6 (hot pink neon) -- accents, active states, glowing borders - Muted: #8b5e6b (dusty rose) -- secondary text, inactive states - Surface: #2a1018 (dark maroon) -- card backgrounds, elevated surfaces - Highlight: #ff4da620 (neon at 12% opacity) -- text highlight backgrounds ## Imagery and Motifs Neon glow effects dominate: key elements have box-shadow: 0 0 20px rgba(255,77,166,0.15) creating a soft neon ambient light. Book-scholarly motifs include footnote markers styled as glowing superscript numbers, margin annotations in smaller monospace text, and "page number" indicators at section breaks. The sidebar features a minimal book-spine visualization: stacked horizontal bars representing study sections, colored by completion status (neon pink = current, dusty rose = read, dark = unread). Micro-interactions include: neon flicker on hover (a 50ms opacity: 0.7 flash), glowing cursor trail in the main content area, and subtle scan-line overlay (1px horizontal lines at 2% opacity) on the main background. All imagery is text-and-glow based -- no photographs, no illustrations, purely typographic and light-based. ## Prompts for Implementation Build the site as a dark, atmospheric study environment. The page loads with a brief neon power-on sequence: the sidebar's neon accent line draws from top to bottom over 1 second, then content fades in from 0 opacity over 500ms. The sidebar navigation uses micro-interactions: hovering a section title causes its neon left-border to pulse once (brightness spike over 200ms). Scrolling through the main content triggers section headers to glow briefly as they pass through the viewport center. Research cards enter with a subtle left-slide (transform: translateX(-10px) to 0) and opacity transition. The study progress indicator in the sidebar animates smoothly as sections are scrolled past. Implement a "focus mode" where clicking a dedicated button dims the sidebar to 30% opacity and expands the content area, narrowing visual focus. Avoid CTA-heavy layouts, pricing blocks, and stat-grids. This is a private study chamber, not a public-facing product. ## Uniqueness Notes 1. **Anti-design CBDC research vault:** No other design combines anti-design principles with CBDC scholarship, creating a mysterious archive atmosphere antithetical to typical fintech transparency. 2. **Neon-on-burgundy dark palette:** The hot pink neon (#ff4da6) against midnight burgundy (#1a0a10) creates a distinctive color tension absent from conventional dark-mode designs. 3. **Sidebar book-spine progress visualization:** Representing study sections as colored horizontal bars mimicking book spines is a unique navigational metaphor. 4. **Focus mode interaction:** A toggle that dims the sidebar and expands content area is a functional differentiator that enhances the scholarly reading experience. Document chosen seed/style: aesthetic: anti-design, layout: sidebar, typography: mono, palette: burgundy-cream, patterns: micro-interactions, imagery: neon-glow, motifs: book-scholarly, tone: mysterious-moody Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)