# Design Language for cbdc.studio ## Aesthetics and Tone cbdc.studio is conceived as **a haptic museum of programmable money** -- a site that treats central bank digital currency not as a blockchain product, not as a fintech SaaS, but as **the next chapter in the long material history of sovereign currency**. The visual language excavates the forgotten craft of security printing -- the guilloché lathes of the 19th century, the intaglio plates of the Bureau of Engraving, the iridescent optically-variable inks of modern banknotes, the steel micro-text under a jeweler's loupe -- and fuses it with the cold mathematical precision of cryptographic commitment schemes and zero-knowledge proofs. The mood is that of **entering a central bank vault at 4 AM, alone with a single green-shaded lamp**. There is reverence, solemnity, the hush of institutional gravity. But beneath the hush there is the faint electric hum of a mainframe that is *listening*, humming in the frequency of monetary policy itself. The site should feel as if it was designed by a plate engraver who learned Rust in a weekend and could not stop seeing Feistel networks in the rosettes of a dollar bill. This is **not cyberpunk**. There is no green matrix rain, no neon katakana, no dystopian menace. This is **statecraft aesthetic** -- the aesthetic of the Bank for International Settlements reports, Deutsche Bundesbank engravings, Swiss franc security features, and the quiet confidence of institutions that have outlasted empires. The tone is **monumental yet intimate** -- the way a single banknote, held to a desk lamp, reveals a whole watermarked face. The site must evoke three overlapping truths simultaneously: (1) **money is memory** -- a ledger of social trust encoded in paper, metal, and now cryptography; (2) **every currency is a text** -- a document promising a sovereign's word, written in a specific typographic dialect; (3) **digital is not intangible** -- the CBDC has texture, weight, provenance, and craft, even when it exists only as a commitment hash. ## Layout Motifs and Structure The layout is structured as **an engraving plate being pressed onto paper, stroke by stroke** -- content does not "load," it is *struck* into the page, ink ridge by ink ridge, the way an intaglio printing press transfers image through pressure. This is the governing metaphor for every transition, every reveal, every interaction. **Primary Structural Motif: The Guilloché Spine** Running down the exact geometric center of the viewport is a vertical **guilloché ribbon** -- a 64px wide strip of continuously generated rose-pattern engraving, rendered as animated SVG using parametric Lissajous curves. This ribbon is the site's spine. It is never interrupted. All content flows *around* it, never over it, as if the spine were a raised embossment on a banknote and the content were the regions between security features. Sections attach to the spine on alternating sides, like engraved vignettes on a bond certificate. **Composition Grid:** - **12-column base grid** with exaggerated gutters (40px mobile, 80px desktop) to evoke the margins of engraved bond paper. - **Baseline grid of 12px** -- every line of text sits on this baseline, aligned with the precision of a plate engraver's ruling machine. - **Asymmetric vignette placement**: content blocks are framed in ornamental cartouches (SVG-drawn) that sit at intentionally irregular positions, echoing the placement of portrait medallions, denomination numerals, and seal imprints on historical currency. - **Watermark Hero Zone**: the opening viewport is dominated by a single, enormous, semi-transparent watermark portrait -- but the "portrait" is an abstracted face composed entirely of microprint, like a Chuck Close mosaic where each pixel is a line of BIS policy text at 5pt. **Depth Model: The Four-Plate Press** Banknote printing traditionally uses multiple plates -- offset background, intaglio foreground, letterpress serial numbers, optically-variable foil. The site replicates this by rendering content at **four distinct z-planes**, each with its own parallax speed and its own visual treatment: 1. **Underprint plane** (z = -3, parallax 0.2): the guilloché pattern field, a continuous rosette lattice covering the entire background at 8% opacity in Vault Green (#0f3a2e). 2. **Offset plane** (z = -1, parallax 0.5): large typographic elements and denomination-style numerals rendered in pale Parchment Cream (#f4ecd8). 3. **Intaglio plane** (z = 0, parallax 1.0): the main content -- body text, headings, cartouches -- rendered as if embossed, with subtle box-shadow ridges. 4. **Foil plane** (z = +2, parallax 1.4): interactive elements, hover states, and the "optically variable" accents that shift hue as the cursor (or device orientation) moves. **Section Flow:** - **Seal of Authority** (hero): the masthead. Features a custom SVG "central bank seal" that is actually the cbdc.studio wordmark engraved inside concentric guilloché rings. A slow rotation (one full turn per 240 seconds) gives it the feel of a slowly-spinning hallmark under glass. - **The Denomination Gallery**: a horizontal procession of conceptual "banknotes" for ideas -- programmability, privacy, offline resilience, interoperability. Each note is rendered at full banknote aspect ratio (approximately 2.5:1) and is scrolled into view as if being pulled from a currency sleeve. - **The Watermark Manifesto**: a centered typographic section where the studio's thesis appears letter by letter, each glyph appearing first as a translucent watermark ghost and then "intaglio-pressing" into full ink opacity. - **Serial Ledger**: a continuously animated marquee of hex commitment hashes, issuance timestamps, and faux-BIC codes scrolling horizontally -- a monetary heartbeat. - **Plate Archive**: a grid of small engraved "plates" (projects, essays, prototypes) rendered as detailed SVG vignettes rather than photos. - **Colophon & Mint**: the footer, styled as the "mint mark" corner of a banknote, with the domain itself engraved in a roundel and the studio credentials set in micro-engraved text readable only on hover-zoom. **AVOID entirely:** CTA buttons styled as "Buy now," pricing tables, statistics grids, feature comparison cards, testimonial carousels, "Powered by" logos. No element of this site should resemble a SaaS landing page. ## Typography and Palette **Typography:** - **Display / Masthead**: "Cormorant Infant" (Google Fonts) at weight 500 -- a serif with the formal engraved quality of banknote script but with humanist warmth in its terminals. Used at clamp(3rem, 8vw, 6.5rem) with letter-spacing: 0.04em. The soft italic variant is used for denomination-style phrases. - **Secondary Display / Denomination Numerals**: "Unifraktur Maguntia" (Google Fonts) -- a blackletter revival, used sparingly and only at very large sizes (8rem+) for numeric figures that should evoke the gothic numerals on old sovereign bonds. This is the site's "security feature" -- surprising, archaic, and instantly distinctive. - **Body / Running Text**: "Cardo" (Google Fonts) at 17px/1.7 -- a Renaissance-inspired serif with optical sizing that handles extended reading gracefully. Cardo carries the bookish scholarly weight appropriate for institutional writing. - **Micro / Engraved Detail**: "JetBrains Mono" (Google Fonts) at 11px with tight letter-spacing (-0.02em). Used for serial numbers, commitment hashes, issuance timestamps, and the "microprint" layer woven through backgrounds. - **Ornamental Accents**: "Italianno" (Google Fonts) -- a formal copperplate script, used only for signatures, seal inscriptions ("Bearer on Demand"), and the ornamental tagline under the masthead. **Typographic Treatments:** - **Drop Cap Engravings**: every major section opens with a drop cap rendered as if engraved -- filled with a fine guilloché hatch pattern generated via SVG, flanked by floral flourish vignettes. - **Small Caps for Authority**: institutional terms (SOVEREIGN, RESERVE, BEARER, HASH) are rendered in small caps with 0.08em tracking. - **Micro-Kerned Numerals**: monetary-style numerals use tabular figures with vertical hairlines between every thousand, as on 19th-century ledger paper. **Palette: The Vault Greens and Ink Blacks** The palette is drawn directly from the actual inks used on sovereign paper currency -- never from the neon wheel of crypto branding. Nine carefully measured hues: - **Vault Ink** `#0a1410` -- the blackest green, used for primary text and intaglio linework. Not true black; it carries the olive memory of iron-gall ink. - **Vault Green** `#0f3a2e` -- the deep treasury green of US currency backs, used for the guilloché spine and background engravings. - **Sovereign Moss** `#2d5a3d` -- mid-tone green for secondary linework and borders. - **Parchment Cream** `#f4ecd8` -- the site's primary background, the color of 120gsm cotton-linen bond paper, warm and matte. - **Aged Bond** `#e8dcc0` -- a secondary parchment tone used for cartouche interiors and card backgrounds. - **Seal Crimson** `#8b2020` -- used exclusively for the seal, the one accent of authoritative red, like the wax seal on a treasury document. - **Foil Gold** `#b89a54` -- the "optically variable" accent, used for hover states and foil-plane elements. Never used flat -- always applied as a subtle linear-gradient from `#b89a54` to `#d4b876` to simulate directional light on metallic foil. - **Copper Intaglio** `#8a4a2a` -- used for secondary illustrative linework in vignettes, the color of copper-plate bite. - **Microprint Gray** `#6a6458` -- the warm gray of illegible micro-text, used for metadata and timestamps. **Palette Rules:** - The bright saturated neons of cryptocurrency (electric purple, bitcoin orange, lime green) are **forbidden**. - Gradients are used **only** for foil-effect elements (max 3 stops, always warm metallic range). - White (#ffffff) never appears -- only parchments. ## Imagery and Motifs **No photographs. No stock. No 3D renders. No icons from an icon set.** Every visual element is either a hand-constructed SVG vignette or a procedurally-generated engraving pattern. The site's imagery is entirely in the line-art tradition of currency engraving. **Core Visual Motifs:** - **Guilloché Rosettes**: the signature motif. Parametric Lissajous-style curves generated in JavaScript using the equations x(t) = A * cos(a*t + φ) and concentric phase-shifted superpositions. The site includes three rosette densities -- coarse (for backgrounds), medium (for cartouche fills), fine (for drop cap backgrounds) -- each generated live at page load with a seed derived from the hour of the day, so the patterns shift imperceptibly across visits. - **Cartouches**: every major content block is framed by an ornamental SVG cartouche in the style of 19th-century bond certificates -- acanthus leaf corners, scrollwork edges, rule-and-ornament borders. The cartouche elements are hand-drawn in Inkscape and included as inline SVG so they can respond to CSS hover states (line-weight changes, subtle rotations of corner flourishes). - **Portrait Microprints**: the hero watermark is a portrait-silhouette (abstract, non-specific -- a neutral allegorical figure like "Justice" or "Liberty" but resolutely genderless and non-specific) rendered entirely from repeated micro-text. On hover-zoom, the portrait decomposes into its constituent words. - **Denomination Numerals**: every conceptual "banknote" section features an enormous engraved numeral (a year: 2026; a policy figure: 0.00001) treated with the characteristic crosshatched shading of currency numerals -- built as layered SVG paths with stroke-dasharray animation on reveal. - **Rosette Seal**: a continuously-rotating emblem in the masthead, combining concentric guilloché rings with the domain wordmark engraved in its center and microprint running around its perimeter like the edge-inscription on a sovereign coin. - **Intaglio Ridges**: interactive elements show a subtle raised-ink effect -- a 1px dark inner shadow on the top-left and a 0.5px cream highlight on the bottom-right, creating the illusion that the element is embossed into the parchment. - **Thread Security Strip**: a vertical broken line on the far-left edge of desktop viewports, mimicking the security thread embedded in paper currency. It contains micro-text that spells out the current page's canonical hash, updating on navigation. - **Commitment Hash Typography**: wherever hash values appear, they are formatted in groups of four hex characters separated by hairline rules, mimicking the way serial numbers are formatted on currency with decorative dividers. - **Foil Optical Variability**: any hovered link or button applies a subtle iridescent gradient that shifts along a warm axis (gold -> bronze -> copper) as the cursor moves across it, emulating the optically-variable ink on modern banknotes. Implemented with CSS conic-gradient and a cursor-position CSS custom property. **Decorative Grammar:** - **Acanthus Flourishes** punctuate section breaks -- small ornamental SVG sprigs in Copper Intaglio. - **Hairline Rules** (0.5px Microprint Gray) separate content elements, never thicker borders. - **Serpentine Lines** run horizontally beneath major headings, drawn as single continuous curves with variable stroke width. ## Prompts for Implementation **Single Continuous Narrative, No Pages:** The entire studio is **one vertical scroll** -- no multi-page navigation, no router. The visitor enters at the Seal of Authority and descends through the full document-length artifact, which should feel cohesive as a single engraved bond certificate. Implement smooth scroll with CSS `scroll-behavior: smooth` and use Intersection Observer for all section-level reveals. **The Intaglio-Press Reveal (Core Animation):** Every text block, when entering the viewport, should animate with the **intaglio press** reveal: the text begins at `opacity: 0.15` rendered in Aged Bond color (the "watermark" state) and transitions over 1400ms with `cubic-bezier(0.16, 0.84, 0.44, 1)` to full opacity in Vault Ink, with a simultaneous `filter: blur(3px)` animating to `blur(0)`. This simulates the moment of ink transfer from plate to paper. Critical: stagger the letters with a 24ms delay per character using CSS `animation-delay: calc(var(--char-index) * 24ms)` so the text presses in left-to-right as if a hand-cranked platen press were moving across the page. **Guilloché Generator (JavaScript Module):** Write a module `guilloche.js` that generates SVG rosette patterns parametrically. Inputs: amplitude A, frequencies a & b, phase φ, rotation turns N. Output: an SVG `` string. Use this to render the spine pattern, cartouche fills, drop cap hatching, and background underprint. Cache generated patterns in `sessionStorage` keyed by parameter signature for performance. **The Watermark Portrait:** Commission or construct a single SVG allegorical portrait (roughly 600x800 path coordinates) and write a script that renders the portrait by placing micro-text along the contour paths using ``. The text content should be the full text of the studio manifesto, flowing along the portrait's outline. On hover, the portrait should dim its fill while the text becomes legible via a filter that lifts its opacity. This is the masthead's centerpiece. **Foil Cursor Interaction:** For all interactive elements, track `mousemove` and update CSS custom properties `--cursor-x` and `--cursor-y`. Use these in a `conic-gradient` with a three-stop warm metallic palette. The gradient angle is computed from cursor position relative to the element's center. This gives every hoverable surface the quality of optically-variable ink -- color shifts with viewing angle. **Security Thread Path Animation:** Use `stroke-dasharray` and `stroke-dashoffset` on the left-edge security thread to animate its draw-in over 4 seconds on initial page load. The thread should "draw from top to bottom" as if being embedded. **Rotating Seal (CSS):** The masthead seal rotates continuously at `animation: seal-rotate 240s linear infinite`. On hover, it should **not** speed up -- instead, the microprint around its edge should *brighten* and become legible. Restraint is the point: this is an official seal, not a spinner. **Sound Design (Optional, Muted by Default):** If the visitor enables audio (a single tiny speaker icon in the colophon), ambient sounds play: the faint hum of a mainframe, the distant rhythm of a printing press, the rustle of paper. No music. This is monastery audio, not lobby music. **Typography Delivery:** Load `Cormorant Infant`, `Unifraktur Maguntia`, `Cardo`, `JetBrains Mono`, and `Italianno` from Google Fonts via `` with `font-display: swap`. Subset aggressively -- Unifraktur Maguntia is used only for numerals, so load only numeral glyphs if possible. **No Scroll Snap:** The visitor reads continuously; scroll-snap fragments the experience. Allow free scroll. **Mobile Treatment:** On narrow viewports (<768px), the guilloché spine collapses to a 12px-wide vertical strip on the left edge, and cartouches become full-bleed but retain their ornamental corners. Unifraktur numerals reduce to 4rem max. The security thread vanishes; the rosette background reduces to 4% opacity to preserve body text contrast. **Dark Mode is Not Implemented.** This site is parchment, always. A dark-mode would betray its fundamental material commitment. Respect `prefers-color-scheme` only to slightly deepen the Parchment Cream toward `#ede3cb`, never to invert. **AVOID, explicitly:** - Cryptocurrency iconography: no Bitcoin logos, no Ethereum diamonds, no blockchain cube-stacks. - Neon gradients, glowing buttons, lens flares. - Feature comparison tables, pricing tiers, testimonial carousels. - "Contact us" CTA mega-buttons. - Stock photography of skyscrapers, handshakes, dashboards, or anyone in a suit. - Emoji, modern flat icons, Material Design motifs. ## Uniqueness Notes **Differentiators from other designs in this corpus:** 1. **Security-printing aesthetic over cyberpunk**: the overwhelming default for "digital currency" sites is neon cyberpunk or fintech gradient-glass. This design refuses both. Instead it draws from the 200-year material history of sovereign paper currency -- guilloché, intaglio, watermarks, optically-variable ink, microprint -- treating CBDC as the next material chapter rather than as a repudiation of paper. No other design in the corpus is built on this historical-craft foundation. 2. **The Guilloché Spine as structural element**: a single continuous vertical SVG pattern that runs the full height of the document, acting as both ornament and architecture. Content attaches to it on alternating sides. This is a layout primitive not present anywhere else in the corpus -- it is neither a sidebar, nor a centered axis, nor a timeline, but an engraved ribbon. 3. **Unifraktur Maguntia for denomination numerals**: the deliberate use of blackletter numerals alongside humanist serifs creates an unmistakable typographic signature. The corpus shows 30% serif-classic and 42% humanist adoption but essentially no use of blackletter, and never for numeric glyphs specifically. 4. **Portrait-from-microprint watermark**: the hero features an allegorical portrait rendered entirely from micro-text along contour paths. This is a specific, labor-intensive typographic construction, not a generic hero image. 5. **No photography, no 3D renders, no icon fonts**: almost all sites in the corpus (94% photography frequency) rely on photographic imagery. This site is purely engraved line-art, hand-drawn SVG, and procedurally-generated guilloché. Every pixel is ink. 6. **Monumental restraint, not mysterious-moody**: where 42% of corpus sites reach for "mysterious-moody," this site reaches for **institutional gravitas** -- the solemn confidence of a treasury, not the edgy withholding of a cyberpunk boutique. The difference is that this site *explains itself* with scholarly clarity, just in extraordinarily beautiful dress. **Documented chosen seed/style:** holographic 3d product -- reinterpreted as **optically-variable foil** on sovereign-currency security printing, replacing the typical holographic-3d-render reading with a material-history reading of the same term. **Frequency analysis compliance:** - AVOIDS overused patterns: no corporate aesthetic (90% overused), no card-grid layout (94%), no centered layout dominance (88%), no photography (94%), no gradient-heavy palette (98%) -- gradients are reserved exclusively for foil elements, and warm palette (96%) is subordinated to the strictly constrained vault-green-and-parchment duo. - PREFERS underused patterns: layered-depth (32%) -- fully embraced via the four-plate-press model; elegant-serif (6%) -- chosen for display; sepia-nostalgic sensibility adapted to a parchment-cream base; micro-interactions (12%) -- adopted via foil cursor effect; path-draw-svg (30%) -- used for security thread and numerals. - Typography diverges from 90% mono dominance by using mono only for serials/micro-detail, with serif display (Cormorant Infant) and blackletter numerals (Unifraktur) carrying the primary typographic voice.