# Design Language for blockchain.day ## Aesthetics and Tone blockchain.day is a **Memphis-constructivist block festival** -- a riotous, primary-colored celebration where every "block" of the chain is rendered as a distinct geometric solid (cube, pyramid, arc-segment, cylinder) stamped in bold flat color and linked by a single kinetic polyline that threads the entire page. Imagine if Ettore Sottsass and El Lissitzky had been commissioned to redesign a proof-of-work festival poster for a sunny Milan afternoon in 1986. Squiggles, dots, checkerboards, and terrazzo speckles coexist with rigorous typographic grids; the mood is **jubilant, unapologetically playful, and loud in a well-composed way**. The "day" in the domain is literal: the site is scored to an idealized twelve-hour waking day. A warm-bright palette that shifts almost imperceptibly from morning cream to afternoon peach as the visitor scrolls, punctuated by confetti-bursts of cobalt and watermelon. The chain is never drawn as a ledger or a cryptographic diagram -- it is drawn as a **children's toy**: wooden blocks, push-along trains, threaded beads, paper-craft pyramids. The tone is optimistic-bright and whimsical-creative without tipping into saccharine; the geometry stays rigorous, the grids stay honest, and the math is the punchline rather than the burden. This design rejects the dominant blockchain visual cliches (dark navy dashboards, glowing hexagons, neon circuitry, fintech-sober gradients) in favor of **haptic joyousness** -- the feeling of a chunky wooden abacus, a Brio train set, a Bauhaus children's book printed on thick uncoated stock with visible ink registration marks. ## Layout Motifs and Structure The site is a single **horizontal-vertical hybrid "chain belt"** -- the page scrolls vertically at the macro level but each "block-section" internally reveals a **horizontal sub-scroll** where the block's contents (its "transactions," drawn as miniature Memphis icons) slide past on a conveyor belt. The central organizing element is **The Polyline**: one continuous hand-drawn SVG path in watermelon red (#E4572E) that enters at the top-left corner, weaves through every block on the page with playful loops and right-angle kinks, and exits at the bottom-right. The polyline draws itself progressively via stroke-dashoffset as the visitor scrolls -- stitching the site together in real time, literally forming the chain. **Primary Structure (twelve blocks, one per hour of the "day"):** - **Block 00 -- Genesis (The Dawn Block)**: Full-viewport introduction. A single enormous cube rendered in flat-color isometric projection sits off-center left, its three visible faces colored cream (#FAF3E3), mustard (#E8B62B), and cobalt (#2A4FD6). Stamped on its front face in oversized display type: "BLOCKCHAIN.DAY" with the period replaced by a solid red disc. Terrazzo speckles scatter the background. The polyline enters the viewport from the upper-left edge and hooks into the top of the cube. - **Blocks 01 through 10 -- The Working Hours**: Each block occupies a vertical "strip" roughly 90vh tall. The strip is divided asymmetrically: left 38% holds a giant numeral (the block's ordinal, rendered at clamp(8rem, 22vw, 20rem) in Archivo Black), right 62% is a horizontal sub-scroll conveyor containing 3--7 "transaction tiles." Each tile is a small Memphis composition (a squiggle + a triangle + a dotted circle + a bold noun). The polyline weaves into the strip from the previous block and exits into the next, performing a different geometric gesture per block: zig-zag, arc, step, loop, spiral. - **Block 11 -- The Sunset Block**: The final block inverts the palette -- cream background becomes peach (#F7B199), cobalt becomes midnight (#1B1F4B). The polyline terminates here in a large coiled spiral that spins slowly on scroll-pin. **Grid system:** A visible **12-column terrazzo grid** (thin 0.5px dotted lines in #C9B99C) sits beneath everything at 8% opacity, honoring Swiss discipline beneath the Memphis chaos. Every Memphis shape is precisely aligned to this grid -- the riot is rehearsed. **Spatial rhythm:** Blocks alternate between "dense" (many transaction tiles, tight packing) and "sparse" (one giant shape, vast white space) on an A-B-A-A-B-A pattern, creating a breathing cadence like a 12/8 musical bar. **Corner anchors:** Each block has a tiny hand-stamped "block hash" in the upper-right corner (rendered as a 6-character base58 string in mono) and a tiny clock-face in the upper-left showing the "time of day" for that block (01:00, 02:00, etc.), tying the chain-metaphor to the day-metaphor without explanation. ## Typography and Palette **Typography** (all Google Fonts): - **Display / Block Numerals:** "Archivo Black" -- a single-weight ultra-bold grotesque with extreme x-height and near-square aperture. Used at clamp(8rem, 22vw, 20rem) for the block ordinals. Its flat, almost industrial presence anchors each Memphis composition like a rubber stamp pressed into thick paper. Letter-spacing: -0.04em. Color rotates per block through the palette so the numerals themselves participate in the chain. - **Display Secondary / Manifesto Pulls:** "Fraunces" at weight 900 with optical size 144 and SOFT axis maxed -- creating a warm, slightly-chunky high-contrast display serif with rounded terminals. Used for pull quotes, the genesis block title, and the sunset block benediction. clamp(2.5rem, 6vw, 5rem), italic variant for emphasis. The SOFT axis gives the serifs a hand-carved wooden-block quality. - **Body / Transaction Tile Labels:** "DM Sans" at weight 500, 1.05rem, line-height 1.55. Geometric-humanist hybrid, rounded but disciplined; reads like a gently-serifed comic-book caption without being twee. Letter-spacing: 0. - **Monospace / Block Hashes and Timestamps:** "JetBrains Mono" at weight 400, 0.72rem, uppercase with letter-spacing 0.08em. Used only in corner metadata, timestamps, and the occasional "nonce: 4a7c" stamp to remind the visitor there is actual chain-machinery behind the party. - **Accent / Handwritten Annotations:** "Caveat" at weight 600, 1.15rem, rotated between -4deg and +3deg. Scattered throughout as felt-tip annotations pointing at interesting parts of Memphis compositions with an arrow drawn in SVG -- "this is the nonce!" "confetti confirmation!" "merkle root lives here" -- as if a friendly teacher were narrating the chain to a child. **Palette (the Twelve-Hour Wheel):** The palette is organized as a **twelve-step color wheel** where each block "owns" a primary hue, but all twelve colors are visible simultaneously in every section at varying frequencies. This creates chromatic coherence despite apparent chaos. - **Morning Cream** `#FAF3E3` -- base paper. The canvas of the entire site, slightly warm so it feels like uncoated letterpress stock, not cold white. - **Cobalt Block** `#2A4FD6` -- the primary "chain" color, used for the polyline's shadow and for structural lines. Confident without being corporate. - **Watermelon Red** `#E4572E` -- the polyline itself. Warm, slightly orange-leaning, reads as ink not blood. - **Mustard Ochre** `#E8B62B` -- the sun-color. Fills the largest cube faces, dominates the morning blocks. - **Aloe Green** `#6EB89E` -- a dusty mint-sage, used for triangles and checkerboard fills in the midday blocks. - **Terracotta Brick** `#C8583A` -- a darker, earthier red for the Fraunces display serifs. - **Plum Stamp** `#6C3F7C` -- concentrated purple used sparingly for squiggle accents. - **Peach Dusk** `#F7B199` -- dominates the sunset block; soft enough to read as "evening light through a window." - **Midnight Ink** `#1B1F4B` -- used for the body text and the final block's background. A bluer-than-navy near-black that keeps the page from going grey. - **Terrazzo Ash** `#C9B99C` -- the grid lines and speckle flecks. Disappears and reappears as the eye zooms. - **Sky Chalk** `#B9D5E8` -- a pale, slightly-greyed blue used for circle fills and dotted pattern backgrounds. - **Confetti Pink** `#F2A7B9` -- reserved for the "confirmation burst" micro-animation when a visitor hovers a transaction tile. **Color usage rules:** Each block surfaces one color at roughly 40% area-dominance, with four to six other colors appearing at 5-15%. No block uses fewer than five palette colors. The polyline is ALWAYS watermelon red -- the one fixed visual law. ## Imagery and Motifs **Core visual motif: The Hand-Cut Paper Block.** Every "block" in the chain is rendered as an isometric or axonometric geometric solid with **visible paper-craft seams**. These are drawn as SVG with one-pixel stroke in midnight ink, filled with a flat palette color, and decorated with a Memphis pattern on one face: - **The Terrazzo Face:** small irregular polygons in three palette colors scattered on a cream ground, like Venetian terrazzo flooring. - **The Squiggle Face:** a repeating hand-drawn watermelon-red squiggle on cobalt ground, like Keith Haring brushstrokes on gift-wrap paper. - **The Confetti Face:** dots of six different sizes and five palette colors scattered on chalk-sky ground. - **The Checkerboard Face:** 8x8 checkerboard in mustard and cream, slightly off-square to feel hand-drawn. - **The Dotted-Grid Face:** precise dotted grid in terrazzo-ash on cream ground, the most "Swiss" of the faces. - **The Zig-Zag Face:** bold lightning-bolt zigzag in terracotta on peach ground. **Secondary motifs:** - **The Polyline:** the single unbroken watermelon-red SVG path threading every block. 4px stroke-width, round line-joins, round line-caps. It has six gesture vocabularies: straight orthogonal, 45-degree diagonal, quarter-arc, half-loop, full-loop, and tight-zigzag. Each transition between blocks uses exactly one gesture. - **Transaction Tiles as Memphis Compositions:** each tile (representing a "transaction" in the block) is a 240x180 composition containing exactly: one solid-colored primary shape (circle/triangle/square/arc), one thin line element (diagonal/curve/step), one pattern fill (terrazzo/squiggle/dots), and one word-label in DM Sans. The compositions are algorithmically generated from a palette of ~30 curated primitives so no two are identical but all feel cousin-related. - **The Clock-Faces:** each block carries a tiny 48px analog clock showing its "time of day." The clock is drawn as a single cream circle with a cobalt tick-mark at the twelve and a terracotta hand pointing to the block's hour. It ticks one notch forward on scroll, giving a quiet sense of chronology. - **The Merkle Confetti:** on hover of any transaction tile, a burst of 12-20 tiny confetti shapes (triangles, circles, tiny squiggles) explodes from the tile's center and settles physics-ly onto the grid below. The confetti is persistent -- it accumulates on the page, so a visitor who has explored much of the site sees a floor of accumulated paper confetti at the bottom of each block. This IS the design's data-viz: engagement becomes visible confetti sediment. - **The Genesis Stamp:** in the upper-left of the genesis block, a 72px circular rubber-stamp graphic reading "GENESIS // BLOCK 0 // 07:00" in JetBrains Mono, rendered in terracotta with deliberate ink-smudging (SVG filter with feTurbulence feDisplacementMap at low amplitude for a rough-pressed texture). - **The Paper Torn Edges:** the cream background has faint torn-paper deckles along the horizontal block-dividers, drawn as a wavy SVG path with displacement noise. These are barely visible until the visitor zooms in. **What is explicitly absent:** - No photographs of any kind. - No glowing chain-link icons, no hexagons, no crypto-coins, no neon circuits. - No dashboards, no candlestick charts, no gradients-as-accent (gradients exist only within the paper-texture background noise). - No dark-mode variant. The day is bright by definition. ## Prompts for Implementation **Full-screen narrative experience.** The site is a single-page vertical scroll telling the story of one day as twelve consecutive blocks. There is no navigation menu, no pricing block, no stat-grid, no call-to-action buttons, no contact form, no pricing tiers. The visitor arrives, reads the genesis, scrolls, and experiences the chain drawing itself around them. If interaction is desired, it is limited to hovering transaction tiles to trigger merkle-confetti bursts. **The Polyline must be the hero.** Implement the polyline as a single SVG `` element with a computed `d` attribute generated from the bounding boxes of every block on the page, after layout stabilization. Use `stroke-dasharray` set to the total path length, and animate `stroke-dashoffset` from full length to zero driven by vertical scroll progress via `requestAnimationFrame` (NOT CSS scroll-timeline, for broader support). The path must visibly overshoot each block by 12-24px before kinking to the next -- this tiny overshoot gives it a hand-drawn quality, as if someone drew too far before correcting. On mobile, simplify the polyline to fewer kinks but keep the continuous-draw behavior. **Horizontal sub-scroll inside blocks.** Each block's transaction tiles live inside a container with `overflow-x: auto` and `scroll-snap-type: x mandatory`. Use CSS `scroll-snap-align: center` on each tile. The clock-face in the upper-left of the block rotates as the horizontal scroll progresses -- scrolling right is scrolling "forward through the hour." This gives the horizontal scroll a temporal meaning. **Memphis composition generation.** Implement the transaction tiles as React/vanilla components that accept a seed (derived from a hash of their transaction metadata, purely cosmetic). From the seed, deterministically select: primary shape, primary color, line element, line color, pattern-fill, and pattern color. Constrain choices so mustard and peach never adjoin without a thin midnight-ink stroke between them, and so watermelon-red is used sparingly in tile interiors (it belongs to the polyline). **Merkle confetti.** When a tile is hovered, spawn 14-22 small SVG shapes at the cursor position with randomized initial velocity (angle 0-360, speed 120-260 px/s) and gravity (280 px/s^2). Shapes settle when they leave the tile's bounding box or after 2 seconds. Settled confetti is appended to a per-block `` that persists across the session. No confetti floor ever exceeds 200 shapes per block -- oldest confetti fades out when the limit is hit. **Typography kinetics.** The block ordinals ("00" through "11") are sized such that each fills about 38% of the block's width. On scroll-reveal, each digit counts up from "00" to its final value via `counter-animate` over 800ms with a spring easing. The final digit "sticks" with a tiny 6px bounce, like a physical number-wheel. **Palette drift across the day.** Interpolate the background cream color subtly as scroll progresses: from `#FAF3E3` at Block 00 (morning) through `#FAE5D0` at Block 06 (midday) to `#F7B199` at Block 11 (sunset). The interpolation is slow and unshowy -- the visitor should feel but not see it. Use a single CSS custom property `--paper-ground` updated on scroll. **Audio is optional but encouraged.** If implemented, a single pair of tuned wooden-block percussion sounds (low C4 / high G5) triggers on each new block entering the viewport, each confetti burst, and each horizontal snap. All audio muted by default with a tiny discoverable toggle in the genesis stamp. Never music, never ambient drones -- just occasional wooden-block clicks, as if a child were playing alongside you. **Motion reduction.** Respect `prefers-reduced-motion: reduce` by replacing the polyline draw with instant full-path reveal, disabling confetti (show static pre-arranged confetti instead), and fixing the clock-faces at their final positions. The Memphis composition remains -- motion is decoration, geometry is substance. **Delivery vehicle.** Vanilla HTML, CSS custom properties, and a small amount of vanilla JS. No framework required, though a minimal React render for the transaction tiles is acceptable. All SVG assets inline. Total page weight target under 180KB including all fonts. **What the site is NOT doing.** It is not selling anything. It is not explaining blockchain to skeptics. It is not a landing page. It is a **visual essay** -- a single-day poem composed of twelve color-blocks -- and blockchain.day is the signature in the corner. ## Uniqueness Notes **Differentiators from other designs:** 1. **Memphis-constructivist blockchain framing.** No other design in the portfolio treats blockchain (or any technical subject) through the Memphis Group / Ettore Sottsass lens. The category is overwhelmingly corporate (90%), with photography (94%) and card-grids (94%); this design uses zero photographs, zero cards, zero corporate gradients. The aesthetic vocabulary here -- terrazzo, squiggles, checkerboards, hand-drawn paper-craft solids -- is completely absent from every other DESIGN.md in the registry. 2. **The single continuous polyline as the site's spine.** While other designs use path-draw-svg at 30% frequency, no other design treats one uninterrupted polyline as the literal structural connector between ALL sections, drawn progressively on scroll and binding twelve discrete blocks into a single line. This is a radical architectural commitment, not an ornament. 3. **Twelve-block "day" structure mapped to hours.** The site's twelve-section structure directly mirrors both a day's twelve working hours and a chain's discrete blocks -- a conceptual conceit no other design in the portfolio employs. Each block carries a miniature analog clock-face and a literal hour-of-day (07:00 through 18:00), creating a dual-layer metaphor (time + chain) that makes the abstract technology concrete and human-scaled. 4. **Accumulating confetti as engagement-as-sediment.** The merkle-confetti mechanic, where hover-triggered shapes physically accumulate at the bottom of each block and persist across the session, turns the visitor's exploration into a visible graphical record. This is not a pattern used anywhere else in the portfolio -- data-viz at 10% frequency consists mostly of charts; here, data-viz IS the accumulated play of the user. 5. **Primary-colored, bright, uncoated-stock joy applied to blockchain.** The dominant visual register for blockchain-adjacent content is dark, neon, dashboard-like, or fintech-sober. This design refuses all of those and instead treats the chain as a children's wooden toy printed on warm cream stock. The joyful, unapologetically playful tone (optimistic-bright + whimsical-creative at only 6% + 12% in the portfolio combined) is a strong differentiator. 6. **Horizontal sub-scroll nested inside vertical macro-scroll.** While horizontal-scroll appears at 24% and immersive-scroll at 24%, no other design nests horizontal scroll inside vertical scroll in a way where the horizontal scroll encodes temporal meaning (rotating the block's clock-face). The dual-axis scroll is choreographed rather than additive. **Chosen seed / style:** `memphis bold shapes portfolio` (from seeds.json). Memphis Group aesthetic -- bold primary shapes, terrazzo patterns, squiggles, Sottsass color-play -- applied to a subject matter (blockchain) it has never been applied to in this portfolio. **Avoided patterns (from frequency analysis):** - **Avoided:** corporate aesthetic (90% saturation), photography imagery (94%), card-grid layout (94%), centered layout (88%), warm palette as sole register (96%), gradient palette (98%), scroll-triggered animation as the ONLY kinetic vocabulary (94%), mono typography as default (90% -- here mono is used only for tiny corner metadata), mysterious-moody tone (42%). - **Preferred / underused:** memphis/bauhaus aesthetic (8% combined), generative-art imagery (12%), broken-grid + horizontal-scroll combination (<10%), optimistic-bright + whimsical-creative tone (<20% combined), path-draw-svg as structural spine (30% as ornament; here as skeleton), counter-animate typography (16%).