# Design Language for cbdc.studio

## Aesthetics and Tone

`cbdc.studio` is **a small, hand-tended seedling nursery for monetary instruments** — imagine a wooden potting shed at the back edge of a national mint, where someone in a flax apron is repotting a nascent central bank digital currency the way they would repot a fig cutting. The acronym **CBDC** (central bank digital currency) is, in the conventional press, drawn as a slate-and-chrome dashboard full of waveforms, KPI tiles, and the cold blue palette of a settlement-system whitepaper. This site refuses every line of that visual contract. Here, a CBDC is **a living thing, propagated slowly, rooted in soil, kept on a south-facing windowsill, and observed across seasons**. The tone is **grounded-earthy** in the literal sense — the hand-feel of damp loam, the smell of cedar shavings, the slow patience of someone who knows that a healthy tap-root does not arrive in Q4.

The aesthetic is **muji** (Japanese: *mujirushi*, "no-brand") — the same anti-brand discipline that gave the world unbleached A6 notebooks, undyed cotton socks in seven shades of ivory, and minimalist storage modules sold by weight. Muji's rule is *the object should disappear into use*, and `cbdc.studio` extends that rule to its own surface: **chrome is removed, every gradient is unwoven, every shadow is set to a single soft 4-pixel offset, and ornament is reduced to the typographic equivalent of a folded raw-cotton hem**. There is no hero shot of a city skyline. There is no abstract blockchain animation. There is, instead, **one terracotta clay pot, one cutting in propagation, and the studio's unhurried voice in a generous-leaded paragraph**.

The mood the site asks the visitor to enter is the mood of a Sunday afternoon at a quiet plant fair in Fukagawa, Tokyo, in late October — sun is low and amber, every booth has its own piece of unbleached canvas as a tablecloth, the seller hands you a small earthenware cup of barley tea before answering your question, and **money, as a topic, becomes something you can hold in your hand and turn toward the light**. The site is the studio's plant fair booth. Visitors are not "users." They are guests asked to stay for tea.

The intellectual posture is the **slow-finance** posture: that the design of national money is closer to soil chemistry than to product launch. The studio's animations move at the speed of a leaf settling. Every interaction is **patient, returnable, never urgent**. Nothing on the site argues. Nothing on the site converts. The studio is showing the visitor what it has been growing.

## Layout Motifs and Structure

The structural metaphor is **organic-flow** — specifically the **branching pattern of a fig sapling viewed from above**, where the trunk is the page's vertical axis and the branches are content sections that lean alternately left and right at irregular intervals. There is no grid. There are no rectangles. There is a **single soft column of breathing copy**, average width 600px, that **shifts its left margin by ±60px between sections** so that the whole page reads as a slightly meandering river of text rather than a stack of editorial blocks. The shift is governed by a hand-drawn cubic Bézier curve, baked at design time into a static SVG mask — **the page literally has a curving spine**, not a straight one.

**Seven flowing chapters, no nav, no anchor links, no progress bar.** The page unrolls top-to-bottom in seven sections, but the breaks between sections are **not horizontal rules and not whitespace alone** — they are **single botanical figures floating in the right margin**, each photographed from directly above against a sheet of unbleached muslin, duotoned to the site's two-color palette, sized to about 38% of viewport width on desktop. The figures are: **a clay seed pot (chapter 1, "What is being grown")**, **a single fig cutting in water (chapter 2, "The rooting protocol")**, **a tray of seven starter pots (chapter 3, "Pilot cohorts")**, **a pruned branch laid on linen (chapter 4, "What we cut, and why")**, **a soil sieve over a clay basin (chapter 5, "Filtering and remediation")**, **a glass propagator dome (chapter 6, "The closed-system tests")**, and **a finished potted fig in fruit (chapter 7, "Maturity")**. Each figure is the section's mnemonic; the chapter's body copy curls around it like soil around a root ball.

