# Design Language for cbdc.study ## Aesthetics and Tone cbdc.study is conceived as **an axonometric anatomy of programmable money** -- a site that treats Central Bank Digital Currency not as a product to be marketed, nor as a policy to be debated, but as **a machine to be disassembled on a drafting table**. The visual language is drawn from three deliberately unfashionable sources: the exploded-view engineering plates of the 1956 *Eames Office: A Communications Primer*, the pale blue grid paper of mid-century IBM systems manuals, and the axonometric isometry of 1970s Dutch schoolbook illustrations (Fred Leeman, Joost Swarte lineage). The site reads as a **working study** -- the intellectual equivalent of a cadaver lab for a financial instrument -- rather than a pitch. The tone is **scholarly-intellectual** with a streak of **zen-contemplative** patience. The visitor is not a customer. The visitor is a student at a long oak table in a reading room that smells faintly of ozone and graph-paper pulp. Pages do not "sell." They *explain*, with the unhurried deliberation of a monograph whose author assumes you will return tomorrow. The atmosphere is calm, blueprint-cool, slightly cold -- a temperature you associate with a university library basement where the humidity is held steady for the rare-book collection. There is no urgency. There is no gamification. The site refuses the entire vernacular of "crypto UX" -- no neon candles, no price tickers, no Discord green, no rocket emoji, no mascot, no hero-cta -- and instead commits fully to the visual grammar of a reference textbook. The governing metaphor is **the plate** -- in the bibliographic sense: a foldout illustration bound into a scholarly volume, often labeled "Plate IV" or "Fig. 22," depicting a mechanism exploded into its constituent parts, each part numbered and keyed to a caption in the margin. The entire site is a sequence of plates. Every screenful of content is a plate. The reader turns plates, not pages. ## Layout Motifs and Structure The site refuses the card-grid, the bento-box, the dashboard, the hero-cta, and the split-screen -- the five most overused compositions in the corpus. Instead it commits fully to an **isometric plate layout** built on a **30-degree axonometric grid** where every structural element sits in strict cavalier projection. **The Drafting Grid.** The entire viewport is underlaid by a faint cyan grid at 8px minor / 64px major, printed in `#BFD4DE` at 12% opacity on a cream #F3EEE2 ground -- the exact tonal pairing of engineering vellum. The grid never scrolls away. It is the page underneath every plate, and content is "drawn onto" it in dark graphite ink. At the top-left of every plate, small rotated engineering callouts read `PL. I`, `PL. II`, `PL. III` in sequence -- the plates are numbered in roman. **Axonometric Primary Canvas.** The central device on the landing plate is a **large isometric exploded-view** of a CBDC transaction, rendered entirely in SVG line-art at a 30/30/90 axonometric projection. Nine stacked "layers" -- Holder, Wallet, Ledger, Issuance, Settlement, Interbank, Reserve, Policy, Sovereign -- float vertically, separated by dashed leader lines, each numbered 1 through 9 in tiny serif numerals. On scroll, the layers **separate** further (parallax that increases exploded-view distance) and **rotate** subtly (no more than 3 degrees) as the reader descends. This is the visual thesis: money has strata, and this is the cross-section. **Reading Column Bound to the Right Margin.** Long-form text is kept to a 440px reading column anchored to the right third of the viewport, like the letterpress body column of an 18th-century folio. The left two-thirds are reserved for plates, diagrams, leader lines, and marginalia. This hard asymmetry is the core compositional rhythm, and it is held throughout -- every section inherits the same ratio, so the reader's eye learns where the "drawing" is and where the "text" is within the first scroll. **Marginalia Rail.** Between the plate zone and the reading column runs a narrow 80px rail of **margin notes**: tiny mono-typed annotations (9pt JetBrains Mono), drawn leader lines terminating in small circles, page-edge symbols (`§`, `¶`, `‡`), and the occasional hand-drawn correction mark (a blue pencil caret). These are not decorative -- they are keyed to numbered parts inside the adjacent diagram, a working reference system. **Ten Plates in Sequence.** The entire site is ten plates, stitched by `scroll-snap-type: y proximity`: 1. **PL. I -- Frontispiece.** Title page, author imprint, a single exploded axonometric of a coin being taken apart. 2. **PL. II -- Taxonomy.** A classificatory diagram of monetary forms rendered as a Linnaean tree. 3. **PL. III -- Anatomy of a Token.** The exploded nine-layer canvas. 4. **PL. IV -- The Ledger.** Isometric stack of transparent ledger sheets, each annotated. 5. **PL. V -- The Issuance Path.** A schematic flow diagram drawn as though it were the plumbing plan of a building. 6. **PL. VI -- Jurisdictions.** A Mercator-stripped flat world map with pins rendered as 3d isometric pushpins. 7. **PL. VII -- Interoperability.** Axonometric gear-train showing how ledgers mesh. 8. **PL. VIII -- Privacy Geometry.** A formal diagram of anonymity sets drawn as nested polyhedra. 9. **PL. IX -- Failure Modes.** An exploded view of an idealized CBDC that has come apart on the page. 10. **PL. X -- Colophon.** The bibliographic end matter: paper stock, ink, typeface, print run of 1. ## Typography and Palette **Typography** (Google Fonts only, verified): - **Display / Plate Titles:** **"Libre Caslon Text"** -- a digitization of Caslon with the slightly soft counters of mid-century trade-book composition. Used at `clamp(2.2rem, 6vw, 5rem)` for plate numbers and titles, weight 700 for the number, weight 400 italic for the subtitle. Tracking loosened to `+0.02em` to evoke letterpress set with generous leading. - **Body / Reading Column:** **"Source Serif 4"** -- a contemporary workhorse serif with excellent on-screen rendering and broad Latin coverage. Set at 17px with a generous 1.7 line-height. Measure kept strictly at 62 characters. This is the typeface of the monograph itself. - **Captions, Callouts, Small-Caps Labels:** **"IM Fell English SC"** -- a small-caps old-style face revived from 17th-century English types. Used for figure captions ("FIG. 14 -- THE SETTLEMENT LAYER, EXPLODED"), marginal headings, and the running footer. Set at 11px with letter-spacing +0.08em. - **Leaders, Annotations, Margin Notes, Part Numbers:** **"JetBrains Mono"** at weight 300, 9.5pt. Every leader line terminates in a JetBrains Mono numeral. Every margin note is set in it. This is the only mono in the palette, and it is the typographic signal of "technical" within the composition. - **Drop Caps (first plate only):** a single enlarged **"UnifrakturMaguntia"** initial at the opening frontispiece -- a single concession to the incunabulum tradition, used *once*, then never again. **Palette** (exact hex values): - `#F3EEE2` -- **Vellum Cream**. The page. Every plate sits on this ground. It is neither white nor yellow -- it is the color of 80gsm drawing vellum under a tungsten lamp. - `#1B2430` -- **Graphite Ink**. The primary text color and the color of all linework. Not black. A very dark desaturated blue-graphite that reads as *drawn* rather than *printed*. - `#BFD4DE` -- **Engineer Cyan**. The grid, the leader lines, the technical blueprint notations, the faint under-drawing of every figure. A pale desaturated cyan that evokes diazo blueprint paper without saturating into the stereotype. - `#9B2C2C` -- **Rubricator Red**. Used only for correction marks, emphasis, and marginal obelisks. A muted iron-oxide red, never a pure red. The "red ink" of a scholarly editor. - `#C9A24A` -- **Gilt Accent**. Applied *once* on the frontispiece, as the letterform of the title. A restrained old-gold for the imprint. - `#5E6470` -- **Stone Grey**. Secondary text, captions, faded leaders. A warm grey that holds its own against the cream. - `#E8DBC0` -- **Overleaf Wash**. A slightly darker cream used for alternating plate backgrounds, to suggest the verso of a bound folio. No gradient. No photograph. No duotone. No neon. No glass. The palette holds seven values and adds no more. ## Imagery and Motifs **No photographs. No stock. No 3D renders. No icon-set glyphs.** Every image on the site is a **line-art SVG drawing** in one of three formally-defined modes: 1. **Axonometric Exploded Views.** The signature motif. Always drawn on the 30/30/90 isometric grid, always in `#1B2430` 1.25px stroke on `#F3EEE2` ground, always with dashed leader lines (`stroke-dasharray: 2 3`) connecting numbered callouts to parts. Shadows are never filled -- only implied by crosshatching at a fixed 45-degree lay angle, stroke-width 0.4px. 2. **Schematic Flow Plates.** When showing transaction flow, issuance path, or settlement, diagrams are drawn as though they were the plumbing schematic of a building -- right-angled pipes, union-joint symbols borrowed from mechanical engineering notation, numbered stations, and flow arrows rendered as thin filled triangles, never emoji or font-symbols. 3. **Linnaean Taxonomic Trees.** Classifications of monetary forms (commodity, fiat, scrip, e-money, stablecoin, CBDC-retail, CBDC-wholesale) are drawn as a formal botanical phylogeny -- not an org chart. Each node is a small hand-drawn leaf-glyph; each branch is a single unbroken curve rendered with variable stroke-width to simulate flexible nib. **Recurring Motifs:** - **Leader Lines.** Thin dashed rules with a small open circle at the callout end and a filled triangle at the figure end. These are a visual constant -- they appear on every plate, connecting text to image. - **The Correction Caret.** A small `#9B2C2C` insertion caret drawn by hand, appearing once per plate in the marginalia -- a subtle sign that this is a *working* manuscript, not a finished polished asset. - **Folio Numeration.** Bottom outer corner of every plate, a running head: "CBDC.STUDY -- PL. III -- FOL. 14r" in small caps. The "r" and "v" (recto / verso) alternate between plates to reinforce the bound-volume conceit. - **Registration Marks.** At each plate corner, tiny cyan registration crosshairs (`+`) suggesting the plate was printed in three-color alignment. These are the only decorative flourish permitted. - **The Bookplate.** On PL. I, a small ex libris plate bears an axonometric drawing of a simple octahedron and the legend "EX BIBLIOTHECA STUDII MONETAE DIGITALIS." This is the site's signature mark and it recurs in microform on the colophon plate. - **Watermark Beneath the Vellum.** A very faint (opacity 4%) repeating wordmark "CBDC STUDY" in IM Fell Small Caps, rotated 45 degrees, tiled across the entire page background -- visible only at close inspection, the way a watermark is only visible when a page is held up to light. ## Prompts for Implementation **Build it as a monograph, not a landing page.** The implementation brief is: construct a ten-plate, single-vertical-scroll artifact that reads like a scholarly foldout-plate volume. There is no navigation bar, no footer CTA, no mobile app link, no newsletter signup, no pricing table, no testimonials, no FAQ, no "contact us." None of these exist in the source material of 1950s systems manuals or 18th-century folios, and they do not exist here. Resist every reflex to add them. The only navigation affordance is a small **plate ribbon** fixed to the left edge, showing ten tick marks -- I through X in roman -- that fill in as the reader descends. Tapping a tick scrolls to that plate. **Draw on the page, do not print to it.** Every exploded view, every leader line, every taxonomic branch must *draw itself in* via `stroke-dasharray` + `stroke-dashoffset` animation, timed to Intersection Observer entry. A plate's linework should take 1.8 to 2.4 seconds to complete its draw -- slow enough that the reader sees the geometry being constructed, fast enough that the plate is ready before scroll completes. Use `cubic-bezier(0.33, 1, 0.68, 1)` (ease-out cubic) for the draw curve. Stagger child elements by 80ms. **The axonometric canvas on PL. III is the centerpiece.** Build it as a single 1200x900 SVG, nine exploded horizontal "slabs" each at the isometric projection, each labeled with a JetBrains Mono numeral and caption. On scroll from 40%-to-80% viewport, drive the vertical separation distance of each slab from `translateY(0)` to `translateY(exploded)` via `scroll-timeline` (with a JS `IntersectionObserver` + rAF fallback). The farther the reader scrolls, the more the token comes apart. Near the bottom of the plate, it is fully disassembled. This is a scroll-driven narrative animation and is the single most important interaction on the site. **Respect the margin.** The right-third reading column must never expand to fill the page, even on ultra-wide monitors. On 1440px+, the plate zone grows; the reading column stays at 440px. On narrow (<768px) viewports, the structure reflows: the plate falls above the text, margin notes collapse into a `
` disclosure called "MARGINALIA" set in IM Fell SC, and the isometric grid background remains. Do not abandon the aesthetic on mobile -- reduce it with discipline. **Marginalia are interactive.** Each numbered part in every plate has a hover state: the corresponding margin note fades from 40% to 100% opacity, and a cyan leader line draws from margin to part over 320ms. Reverse on mouse-leave. On touch devices, tapping a numbered part performs the same action and locks until another part is tapped. **Typography settles, never bounces.** All text entrance animations are a slow fade plus a tiny downward translate (12px → 0) over 900ms with no bounce, no elastic, no overshoot. The governing physical metaphor is ink settling into paper, not UI elements springing in. Avoid all "bounce," "wobble," "elastic," and "magnetic" affects. This is a library, not a playground. **The frontispiece is silent.** PL. I opens with only the title "CBDC.STUDY" in Libre Caslon at `clamp(4rem, 14vw, 12rem)`, the subtitle "A Working Monograph on the Anatomy of Programmable Money" in italic below, and a single small axonometric octahedron drawing itself. No scroll prompt, no "welcome," no animation on the title itself other than a 2.4 second fade-in. The reader is trusted to scroll. **The colophon is the only page with metadata.** PL. X lists, in the bibliographic convention of a fine-press book: typefaces used (with their historical source), page dimensions, paper stock (fictional -- "Mohawk Superfine Eggshell, 80lb text"), press run ("one, ongoing, revised without notice"), and the hand-drawn pressmark. This is the only page on the site that approaches self-reference. It replaces what would normally be a "footer." **Cursor as stylus.** Replace the default cursor with a small cyan crosshair reticle over the plate zone (`cursor: crosshair`), and with a slim vertical text-beam over the reading column. This microaffordance reinforces that the left is for drawing-observation and the right is for reading. Do not use a custom cursor image -- the native crosshair is precisely correct. **No sound, no video, no 3D.** The site is silent. There is no audio reactive, no video background, no WebGL, no Three.js. All motion is 2D vector line-draw and scroll-driven translate. This constraint is not a limitation -- it is the aesthetic. ## Uniqueness Notes **Differentiators from the other designs in this corpus (including the two CBDC siblings):** 1. **The monograph-as-site, not the landing-page-as-site.** The 60 existing designs in the corpus almost uniformly treat the browser as a marketing canvas or a narrative room (see cbdc.bar's "speakeasy" metaphor, cbdc.studio's "security print shop" metaphor). cbdc.study alone treats the browser as a **bound scholarly volume**, a sequence of numbered plates with marginalia and a colophon. The controlling reference is a 1956 engineering primer and a 1720s folio, not a website. 2. **Isometric / axonometric as primary layout, not decoration.** Frequency analysis shows `isometric` at only 8% in aesthetic and no strong representation in layout. cbdc.study commits to 30-degree axonometric projection as the *primary compositional grammar* -- every diagram, every exploded view, every structural accent sits on the same isometric grid. No other design in the corpus builds this discipline at the layout level. 3. **Refuses all high-frequency patterns.** The site explicitly avoids: gradient (98% of corpus), card-grid (95%), warm palette (96%), parallax-heavy layering (53%), and mysterious-moody tone (48%). It adopts instead: cream/graphite/engineer-cyan only, a two-zone asymmetric plate layout, zero parallax beyond the single axonometric explode on PL. III, and a scholarly-intellectual tone held with zen-contemplative patience. 4. **Ten-plate structural grammar.** Sites in the corpus are typically organized as "sections" or "acts." cbdc.study is organized as numbered *plates* in the bibliographic sense, with roman numerals, folio recto/verso alternation, and a final colophon. No other design uses this bindery-derived structural vocabulary. 5. **Marginalia as interface.** The 80px marginalia rail -- with leader lines, part-number callouts, rubricator-red correction marks, and small-caps captions -- is a working navigation and annotation system borrowed from scholarly publishing, not from web UI convention. No other site in the corpus uses a margin as a primary interactive surface. 6. **Typeface selection is historical-philological, not trend-driven.** Libre Caslon + Source Serif 4 + IM Fell SC + JetBrains Mono is a stack chosen from four distinct historical moments (1720s Caslon, 2020s Source revival, 1680s Fell type at Oxford, 2020 JetBrains) -- a deliberate philological quartet rather than a trend-matched superfamily. The result reads as a working scholar's library, not a design system. 7. **No CTA, no pricing, no testimonial, no feature grid, no hero video, no footer, no newsletter.** This omission is itself the differentiator: the site is designed for an audience that has no need to be *converted*, only informed. It assumes the reader came to study, and it honors that assumption by refusing to interrupt them. **Chosen seed / style:** `isometric technical docs` (from seeds.json). This seed shows at roughly 8% aesthetic / near-absent layout adoption in frequency analysis, making it substantially underused. Secondary hybrid influences: `classic serif revival book`, `documentation clean slate`, and `vintage newspaper layout` -- all low-frequency seeds whose combination is not present in any other design. **Avoided patterns (per frequency analysis):** `gradient` (98%), `warm` palette (96%), `card-grid` (95%), `photography` imagery (95%), `scroll-triggered` in its typical parallax-heavy form (93%), `mono`-dominant typography in the terminal/code sense (91%), `corporate` aesthetic (91%), `centered` layout (88%), `mysterious-moody` tone (48%), and `bento-box` (25%). Each of these is explicitly rejected in favor of a cream-grounded, asymmetric, right-margin reading, graphite-line, scholarly-contemplative grammar.