# Design Language for blockchain.day ## Aesthetics and Tone **blockchain.day is a 24-hour orbital observatory broadcasting from a low-orbit station that watches one single distributed ledger as if it were a sun.** The domain is read with cheerful literalness: a *day* in the life of a *blockchain*, but the day is not 86,400 seconds long — it is one block, then the next block, then the next, ticking forward in soft propulsive bursts of two-tone telemetry. Every block that passes is a sunrise, every fork is an eclipse, every reorg is a meteor shower. The site is the bridge of the observatory: a wraparound HUD of porthole readouts where a friendly mission specialist with a slightly silly voice narrates the cosmos. **The mood is energetic but not anxious.** This is not the panicked sci-fi of a malfunctioning core reactor; it is the sci-fi of *Star Trek: The Next Generation* opening credits — confident, optimistic, a touch goofy, deeply in love with the diegetic chrome of futurism. The HUD never blares red. It pulses *coral pink* and *electric mint*, the duotone of a friendly ship's computer that calls you by your first name. The wordmark `blockchain.day` is set in an enormous chubby rounded display face with the comma of a smile baked into every terminal. The page reads like a children's encyclopedia of cryptography illustrated by a Nickelodeon art director who once worked on Mass Effect. **Inspirations, named explicitly:** - The bridge HUD of the *USS Cerritos* (Lower Decks) — the soft pinks, the playful curves, the refusal to be grimdark. - *2001: A Space Odyssey* monitor typography — chunky, tracked-out, square-bracketed labels — but rendered in pastel duotone instead of monochrome amber. - The cover plates of Frutiger Aero **after** a sci-fi convention party — glossy bubble surfaces, but every reflection is made of telemetry. - Magic-Eye duotone posters from 1994 — two inks, no third, the eye doing the depth work. - The rounded info-graphics of *Wired Magazine c. 1998* (Erik Spiekermann era) — playful, large, didactic. The tone is **energetic** in the registry sense: forward-leaning, spring-stiffness motion, a HUD that *breathes* at 4 BPM, never sleeps, narrates cheerfully through a mascot-voice that is happy to explain a Merkle root using an analogy involving sandwiches. ## Layout Motifs and Structure **The composition is a strict z-pattern at every breakpoint.** Z-pattern (4% in registry) is treated here not as a vague "eye-flow" suggestion but as a **literal scan-path of an orbital sensor sweep**: top-left → top-right → diagonal → bottom-left → bottom-right, with the diagonal rendered as a visible cyan tracer beam that animates along the page's primary readers' arc. The HUD draws its own gaze. **Macro skeleton (top to bottom, but read in Z):** 1. **Z₁ — Top-Left Quadrant: STATION HEADER.** The wordmark `blockchain.day` sits in the top-left corner inset from the gutter by exactly 32px, set in `Fredoka` weight 700 at clamp(3rem, 7vw, 7rem), with a duotone-photo of an orbital sunrise filling the negative space behind it (the photo treated with a Mint→Coral two-tone gradient map, full saturation). To its right: a compact six-row HUD readout — `BLOCK / EPOCH / DIFFICULTY / GAS / NODES / UPTIME` — each row a thin pill with a chubby rounded number, ticking softly. 2. **Z-Tracer Beam (diagonal): SENSOR SWEEP.** A 2px-wide cyan beam draws itself diagonally across the entire viewport from the top-right corner of Z₁ toward the bottom-left of Z₃, taking 1.4 seconds with a spring easing (stiffness 180, damping 22). This beam is **the only diagonal element on the page** and it is doing structural work: it carries the eye, it carries data labels (`+12 BLOCKS`, `−3 ORPHANS`, `1.2s/BLOCK`), and on the second hero scroll it flickers in zoom-focus to reveal a small inline graph of recent block latency. 3. **Z₂ — Top-Right Quadrant: PORTHOLE 01.** A circular porthole (520px diameter on desktop, fluid below) showing a duotone-treated photograph of Earth from low orbit. The porthole has a chunky rounded bezel — 24px stroke, color `Coral`, with eight rivet-circles spaced evenly around its circumference. Inside the bezel: a HUD overlay with a single block hash rendered in `Fredoka` 600 with letter-spacing 0.04em, scrolling slowly horizontally inside the porthole like a stock ticker. 4. **Z₃ — Bottom-Left Quadrant: PORTHOLE 02.** A second circular porthole, identical bezel system, but its photograph is a duotone-treated close-up of a magnetic-tape reel from a 1972 mainframe (the historical ancestor of distributed storage). Inside its bezel: a live mempool visualization rendered as soft floating pill-shapes that drift toward the porthole's center and disappear when "mined." 5. **Z₄ — Bottom-Right Quadrant: COMMS PANEL.** A wide rounded-corner rectangle (32px corner radius, never sharp), serving as the day's narrative log. Each entry is a chubby pill of text in the energetic mascot-voice: *"06:14 UTC — Block 19,488,023 just clocked in. It's a polite one — only 89 transactions, mostly people sending each other birthday money."* Five entries fit at any time; older entries scroll up and out via stagger. **The Z repeats.** As the visitor scrolls, the entire scaffolding repeats — Z₁ becomes the next section's STATION HEADER, Z₂ becomes the next PORTHOLE, and so on. The page is a stack of Zs, each one a "shift" in the observatory's day. There are exactly **eight Zs** stacked vertically, one for each three-hour shift in a 24-hour station cycle: 00:00, 03:00, 06:00, 09:00, 12:00, 15:00, 18:00, 21:00. The visitor scrolls through one full diurnal rotation. **Negative space.** Between Zs, a 96px-tall band of pure `Deep-Space-Indigo` — empty, except for a single tracker dot that travels along a thin guide-rail. The dot is the *station*, in motion through the day. **Anti-corpus moves.** No centered hero, no full-bleed photo wallpaper, no parallax sky background, no dashboard grid. The corpus has centered at 93%, full-bleed at 89%, parallax at 91% — blockchain.day refuses all three. The Z is the structure; the porthole is the framing; the tracer beam is the motion. ## Typography and Palette **Typography — playful-rounded, all Google Fonts, three families only.** - **Display / Wordmark / HUD Numerals:** [`Fredoka`](https://fonts.google.com/specimen/Fredoka), variable axis, weights 400–700. Fredoka is a chubby geometric sans with a generous rounded terminal — every letterform looks like a pillow. It is used for the wordmark `blockchain.day` (weight 700, optical size pulled wide), for all numeric HUD readouts (weight 600, tabular numerals enabled), and for porthole bezel labels (weight 500, all-caps, letter-spacing 0.08em). The chubby roundness *is the joke*: blockchain visualization is usually grim and angular, here it is soft and smiling. - **Body / Narrative Log:** [`Quicksand`](https://fonts.google.com/specimen/Quicksand), weights 400 and 500. Quicksand is a softer, lower-x-height rounded sans — it carries the mascot-voice narration in the COMMS PANEL pills. Set at 18px / line-height 1.55, never below. - **Engineering Annotations / Hash Strings:** [`Sometype Mono`](https://fonts.google.com/specimen/Sometype+Mono), weight 400. The corpus uses mono at 95%, almost universally. blockchain.day uses mono **only** for the literal cryptographic strings (block hashes, addresses, Merkle proofs) — never for body, never for headings, never for navigation. The mono is reserved as a diegetic typeface: it is what the *machine* prints, while Fredoka and Quicksand are what the *narrator* says. This is a strict separation. **Palette — duotone, locked to two inks plus three structural neutrals. No gradients between the duotone pair are permitted — only hard color stops or photographic gradient-maps.** - **Coral Pulse `#FF6E8A`** — the warm ink. Used for: the bezel rivets, the wordmark fill, the active state of all HUD pulses, the SHIFT timestamps, the comma-smile in the wordmark. - **Electric Mint `#5EEAD4`** — the cool ink. Used for: the diagonal tracer beam, all hash strings, the tracker dot, the mempool pills, the secondary HUD readouts, the `BLOCK` label. - **Deep-Space Indigo `#0E0B26`** — the void. The page background, the inter-shift bands, the porthole interior shadow. Almost-black, leaning purple. - **Console Bone `#F2EBE0`** — the chassis. Used for the bridge surface — the actual rounded chassis behind the HUD, slightly off-white, slightly warm. The page is *not* dark mode and *not* pure light mode: it is a layered duotone where Bone chassis floats above Indigo void. - **Status Cyan `#3FA9F5`** — *strictly* an accent for in-band data labels along the tracer beam (e.g. `+12 BLOCKS`). Never used for type, never used for fills larger than 12px. **Photographic treatment.** Every duotone-photo on the page is gradient-mapped from `Coral Pulse` (highlights) to `Electric Mint` (shadows), with midtones desaturated to 0% and remapped 50/50. This is the hard rule. It produces the Magic-Eye-poster sensation: an old Earth-from-orbit photograph becomes a Mint–Coral plate that reads as both retro and futuristic. **No warm palette.** The corpus is at 97% warm. blockchain.day refuses warm. The Coral here is a cool-coral — pink with a blue undertone — paired with frigid mint and indigo. The whole page reads cool with a single hot accent. ## Imagery and Motifs **Imagery is duotone-photo (0% in corpus, completely unused).** The page contains exactly six photographs, all licensed-historical or public-domain, all gradient-mapped to the duotone: 1. **Earth from low orbit, 1972.** Apollo-era. Lives in the first PORTHOLE 01 across all eight shifts, but rotates orientation by 45° per shift, completing one full rotation by 21:00. 2. **Magnetic tape reel, IBM 7330, 1962.** The ancestor of distributed storage. Lives in PORTHOLE 02 of shift 00:00. 3. **Punch-card sorting machine, 1955.** The ancestor of consensus. PORTHOLE 02 at 06:00. 4. **First fiber-optic cable cross-section, 1970.** The ancestor of the network. PORTHOLE 02 at 12:00. 5. **Hex-grid honeycomb (apis mellifera), macro.** The ancestor of decentralization. PORTHOLE 02 at 18:00. 6. **A single hand turning a key in a brass lock, 1894.** The ancestor of the private key. PORTHOLE 02 at 03:00, 09:00, 15:00, 21:00. **Motif: sci-fi-hud (6% in corpus).** The HUD vocabulary is consistent and deeply chubby: - **Pill-shaped readouts.** Every HUD readout is a 32px-tall pill with 16px corner radius (i.e. fully rounded). No rectangles. No sharp corners anywhere on the page. - **Rivet-bezel portholes.** Eight evenly-spaced 6px rivets (filled `Coral Pulse` circles) around every porthole bezel. Rivets pulse in stagger when a new block arrives. - **Bracket-tags `[ DATA ]`.** All inline labels are wrapped in chubby rounded square-brackets, e.g. `[ BLOCK 19,488,023 ]`. The brackets are drawn as SVG, slightly thicker on top and bottom to feel like a physical clamp. - **Cyan tracer beam.** The single diagonal in the entire layout, animating once per Z, carrying telemetry tags in `Status Cyan`. - **Tracker dot.** The station-as-dot traveling along the inter-shift guide-rail. It has a 6px solid `Coral` core and an 18px `Mint` halo at 30% opacity. - **No circuit lines, no grid lines, no Matrix rain.** The corpus uses circuit (10%) and grid-lines (6%) — blockchain.day refuses both. There are no etched circuit traces, no "code rain," no Tron grids. The HUD is *soft*. It is sci-fi as drawn by Pixar, not Wachowski. **The mascot.** A small recurring vector character: **`.day`** — a chubby rounded dot wearing a pair of porthole-glasses. They appear in the COMMS PANEL pills as a small avatar (32px) next to each narration entry, and in the corner of every porthole bezel as a 12px sticker. They are drawn in pure `Coral Pulse` line on `Console Bone`, with eyes that are two perfect `Electric Mint` circles. They wave on first viewport entry. They are the friendly narrator. **Decorative motifs (used sparingly, no more than three per Z):** - **Concentric pulse rings.** When a new block lands, three concentric rings expand from the porthole's center over 800ms, ease-out-quint, fading from `Coral` to transparent. - **Stipple constellations.** Background of inter-shift bands has a faint stipple of 1px Mint dots at 8% opacity, arranged in actual constellation patterns (Lyra, Cygnus, Orion) — a quiet nod to celestial navigation. ## Prompts for Implementation **The story to tell.** A visitor opens the bridge of an orbital station whose entire mission is to observe one distributed ledger and report on it cheerfully for one full day. The visitor scrolls through eight three-hour shifts. In each shift, two portholes show what the station is currently watching (an artifact from the lineage of cryptographic infrastructure, plus Earth slowly rotating below). A diagonal sensor beam sweeps through each shift, drawing the visitor's eye in a Z. A friendly mascot, `.day`, narrates each shift in a soft, slightly silly voice. The page never asks the visitor to buy anything, sign up for anything, or read a pricing table. It does not even explain what blockchain *is*. It simply *witnesses*. By scroll's end, the visitor has lived through one full diurnal rotation of an imaginary observatory, has read eight tiny vignettes about block-arrival, and knows the names of six historical objects in the family tree of distributed ledgers. **Layout grid.** - Desktop (≥1280px): 12-column grid, 24px gutters, max-width 1440px, centered horizontally but **never** vertically. The Z anchors are explicit absolute positions: Z₁ at `(col 1–6, row 1–3)`, Z₂ at `(col 8–12, row 1–4)`, Z₃ at `(col 1–5, row 5–8)`, Z₄ at `(col 7–12, row 6–8)`. The diagonal tracer is an SVG `` from Z₂'s bottom-left to Z₃'s top-right, drawn fresh per shift. - Tablet (768–1279): 8-column grid, Z reflows to keep the diagonal scan visible — Z₂ shrinks from 520px to 360px. - Mobile (≤767): the Z linearizes to a stack but the *tracer beam survives* as a thin Mint vertical thread running down the left margin connecting each shift; the beam still pulses on shift-arrival. **Motion — energetic, spring-stiff, never floaty.** - Default easing: spring with stiffness 180, damping 22, mass 1. This produces a slightly overshooting, optimistic settling — the HUD always feels like it just *snapped* into place. - **Zoom-focus is the page's signature pattern.** Zoom-focus appears in 0% of registry designs. blockchain.day commits to it: every porthole, on viewport entry, performs a zoom-focus from `scale(0.7) blur(8px)` to `scale(1) blur(0)` over 600ms, with the bezel rivets staggering in afterward over a further 240ms. On hover, each porthole *lens-corrects* — content scales to 1.05 with a subtle spherical CSS mask (radial-gradient feathered alpha) that simulates a fisheye lens snapping into focus. - **Block arrival.** When a new (simulated) block lands — every 12 seconds on the page's local clock — the active shift's porthole pulses three concentric rings outward, the HUD numerals tick over with a counter-animate effect (`Fredoka` numerals rolling like a slot reel), and the tracer beam's data label flashes from `Status Cyan` to `Coral Pulse` for 200ms then back. - **Scroll triggers.** Each shift's tracer beam draws itself only when the shift enters the viewport at 30% threshold. The drawing is a `path-draw-svg` animation from 0 to 1 over 1400ms, eased on the spring curve. The beam carries its data labels along its stroke as it draws. - **The mascot waves.** `.day`'s small SVG figure performs a 14° rotation back-and-forth (3 cycles, 300ms total) on first entry of each shift, then settles. On porthole hover, the mascot's eyes track the cursor (the two Mint circles translate up to 1.5px toward the cursor). - **No parallax.** None. The corpus is at 91% parallax; blockchain.day flatly refuses. Every layer scrolls at 1:1 with the document. The motion budget goes entirely to spring-snaps, zoom-focus, and tracer-draws. **HUD micro-behaviors.** - The six STATION HEADER readouts (`BLOCK`, `EPOCH`, etc.) tick on a 12-second cycle and animate the changing digit with a vertical translate (the old digit slides up out, the new digit slides up in) over 280ms, easing on spring. - Bezel rivets pulse in clockwise stagger (45° per rivet, 80ms apart) on each block arrival. - Mempool pills inside PORTHOLE 02 drift with a 2D Perlin-noise jitter at very low amplitude (1.5px max) so the page always feels gently alive. **Sound (optional, gated behind explicit user opt-in).** A single soft synth-ping per block arrival — middle C, 80ms decay, mixed at −24dB. Default OFF. A small Coral toggle pill in the top-right of Z₁, labeled `[ AUDIO OFF ]`, toggles `[ AUDIO ON ]`. If on, every block arrival triggers the ping. **Implementation notes.** - All photographs are pre-processed at build time into duotone via a CSS `filter: grayscale(1) contrast(1.1) brightness(0.95)` followed by an SVG `` mapping luminance to the Coral→Mint gradient. Cache aggressively. - The diagonal tracer is a single `` per shift, animated via `pathLength` / `stroke-dashoffset`. Do not use canvas — SVG holds crispness at every zoom level. - The mascot `.day` is one inline SVG, ~80 lines, with three bones (head wobble, left-eye, right-eye) animated via CSS custom-property keyframes. - **Strictly no CTA.** No "Sign Up," no "Get Started," no "Try Free," no email-capture modal, no pricing tier comparison, no testimonial carousel. The page sells nothing. It only narrates a day in the life of a blockchain. **Forbidden moves (anti-corpus).** - No warm palette. No gradients between the duotone pair. No vintage motif (corpus 89% — refused). No mono typography for body. No centered hero stack. No full-bleed background photograph. No parallax. No circuit traces. No Matrix rain. No hexagonal honeycomb layout (it appears in motif imagery only, inside a porthole, as a *photograph*, not as the layout). No cards in a 3-column grid. No pricing block. No stat-grid (e.g. "3M users / 99.9% uptime / 24/7 support" — explicitly forbidden). No testimonials. ## Uniqueness Notes **Differentiators from every other design in the registry:** 1. **Zoom-focus as a signature pattern at 0% prior usage.** The frequency report shows zoom-focus is unused across 49 prior designs. blockchain.day commits to it as the default pattern for porthole entry, hover, and block-arrival emphasis. It is not a one-off accent — it is the page's primary kinetic vocabulary, used dozens of times per visit. No other registry entry features zoom-focus as the central motion pattern. 2. **Z-pattern made literal as an animated diagonal sensor sweep.** Z-pattern appears in 4% of designs (two prior entries), where it is mentioned as an abstract eye-flow concept. blockchain.day renders the Z as a *visible 2px cyan tracer beam* that animates diagonally across each shift, carrying live data labels. The Z is not implied — it is drawn, every time, eight times down the page. 3. **Duotone-photo at 0% prior usage, paired with strict two-ink discipline.** Duotone-photo imagery appears in 0% of designs. blockchain.day pre-processes every photograph through a Coral→Mint gradient map with no exceptions, no escapes, no full-color photography. The corpus is at 93% photography (almost universally full-color); this site uses photography but routes 100% of it through duotone treatment. 4. **Sci-fi as the *Lower Decks* register, not the Wachowski register.** Sci-fi appears in 2% of designs (one prior entry, which leans cyberpunk/grim). blockchain.day is the optimistic-Pixar register of sci-fi — chubby Fredoka type, soft Coral pink, friendly mascot, no Matrix rain, no Tron grids, no anxious cyberpunk. It is the only registry entry that treats futurism as *cheerful*. 5. **Cool-coral palette refusing the corpus's 97% warm dominance.** The corpus is overwhelmingly warm. blockchain.day's Coral Pulse is a deliberately *cool* coral with a blue undertone, paired with mint and indigo. The page reads cool throughout, with Coral as a single non-warm hot accent. No warm tones anywhere. 6. **Strict separation of mono and prose.** The corpus uses mono at 95% (often as body type). blockchain.day uses mono only for literal cryptographic strings, never for prose. Sometype Mono is treated as a diegetic, machine-only voice; Fredoka and Quicksand carry all human narration. 7. **Mascot-driven narration.** No other registry entry has a recurring vector mascot character (`.day`) who waves on entry, tracks the cursor, and signs every COMMS log entry. The mascot is the page's emotional through-line. 8. **Eight discrete shifts as the page's spine.** Most registry entries scroll as a continuous narrative. blockchain.day is structured as exactly eight self-contained three-hour shifts, each a complete Z, separated by inter-shift bands carrying the tracker dot. The page is a clock. 9. **No CTA, no pricing, no stats grid, no signup, no testimonial.** The page is pure narration. The visitor never receives a pitch. 10. **Chosen seed (per assignment):** `aesthetic: sci-fi, layout: z-pattern, typography: playful-rounded, palette: duotone, patterns: zoom-focus, imagery: duotone-photo, motifs: sci-fi-hud, tone: energetic`. Every element of this seed is honored literally and explicitly: the aesthetic is sci-fi (chubby, optimistic), the layout is z-pattern (rendered as a visible diagonal tracer), typography is playful-rounded (Fredoka chubby), palette is duotone (Coral + Mint, hard rule), patterns is zoom-focus (porthole entries and hover), imagery is duotone-photo (every photograph mapped), motifs is sci-fi-hud (pill readouts, rivet bezels, tracer beam), tone is energetic (spring-stiff motion, 12-second block tick, mascot-driven cheer). **Avoided patterns from frequency analysis:** - Refused warm palette (97% of corpus). - Refused gradient (91% of corpus, except as photographic gradient-map within duotone). - Refused parallax (91% of corpus). - Refused centered layout as hero structure (93% of corpus). - Refused full-bleed background imagery (89% of corpus). - Refused vintage motif (89% of corpus). - Refused mono typography for body (95% of corpus mono — restricted here to hash-strings only). - Refused photography as full-color (93% of corpus — all photographs duotoned). - Refused circuit lines and grid-lines (used in registry's tech motifs — replaced with stipple constellations).