# Design Language for blockchain.day ## Aesthetics and Tone blockchain.day is **The Tide Almanac of an Imaginary Ledger** — a surreal, magazine-spread meditation on the moment a chain of blocks dissolves into the chain of waves. The premise is poetic, not promotional: imagine a contemplative seaside almanac, the kind a retired oceanographer might leaf through on a foggy Wednesday in late spring, except every page secretly diagrams a distributed system. Each ocean swell is a block; each block is rendered as a hand-cut paper cliff floating mid-air over a wash of pale Aegean blue; the genesis block is a single grain of sand drifting through the gutter of the spread. The tone is **zen-contemplative** — at only 4% in the corpus (per `frequency.sh`), almost untouched. There is no urgency here. No "Buy now," no "Mint," no "Connect Wallet," no rocket emoji, no graph trending up-and-to-the-right. Instead the site whispers: a tide arrives; a tide recedes; in between, something has been recorded. The voice is that of a haiku translated by someone who has read too many Byzantine fault-tolerance papers and one too many Mary Oliver poems. Sentences are short. White space is allowed to mean *time passing*. The visitor is invited to **breathe between blocks**, literally — an unobtrusive 4-7-8 breath bar pulses at the foot of the page, paced to one inhalation per simulated block confirmation. The aesthetic spine is **surreal** (1% in the corpus — almost nobody is doing this) executed through **collage imagery** (5%) — a Joseph Cornell shadow-box meets a Hokusai tide-chart meets a 1970s academic primer on cellular automata. Cliffs hover above water; lighthouses stand on clouds; a Merkle tree grows out of a conch shell. Nothing is to scale. Nothing is anchored. Everything has been carefully cut from a different sheet of paper and pinned to a soft Aegean sky with the gentle conviction of a museum vitrine. The mood is *low tide on a Wednesday afternoon*: melancholy without sadness, curious without excitement, mathematical without rigor. The site refuses every cliché of its category. There is no logo of a cube. There is no chain-link icon. There is no node-graph. There are no ticker-style numbers counting up. There is no "TPS" anywhere. The word *cryptocurrency* appears nowhere on the site. **What appears instead:** seven hand-cut paper cliffs floating over a tidal pool, each cliff carrying one short paragraph about ledger-time as if it were tide-time, and one small typographic glyph that shakes — gently, like a cup of tea startled by a passing train — whenever the visitor's cursor crosses a particular threshold of stillness. ## Layout Motifs and Structure The composition is a **magazine-spread** (6% in the corpus), explicitly not a landing page. The screen is treated as *one open folio of a thick matte-paper journal*, viewed from directly above. The viewport is the spread; the gutter is a literal vertical band of unprinted paper running down the screen at exactly the **41.8% mark from the left edge** (one minus golden ratio, intentionally off-true to feel handmade). Content does not respect this gutter — it crosses it, leaks into it, and occasionally a wave-form motif rolls across it, dragging a sentence from the verso page onto the recto page mid-scroll. **The seven spreads (one per scroll-snap stop):** 1. **Spread I — *The Tide Mark*.** Verso: an enormous oversized number "0x00000000" set in geometric-sans, half-bled off the top edge, painted over the pale Aegean wash. Recto: one paragraph beginning "*A block is a tide-mark — the line a wave leaves on stone before retreating.*" In the margin, a small collaged conch shell, hand-cut, with a Merkle root scrawled inside in pencil. 2. **Spread II — *Genesis as a Grain of Sand*.** Centered across the gutter: a single sand-grain SVG, magnified 80× until its irregular edge becomes a continent. Around it: drifting captions in tiny geometric-sans, each captioned in two languages (English and a plausibly invented one called *Coastal*). 3. **Spread III — *The Lighthouse on the Cloud*.** Verso: a hand-cut paper lighthouse standing impossibly atop a low cumulus cloud. Recto: a five-line stanza on what consensus might mean to a fog-bound keeper. Below the stanza, the only interactive element on the spread: a small *bell* glyph that, when clicked, shakes (the **shake-error** pattern, 4% in the corpus, used here playfully as **shake-meditation** — a misnomer made gentle). 4. **Spread IV — *Seven Witnesses, One Wave*.** A horizontal frieze of seven tiny paper figures — a heron, a fisherman, a child, a stone monk, a seagull, a buoy, and a Byzantine general — each "signing" a passing wave with a hand-drawn pen mark. 5. **Spread V — *The Reorg as Ebb-Tide*.** A surreal landscape collage: the sea has retreated, exposing the *previous* state of the ledger as wet sand patterns and coral arrangements. A small caption explains, in zen voice, that finality is *what the tide forgets to take back*. 6. **Spread VI — *The Confirmation Breath*.** Almost empty — only the breath-bar at center, a single pale-coral horizon line, and one paragraph: "*Six confirmations is six breaths. Take them.*" Optional pacing animation: 4 seconds in, 7 seconds hold, 8 seconds out. 7. **Spread VII — *The Colophon*.** A flat-tide footer: who made this, in what year, on what tide, with which font; followed by a single hand-drawn anchor that sinks slowly off the bottom of the viewport when the visitor lingers. **Spatial relations:** every element is placed *off* a grid that the visitor never sees. The implicit grid is a 12-column Atlantic chart on which only two or three columns are ever populated per spread — the rest is honored white space the design protects with the seriousness of a Japanese tea ceremony. Negative space is roughly 62% of every spread by area; this is intentional and load-bearing. **Scroll behavior:** vertical scroll-snap with a long, fluid 1.6-second ease-in-out between spreads, slow enough that a reader feels the pages turn rather than swipe. Within a spread, micro-parallax is restrained: one paper layer drifts at 0.94× scroll, another at 1.06×, the wave layer at 0.98×. No cursor-follow. No magnetic. No tilt. The cursor is allowed to be a cursor. ## Typography and Palette **Typography — geometric-sans as the lead voice (1% in the corpus, almost virgin territory).** This design rejects the ubiquitous Inter/Space-Grotesk pairing and commits to a small drawer of Google Fonts that all share a common geometric construction. - **`Familjen Grotesk`** (Google Fonts, variable wght 400–700) — the body voice. A Swedish-rooted geometric humanist sans with very even color and softly closed apertures; reads as quietly competent without ever being corporate. Used at 17px, 1.7 line-height, deep-tide indigo on pale-foam cream. Not yet appearing in the corpus. - **`Outfit`** (Google Fonts, variable wght 100–900) — the display voice for spread numerals and the giant block-hash that sits half-bled off the top of Spread I. A pure geometric sans with a circular `o` and a very straight `l`. At display sizes (12vw at the largest), its weight contrast against `Familjen Grotesk` body text feels like the difference between a tidal headland and the pebbles below it. - **`DM Mono`** (Google Fonts) — used **sparingly**, only for the ledger-style hashes and the eight-character block IDs that appear as collage labels. One face of one weight, italic disabled. Mono at 95% in the corpus; here it's a *minor* voice, not a dominant one. - **`Cormorant Infant`** (Google Fonts) — used **once**, in a single oversized italic pull-quote on Spread V, set at 5.6vw. The infant cut has rounder bowls than the standard Cormorant, evoking handwritten chalk rather than carved marble. This single serif appearance is the design's one moment of tenderness. **Type rules:** the giant block-hash on Spread I (`0x00000000`) is set in `Outfit ExtraLight` at 18.4vw with -3% tracking; this is the largest character-set on the site by an order of magnitude. Body paragraphs never exceed 56 characters per line. Captions are in `Familjen Grotesk` at 12px with +2% tracking. Hashes are always lowercase, always with a soft `letter-spacing: 0.04em`, and *never* truncated with an ellipsis — they wrap, gently, across two lines like a tide-line stretching across two stones. **Palette — coastal-blend (a near-untouched named palette in the registry).** Eight colors, none of them saturated, all of them mineral or marine in origin. Hexes are deliberate, not sampled. - `#E9EEE6` — **pale-foam** (background paper, the warm under-tone of unbleached cotton paper held up to a north window) - `#D5DCE0` — **chart-grey** (the tone of a 1953 Admiralty tide chart left in a drawer) - `#A8C2C9` — **shoaling-blue** (the color of water 18 inches deep over white sand at noon) - `#6E91A3` — **deep-tide** (mid-water, the body-text color, the spine of the design) - `#243A4A` — **midnight-cove** (used only for type smaller than 14px and for the anchor of Spread VII) - `#E2B59E` — **tide-line coral** (the warm horizon color, used on Spread VI's breath-bar and almost nowhere else) - `#C7B89A` — **driftwood** (the color of bleached cedar; used for paper-cut shadow edges) - `#7B5B3A` — **kelp-bronze** (used only in pencil-glyphs and the conch-shell interior on Spread I) The palette refuses every typical blockchain visual cue: no mint-green, no electric purple, no Bitcoin orange, no crypto-gold. It is a **palette borrowed from a damp Wednesday at the coast**, and that borrowing is deliberate and load-bearing. ## Imagery and Motifs **Imagery — collage (5% in the corpus), in the precise vein of Joseph Cornell shadowboxes and 1970s academic primer illustration.** No photography. No 3D render. No AI-raster. No stock vector. Every image on the site is an SVG hand-cut paper-collage element with three permitted decorations: (1) a soft 6%-opacity grain overlay applied to the entire viewport via a single fixed-position `` filter (Perlin-noise turbulence at 0.65 baseFrequency), (2) a 1.5px irregular paper-edge stroke around each cut element, and (3) a subtle 4-pixel offset drop-shadow at 14% opacity to suggest the paper sits *above* the spread, not on it. **The collage cast (each appears once across the seven spreads):** - **The Conch Shell** — a hand-cut paper conch in driftwood and shoaling-blue, with a faint pencil-drawn Merkle root inside its spiral. Spread I. - **The Magnified Sand Grain** — an irregular polygon enlarged 80×, edged in kelp-bronze. Spread II. - **The Cloud-Lighthouse** — a paper lighthouse standing on a paper cumulus cloud, with the lighthouse beam rendered as a single 2px stroke arcing across the spread. Spread III. - **The Seven Witnesses** — a horizontal procession of paper figures (heron, fisherman, child, stone monk, seagull, buoy, Byzantine general). Spread IV. - **The Receded Tide-Pool** — a wet-sand collage with coral arrangements forming, faintly, the previous-block pattern. Spread V. - **The Breath-Bar** — a single horizontal coral-toned line, 1.4px thick, that slowly inhales (lengthens) and exhales (contracts) across 19 seconds. Spread VI. - **The Sinking Anchor** — a paper anchor that, on lingering cursor stillness > 4 seconds, descends below the viewport in a 3.2-second ease-out. Spread VII. **Decorative motifs — wave-forms (1% in the corpus, almost untouched).** Three SVG wave layers run beneath the collage on every spread: a near layer (large amplitude, slow), a mid layer (small amplitude, medium), and a far layer (almost imperceptible, fast). They are not Bezier waves; they are sums of three sine functions, plotted at runtime in JS once and rasterized into a static path so they never re-render. Their phase offsets are seeded per-day from a hash of the current date, so a visitor returning on a different day sees a quietly different sea. This is the only generative element on the site, and it is invisible enough that most visitors will not consciously notice — which is the point. **The shake-meditation glyph.** The **shake-error** pattern (4% in the corpus) is repurposed: instead of marking a form-validation failure, it marks a small bell-shaped glyph on Spread III that shakes with a gentle 12-frame keyframe (rotation oscillating between -2° and +2°, x-translation between -1px and +1px, total duration 0.7s) **only when the visitor's cursor has been still for > 6 seconds**. The shake is the bell ringing for the meditator who has held still long enough. It is a kindness, not an alarm. This is the design's most idiosyncratic gesture and worth preserving against any "fix" instinct. ## Prompts for Implementation **Storytelling spine (HTML structure):** The site is a **single long vertically-snapping document** of seven spreads. There is no traditional navigation. There is no menu. There is no router. The entire experience is read top-to-bottom in approximately four to six minutes and is designed to leave the visitor calmer than when they arrived. ```
``` **No React. No Vue. No Svelte. No bundler. No build.** One HTML file, one CSS file, one small ES module (~110 lines), and a `collage/` directory of seven inline-SVG paper-cut elements. The site loads in under 80KB on a cold cache including all SVGs and the four Google Fonts loaded via `font-display: swap`. This is the size of a modest JPEG and is honored intentionally. **CSS techniques to use:** - `scroll-snap-type: y mandatory` on `
` and `scroll-snap-align: start` on each `
`. - CSS custom properties for the eight palette colors (`--pale-foam`, `--shoaling-blue`, etc.). - `aspect-ratio` for every collage element so the magazine-spread holds its proportions across viewport widths. - `mix-blend-mode: multiply` (very sparingly — only on the grain overlay) to let the noise interact with the cream background rather than sitting on top of it. - A `prefers-reduced-motion` media query that *completely* disables scroll-parallax, the breath-bar pulse, the shake-meditation glyph, and the wave-form animation. The site must remain readable and emotionally legible without motion. - One single `` element with an `` containing `feTurbulence` + `feColorMatrix` + `feComposite`, used to produce all paper-edge irregularities and the grain overlay. **JS responsibilities (intentionally small):** 1. Generate the daily wave-form path from a date-seeded PRNG; cache it in `sessionStorage`. 2. Track cursor stillness via a 60ms-debounced `mousemove` listener; trigger the shake-meditation glyph after > 6s of stillness. 3. Pace the breath-bar's CSS variable via a single `requestAnimationFrame` loop running a 4-7-8 cycle. 4. On `IntersectionObserver` entry into Spread VII, start the anchor's slow descent. **No fetch. No analytics. No third-party. No cookies. No service worker. No web font that is not on Google Fonts.** The site is self-contained and respectful of attention. **Animation timings (carefully tuned for the zen-contemplative tone):** - All transitions: 1.6s minimum, with `cubic-bezier(0.32, 0.08, 0.24, 1)` (a long, slow tail like a wave receding). - Breath-bar: 19s total cycle (4s in, 7s hold, 8s out). - Shake-meditation: 0.7s, fired at most once per 12-second window. - Anchor descent: 3.2s, ease-out, only on stillness > 4s in Spread VII. **Bias against:** CTAs of any kind, pricing tables, stat-grids, hero with form, social-proof carousel, dashboard chrome, "trusted by" logo strips, ticker animations, neon-on-dark, glassmorphic cards, gradient backgrounds, hover-lift, magnetic buttons, cursor-follow rings, parallax on every layer, kinetic typography, and *every* visual cliché of the blockchain category. None of these may appear. **Bias toward:** unhurried scrolling, generous gutters, paper texture, hand-cut edges, marine palette, single oversized number per spread, the legible silence between paragraphs, tide as metaphor, the gentle shake of a quiet bell. ## Uniqueness Notes This design's deliberate departures from the 90 designs already in the corpus, and from the typical blockchain visual canon: 1. **Surreal aesthetic at 1% in the corpus, executed as Joseph-Cornell-meets-Hokusai paper collage.** The corpus is dominated by hand-drawn (94%) and glassmorphism (72%); only one in a hundred existing designs is meaningfully surreal. blockchain.day commits fully to a paper-shadowbox surrealism — cliffs floating over tide pools, lighthouses on clouds, conch shells with Merkle roots inside — which has no precedent in the registry. 2. **Magazine-spread layout at 6%, executed as a single unbroken seven-page folio rather than a hero+sections page.** Where most magazine-spread designs in the registry treat the metaphor as a hero block followed by ordinary stacked sections, blockchain.day commits to the spread metaphor across the entire scroll: every section is *one spread*, with verso, recto, gutter, and gutter-crossing wave motifs, all snapping vertically. The site reads top-to-bottom like a thick paper journal, not like a marketing page. 3. **Geometric-sans typography at 1%, with `Familjen Grotesk` + `Outfit` + `DM Mono` + `Cormorant Infant` — none of which appear in the corpus' top-frequency stacks.** The dominant typography in the registry is mono (95%) and humanist (37%); the named geometric pairing here is essentially virgin. The single-italic-Cormorant moment on Spread V is the design's only serif appearance and is held in reserve like a pull-quote in a quiet essay. 4. **Coastal-blend palette as a *named* palette — currently 0% explicit in the registry.** The design refuses every blockchain color cliché (mint, electric purple, orange, gold) and substitutes an eight-color marine mineral palette built from Wednesday-coast observations. No saturated color appears anywhere on the site. 5. **Wave-forms motif at 1% in the corpus, used not as decoration but as load-bearing metaphor.** Most "wave" decoration in the registry is ornamental SVG curve. Here the wave is the central visual conceit: a block is a tide-mark; finality is what the tide forgets to take back; reorgs are ebb-tides. The metaphor structures the entire site, not just the imagery. 6. **Zen-contemplative tone at 4% in the corpus, executed *for blockchain*.** Every other site in the blockchain category — anywhere on the public web — opts for an energetic, futuristic, or authoritative tone. Choosing zen-contemplative for this category is the design's most pointed and counter-positioned decision. 7. **The shake-error pattern (4%) repurposed as shake-meditation.** Where the registry's existing shake-error usage marks form-validation failures, blockchain.day uses the same micro-shake to gently ring a bell when the visitor has held still long enough — a kindness rather than an alarm. This inversion is unique in the registry. 8. **Collage imagery (5%) as the *only* imagery type — no photography, no 3D, no stock.** 97% of the corpus uses photography; this design uses none. Every visible non-typographic element is a hand-cut SVG paper element, which makes the visual identity entirely owned and entirely consistent. 9. **Negative-space discipline of 62% per spread.** The corpus' average information density is roughly 3× this. blockchain.day allows white space to be load-bearing — to mean *time passing* between blocks, between breaths, between paragraphs — which is rare anywhere on the web and almost unheard-of in this category. 10. **Daily seeded wave-forms.** A returning visitor on a different day sees a quietly different sea, generated from a date-seeded PRNG and cached in `sessionStorage`. This is the only generative element, deliberately invisible to most visitors. **Chosen seed (from assignment):** `aesthetic: surreal, layout: magazine-spread, typography: geometric-sans, palette: coastal-blend, patterns: shake-error, imagery: collage, motifs: wave-forms, tone: zen-contemplative`. Every one of these eight axes lands in the bottom quartile of corpus frequency (≤ 6%), giving the design the maximum possible distance from existing work in the registry along all axes simultaneously. **Avoided patterns from frequency analysis:** hand-drawn (94%), photography (97%), gradient (95%), parallax (93%), full-bleed (88%), centered (82%), stagger (73%), spring (73%), cursor-follow (70%), card-grid (70%), warm palette (94%), mono typography (95%). None of these appear in this design.