**The vertical rhythm is irregular by design.** Section heights range from `min-content` to `140vh`, and the sections never snap to viewport. Some chapters are dense (a long letter from the studio's founder, in `clamp(15px, 1.05vw, 17px)` body type); others are nearly empty (a single sentence floating above a single duotoned leaf). This breathing — **dense, thin, dense, thin** — is the page's heartbeat, and it is the only rhythm the visitor's scroll wheel will encounter.

**Top of viewport: a slow-fade fixed header, never sticky.** The wordmark `cbdc.studio` sits in the upper-left at `clamp(20px, 1.6vw, 26px)` in **Fraunces 24pt-soft, weight 350**, with the dot before *studio* set as a hand-drawn 4-pixel circle slightly offset upward, like a single seed. There is no logo. There is no menu. There is, in the upper-right, a single line of running text in tabular figures: today's date in the Japanese imperial year (`令和八年五月四日`), set in **M PLUS 1p**, light, that updates only when the page reloads — a quiet reminder that this studio measures time in seasons, not sprints.

**Bottom of page: an unceremonious closing.** No "Get in touch" CTA-block. No newsletter capture. No social-proof grid. The page ends with **a single, hand-photographed clay tag**, the kind a nurseryman hangs from a sapling's branch, on which the studio's contact email is written in graphite pencil in a **Caveat** italic at native weight. The tag hangs from a length of jute string drawn as a single SVG path. That is the entire footer. The visitor's instinct is to lean down and read it.

**Mobile.** The branching layout collapses to a single 88vw centered column, the figures stack between sections at full width, and the curve in the spine reduces to a `±16px` lateral oscillation — preserved, not removed, because the curve is the site's signature. The header collapses the date but never the wordmark.

**Bias against every layout the corpus is full of.** No `centered` symmetric hero. No `full-bleed` photographic backgrounds (the imagery is small and figure-like, never edge-to-edge). No `dashboard`. No `bento-box`. No `card-grid`. The page has no card surfaces at all. **Cards are an architectural admission that content is interchangeable; this site insists its content is grown.**

## Typography and Palette

**Three Google Fonts, used softly.**

- **Display and editorial — [Fraunces](https://fonts.google.com/specimen/Fraunces)**, variable, axes SOFT (0–100), WONK (0–1), opsz (9–144). Used for the wordmark, chapter headings, and any pull-quotes. The chosen settings are **opsz 24, SOFT 70, WONK 0.4, weight 350** — a Fraunces that is **rounded at every terminal, slightly humanist in its letter-shaping, and never sharp**. Headings sit at `clamp(34px, 4.4vw, 64px)` with letter-spacing `-0.012em` and **leading 1.06**. The ampersand of the chapter heading "**Roots & remittance**" is set at **WONK 1.0** — the only optical wink in the entire site, a single charmingly off-kilter glyph the visitor finds at chapter 2.

- **Body — [Nunito](https://fonts.google.com/specimen/Nunito)**, weight 400 and 600. Nunito is the **playful-rounded** sans of the typography palette: **fully rounded terminals on every stroke, a circular dot on its lowercase i, a humanist x-height, and an overall feel of soft graphite on rag paper**. Body sits at `clamp(15px, 1.05vw, 17px)`, leading **1.78** (a generous "garden-row" leading that lets each line breathe), tracking `0.005em`. Paragraphs are indented `1.4em` on first line in chapters 2–6 (a quiet editorial cue from old natural-history monographs); chapters 1 and 7 use no indent, only paragraph spacing.

- **Handwriting — [Caveat](https://fonts.google.com/specimen/Caveat)**, weight 400. Used **only twice on the entire page**: once in chapter 4 for a marginal gloss in the founder's hand (the line "*we keep the cut wood, even when the branch fails*" floating in the right margin, hand-pencil grey, rotated `-3.5deg`), and once in the footer clay-tag. Caveat is the studio's pencil; it appears where graphite would naturally appear in a real nurseryman's notebook, and nowhere else.

**Palette: a strict duotone.** Two colors do all the work. Backgrounds, type, figures, lines, even the favicon — every visual element on `cbdc.studio` is rendered in exactly one of these two tones, or in a mathematically determined blend of them. The duotone is the site's discipline.

- **`--cotton`** — `#F4EFE6`. **Unbleached cotton, the muji-essential warm off-white.** It is not pure white (`#FFFFFF` would be sterile and chrome-adjacent — wrong for this studio); it has a 6% warm yellow undertone the way raw cotton has a 6% warm yellow undertone. This is the page background, the page's air, and the lighter half of every figure's duotone.

- **`--loam`** — `#3A2E22`. **Wet topsoil seen in a clay pot at noon.** Deep, warm, just barely cool enough to read against `--cotton` without feeling brown-on-brown. This is the body type color, the figure shadows, the rule lines, and the darker half of every duotoned photograph.

- **`--seedling`** — `#7B8C5C` (used very sparingly, **only as link color and as the single accent for hover states**). A dusty olive-green with a chlorophyll undertone. Used at perhaps 0.4% of pixel coverage across the entire page. Never used for backgrounds, never used for body text. It is the color of the cutting in the propagator.

- **`--clay`** — `#B8704A` (used **only twice**: once on the chapter-2 fig-cutting figure, and once on the chapter-7 fruiting-fig figure, as a third duotone tint for those two figures). A terracotta. The only orange the site ever shows. It is the color of the pot, never the background.

The palette discipline is **strict**: any element rendered must be one of `--cotton`, `--loam`, `--seedling` (link/accent only), or `--clay` (figure ornament only). No greys (`--loam` at 50% opacity is the only grey allowed). No blues, no chrome, no neon. The duotone-photography is **two-tone duotone, not three-tone tritone** — green-channel mapped to `--cotton`, blue-channel mapped to `--loam`, with the two clay-accented figures adding `--clay` only to highlights brighter than 80% luminance in the original photograph.

**Contrast checks at the typography level.** Body `--loam` on `--cotton` is **#3A2E22 on #F4EFE6**, ratio approximately 11.5:1 — comfortable, never glaring. Headings sit at the same ratio. Hover-state `--seedling` on `--cotton` is approximately 4.6:1 — soft on purpose, the way a chalkboard sign at a plant fair is soft.

## Imagery and Motifs

**Imagery is photography** — the corpus's most-used imagery type at 94%, and `cbdc.studio` does not run away from it. Instead, the site **uses photography in a way the corpus does not**: as **botanical-floral specimen plates, all duotoned, all top-down, all small, all photographed against unbleached muslin in single-source warm-amber lamplight**. The 94% of the corpus that uses photography is using it as background hero, lifestyle scene, and team portrait. None of those uses appear here.

**The seven specimen plates** (one per chapter):

1. **A small terracotta seed pot, empty, photographed top-down on muslin.** The clay rim is uneven by hand; one chip on the western edge. Duotoned `--cotton` and `--loam`. Caption set in Nunito 400 below the figure: *Plate I — Vessel.*

2. **A fig cutting in a glass tumbler of water, side-profile.** Three pale roots emerging from the lower 4cm of the cutting. Two leaves, one furled. Duotoned with `--clay` accent reserved for the pot's terracotta inner rim, just visible at the back of the frame. Caption: *Plate II — Rooting protocol.*

3. **A wooden seed-tray with seven starter cells, top-down.** Each cell holds a different stage of germination. Duotoned `--cotton` and `--loam`. Caption: *Plate III — Pilot cohorts, days 1–28.*

4. **A pruned fig branch laid horizontally on a linen napkin, with secateurs at the top of frame.** A single drop of sap on the cut. Duotoned `--cotton` and `--loam`. Caption: *Plate IV — What we cut, and why.*

5. **A circular sieve of dry potting soil over a wide clay basin.** Soil texture is visible at sieve resolution. Duotoned `--cotton` and `--loam`. Caption: *Plate V — Filtering, remediation, and the question of regulatory dust.*

6. **A bell-jar propagator dome over a single fig sapling.** Condensation droplets visible on the inside of the glass. Duotoned `--cotton` and `--loam`. Caption: *Plate VI — Closed-system tests.*

7. **A potted fig in late summer fruit, viewed from above.** Five figs, deep with `--clay` highlights, the leaves rendered in `--loam`. Duotoned with `--clay` accent on the figs only. Caption: *Plate VII — Maturity (Brown Turkey, year four).*

**No icon set.** No logos. No infographics. No data-visualization. **No charts.** Whatever a CBDC is supposed to look like in the trade press — the abstract globe, the chain of cubes, the digital coin viewed at three-quarters — none of it appears on the site. The studio's claim is that **all of those visualizations are wrong, because they show a money-thing as if it were already mature**, when in fact every CBDC alive in 2026 is a cutting in a glass of water.

**The motifs** (typographic, never visual): a single small **leaf-glyph** drawn as an SVG path, used as the section ornament between chapter heading and chapter body — a hand-drawn outline of a fig leaf, traced from a Brown Turkey fig leaf laid on a flatbed scanner at the studio in autumn, simplified to **78 control points**. The leaf appears seven times (once per chapter), each time at exactly the same size (28px on desktop), each time drawn in `--loam` stroke at 1.4px. **It is the only piece of iconography on the entire site.**

**Background texture.** None. No paper-grain overlay, no noise filter, no gradient mesh. **The cotton is the cotton is the cotton.** Browsers render `--cotton` as a flat color and that is the correct rendering. Adding texture would be the studio admitting it cannot trust the color.

## Prompts for Implementation

Build `cbdc.studio` as **a single long page, one HTML file, one CSS file, one JS file (≤ 140 lines)**. No framework, no bundler, no SSR, no analytics. The page is **a printed pamphlet from a slow-finance plant nursery**, and like a printed pamphlet, it does not depend on a network beyond the initial fetch.

**Bias every implementation decision toward the sensation of an unhurried hand-folded thing.** This is not a SaaS landing page. This is not a portfolio. This is not a manifesto. **It is a quiet conversation across a wooden counter.** Aim for the visitor to **slow down by the second paragraph** and finish the page sitting more still than they began.

**Storytelling structure (single vertical scroll, organic-flow):**

1. **Opening (chapter 1 — "What is being grown")**: One Fraunces heading. Three Nunito paragraphs. Plate I floats in the right margin at 38% viewport width, vertically centered against the third paragraph. The page's left margin is at its baseline `+0px`. The opening sentence is *"This studio grows central bank digital currencies the way other people grow figs — slowly, and only the ones that take."*

2. **Chapter 2 ("The rooting protocol")**: Heading. Five paragraphs. Plate II in the right margin (the fig-cutting in water — the only image with a `--clay` accent until chapter 7). Page spine shifts left by `-30px`. The ampersand in the heading **"Roots & remittance"** is rendered with Fraunces WONK 1.0 — the only wonky letter on the page.

3. **Chapter 3 ("Pilot cohorts")**: Heading. Three paragraphs, then a **slow-loaded list of seven cohort-rows**, each row a single line of body type listing a cohort name (e.g. *"Cohort III — eastern fjord pilot, week 14"*) with **bounce-enter** animation as the row scrolls into view: each row drops `+8px` from above on intersection, with cubic-bezier `0.34, 1.56, 0.64, 1` (a soft overshoot, like a leaf landing), one row every 90ms. Plate III in the right margin. Spine shifts back to baseline `+0px`.

4. **Chapter 4 ("What we cut, and why")**: Heading. Four paragraphs. The **Caveat marginalia** (founder's pencil note "*we keep the cut wood, even when the branch fails*") sits at `-3.5deg` in the right margin, replacing the figure for one screen-height. Plate IV appears two screens later. Spine shifts right by `+45px`.

5. **Chapter 5 ("Filtering and remediation")**: Heading. Six paragraphs (the densest chapter, set with `column-count: 1` but with a soft drop-cap on paragraph one — Fraunces WONK 0.6 at 4.2 lines tall, in `--loam`). Plate V in the right margin. Spine returns to baseline `+0px`.

6. **Chapter 6 ("The closed-system tests")**: Heading. Two paragraphs. Plate VI in the right margin, larger than the other plates (44% viewport), because the bell-jar wants room. Spine shifts left by `-60px` — the page's deepest leftward lean.

7. **Chapter 7 ("Maturity")**: Heading. Two paragraphs. Plate VII (the fruiting fig, `--clay`-accented) in the right margin. Spine returns to baseline `+0px`. The chapter ends with a single em-dash and the studio's clay-tag footer.

**Animation system — `bounce-enter` everywhere, but slowly.** The site's signature interaction is the **soft overshoot bounce-enter**, applied to every textual block as it crosses the viewport's `--reveal-line` (set at `30%` of viewport height from the top). The bounce uses cubic-bezier `0.34, 1.56, 0.64, 1`, duration `680ms`, transform `translateY(14px) → translateY(-2px) → translateY(0)`, opacity `0 → 1`. Crucially, **only one element bounces at a time** — the JS observer queues elements and releases them with a 90ms stagger so the page never feels like a single bulk reveal. The cohort-list in chapter 3 is the densest concentration of bounce-enter (seven in a row); everywhere else, bounces are spaced out by paragraph and feel like leaves arriving on a quiet afternoon.

**Plates fade-in slowly.** The seven specimen plates use a separate slower animation — `1400ms` opacity-only fade, no transform, no bounce — because plates are not jumpy living things; they are still-life photographs and should arrive like a hand placing them on the counter.

**Spine curve is rendered in CSS `margin-left` per section, not transform.** The `±60px` curve comes from a static lookup baked into the stylesheet:

```
section:nth-of-type(1) { margin-left: calc(50% - 300px + 0px); }
section:nth-of-type(2) { margin-left: calc(50% - 300px - 30px); }
section:nth-of-type(3) { margin-left: calc(50% - 300px + 0px); }
section:nth-of-type(4) { margin-left: calc(50% - 300px + 45px); }
section:nth-of-type(5) { margin-left: calc(50% - 300px + 0px); }
section:nth-of-type(6) { margin-left: calc(50% - 300px - 60px); }
section:nth-of-type(7) { margin-left: calc(50% - 300px + 0px); }
```

This is the page's spine, expressed as seven static numbers. **No JavaScript curves it; it is poured in concrete at build time.**

**Cursor.** Default cursor everywhere except the email clay-tag footer, where the cursor becomes a `text` cursor on the email itself (because the visitor is meant to select-and-copy it, not click it as a `mailto:`). **There is no `mailto:` link on the page.** That is intentional — the studio expects the visitor to type the email by hand, the way one would copy a phone number from a hand-painted shop sign.

**No scroll snapping.** No scroll-jacking. No keyboard shortcuts. No pinned headers. **The visitor is in command of the scroll.** The studio has set the page; the visitor walks at their own pace.

**No CTAs. No pricing block. No stat grid. No newsletter capture. No "as featured in." No team grid. No services list with chevrons. No FAQ accordion. No "Get started" button.** The page is **read** or **left**.

**Performance character (aesthetic, not measurement):** the page should feel like a **hand-bound chapbook** — slightly slow to leaf through on purpose, every page-turn a small ceremony. Plates lazy-load with native `loading="lazy"` and arrive at their fade-in only when scrolled to. There is no "wow, fast" moment in the visit; there is only the slow pleasure of reading.

## Uniqueness Notes

Three or more deliberate differentiators from the existing 56-design corpus, with frequency-analysis context.

1. **Muji aesthetic at 1% in the corpus — the rarest aesthetic key alongside `graffiti`, `zen`, and `light-academia`.** Across 56 sites, only one prior design used `muji`, and the corpus is dominated by `hand-drawn` (83%) and `editorial` (55%). Picking muji is picking the un-style — the discipline of removing every signature. The risk in muji is that it reads as "blank"; `cbdc.studio` resolves that risk by making the **emptiness itself doctrinal**: the unbleached cotton background is not absence, it is the studio's most opinionated material choice. Every removed gradient and missing ornament is a deliberate refusal of the central-bank-dashboard visual contract.

2. **Organic-flow layout at 1% in the corpus.** Of 56 designs, exactly one prior site uses `organic-flow`. The corpus's layout vocabulary is dominated by `centered` (94%) and `full-bleed` (89%) — the two most generic web layouts in existence. `cbdc.studio` rejects both. Instead, the page has **a literal hand-curved spine**, a sequence of seven left-margin offsets that make the page meander down the viewport like a footpath through a garden. The curve is baked, not animated, because **a real footpath does not move while you walk it** — it has been there since before the visitor arrived.

3. **Bounce-enter at 3% in the corpus, used here as the page's primary motion language.** The corpus is overwhelmingly `parallax` (92%) and `stagger` (71%) — both motion patterns of the SaaS marketing era. `bounce-enter` is at 3%, and `cbdc.studio` makes it the only motion verb. Every revelation on the page is a **soft overshoot landing**, the way a fig leaf settles on potting soil — never a parallax slide, never a glide, never a fade-in-only. The cubic-bezier `0.34, 1.56, 0.64, 1` is a deliberate slight overshoot; it is the difference between **arriving** (which is what `cbdc.studio` does) and **transitioning** (which is what every parallax site does).

4. **Duotone-only palette discipline.** While `duotone` is at 21% as a palette tag, the strictness here — **literally two colors do all the work, plus a 0.4% accent and a 2-figure-only tertiary** — is well outside the corpus's typical "warm gradient" reflex (`warm` at 98%, `gradient` at 92% are the corpus's two near-universal palette traits). `cbdc.studio` has **no gradients of any kind**: not on backgrounds, not on figures, not in CSS, not in hover states. The `--cotton` and `--loam` pair is a deliberate refusal of the gradient consensus.

5. **Botanical-floral motif used for a financial domain.** `floral-botanical` is at 7% in the corpus, and is almost always paired with cottagecore, wellness, or wedding-adjacent domains. Pairing it with **a central-bank-digital-currency studio** is the site's central act of resistance. The studio's claim — that monetary instruments are grown, not engineered — is delivered entirely through this motif choice. The fig is not decoration; the fig **is the argument**.

6. **Tone "grounded-earthy" against a corpus of `professional` (42%) and `friendly` (41%).** The corpus's tonal default is the LinkedIn-headshot-and-buzzword voice. `cbdc.studio` writes in the voice of **a third-generation nurseryman** — present-tense, plain-clause, never plural-management-we, never jargon. Sentences are short. Verbs do the work. There is no "we believe that" or "our mission is." The studio's voice is a hand on a wooden counter.

7. **Photography rendered at 94%-corpus-frequency but with an inverted use pattern.** Every other photography-heavy site uses photography as **background, hero, or scene-setter at full-bleed**. `cbdc.studio` uses photography as **small specimen-plate figures, never bleeding to edge, always against unbleached muslin, always top-down or side-profile, always duotoned to two colors, always captioned in italic Nunito**. This is photography as **18th-century botanical-monograph illustration**, not as 2020s SaaS-hero. The same imagery type, used with a 250-year-older grammar.

8. **No CTAs, no pricing, no stats, no team grid, no FAQ — the seven structural elements every other site is built on are entirely absent.** The page is structurally **a single chapbook**. The only "interactive" element is the email address on the clay-tag footer, which is rendered in Caveat italic and is **not a `mailto:` link** — the visitor selects-and-copies it by hand. The deliberate absence of any conversion surface is itself the most honest design statement on the page.

**Chosen seed (per assignment):**
- aesthetic: **muji**
- layout: **organic-flow**
- typography: **playful-rounded**
- palette: **duotone**
- patterns: **bounce-enter**
- imagery: **photography**
- motifs: **floral-botanical**
- tone: **grounded-earthy**

**Avoided patterns (frequency-driven):** `centered` (94%), `full-bleed` (89%), `parallax` (92%), `stagger` (71%), `hand-drawn` aesthetic (83%), `vintage` motif (91%), `mono` typography (96%), `warm` palette (98%), `gradient` palette (92%), `professional` tone (42%). Where the corpus reaches for these reflexively, `cbdc.studio` reaches for the opposite or the absent.
<!-- DESIGN STAMP
  timestamp: 2026-05-05T23:17:07
  domain: cbdc.studio
  seed: seed
  aesthetic: `cbdc.studio` is **a small, hand-tended seedling nursery for monetary instrument...
  content_hash: 9b4dfcc0f3f3
-->