# Design Language for cbdc.study ## Aesthetics and Tone CBDC.study is an educational research portal exploring Central Bank Digital Currencies -- a topic that lives at the intersection of oceanic-depth finance and emerging technology. The aesthetic draws from **seapunk** -- the internet-born visual movement that venerates aquatic imagery, iridescent surfaces, and deep-ocean color saturation. Imagine a research library submerged at the bottom of the Mariana Trench: bioluminescent organisms illuminate scholarly texts, coral formations grow along the margins of white papers, and tidal currents carry data streams between citation nodes. The tone is **grounded-earthy** despite the aquatic setting -- this is not frivolous seapunk kitsch but a mature, contemplative study environment where deep-sea imagery serves as metaphor for deep research. Think less "vaporwave dolphins" and more "Jacques Cousteau's personal research station rendered as a web experience." ## Layout Motifs and Structure The layout uses a **card-grid** composition, but reimagined through a seapunk lens -- cards appear as translucent specimen slides floating in dark water, each containing a research topic or CBDC concept. The grid is not rigid but uses CSS Grid with varying row heights (auto-fill, minmax(240px, 1fr)) to create an organic, reef-like arrangement. **Primary structure:** - **Navigation bar (64px, sticky):** A thin horizontal band with a frosted-glass effect (backdrop-filter: blur(12px) saturate(180%)) over a deep ocean gradient. The "cbdc.study" wordmark sits left, rendered in a bold display face with a subtle cyan text-shadow. Navigation links float right with underline-draw hover effects. - **Hero zone (100vh):** A full-viewport deep-ocean scene. Subtle particle effects (tiny plankton-like dots drifting upward via CSS animation) create depth. The main heading ("Study Central Bank Digital Currencies") emerges from darkness with a slow fade-reveal (opacity 0→1 over 1.5s, translateY(30px→0)). Below it, a secondary line types itself: "Research. Analyze. Understand." - **Content grid (main body):** Cards arranged in a 3-column grid on desktop (1-column on mobile) with 24px gaps. Each card has a semi-transparent dark background (rgba(10, 30, 60, 0.85)), a 1px border of muted teal (#2A8A8A at 40% opacity), and rounded corners (12px). Cards contain research topics: "Digital Yuan Case Study," "Privacy vs Surveillance," "Cross-Border Settlement," etc. - **Deep dive sections:** Between card grids, full-width "deep dive" panels appear -- these are immersive, full-bleed sections with layered parallax backgrounds showing progressively deeper ocean layers. Text overlays in large display type introduce major research themes. - **Footer:** A seabed-themed section with sediment texture (CSS noise gradient), containing citation links styled as fossilized text. ## Typography and Palette **Fonts:** - **Headlines:** "Archivo Black" (Google Fonts) -- a bold, confident display font with strong presence that commands attention like a research paper title. Used at weight 400 (its only weight) for all headings. Size: clamp(32px, 5vw, 64px). Letter-spacing: -0.02em for tight, authoritative headlines. - **Body text:** "Source Sans 3" (Google Fonts) -- a highly legible sans-serif designed by Paul Hunt for Adobe, excellent for extended reading of research content. Weight 400 for body, 600 for emphasis. Line-height: 1.7. Size: clamp(16px, 1.8vw, 19px). - **Accents/Data:** "IBM Plex Mono" (Google Fonts) -- used for data points, currency figures, timestamps, and code-like references. Weight 400. Size: 14px. Conveys technical precision. **Palette:** - **Abyssal Blue** #0A1628 -- Primary background, the deepest layer of the ocean - **Midnight Teal** #0D3B4F -- Secondary background for cards and panels - **Bioluminescent Cyan** #00E5CC -- Primary accent, used for links, highlights, and interactive elements - **Coral Signal** #FF6B6B -- Secondary accent for warnings, important callouts, and hover states - **Plankton Green** #7DFFA8 -- Tertiary accent for success states and nature-related motifs - **Pearl White** #E8F0F2 -- Primary text color against dark backgrounds - **Sediment Gray** #6B8A8A -- Secondary text, metadata, captions - **Deep Current** #1A3A5C -- Card borders, subtle dividers, layered depth elements ## Imagery and Motifs **Core visual motifs:** - **Bioluminescent nodes:** Small glowing circles (radial-gradient with cyan-to-transparent) placed at connection points between content cards, suggesting a neural/coral network of knowledge. These pulse gently (CSS animation: scale 1→1.15→1 over 3s, infinite). - **Tidal data streams:** SVG paths with animated stroke-dashoffset that flow between sections, representing the movement of digital currency. Paths are curved (quadratic beziers) and colored in Bioluminescent Cyan at 40% opacity. - **Coral typography frames:** Section headings are bracketed by organic, coral-branch-like SVG decorations -- hand-drawn vector paths with irregular branching that frame the text without enclosing it. - **Vintage photography with seapunk treatment:** Research imagery uses a duotone filter (CSS filter: sepia(30%) hue-rotate(160deg) saturate(200%)) applied to vintage financial/banking photographs, transforming them into deep-ocean-toned visuals. Old photos of central banks become mysterious underwater ruins. - **Nature depth layers:** Background uses three parallax layers -- distant bioluminescent particles (slowest), mid-ground kelp-forest silhouettes (medium speed), and foreground card grid (stationary). Created with CSS transform: translateZ() in a perspective container. - **Specimen card aesthetic:** Each card appears as a scientific specimen slide -- a thin white border (1px, 20% opacity) and a small "classification" label in the top-right corner (IBM Plex Mono, 10px, uppercase). ## Prompts for Implementation **Full-screen narrative opening:** The page loads to complete darkness (#0A1628). After 500ms, tiny bioluminescent particles begin appearing -- CSS-animated dots (2-4px, Bioluminescent Cyan at varying opacities) that drift upward from the bottom of the viewport. Over the next 1.5s, the main heading fades in from the center with a slow translateY animation. The heading text uses Archivo Black at maximum size with a subtle text-shadow: 0 0 40px rgba(0, 229, 204, 0.3). Below, the subtitle types itself character by character (typewriter-effect via JS: 50ms per character interval). A single downward-pointing chevron pulses at the bottom of the viewport (translateY oscillation). **Card interaction:** Cards respond to cursor proximity with a **cursor-follow** glow effect -- as the mouse moves near a card, a radial gradient highlight (Bioluminescent Cyan at 8% opacity) follows the cursor position within the card (JS: mousemove listener, CSS custom properties --mouse-x, --mouse-y). On hover, the card's border transitions from Midnight Teal to Bioluminescent Cyan over 400ms and the card lifts slightly (translateY: -4px, box-shadow: 0 8px 32px rgba(0, 229, 204, 0.15)). **Deep dive transitions:** When scrolling into full-width deep-dive sections, the background gradient shifts from Abyssal Blue to an even darker shade (#050E1A) while coral SVG decorations draw themselves in via path-draw-svg animation (stroke-dashoffset transition over 1.2s). Text in these sections uses oversized Archivo Black (clamp(40px, 8vw, 96px)) and fades in with a stagger effect (each word delayed by 100ms). **Storytelling bias:** The page is structured as a descent -- the user literally scrolls deeper into CBDC research. Visual cues reinforce this: background gets progressively darker, particle density increases, and ocean-floor textures become more prominent. Avoid CTA-heavy layouts, pricing blocks, and stat-grids. Instead, present research topics as explorations, inviting curiosity rather than conversion. **Nature-integrated data:** Any statistics or figures are presented within organic containers -- numbers sit inside soft-edged ellipses (border-radius: 50%, background: radial-gradient from Midnight Teal to transparent), resembling deep-sea creatures displaying data on their luminous bodies. ## Uniqueness Notes **Differentiators from other designs:** 1. **Seapunk as scholarly aesthetic:** Applying the seapunk visual language to academic/research content is a deliberate subversion -- seapunk is typically associated with ironic internet culture, but here it becomes a metaphor for "deep research" (depth = ocean depth). No other design uses seapunk for educational content. 2. **Descent-as-narrative scroll structure:** The page darkens as you scroll deeper, with increasing bioluminescent activity, creating a literal "deep dive" into CBDC research. This progressive environmental shift is unique compared to static-tone scrolling experiences. 3. **Vintage financial photography with seapunk duotone filter:** Applying CSS duotone ocean-color filters to vintage banking/financial photographs creates a unique visual identity -- central bank buildings become underwater ruins, old currency becomes deep-sea artifacts. 4. **Specimen-slide card classification system:** Cards use scientific specimen labeling conventions (small mono-type classification tags, thin white borders) -- merging marine biology specimen culture with financial research categorization. **Seed/Style:** seapunk + card-grid + display-bold + ocean-deep + cursor-follow + vintage-photography + nature + grounded-earthy **Avoided overused patterns:** Avoided centered-only layout (using card-grid with organic variance), minimized parallax dependency (used sparingly for depth layers only), avoided mono as primary typography (used only for data accents). **Preferred underused elements:** Incorporated typewriter-effect, path-draw-svg animations, underline-draw hover navigation, and specimen-style card framing.